HTML的基础标签

01-基础标签

01-基础标签1. 认识HTML2. 网页基础知识3. 认识标签meta标签div标签H系列标题标签排序标签p段落标签span标签a标签 -- 超链接a标签 -- 锚点img标签其他常用标签4. 特殊符号5. 语义化√. 作业与练习

1. 认识HTML

• HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是构成Web页面的基本元素

• HTML不是一种编程语言，而是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。

• 浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容。

• HTML5是HTML的一个版本，该版本新增与优化了很多内容。现今，几乎所有世面流行的浏览器都能很好的支持HTML5，所以，我们后面学习的知识都以HTML5作为标准。

2. 网页基础知识

• HTML模板的基本含义

• 标签知识

  • 由 <> 包裹的关键词称为标签

  • 标签有单标签与双标签之分

  • <>之间除了标签名之外，还可以有 属性="值" 的各种属性设置

• HTML的lang属性

  • 主要用于决定浏览器是否自动弹出翻译框

  • 常用值 en ，代表网页是一个英文网页（不管你后续写的内容是不是英文），浏览器打开该网页会弹出翻译提示框

  • 常用值 zh-cn，代表网页是一个中文网页，浏览器打开该网页不会弹出翻译提示框

  • 所以，如果你网页主要服务于国内用户，值选择 zh-cn

• 结构与样式

  • 结构：body中书写的内容会展示在浏览器可视区中，每个标签都有默认的样式

  • 样式：通过编写css代码可以改变各个内容的样式

  我们学习的路线是先学习结构部分的各种标签，再学习css改变样式。

• 前端代码书写规范

  • 标签、属性名以及相关符号书写均在英文半角状态下的小写

  • 养成写注释的好习惯

  • 所有双标签必须闭合

  • 根据层次结构对标签进行tab缩进

  • 属性值必须带引号，单双引号都可以，根据你们团队的开发规范来

3. 认识标签

HTML规范中有很多很多的标签，常用的标签并不多。

meta标签

meta标签写在head标签中，是一个辅助标签，根据属性不一样所表示的含义也不一样，常用的有：

• 用于表示该网页的关键词，便于搜索引擎的抓取（结合百度搜索进行理解）。

• 对该网页的简介，搜索引擎在搜索结果中会展示出来，便于用户了解信息（结合百度搜索进行理解）。

• 根据当前浏览器类型强制以特定内核进行渲染，如果是IE浏览器则使用最新内核，如果是双核浏览器则使用chrome内核。IE7及以下版本不支持这个属性。

• 更多meta的作用可在对前端有一定了解后自行探索

div标签

div标签用于将文档划分为独立的、不同的部分，从而构成一个完整的网页。网页的主体骨架一般由div标签搭建（HTML5标准中有很多新标签也可代替div搭建骨架），每一个单独的div模块中也可继续用div搭建局部的骨架。

Tip：结合英文单词更好理解哦！ division 分开；分隔。

H系列标题标签

h1~h6标签用于表示网页内容的标题，标签中的文字默认会出现不同程度的加粗与增大。

在一个网页中h1标签最好是有且仅有一个（有利于SEO优化），其他h标签可以根据需要出现多次。

Tip：结合英文单词更好理解哦！ heading (页首或章节开头的)标题。

排序标签

• ul无序列表标签

  ul标签用于展示无序的列表内容，规范上，其子标签必须是li。

  
  
    
  31省市区新增确诊15例
    
  DWG战队获得S10全球总决赛冠军
    
  拜登当选新一任美国总统
    
  2020天猫双11成交额4982亿
  

  ul列表前默认有实心圆点符号，可以通过修改type属性来改变这个符号（但是更推荐通过css来对其进行修改，这样更符合结构与样式分离的理念，后续学习中再介绍通过css来改变的写法）：

  
  
    
  31省市区新增确诊15例
    
  DWG战队获得S10全球总决赛冠军
    
  拜登当选新一任美国总统
    
  2020天猫双11成交额4982亿
  

• ol有序列表标签

  ol标签用于展示有序的列表内容，规范上，其子标签必须是li。

  
    
  打开冰箱门
    
  将大象放进冰箱
    
  关上冰箱门
  

  ol列表前默认有数字符号，可以通过修改type属性来改变这个符号（同上，更推荐使用css来改变）：

  
  
    
  打开冰箱门
    
  将大象放进冰箱
    
  关上冰箱门
  

各个列表之间允许互相嵌套。

p段落标签

p标签中通常用来放置一段文字。终点注意：p标签中不可以放div标签(任意块标签)，这会导致在浏览器中p标签被分隔成两个。

被那迎面而来的温热香风吹在脸庞上，萧炎有着瞬间的失神，狠狠的甩了甩头，将心中的旖念压下，手掌拍了拍面前几乎和自己同样身高的少女的小脑袋，无奈的道：“你就不能让我说出来，也好满足一下我的虚荣心么？”

Tip：结合英文单词更好理解哦！paragraph 美 [ˈpærəɡræf] 段落。

span标签

span标签通常用于包裹文字，视觉上不会产生任何变化，但是我们可以配合css添加特殊的样式：

让span包裹的文字变红色

a标签 -- 超链接

a标签最常用于形成一个可点击的超链接：

点我跳转到百度

通过添加target属性可以指定打开链接的位置

点我跳转到百度

a标签 -- 锚点

a标签还常用与创建锚点链接，用于在当前页面跳转到指定位置：

（讲解标签的id命名方式）

点我页面滚动到id为wrap的标签所在的位置

锚点也可以配合name属性使用：

点我页面滚动到name为abc的标签位置>
......
滚到这里

Tip：结合英文单词更好理解哦！ anchor 美 [ˈæŋkər] 锚。

img标签

img标签用于在网页中引入一张图片：

img是一个单标签，不需要结束标签，但是我们可以用 / 作为img的结尾：

img标签的四个重要属性：

• src

  用于指定图片路径，路径的写法有：

  • 相对路径

    以 ./ 或者 ../ 开头（详细讲解），或者直接以文件名或目录名开头。

  • 绝对路径

    一个从根目录出发的路径或者一个完整的网络地址。

  所有写路径的地方都适用相对路径和绝对路径的写法，比如上面讲过的a标签herf属性。

• width与height

  用于指定img显示的大小，书写了这两个属性之后，网页加载时能够为img图片预留对应的空间从而不会影响其他布局。

  width与height一般情况下和图片原始尺寸保持一致（像素单位的简单介绍），不过不一致也是允许的，但是即使使用width和height缩小图片，也仅仅是视觉上的缩小，浏览器还是需要加载原始的图片资源（并不能减轻请求压力），所以当我们有图片缩放的需求时，应当提前用图片处理软件处理好了之后，再引入图片。

• alt属性

  主要用于告知搜索引擎当前图片表示的意思。

  同时当img的src地址出错时，alt属性的值能够显示出来，以至于让用户得到一个相对来说不那么糟糕的体验。

除上述四条属性之后，img中常用的属性还有 title ，当鼠标指针移动到图片上时，title能够显示出提示文字，增强用户体验。title属性并不仅仅用于img标签，其他常见的标签都可以使用title。

Tip：结合英文单词更好理解哦！ image 美 [ˈɪmɪdʒ] 图像。

其他常用标签

• b标签 strong标签

  文字加粗，b标签仅为视觉上的加粗，strong还能够被搜索引擎检索。

• i标签 em标签

  文字斜体，i标签仅为视觉上的斜体，em还能够被搜索引擎检索。

• br标签

  用于文本换行。

• hr标签

  横线分隔。

• del标签

  删除线。

4. 特殊符号

在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示出字符 < >，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示：

< > 使用 < 和 > 代替

连续的空格会被忽略，如果确实需要连续空格，使用   代替

更多符号请参考：HTML实体符号手册 ；

很多特殊字符即使不用实体符号也不会出错，但是在键盘上打出这些符号有点困难，实体符号存在的意义就是为这些字符提供替代的输入方式。

5. 语义化

通过上面标签的学习，我们发现每个标签其实对应的都有英文原单词，也就是说HTML的标签具备对应的单词的意思与作用，这就称之为HTML标签的语义化。

HTML为何要语义化？

• 在没有添加样式的情况下也能看出网页大致的结构

• 有利于SEO

• 增强用户体验

• 有利于团队协作

• ......

所以我们在编写HTML代码的时候，也要遵循语义化，不能随性而为。比如要放置一段文字，就应该用p标签而不是div标签。要展示某个有先后顺序的步骤文本，就应该使用ol标签而不是ul标签。

√. 作业与练习

• 使用编辑器创建一个HTML文档，书写一遍已经学习的各种标签案例。