HTML 总结

由来

首先介绍一下HTML的由来，它是由Tim Berners-Lee(李爵士)和Daniel W.Connolly 于1990年创立。它的全称是超文本标记语言，能将所需要的表达的信息按照某种规则写成HTML文件，通过浏览器来识别并将这些HTML文件翻译成可以识别的信息，即我们现在所看到的网页。

1.HTML 的起手式

打开编译器，我暂时用的是 VS code ，打开创建好的文件夹，新建.html类型文件。

代码如下：

<!DOCTYPE html>
<!-- 文档类型 -->
<html lang="en">
<!-- html 标签 可以把lang 改成zh-CN 中文页面 -->

<head>
    <meta charset="UTF-8" />
    <!-- 文字的字符编码 -->
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0" />
    <!-- 禁止缩放 兼容手机 -->
    <title>我的网页</title>
    <!-- 网页显示的标题 -->/head>

    <!-- 网页的主干 -->

    <body>

    </body>

</html>

2. HTML 的章节标签

目前标签大概有110个，不可能一下全记住，根据类型进行记忆。其他的可以通过查阅 MDN来获取其相关的用法。

表示文章/书的层级

标签如下：

标题 h1~h6
章节标签 section
文章标签 article
标签段落 p
头部 header
脚部 footer
主要内容 main 
旁支内容aside
划分 div

3.全局属性

结合意思可理解为，所有标签都有的属性。

属性如下:

class 类属性：根据类来进行选择
contenteditable 枚举属性：表示元素是否可被用户编辑
hidden 隐藏属性：表示元素是否要隐藏
id 唯一属性：全文档唯一的标识符
style 样式属性：本身属性的优先级大于css,但小于js的优先级(js可以覆盖)
tabindex 聚焦属性： 元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航
title 标题显示属性：表示咨询信息文本，和它属于的元素相关，作为提示信息展示给用户。
注：如果文章内容不能完全显示可用：text-overflow:ellipsis 会将超出的部分用省略号表示。

4.内容标签

在写HTML样式的时候，一般会有reset.css可将默认的样式修改成自己想要的style。

代码如下:

/* 以下代码初始化必写 */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

*::after,
*::before {
   box-sizing: border-box;
   /* 伪类元素选择器 */
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: normal;
}

a {
   color: inherit;
   text-decoration: none;
}

ul,
ol {
   list-style: none;
}

table {
   /* 决定表格的边框是合并的 */
   border-collapse: collapse;
   /* 决定相邻单元格边框之间的距离 */
   border-spacing: 0;
}


/* 代码开始 */

内容标签是在body里进行书写，基本代码如下：

ul li 无序列表
ol li 有序列表
dl dt dd 分级列表
pre 预定义格式文本，如果换行符紧跟其后也会被删掉
hr 分割线
br 换行
a  链接
em 文本倾斜 
strong 文本加粗，优先级大于em 
code 代码等宽，浏览器的默认等宽字体显示
q  表示一个封闭的并且是短的行内引用的文本
blockquote  HTML 块级引用元素

小结

根据类型进行对标签的学习和记忆，比较方便、效率高。

ps:作为小白，如果标签没有显示，该如何排查呢？

VS code 自查；
webstorm 自查
W3c validator 网页版检查

复习HTML

HTML 总结

由来

1.HTML 的起手式

2. HTML 的章节标签

3.全局属性

4.内容标签

小结