1. 首页首页
  2. 科技前沿科技前沿

有html基础但是想学java

科技前沿 • • 阅读 61

有html基础但是想学java目录 1 前置知识 2 HTML 文档声明 3 HTML 标签属性 4 HTML 基本结构 4 1 4 2 网页的基本结构 4 3 HTML 之间的关系 5 HTML 字符编码 6 HTMl 设置语言 7 开发者文档 8 HTML 排版标签 9 HTML 语义化标签 10 块级元素与行内元素 11 文本标签 12 图片标签 13 路径的分类 14 常见图片格式 15 超链接

大家好，我是讯享网，很高兴认识大家。



目录

  • 1. 前置知识
  • 2. HTML文档声明
  • 3. HTML标签属性
  • 4. HTML基本结构
    • 4.1
    • 4.2 网页的基本结构
    • 4.3 HTML之间的关系
  • 5. HTML字符编码
  • 6. HTMl设置语言
  • 7. 开发者文档
  • 8. HTML排版标签
  • 9. HTML语义化标签
  • 10. 块级元素与行内元素
  • 11. 文本标签
  • 12. 图片标签
  • 13. 路径的分类
  • 14. 常见图片格式
  • 15. 超链接
    • 15.1 跳转页面
    • 15.2 跳转到文件
    • 15.3 跳转到锚点
    • 15.3 唤起指定应用
  • 16. 列表
  • 17. 表格
    • 1. 基础结构
    • 2. 常用属性
  • 18. 常用标签补充
  • 19. 表单基本结构
    • 1. 各种标签
    • 2. 常用表单控件
    • 3. 框架标签
  • 20. HTML字符实体
    • 21. HTML全局属性
  • 22. metal元信息

1. 前置知识

两位先驱:

  • 图灵：人工智能之父
  • 冯诺依曼：现代计算机之父

2. HTML文档声明

 
讯享网 

3. HTML标签属性
 

可以写在起始标签或者单标签中，如：<标签名 属性名=“属性值”>
 

讯享网
 

4. HTML基本结构
 

4.1
 

     
 
  • 【查看网页源代码】：程序员编写的代码
    •  
 
  • 【检查】：经过浏览器“处理”后的代码
     备注：日常开发中，【检查】用的最多
    •  

 

4.2 网页的基本结构
 

 

4.3 HTML之间的关系
 

父元素、子元素、祖先元素、后代元素、兄弟元素
 

5. HTML字符编码
 

     
 
  1. 计算机对数据的操作：
    2.  

 

     
 
  • 存储时，对数据进行编码
    •  
 
  • 读取时，对数据进行解码
    •  

 

     
 
  1. 编码、解码，会遵循一定的规范————字符集
    2.  
 
  2. 平时编写代码时，统一使用UTF-8编码（最稳妥）
    3.  

 

讯享网
 

6. HTMl设置语言
 

     
 
  1. 主要作用
    2.  

 

     
 
  • 让浏览器显示对应的翻译提示
    •  
 
  • 有利于搜素引擎优化
    •  

 

     
 
  1. 具体写法：
    2.  

 

 

 
 
常用写法：
 
 
     
  
  1. zh-CN:中文-中国大陆（中文简体）
    2.  
  
  2. zh-TW:中文-中国台湾（繁体中文）
    3.  
  
  3. zh：中文
    4.  
  
  4. en-US:英文-美国
    5.  
  
  5. en-GB:英文-英国
    6.  
 
 

 

7. 开发者文档
 

     
 
  • W3C官网：www.w3c.org
    •  
 
  • W3School:www.w3school.com.cn
    •  
 
  • MDN:developer.mozila.org————平时用的多
    •  

 

8. HTML排版标签
 


  标签名标签含义单/双标签h1~h6标题双p段落双div没有任何含义，用于整体布局（生活中的包装袋）双 

 

注意：
 

     
 
  1. h1最好写一个，h2~h6能适当多写
    2.  
 
  2. h1~h6不能相互嵌套；
    3.  
 
  3. p标签很特殊！它里面不能有：h1~h6、p、div标签
    4.  

 

9. HTML语义化标签
 

     
 
  • 代码的可读性更强，更清晰
    •  
 
  • 有利于SEO（搜索引擎优化）
    •  
 
  • 方便设备解析（屏幕阅读器、盲人阅读器）
    •  

 

10. 块级元素与行内元素
 

     
 
  1. 块级元素：独占一行（排版标签都是块级元素） 
    2.  
 
  2. 行内元素：不独占一行 
    3.  
 
  3. 使用规则 
    3.1 块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）
     3.2 行内元素中能写行内元素，但不能写块级元素
     3.3 一些特殊的规则：
     
  
       
   
    • h1~h6不能互相嵌套
      •  
   
    • p中不要写块级元素
      •  
  
     
    4.  

 

11. 文本标签
 

     
 
  1. 用于包裹：词汇、短语等
    2.  
 
  2. 通常写在排版标签里面
    3.  
 
  3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
    4.  
 
  4. 文本标签通常都是行内标签
    5.  

 

常用的：
 


  标签名标签语义单/双标签em要着重阅读的内容双strong十分重要的内容（语气比em要强）双span没有语义，用于包裹短语的通用容器双 

 

 
 
生活中的例子：div是大包装袋，span是小包装袋
 

 

不常用：
 


  标签名标签语义单/双标签cite作品标题（书籍、歌曲、电影…)双dfn特殊术语，或专属名词双del与ins删除的文本【与】插入的文本双sub与sup下标文字【与】上标文字双code一段代码双samp从正常的上下文中，将某些内容提取出来，例如：标识设备输出双kbd键盘文本，标识文本是通过键盘输入的，经常用在与计算机相关的手册中双abbr缩写，最好配合上title属性双bdo更改文本方向，要配合dir属性，可选值ltr(默认值)、rtl双var标记变量，可以与code标签一起使用双samll附属细则，例如：包括版权、法律文本。——很少使用双b摘要中的关键字、评论中的产品名称。——很少使用双i本意是：人物的思想活动、所说的话等等。 
 
现在多用于：呈现字体图标双u与正常内容有反差的文本，例如：错的单词、不合适的描述等等。——很少使用双q短引用。——很少使用双blockquote长引用。———很少使用双address地址信息双 

 

 
 
备注：
 
 
     
  
  1. 这些不常用的标签，编码时不用过于纠结
    2.  
  
  2. blockquote与address是快级元素，其他的文本标签，都是行内元素
    3.  
  
  3. 有些语义感不强的标签，我们很少使用，例如：
     small、b、u、q、blockquote
    4.  
  
  4. HTML标签太多了，记住那些重要的即可，例如：h1~h6、p、div、em、strong、span
    5.  
 
 

 

12. 图片标签
 


  标签名标签语义常用属性单/双标签img图片src:图片路径 
 
alt:图片描述 
 
width:图片宽度 
 
heigth:图片高度单 

 

总结：
 

     
 
  1. 像素（px）是一种单位
    2.  
 
  2. alt属性的作用： 
  
       
   
    • 搜索引擎通过alt属性，得知图片的内容。——最主要的作用
      •  
   
    • 当照片无法展示时候，有些浏览器会显示alt属性的值
      •  
   
    • 盲人阅读器会朗读alt属性的值
      •  
  
     
    3.  

 

13. 路径的分类
 

     
 
  1. 相对路劲：以当前位置作为参考点，去建立路径
    2.  
 
  2. 绝对路径：以根位置作为参考点，去建立路径
     绝对路径分为本地绝对路径和网络绝对路径
    3.  

 

 
 
注意点：
 
 
     
  
  • 使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用
    •  
  
  • 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败
    •  
 
 

 

14. 常见图片格式
 

     
 
  1. jpg格式
    2.  

 

     
 
  • 概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃掉）。
    •  
 
  • 主要特点：支持的颜色丰富、占用空间少、不支持透明背景、不支持动态图。
    •  
 
  • 使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。——该格式网页中很常见
    •  

 

     
 
  1. png格式
    2.  

 

     
 
  • 概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片
    •  
 
  • 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图
    •  
 
  • 使用场景：1. 想让图片有透明背景，如公司LOGO；2. 想更高质量的呈现图片
    •  

 

     
 
  1. bmp格式
    2.  

 

     
 
  • 概述：扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节
    •  
 
  • 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图
    •  
 
  • 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片（网页中很少使用）
    •  

 

     
 
  1. gif格式
    2.  

 

     
 
  • 概述：扩展名.gif，仅支持256种颜色，色彩呈现不是很完整
    •  
 
  • 主要特点：支持的颜色较少、支持简单的透明背景、有html基础但是想学java支持动态图
    •  
 
  • 使用场景：网页中的动态图片
    •  

 

     
 
  1. webp格式
    2.  

 

     
 
  • 概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片；
    •  
 
  • 主要特点：具备上述几种格式的优点
    •  
 
  • 使用场景：网页中的各种图片
    •  

 

     
 
  1. base64格式
    2.  

 

     
 
  • 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开；
    •  
 
  • 原理：把图片进行base64编码，形成一串文本
    •  
 
  • 如何生成：靠一些工具或网站；
    •  
 
  • 如何使用：直接作为img标签的.src属性的值即可，并且不受文件位置的影响
    •  
 
  • 使用场景：一些较小的图片，或者需要和网页一起加载的图片
    •  

 

15. 超链接
 

15.1 跳转页面
 

主要作用：从当前页面进行跳转
 


  标签名标签语义常用属性单/双标签a超链接href:要跳转的具体位置。 
 
target:跳转时如何打开页面，常用值如下： 
 
_self:在本页签中打开 
 
 _blank:在新页签中打开双 

 

 

15.2 跳转到文件
 

 

 

 

15.3 跳转到锚点
 

具体使用方法：
 

     
 
  • 第一步：设置锚点
    •  

 

 

 
 
注意点：
 
 
     
  
  1. 具有href属性的a标签是超链接，具有name属性的a标签是锚点
    2.  
  
  2. name和id都是区分大小写的，且id最好不要数字开头
    3.  
 
 

 

     
 
  • 第二步：跳转锚点
    •  

 

 

15.3 唤起指定应用
 

通过a标签，可以唤起设备应用程序
 

 

16. 列表
 

     
 
  1. 有序列表
     概念：有顺序或侧重顺序的列表
    2.  

 

 

     
 
  1. 无序列表
     概念：无顺序或不侧重顺序的列表
    2.  

 

 

     
 
  1. 列表嵌套
     概念：列表中的某项内容，又包含一个列表（注意：嵌套时，务必把结构写完整
    2.  

 

 

 
 
注意：li标签最好写在ul或ol中，不要单独使用
 

 

     
 
  1. 自定义列表
    2.  
 
  2. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表
    3.  
 
  3. 一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）
    4.  

 

 

17. 表格
 

1. 基础结构
 

1.1 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成
 

1.2 表格涉及到的标签
 

     
 
  • table：表格
    •  
 
  • caption：表格标题
    •  
 
  • thead：表格头部
    •  
 
  • tbody：表格主体
    •  
 
  • tfoot：表格脚注
    •  
 
  • tr：每一行
    •  
 
  • th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）
    •  

 

 

2. 常用属性
 

     
 
  • width:设置单元格宽度
    •  
 
  • height:设置单元格高度
    •  
 
  • align:设置单元格水平对齐方式，有left、center、right
    •  
 
  • valign:设置单元格的垂直对齐方式，由top、middle、bottom
    •  
 
  • rowspan:指定要跨的行数
    •  
 
  • colspan:指定要跨的列数
    •  

 

 
 
 

 

18. 常用标签补充
 


  标签名标签含义单/双标签br换行单hr分隔单pre按原文显示（一般用在页面中嵌入大段代码）双 

 

19. 表单基本结构
 

1. 各种标签
 


  标签名标签语义标签含义单/双标签form表单action:用于指定表单的提交地址 
 
target:用于控制表单提交后，如何打开页面，有_self和_blank 
 
method:用于控制表单的提交方式双input输入框type:设置输入框的类型,目前用到的值是text,表示普通文本 
 
name:用于指定提交数据名字单button按钮略双 

 

示例代码：
 

 

2. 常用表单控件
 

2.1 文本输入框
 

 

2.2 密码输入框
 

 

2.3 单选框
 

 

2.4 复选框
 

 

2.5 隐藏域
 

 

2.6 提交按钮
 

 

2.7 重置按钮
 

 

2.8 普通按钮
 

 

2.9 文本域
 

 

 

 

2.10 下拉框
 

 

2.11 禁用表单控件
 

 
 
input、textarea、button、select、option都可以设置disabled属性。
 

 

两种label使用方式：
 

     
 
  1. 让label标签的for属性的值等于表单控件的id
    2.  

 

 

     
 
  1. 把表单控件套在label标签的里面
    2.  

 

 

2.13 fieldset与legend的使用（了解）
 fieldset可以为表单控件分组、legend标签是分组的标题
 示例：
 

 

3. 框架标签
 


  标签名标签语义标签含义单/双标签iframe框架（在网页中嵌入其他文件）name：框架名字，可以与target属性配合 
 
 width:框架的宽 
 
height：框架的高度 
 
是否显示边框，值：0或1双 

 

 
 
iframe标签的实际应用：
 
 
     
  
  1. 在网页中嵌入广告。
    2.  
  
  2. 与超链接或表单的target配合，展示不同的内容
    3.  
 
 

 

20. HTML字符实体
 

常用字符实体：
 

     
 
  • 空格 ：&nbsp
    •  
 
  • 小于号<：&lt
    •  
 
  • 大于号>：&gt
    •  
 
  • 和号&：&amp
    •  
 
  • 元￥：&yen
    •  
 
  • 乘号：&time
    •  
 
  • 除号：&divide
    •  

 

21. HTML全局属性
 

常用的全局属性
 


  属性名含义id给标签指定唯一的标识class给标签指定类名，随后通过css就可以给标签设置样式style给标签设置css样式dir内容的方向，值：ltr、rtltitle给标签设置一个文字提示，一般超链接和图片用得比较多lang给标签指定语言 

 

22. metal元信息
 

     
 
  1. 配置字符编码
    2.  

 

 
 
<meta charset=“utf-8”>
 

 

     
 
  1. 针对IE浏览器的兼容性配置
    2.  

 

 
 
<meta http-equiv=“X-UA-Compatible” content=“IE-edge”>
 

 

     
 
  1. 针对移动端的配置（移动端课程中会详细讲解）
    2.  

 

 
 
<meta name=“viewport” content=“width-device-width,inital-scale=1.0”>
 

 

     
 
  1. 配置网页关键字
    2.  

 

 
 
<meta name=“keyword” content=“8~12个以英文逗号隔开的单词/词语”>
 

 

     
 
  1. 配置网页描述信息
    2.  

 

 
 
<meta name=“description” content=“80字以内的一段话，与网站内容相关”>
 

 

     
 
  1. 针对搜素引擎爬虫配置
    2.  

 

 
 
<meta name=“robots” content=“此处可选值省略”>
 

 

     
 
  1. 配置网页作者
    2.  

 

 
 
<meta name=“author” content=“tony”>
 

 

     
 
  1. 配置网页生成工具
    2.  

 

 
 
<meta name=“generator” content=“Visual Studio Code”>
 

 

     
 
  1. 配置定义网页版权信息
    2.  

 

 
 
<meta name=“copyright” content="2023-2027版权所有>
 

 

     
 
  1. 配置网页自动刷新
    2.  

 


                    


                    


                    

                        

                            

                                小讯
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2024-12-27 09:35
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2024-12-30 08:36
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/9608.html