HTML语法

在vscode中创建的网页代码中自动生成的代码中：

<!DOCTYPE>是文档类型声明标签（不是HTML标签），能够告诉浏览器用什么版本的HTML来显示网页，这个声明一定要放在代码的最前面；

lang是用来定义当前文档显示的语言（英文为en，中文为zh-cn），但定义成en的文档也可以显示中文，定义为zh-cn的文档也可以显示英文；

chaset是表示字符集的意思（要是忘写了就会引起乱码的情况），常用的字符集有GB2312（简体中文），BIG5（繁体中文），GBK（包括简体中文和繁体中文），UTF-8（基本包含了全世界所有国家需要用到的字符，因而被称为万国码），在这四种字符集中，我们最常用的就是UTF-8。

常用标签：

我们需要了解标签语义，在合适的地方使用标签，让页面结构更加地清晰。常用的有以下几种：

1. 标题标签：语法是<h1></h1>，能够作为标题使用，并根据重要性从<h1>递减到<h6>（即h1重要性大于h6的重要性），加了标题的文字会加粗，字号变大并独占一行。

2. 段落标签：语法是<p></p>，能够把文字分成不同的段落（如果段落过长在vscode中显示不出来，可以在查看中选择自动换行，就能够把文本完整显示出来），文本在一个段落中根据浏览器窗口的大小自动换行，同时段落与段落之间会留有一个比较大的空隙。

3. 换行标签：语法是<br />，能够让文本强制换行（在vscode中敲再多空格也无法实现换行，只会显示出一个空格），换行标签与段落标签不同，段落标签会出现较大空隙，但换行标签不会出现。

4. 文本格式化标签分四种（均能突出重点）：第一种是加粗标签，语法是<strong></strong>或者<b></b>，第二种是倾斜标签，语法是<em></em>或者<i></i>，第三种是下划删除线标签，语法是<del></del>或者<s></s>，第四种是下划线标签，语法是<ins></ins>或者<u></u>。四种标签均有两种写法，但均推荐使用前者，能使语义更强烈。

5. <div>标签和<span>标签：写法是<div></div>和<span></span>，类似一个盒子，用来装东西，<div>是个大盒子，会单独占一行，<span>是个小盒子。

6. 图像标签：语法是<img>，img后面必须接src=""，（src是img的一种属性，即属于该图像标签的特性）双引号中写指定图像文件的路径（分为相对路径和绝对路径）和图像名；img后面还可以接以下几种属性：alt为替换文本，是当图像无法显示时会显示的文字；title为提示文本，是当鼠标放到图像上时显示的文字；width为宽度的像素，能够设置图像的宽度；height为高度的像素，能够设置图像的高度；border为图像边框的像素，能够设置图像边框的粗细；（这几种属性不分先后顺序，标签名与属性、属性与属性之间以空格隔开，除src外其他属性均可省略）

7. 链接标签：语法是<a href="跳转目标" target=“目标窗口的弹出方式（包括_self和_blank）”>文本或图像</a>，其中href后可以接外部链接、内部链接、文件 .exe 或者zip等压缩包形式以及文本、图像、表格、音频、视频等网页元素（空链接为href="#"），target为_self（默认值）时表示在当前窗口打开页面，_blank表示在新窗口打开页面。锚点链接在href后接”#名字“，并在目标位置的标签中添加 id=”名字“即可。

8. 表格标签：能够显示、展示数据，让页面布局更美观。语法：（<tr>表示行，<td>表示单元格，也可以用<th>表示表格中的表头部分）

<table>
  <tr>
    <td>单元格中的文字</td>
    ...
  </tr>
  ...
</table>

① 表格属性：（并不常用，了解单词意思及效果即可）

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

② 合并单元格方式：跨行合并（最上侧单元格为目标单元格，写合并代码）：rowspan=“合并单元格的个数”；跨列合并（最左侧单元格为目标单元格，写合并代码）：colspan=“合并单元格的个数”，注意合并单元格后需要将没用的单元格删除。

9. 表格结构标签：包括<thead></thead>（用于定义表格的头部，内部必须有<tr>）和<tbody></tbody>（用于定义表格的主体），能够让表格的结构更清晰，这两个表格必须放在<table></table>的中间。

10. 列表标签：分为无序列表、有序列表和自定义列表。

①. 无序列表：语法：（没有顺序之分，但<ul></ul>中间不能放其他元素，但<li></li>中间可以）

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>

②. 有序列表：语法：（有顺序之分，<ol></ol>中间不能放其他元素，但<li></li>中间可以）

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ol>

③. 自定义列表：语法：（一个大标题下面跟着几项，<dd>之间没有顺序，<dl></dl>中间不能放其他元素，但<dd>和<dt>可以，同时<dd>和<dt>没有个数限制）

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>

11. 表单标签：（一个完整的表单包括表单域、表单控件/表单元素和提示信息组成）语法：

<form action="url地址" method="提交方式" name="表单域名称">
    <input type="" name="" value="">
</form>

①. 表单域的写法为<form></form>

②. <input>表单元素：

a. type属性的属性值：

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

b. checked属性主要针对于单选按钮或者复选框，能够使一打开页面就默认选中某个元素。

c. maxlength 是规定表单元素输入的最大字符数。

                单选按钮和复选框需要有相同的name属性。

d. <select>表单元素：语法：（在<option>中定义selectd=“selected”时，当前项即为默认选中项）

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

e. <textarea>表单元素：能够定义多行文本输入。语法：

<textarea rows="显示的行数" cols="每行中的字符数">
  文本内容
</textarea>

 12. <label>标签：能够绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上。语法：（for后接的需要跟id后的一致）

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

注释字符和特殊字符

注释字符：写法是<!--注释内容-->，能够在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字。（也可使用快捷键ctrl+ / ）

特殊字符：

特殊字符	描述	写法
	空格符	&nbsp
<	小于号	&It
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方	&sup2
³	立方	&sup3

如果忘记了标签对应的意思，可以通过以下网址查阅:百度、W3C、MDN.

---

内容部分摘自【前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程-哔哩哔哩】 https://b23.tv/kajgOK3