HTML1
HTML
标签分类
行内元素
- span
- a
- b, i, em, strong, del, ins, u, s
- label（经测试，不能直接设置宽度、高度；可以通过设置display: block; 转换为块级元素）
其中 span 是最典型的行内元素，也称內联元素
特点
- 相邻行内元素在一行上，一行可以显示多个
- 宽度、高度直接设置无效，默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素（可以放行内块元素吗？）
注意事项
-
链接里面不能再放链接
-
特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式（display: block;）最安全
块元素
- h1-h6
- p
- div
- ul, ol, li
其中 div 是最典型的块元素
特点
- 自己独占一行
- 宽度、高度、内边距、外边距可以设置，宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内元素、块级元素
注意事项
- 文字类的元素内不能使用块级元素
- p 主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放div
- h1~h6等都是文字类块级元素，里面也不能放其他块级元素
行内块元素
- img
- input
- td
- button（测试了一下，可以设置宽度、高度）
特点
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素的特点）
- 高度、行高、内边距、外边距可以设置（块级元素特点）
- 同时具有块元素和行内元素的特点
总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内的宽度 |
img
必需的属性
- src
- alt
可选的属性
- align，对齐方式
- border，边框
- width，宽度
- height，高度
- hspace
- ismap
- longdesc
- usemap
- vspace
从w3school的title属性中，可以看w3school可能没有充分更新
alt=“图片加载失败”，替换文本
tiltle=“商品名称”, 提示文本
注意事项
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即key=”value“的格式，属性=”属性值“
- 请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 “title” 文本
- 如果无法显示图像，将显示 “alt” 属性中的文本
- width和height，修改一个，另一个跟着等比例缩放，不会出现太大压缩问题，不会失真
- border=“15”,给图片加边框，但是不经常这样做，而是通过CSS来修改，并且可以修改为圆角
路径
- 相对路径
- 绝对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如 |
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例：
D:\web\img\logo.gif
http://www.itcast.cn/images/logo.gif
超链接
href
target="_self", 默认页
target="_blank", 新的页面
target="_top"，表示什么意思？
外部链接
<a href="http://www.baidu.com">百度</a>
内部链接
<a href="gongsijianjie.html" target="_blank">公司简介</a>
空链接
<a href="#">公司地址</a>
下载链接
<a href="img.zip">下载文件</a>
网页元素链接
<a href="http://www.baidu.com"><img src="img.jpg" /></a>
锚点链接
在连接文本的href属性中，设置属性值为#名字的形式，如
<a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如
<h3 id="two">第2集介绍</h3>
文本格式化标签
b, strong
i, em
s, del
u, ins
加粗
b, strong
倾斜
i, em
删除线
s, del
下划线
u, ins
| 语义 | 标签 | shuoming |
|---|---|---|
| 加粗 | 或者 | 更推荐使用标签加粗 语义更强烈 |
| 倾斜 | 或者 | 更推荐使用标签加粗 语义更强烈 |
| 删除线 | 更推荐使用 | |
| 下划线 | 或者 | 更推荐使用标签加粗 语义更强烈 |
自己试了一下，两种情况，几乎没有区别，之后再具体看看有什么区别吧
<div>标签用来布局的，但是现在一行只能放一个<div>,大盒子
<span>标签用来布局，一行可以多个<span>,小盒子
表格标签
<table> <tr> <th>姓名</th> </tr></table>
th, 表示HTML表格的表头部分（table head 的缩写）
表头单元格里面的文本内容加粗居中显示
表格属性
表格标签这部分属性，实际开发我们不常用，后面通过CSS设置
目的2个：
- 记住这些单词，后面CSS会使用
- 直观感受表格的外部形态
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 表格相对周围元素的对齐方式 |
| border | 1或"" | 表格单元是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 表格的宽度 |
| height | 像素值或百分比 | 表格的高度 |
表格结构标签
- ,定义表格的头部，内部必须拥有标签
- ,定义表格的主体，主要用于放数据主体
- 以上标签都是放在
标签中
合并单元格
合并单元格方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
- 先确定是跨行，还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格数量，比如：
- 删除多余的单元格
列表标签
无序列表
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li></ul>
- 无序列表中的各个列表项之间没有顺序级别之分，是并列的
- ul只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的
- li之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
有序列表
ol标签用于定义有序列表，列表排序以数字来显示，并且使用li标签来定义列表项
- ol中只能嵌套li，直接在ol标签中输入其他标签或者文字的做法是不被允许的
- li之间相当于一个容器，可以容纳素有元素
- 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置
自定义列表
dl
dt
dd
- dl里面只能包含dt和dd
- dt和dd里面可以放任何标签
表单标签
表单的组成
表单由表单域、表单控件（表单元素）、提示信息组成
表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
input表单元素
type属性、属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段，该字段中的字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
除type属性外，input标签还有其他很多属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name表单元素的名字，要求 单选按钮和复选框要有相同的name值
- checked属性主要针对单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素
- maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
label标签
label标签为input元素定义标注（标签）
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来提升用户体验
<label for="sex">男</label><input type="radio" name="sex" id="sex" />
核心：label标签的for属性，应当与相关元素的id属性相同
select表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间，可以使用select标签控件定义下拉列表
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ...</select>
- select中至少包含一对option
- 在option中定义 selected="selected"时，当前项即为默认选中项
textarea表单元素
<textarea rows="3" clos="20"> 文本内容</textarea>
- 通过textarea标签可以创建多行文本输入框
- cols=“每行中的字符数” ， rows=“显示的行数”，在实际开发中不会使用，都是用CSS来改变大小
参考链接：
MDN:https://developer.mozilla.org/zh-CN/
音视频
audio
支持的属性
- autoplay
- controls
- loop
- muted，没测试成功
- preload
- src
video
支持的属性
- autoplay，在chrome中，好像不管用，自己试了，不会自动播放，除非添加上静音 muted，就可以自动播放了
- controls，显示控件，如播放按钮
- width
- height
- loop，循环播放
- muted
- poster
- preload
- src
不支持 align=“center”，video标签没有align属性
参考链接：https://www.w3school.com.cn/tags/tag_video.asp
单标签
meta
br
hr
img
input
meta
meta，位于 head 内部
br
br，表示换行
br 和 hr 区别
br，简单换行
hr，线段分隔，同时换行
br 和 p 的区别
br，简单换行
p，换行，并且中间加一空白行
hr
hr，线段分隔
img
input
其他标签
iframe
会创建包含另外一个文档的內联框架（即行内框架）
问题
- 使用场景，有什么用
- 是行内元素、块元素、还是行内块元素
路径
相对路径
绝对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如 |
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例：
D:\web\img\logo.gif
http://www.itcast.cn/images/logo.gif
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 |   ; | |
| < | 小于号 | < ; |
| > | 大于号 | > ; |
| & | 和号 | & ; |
| ¥ | 人民币 | ¥ ; |
| © | 版权 | © ; |
| ® | 注册商标 | ® ; |
| ° | 摄氏度 | ° ; |
| ± | 正负号 | ± ； |
| × | 乘号 | × ; |
| ÷ | 除号 | ÷ ; |
| ² | 平方2（上标2） | ² ; |
| ³ | 立方3（上标3） | ³ ; |
HTML2
HTML简介
span
定义文档中的节
标签被用来组合文档中的行内元素
标签支持 HTML 中的全局属性
标签支持 HTML 中的事件属性
center
定义居中文本
不推荐使用，推荐使用CSS来修饰
整理的单<>的标签
acronym
<acronym title="World Wide Web">WWW</acronym>
- 通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息
- title属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本
bdi
bdi指的是bidi隔离
标签允许您设置一段文本，使其脱离其父元素的文本方向设置
在发表用户评论或其他您无法完全控制的内容时，该标签很有用
然而，目前，自己并没有体会到有什么作用
dir
定义目录列表
插件
利用插件在浏览器中预览页面：单击鼠标右键，在弹出框中，点击 “Open Default Browser”
| 插件 | 作用 |
|---|---|
| Chinese(simplified)Language Pack for VS Code | 中文（简体）语言包 |
| Open in Browser | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，都会自动格式化js, css和html 代码 |
| Auto Rename Tag | 自动重命名配对的HTML/XML标签 |
| CSS Peek | 追踪至样式 |
安装插件后，重新加载
安装中文（简体）语言包后，需要重启VS code
注意 JS-CSS-HTML 这个插件不要安装了，非常不好用
切记：安装完插件后，一定好重启软件，如何在插件详情页，点击 重新加载
注释
快捷键：ctrl+/
HTM
input这个行内块元素，设置完宽度，高度，在设置内边距、边框、外边距的时候，内边距、边框、外边距会吃掉 input 的宽度和高度
input默认带边框 上下左右各 2px
div 默认带外边距 上下外边距 8px（好像是上下左右各带外边距 8px）
