HTML标签

语法规范

• HTML标签是由尖括号包围的关键词，如
• HTML标签通常是成对出现的，如和，称为双标签（开始标签和结束标签）
• 有些特殊标签必须是单个标签，如
  ，称为单标签
• 双标签关系分为两种：包含关系和并列关系

    
    


//与、为包含关系
//和为并列关系

 

基本结构标签

即骨架

  //根标签
      //头部，其中必须要设置title
          //网页标题
    
      //主体
        元素包含文档的所有内容，页面内容基本都是放在body里
    

补充：

1. 文档类型声明标签

文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。必须写到整个页面的第一行，不是HTML标签（写在里的标签）

表示当前页面采取的是HTML5版本来显示网页

2. lang语言种类

用来定义当前文档显示的语言。en定义语言为英语，zh-CN定义语言为中文，对应网页是英文网页或中文网页。

这个属性对浏览器和搜索引擎还是有作用的，比如是法语网页时需要翻译

3. 字符集

字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

 不写这行代码可能引起乱码

 

常用标签

标题标签

-

• 双标签
• 标签语义：作为标题使用，并且重要性递减
• 特点：加了标题标签的文字字体变粗、字号变大、独占一行

 

段落标签

• 双标签
• 标签语义：把文字内容分割为若干段落，有条理地显示
• 特点：文本在一个段落中会根据浏览器窗口大小自动换行、段落与段落之间保有空隙
• 在HTML中不管多少空格、回车都只显示一个

 

换行标签

• 单标签
• 标签语义：强制换行
• 特点：换行标签只是开始新的一行，跟段落不一样，段落之间会插入一些垂直距离

 

文本格式化标签

• 双标签
• 标签语义：突出重要性，为文字设置粗体、斜线、下划线等效果

语义	标签
加粗	或者
倾斜	或者
删除线	或者
下划线	或者

 

和标签

• 双标签
• 和是没有语义的，他们是一个盒子，用于布局、装内容
• 类似一个大盒子，单独占一行
• 类似一个小盒子，一行上可有多个标签

 

图像标签和路径

1.图像标签

• 单标签，一行可放多个
• 用于定义HTML页面中的图像
• src是标签的必须属性（属于该标签的特性），用于指定图像文件的路径和文件名

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时的替代文字
title	文本	提示文本，鼠标放到图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

其中，width和height一般只设置一个，避免压缩图像，另一个会等比例缩放，border一般在css中设置。

2.路径

• 目录文件夹：里面存放页面所需的相关素材的文件夹，如html文件、图片、css文件等
• 根目录：打开目录文件夹的第一层就是根目录
• 通常建立一个文件夹（images）来存放图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于html页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如
下一级路径	/	图像文件位于HTML文件下一级，如
上一级路径	../	图像文件位于HTML文件上一级，如

2.绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或完整的网络路径

例如，"D:\web\img\logo.gif"或者"http://www.itcast.cn/images/logo.gif"

相对路径中反斜杠用"/"，绝对路径中反斜杠用"\"

 

超链接标签

• 双标签，a为anchor缩写，意为锚
• 用于定义超链接，作用是从一个页面跳转到另一个页面
• 文本或图像

属性	属性值
href	指定链接目标的url地址（必须属性）
target	指定链接页面的打开方式  _self为默认值，在当前页面打开，_blank为在新窗口中打开

链接分类

1.外部链接：如百度，链接URL以http://开始

2.内部链接：网站内部页面之间的相互连接，直接连接内部页面名称即可，如首页（⚠️内部页面的路径）

3.空链接：如果当时没有确定链接目标时，首页

4.下载链接：如果href里面地址是一个.exe文件或者zip压缩包，会下载这个文件（⚠️内部文件的路径）

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6.锚点链接：点击链接可以快速定位到页面中的某一位置

• 在链接文本的href属性中，设置属性值为#名字的形式，如第二集
• 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如

  第二季介绍

 

注释标签

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，注释以""结束。

  快捷键：command + /

 

特殊字符

在HTML中，一些特殊符号很难或不方便直接使用，可以用以下字符代替

 

表格标签

• 表格用于显示、展示数据

对于布局整齐的页面，可以用

来帮助对齐

1.基本语法

··· ···

单元格内的文字

1.

是用于定义表格的标签

2.标签用于定义表格中的行，必须嵌套在

标签中

3.标签用于定义表格中的单元格，必须嵌套在标签中（td指table data）

 

2.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，如

    
        
        ···
    
    
        
        ···
    
    ···
姓名
张三

 

3.表格相关属性

实际开发中不常用，后面通过CSS来设置 ！这些属性写在

标签里

属性名	属性	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否有边框，默认为“”，没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1px
cellspacing	像素值	规定单元格子间的空白，默认2px
width	像素值或百分比	规定表格的宽度

 

4.表格结构标签

为了更好的表示表格的语义/结构，可将表格分割成表格头部和表格主体两大部分，用标签表示表格的头部区域，标签表示表格的主体区域

    
        
        ···
    
    
        
        ···
    
    ···

姓名

张三

 

5.合并单元格

把多个单元格合并为一个单元格

1.合并单元格方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

2.目标单元格

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

3.合并单元格步骤

第一步 确定跨行还是跨列

第二步 找到目标单元格，写上合并方式=合并的单元格数量，比如

第三步 删除多余的单元格

 

列表

• 双标签
• 用于布局，列表最大的特点就是整齐、整洁、有序
• 根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表

1.无序列表

• 标签表示HTML页面中项目的无序列表，而列表项使用
  • 标签定义
  • 无序列表的基本语法格式：

  
      
  列表项1
      
  列表项2
      
  列表项3
      ···
  

  • 注意：
  1. 无序列表的各个列表项之间没有顺序，是并列的
  2. 中只能嵌套
  5. 与
  之间相当于一个容器，可以嵌套所有元素
  6. 无序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

   

  2.有序列表

  • 标签用于定义有序列表，列表排序以数字来显示，使用
    1. 标签来定义列表项
    2. 有序列表的基本语法格式：

    3. 
           
       列表项1
           
       列表项2
           
       列表项3
           ···
       

    4. 注意：
  1. 中只能嵌套
  4. 与
  之间相当于一个容器，可以嵌套所有元素
  5. 有序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

   

  3.自定义列表

  • 使用场景：用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

  • 标签用于定义列表，

    标签定义项目/名字，

    标签描述每一个项目/名字

  • 基本语法：

  
      
  名词1
      
  名词1解释1
      
  名词1解释2
      
  名词2
      
  名词2解释1
      
  名词2解释2
      ···
  

  • 注意：

  1. 中只能包含
     和
  2. 和
     个数没有限制，经常是一个
     对应多个
  3. 与
     是并列关系

   

  表单标签

  • 使用场景：注册页面
  • 使用表单的目的是为了与用户进行交互，收集用户信息
  • 一个完整的表单通常由表单域、表单控件（表单元素）和信息元素3个部分构成

   

  

  1.表单域

  • 表单域是一个包含表单元素的区域
  • 标签用于定义表单域，以实现用户信息的收集和传递，会把他范围内的表单元素信息提交给服务器（双标签）
  • 基本语法

  
      各种表单元素控件
  

  常用属性（学习js后重新详细解释）：

  属性	属性值	作用
  action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
  method	get/post	用于设置表单数据的提交方式，其取值为get或post
  name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

   

  2.表单元素

  • 允许用户在表单中输入或者选择的内容控件

  1.input输入表单元素

  • 标签用于收集用户信息（单标签）
  •  标签包含一个type属性，根据不同的type属性值，来指定不同的控件类型

  属性值	描述	注
  text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符	value属性值显示为默认值
  password	定义密码字段，该字段中的字符被隐藏
  radio	定义单选按钮	实现多选一时，多个单选按钮需要同样的name属性值
  checkbox	定义复选框	复选框也需要同样的name属性值
  submit	定义提交按钮，提交按钮会把表单数据发送给服务器	value值可改变按钮上的显示字符
  reset	定义重置按钮，重置按钮会清除表单中的所有数据，还原到默认状态
  button	定义可点击按钮（多数情况下，用于通过js启动脚本）	如发送验证码按钮
  file	定义输入字段和“浏览”按钮，供文件上传
  hidden	定义隐藏的输入字段
  image	定义图像形式的提交按钮

   

  • 除type属性外，标签还有其他很多属性，其常用属性如下：

  属性	属性值	描述
  name	由用户自定义	定义input元素的名称
  value	由用户自定义	规定input元素的值
  checked	checked	规定此input元素首次加载时应当被选中
  maxlength	正整数	规定输入字段中的字符的最大长度

   

  name和value是每个表单元素都有的属性值，主要给后台人员使用

  checked属性主要针对于单选按钮和复选框

   

  额外知识：标签

  • 双标签
  • 标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
  • 语法：

  男
  

  核心：标签的for属性应当于相关元素的id属性相同

   

  2.select下拉表单元素

  • 双标签
  • 使用场景：如果有多个选项让用户选择，并且想要节约页面空间时，使用标签定义下拉列表
    语法
    选项1 选项2 选项3 ···

    至少包含一对，包含在

    中

    在中定义selected="selected"时，当前项为默认选中项

    3.textarea文本域元素

    • 双标签
    • 使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用标签定义多方文本输入控件，常用于留言板、评论</li> <li>语法</li> </ul> <pre><code class="language-html"><textarea rows="3" cols="20"> 这里显示默认文本内容，且会显示于标签间的空格

      包含在

      中

      cols="每行中的字符树"，rows="显示的行数"（并不是所有行数，超过显示行数后会自动加上滚动条），在实际开发中不会使用，都是用CSS来改变大小