HTML知识梳理

文本格式化标签

标签	语义
加粗 或者	更推荐使用标签加粗语义更强烈
倾斜 或者	更推荐使用标签倾斜语义更强烈
删除线 或者	更推荐使用标签删除线语义更强烈
删除线 或者	更推荐使用标签删除线语义更强烈

图像标签

属性	说明
src	属性值:图片路径 , 必须属性
alt	属性值:文本 , 替换文本。图像不能显示的文字
title	属性值:文本 , 提示文本。鼠标放到图像上，显示的文字
width	属性值:像素 , 设置图像的宽度
height	属性值:像素 , 设置图像的高度
border	属性值:像素 , 设置图像的边框粗细
	属性采取键值对的格式 , 即key= "value"的格式，属性= “属性值”

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

超链接标签

文本或图像

属性	作用
href	用于指定链接目标的url地址，(必须属性) 当为标签应用href属性时,它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中self为默认值，_ _blank为在新窗口中打开方式。

表格标签

<table>
  <tr>
    <th>表头单元格,文字会加粗居中显示th>
    ...
  tr>
  <tr>
    <td>单元格内的文字td>
    ...
  tr>
  ...
table>

1. 是用于定义表格的标签。

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

   标签中。

3. 标签表示 HTML 表格的表头部分(table head 的缩写)

4. 用于定义表格中的单元格，必须嵌套在标签中。字母 td 指表格数据（table data），即数据单元格的内容。

表格属性

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

表格结构标签

1. ： 用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
2. ： 用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 标签中。

合并单元格

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

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

步骤

1. 先确定是跨行还是跨列合并。

2. 找到目标单元格 , 写上合并方式= 合并的单元格数量。比如：

3. 删除多余的单元格。

列表标签

标签名	定义说明
	无序标签 , 里面只能包含li , 没有顺序, 使用较多。li里面可以包含任何标签
	有序标签 , 里面只能包含li , 有顺序，使用相对较少。li里面可以包含任何标签
	自定义列表 , 里面只能包含dt和dd。dt和dd里面可以放任何标签
	标签用于定义描述列表（或定义列表），该标签会与 （定义项目/名字）和 （描述每一个项目/名字）一起使用。 里面只能包含 和 , 和 个数没有限制，经常是一个 对应多个

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

自定义列表的使用场景:

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

去掉 li 前面的项目符号(小圆点) : list-style: none;

表单标签

使用表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域是一个包含表单元素的区域。

标签用于定义表单域，以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器 , 写表单元素之前 , 应该有个表单域把他们进行包含

  各种表单元素控件

常用属性

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

表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

input输入表单元素

在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

标签为单标签 , type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值

属性值	描述
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
radio	定义单选按钮。
checkbox	定义复选框。
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
file	定义输入字段和“浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。

除type 属性外，标签还有其他很多属性

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

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

2.name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.

3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

4.maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用

1.有些表单元素想刚打开页面就默认显示几个文字怎么做 ?
答: 可以给这些表单元素设置value 属性=“值”
用户名:

2.页面中的表单元素很多，如何区别不同的表单元素 ?
答: name 属性：当前input 表单的名字，后台可以通过这个name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单。
用户名:

• name 属性后面的值，是自定义的

• radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

男
女

3.如果页面一打开就让某个单选按钮或者复选框是选中状态 ?
答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。

男
女

4.如何让input表单元素展示不同的形态? 比如单选按钮或者文本框 。
答: type属性：type属性可以让input表单元素设置不同的形态.

男

标签

标签为input 元素定义标注（标签）,
标签用于绑定一个表单元素 , 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上 , 用来增加用户体验。

用法 :

男

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

select下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表.

用法：

  选项1
  选项2
  选项3
  ...

1. 中至少包含一对。

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

   textarea文本域元素

   使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用</code>标签。在表单元素中，<code><textarea></code>标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。</p> <p>用法:</p> <pre><code><textarea rows="3" cols="20"> 文本内容

   1. 通过标签可以轻松地创建多行文本输入框。

   2. cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。

   防止拖拽文本域 resize : 实际开发中，文本域右下角是不可以拖拽的。

   textarea{ resize: none;}

   表单元素总结

   1. 表单元素包含三大组 , input输入表单元素 , select下拉表单元素 , textarea文本域表单元素

   2. 这三组表单元素都应该包含在form表单域里面,并且有name 属性

   北京

   Emmet语法

   快速生成HTML结构语法

   1. 生成标签 直接输入标签名 按tab键即可 , 比如 div 然后tab 键，
      就可以生成

   2. 如果想要生成多个相同标签 加上*就可以了 , 比如 div*3 就可以快速生成3个div

   3. 如果有父子级关系的标签，可以用 > , 比如 ul > li就可以了

   4. 如果有兄弟关系的标签，用+就可以了 , 比如 div+p

   5. 如果生成带有类名或者id名字的 ， 直接写 .demo 或者 #two tab键就可以了

   6. 如果生成的div类名是有顺序的，可以用 自增符号 $

   7. 如果想要在生成的标签内部写内容可以用 { } 表示

   快速生成CSS样式语法

   CSS 基本采取简写形式即可

   1. 比如 w200 按tab 可以 生成 width: 200px;

   2. 比如 lh26px 按tab 可以生成 line-height: 26px;

   快速格式化代码

   Vscode 快速格式化代码 : shift+alt+f

   也可以设置 当保存页面的时候自动格式化代码:

   1）文件 ------.>【首选项】---------->【设置】；

   2）搜索emmet.include;

   3）在settings.json下的【工作区设置】中添加以下语句：

   “editor.formatOnType”: true,

   “editor.formatOnSave”: true