Web前端学习笔记——HTML部分

关于HTML

1. HTML（Hyper Text Markup Language）：超文本标记语言。

2. HTML的作用：由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，用于定义页面结构。

3. 元素=起始标签+元素内容+结束标签+[标签属性]
   标签属性=属性名称+属性值；
   属性分类：
   全局属性：所有标签通用。
   局部属性：某些标签所特有的。
   对于布尔属性，只有两种状态即不写或者取值只能为其属性名。（在HTML5中，书写时可以省略其属性值） 例如：controls（显示控件）、muted（静音播放）、autoplay（自动播放）、loop（循环播放）
   如下图：

4. 空元素：没有结束标签的元素。

5. 空元素的两种表达形式：
   < meta charset=“utf-8” /> （旧版本所使用的）；
   < meta charset=“utf-8” > （新版本HTML5所使用的）
   （charset：指定网页内容编码）

6. 根元素：< html lang =“cmn-hans” > 内容< /html >，是其他元素的父元素或者祖先元素，且一个页面中最多一个，HTML5版本中可以省略不写，但若要兼容之前的版本则必须写。

7. lang属性：language，全局属性，表示该元素内部使用的文字属于何种自然语言。
   例如：lang =“cmn-hans” 表示该文档使用的是中国官方标准——中文简体

8. < head >内容< /head >：文档头，文档头内部的内容不会显示在页面上

9. < body>内容< /body>：文档体，用于放置所有待显示的元素。

10. < !DOCTYPE html >：文档声明，用于告知浏览器当前文档使用的HTML标准 是HTML5。（若不写文档声明则将会导致浏览器进入怪异渲染模式。）

11. 语义化：选择什么元素标签取决于元素内容的含义而不是其显示效果。 （故根据显示时是否独占一行来区分行级元素和块级元素的说法已在HTML5中弃用）

12. 空白折叠：在源代码中连续的空白字符（空格、换行、制表），在页面显示时会被折叠成一个空格。（发生在行盒/行块盒内部或者行盒/行块盒之间）

13. < pre > 内容< /pre >：有着默认的css属性，其内容会按照源代码格式显示在页面上，不会出现空白折叠，故常用来显示代码。

14. figure元素标签：用于把相互关联的图片、图片标题、描述等包裹起来（其中图片标题可用其子元素标签figcaption包裹起来）

15. 图片元素：< img usemap="# mapID" src=“图片地址” alt=" “>
    < map name=“mapID” > < area shape=“形状（圆形/矩形/多边形） " coords=” 坐标位置（圆心坐标及其半径/左上角和右下角坐标/所有顶点的坐标）” href=" " alt=" " target =" ">< /map >

16. XML（extension markup language）：可扩展的标记语言。

17. XML的作用：用于定义文档结构。

18. VSCODE快捷键：
    ctrl + shift + enter：在当前行切换至上一行；ctrl：在当前行切换至下一行；
    ！+ tab：快速生成基本的HTML文档结构；
    h$ * n>{hello $} + enter：快速生成n个内容为hello $的不同级别标题；
    p* n>lorem + enter：快速生成n个内容为没有任何含义的英文字母的p标签；
    (元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} + enter：快速生成元素标签1和兄弟标签2的相邻模式；
    （ (元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} ）· n + tab：快速生成n个元素标签1和兄弟标签2的相邻模式；
    元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} + enter：快速生成元素标签1包含兄弟标签2的组合模式；
    （元素标签1>{元素内容1}) + 兄弟标签2>{元素内容2} ）· n + tab：快速生成n个元素标签1包含兄弟标签2的组合模式；
    loremk + enter：快速生成k个没有任何含义的英文字母。

19. 实体字符：用于在页面中显示一些特殊符号。
    写法：
    &单词；，例如：>； 等价于 ＞
    &#数字；，例如：<； 等价于 <

20. 超链接：< a href=“链接地址”> 内容< /a >
    href（hyper reference）：表示跳转地址或某个锚点。
    target：表示跳转窗口位置。取值可能有如下：
    _self：表示在当前页面打开，为默认值。
    _blank：表示在新窗口打开。

21. 链接类型：
    普通链接
    锚链接：ID属性为全局属性，即表示元素在文档中的唯一编号。
    功能链接：点击后触发某个功能。
    例如：执行JS代码，发送邮件（要求用户计算机上安装有邮件发送软件）；拨号（要求用户计算机上安装有拨号软件或使用移动端进行访问）

22. 路径的写法：
    站内资源：当前网站的资源。采用相对路径。
    站外资源：非当前网站的资源。采用绝对路径。
    绝对路径书写格式：
    协议名://主机名:端口号/路径（schema://host:port/path）；
    相对路径书写格式：
    例如：./html/index.html
    ./ 表示当前资源所在目录，可省略。
    …/ 表示返回上一级目录。
    （若为http协议，则默认端口号为80；若为https协议，则默认端口号为443）

23. 媒体元素
    视频标签：< video > < /video >
    音频标签：< audio > < /audio >
    controls：控制控件的显示，取值只能为controls。
    （不同浏览器支持的音视频格式可能不一致）

24. 列表元素
    有序列表：ol（ordered list） li（list item）
    无序列表：ul（unordered list） li（list item）
    定义列表：
    dl（definition list）
    dt（definition title）
    dd（definition description）
    （无序列表常用于制作菜单或新闻列表）

25. 容器元素：表示一个区域，内部用于放置其他元素。
    没有语义化的容器元素：div、span
    语义化的容器元素：
    header：用于表示页头或者文章的头部。
    footer：用于表示页脚或者文章的尾部。
    article：用于表示文章正文。
    section：用于表示文章章节。
    aside：用于表示侧边栏。

26. 元素包含关系：
    旧版本：块级元素可以包含行级元素，但行级元素不可以包含块级元素（a元素除外）；
    HTML5版本：元素的包含关系由元素的内容类别即其语义所决定。
    快速查看方法：在百度搜索框内输入标签名 mdn并搜索。
    注意：
    

27. iframe元素
    为可替换元素，用于在网页中嵌入另一个页面，一般为行盒，显示的内容取决于元素的属性，CSS不能完全控制其中的样式，具有行块盒特点，

28. 在页面中使用flash
    object、embed：它们都是可替换元素
    多用途互联网邮件类型MIME（Multipurpose Internet Mail Extensions）

29. 表单元素
    一系列，主要用于收集用户数据。
    input元素：
    输入框
    type：输入框类型。（type取值为reset、submit、button时，input为按钮）
    value：输入框的值。
    placeholder：显示提示的文本，文本框没有内容时显示。
    select元素：下拉列表选择框，通常和option元素配合使用。
    textarea元素：文本域，多行文本框。
    datalist元素：数据列表，该元素本身不会显示到页面，通常用于和普通文本配合。
    button元素：按钮（type取值可以有reset、submit、button）；
    label：标签文本，通常配合单选和复选框使用。
    显示关联：可以通过for属性，使label元素关联某一个表单元素（for属性书写表单元素id的值）；
    隐式关联：在label元素里嵌套表单元素。
    form元素：会将整个表单元素，放置form元素的内部，当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
    fieldset元素：表单分组。（legend：分组标题）
    表单状态：
    readonly：布尔属性，表示是否表单可读，不会改变表单显示样式。
    disabled：布尔属性，表示是否禁用，会改变表单显示样式。