1 HTML语法规范
1）成对出现，也称为双标签；2）HTML标签都出现在<>里；3）也有一些单标签，例如：<br/>
标签关系
双标签关系可以分为两类：包含关系和并列关系。
1）包含关系。
<html>
<body></body>
</html>
2）并列关系。
<head></head>
<body></body>
2 HTML基本结构标签
<html>
<head>
<title></title>
</head>
<body>
网页的主要内容
</body>
</html>
注：网页的基本结构包括html,head,title,body四个基本元素。
3 网页开发工具
visual studio code（安装！）
安装插件（安装后要重启才可以生效）
1）在浏览器中打开预览 open in browser
2）自动重命名配对的HTML/XML标签 Auto Rename Tag
3）追踪至样式 CSS Peek
VSCode 工具生成骨架标签新增代码
1）<!DOCTYPE> 文档类型声明，告诉浏览器使用哪种版本显示网页
<!DOCYTPE html> 指文档使用HTML显示网页，这个标签必须放在文档的最前面！不属于html标签，就是文档类型声明标签。
2）<html lang="en"> 表明当前页面的显示语言，其中“en”指英文，“zh-CN”指中文。
3）<meta charset="UTF-8"> 规定HTML文档使用哪种字符编码。‘UTF-8’指万国码。
4 HTML常用标签
1）标题标签 <h1> - <h6>
标题一共六级选，文字加粗一行显，由大到小依次减，从重到轻随之变。
注：标题都会变粗，且会独占一行，重要性从一级到23456级依次递减。
2）段落标签<p>
代码中的换行符通过浏览器后并不会分段，要想分段只能使用段落标签。同样代码中的多个空格通过浏览器后只会显示成一个空格。
特点：段落和段落之间会留有一定的空隙；文本文字会按照浏览器窗口的大小自动换行。
3）换行标签<br />
强制换行。br 后有个空格才是 / 。
特点：单标签；<br />只是简单的开始新的一行，没有垂直间距，而段落之间会自动插入垂直间距。
4）文本格式化标签（重点记住粗体和斜体，其余可以查）
粗体 <strong> <b>
strong比b语义更强烈，推荐使用strong
斜体 <em> <i>
em比i语义更强烈，推荐使用em
删除线 <del> <s>
del比s语义更强烈，推荐使用del
下划线 <ins> <u>
ins比u语义更强烈，推荐使用ins
5）盒子标签 <div> 和 <span>
这两个标签没有语义，就只是盒子，用来装东西。
特点：<div> 一个标签占一行；<span>标签一行可以放多个。
6）图像标签 <img>
单标签。用于定义HTML页面中的图像。
例如：<img src="图像URL" />，src指图片的路径。
图像属性：
- src 图像路径。需要连着图像后缀名。必须要有这个属性！
- alt 图像替换文本。当图片显示不出来时，会自动展示图像alt中存放的文字。
- title 提示文本。鼠标放到图像上时提示的文本。
- width 设置图像的宽度。
- height 设置图像高度。注：一般宽度和高度只改变一个，另一个会等比例缩放。避免图片失帧。
- border 设置图片边框属性。eg：border="15"。一般会在CSS里设置图像边框。
注意‼️
1）图像标签可以有多个属性，必须写在标签名的后面。
2）图像属性之间是不分前后顺序的。属性之间必须用空格分割。
3）属性采用键值对的形式，即key="value"
路径：
1）目录文件夹：普通文件夹。存放着网页所需要的相关素材。
注：在vs code新建文件夹时，可以先打开目录文件夹来简化操作。
2）根目录：打开目录文件夹的第一层就是根目录。
3）相对路径：图片相对于HTML页面的位置
- 同一级路径：在同一个目录下，直接用图片名字即可。
- 下一级路径/：在下一个目录里。eg.src="images/img.jpg"
- 上一级路径../：在上一个目录里。eg.src="../img.jpg"
4）绝对路径：从电脑的盘开始。绝对路径的符号\
注1：绝对路径换个电脑后就会不可使用。所以一般建议写相对路径。
注2：也可以将完整的网络地址当作绝对路径。
7）超链接标签<a>
语法格式：
<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target默认为"_self"，在当前页面打开。将其设置为"_blank"可以新建窗口打开页面。
链接分类：
- 外部链接。必须以http://开头。
- 内部链接：网站内部页面之间的相互链接。和引用图片一样，写相对路径即可。
- 空链接：href="#"
- 下载链接： href 地址链接的是文件.exe .zip 等压缩包文件形式，会下载这个文件。
- 网页元素的链接：除了文字，图片、表格等网页中的各种元素都可以添加超链接。
- 锚点链接：点击链接后，可以快速定位到页面中的某个位置。实现方式：先给指定元素添加链接href="#名字"；给想跳转到的元素标签上添加id="名字"。
5 HTML中的注释和特殊字符
1）注释
以<!-- 这里注释-->的形式，快捷键：ctrl+/
2）特殊字符（重点记着空格，大于和小于，其余可以现查）
- 空格：
- 小于号<：<
- 大于号>：>
6 标签下
6.1 表格标签
<table>：定义表格
<tr>：定义表格的行，必须嵌套在table中。
<td>：定义表格中单元格，必须嵌套在tr中。table data
<th>：表头单元格，里面的文字会居中加粗。table head
1）表格属性：（要写到table标签里）
- align：设置表格相对对齐方式。属性值：center、left、right
- border：设置表格的边框。默认无边框。属性值：1或者""
- cellpadding：单元格内文字和单元格边框之间的距离。默认为1。
- cellspacing：单元格和单元格之间的距离，默认为2。
- width：设置表格宽度
- height：设置表格高度
2）表格结构标签
<thead>：表格表头区域。包含<th>，不能替换th。
<tbody>：表格主体区域，包括除了表头一行之外的其他行。
注：这两个都包含在table标签里。
3）合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
目标单元格（合并代码）：跨行上侧为目标单元格，跨列左侧为目标单元格。
4）合并单元格三部曲：
- 确定跨行还是跨列
- 找到目标单元格，在其中写上合并代码。eg. <td rowspan="2"></td>
- 删除多余单元格
6.2 列表标签
列表是用来布局的。
1）无序列表
<ul>
<li><\li>
<\ul>
注1：无序列表之间各个列表项之间没有顺序；
注2：ul标签里面只能放li标签；
注3：li标签里可以放任何标签。
注4：默认每个列表项之间有小黑点，小黑点是可以改变的，也可以用CSS把它用去掉。
2）有序列表
<ol>
<li><\li>
<\ol>
注1：ol标签里面只能放li标签；
注2：li标签里可以放任何元素；
注3：默认每个列表项之间有数字序号，是可以改变的，也可以用CSS把它用去掉。
3）自定义列表definition list
自定义列表通常用于对术语或名词进行解释和描述。形似大哥领着小弟玩。
<dl>
<dt><\dt> defition title
<dd><\dd> defition data
<\dl>
注1: dl里只能包括dt和dl，形似带路，带头，弟弟。dt和dd里可以包括任意类型标签。
注2: dt和dd个数没有限制，经常是一个dt对应多个dd
6.3 表单标签
表单就是为了收集用户信息。表单主要由表单域、表单控件、提示信息三部分组成。
1）表单域<form>
表单域是一个包含表单元素的区域，它的作用是把表单元素信息提交给服务器。
属性：
- action：指定接收表单数据的服务器url地址。属性值是URL地址。
- menthod：提交方式。属性值为GET或POST
- name：表单域的名字。
2）表单控件
input输入表单元素：用于收集用户信息。input是个单标签。
属性：
- type属性：决定表单元素的外观。正常文本text，密码password，单选radio，复选框checkbox，提交submit，reset清除表单里的所有数据，button普通按钮，file文件域，可上传文件。
- name属性：表单元素的名字。当想实现单选和多选时，各个选项的表单名字要用同一个。
- value属性：表单的值。传入后台时，会把表单的value值传到后台。
- checked属性：单选按钮和复选框可以设置默认选中某按钮。checked ="checked "
- maxlength属性：字段中字符的最大长度。
注：name和value是每个表单元素都要有的属性值，主要是给后台人员使用。
<label>标签（增加用户体验）
用于绑定一个表单和文字。点击label标签内容，会自动聚焦到表单元素上。将label标签的for属性和表单元素的id属性设置相同。
eg. <label for="nan">男</label>
<input type="radio" name="sex" id="nan"/>
select下拉表单元素
如果有多个选择让用户选择时。
<select>
<option></option>
</select>
注1: select里至少包含一对option
注2: selected= "selected " 表示当前项目为默认选中项。
textarea 文本域
需要大量多行输入文字时。常用于留言板、评论等。
属性：（仅了解，一般用不到）
- cols：每行可以输入的字符数
- rows：可以输入几行
7 查阅文档
推荐网址：
- 百度
- W3C/W3school
- MDN: http://developer.mozilla.org/zh-CN/
8 网页地址栏图标
要想实现网页地址栏里的小图标，需要3步：
- 制作小图标PNG图片
- 利用图标转换工具，如：比特虫，将PNG格式的图标转换为48*48的favicon.ico格式的图标
- 将图标引入<head></head>页面。一般会放在文件根目录下
/*记得修改文件路径*/
<link rel="shortcut icon" href="favicon.ico" />9 网站TDK三大标签SEO优化
SEO（搜索引擎优化），指利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
- title：网站名（产品名）-网站的介绍（尽量不超过30个字）
- description：简要说明网站主要是做什么的。多采用“我们是...”、“我们提供...”等语句。
- keyword：页面关键字，搜索引擎的关注点之一。采用关键字1,关键字2,关键字3的样式，一般关键字为6-8个。
39
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
