HTML & DayOne

HTML 是不可以扩展的； 在HTML4-HTML5两个版本之间，有一个XHTML，该版本就是可以扩展的，所以 XHTML 现在有时候也还在使用。

互联网

网站与网站之间，通过互联网相互连接。互联网里面的彼此通过一组通用的网络协议，形成逻辑上的单一巨大国际网络。

静态网页和动态网页

静态网页：HTML代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了，除非你修改了页面代码。 动态网页：页面代码虽然没有变，但是显示内容确实可以随着时间，环境或者数库操作的结果而发生改变的。

⚠️：不要讲动态网页和页面内容里是否有动画效果混为一谈，比如网页中的幻灯片效果，文字滚动效果等，如果页面内容本身没有变化，那么仍然属于静态网页。所以是依据数据的渲染，数据是不是写死的来判断是不是动态网页。

浏览器内核

  1. Trident内核：代表产品为IE，是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有IE、遨游、世界之窗浏览器，腾讯TT等等。
  2. Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，用C++编写的排版引擎。使用它最著名的浏览器有Firefox，Netscape 6至9（升级速度过快）。（启动速度较慢，但优势在开源）
  3. Webkit内核：代表产品有Safari，主要用于Mac OS系统。使用它的浏览器是Safari和谷歌的Chrome。（2013年之后就宣布没用Webkit内核了，但其实Blink内核也是Webkit内核的一个分支）
  4. Presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界上公认渲染速度最快的引擎。其在13年，宣布加入了谷歌阵营。（现已弃用）
  5. Blink内核：由谷歌和Opera Software开发的浏览器排版引擎，2013年发布。现在Chrome和Blink的内核都是Blink。

浏览器内核由 渲染引擎 和 JS引擎

国内浏览器大多数采用的都是双核，其中一核就是Trident内核，另一核就是Gecko。

⚠️

  1. iPhone、iPad用的就是Webkit内核，所以移动端开发的时候注意；
  2. 安卓4.4之前用的也是Webkit，4.4之后就是用的Blink内核了。

HTML标签

HTML文档结构

.html文件必须以开头结束； 这里面包含1、2：

  1. head：主要是用来完成一个网页的相关设置;
  2. title：标题
  3. <meta charset="utf-8">汉字编码
  4. <meta name="keyword" content="">➡""里面写关键字，设置一个网站的搜索关键字<meta name="description" content="">➡""里面写的是网站的描述内容
    （主要是在后期做搜索引擎优化的时候，从这两个里面提取对应的关键字。）meta 是“元”的意思。主要是用来完成对应设置的。meta后面有各种对应的不同设置
  5. 设置网站的小图标<link rel="shortcut icon" href="" type="image/x-icon"> type是图片的类型，如果是png，你可以把x-icon改成png，不改也可以。
    如果是本地图片，就拷贝图片的路径到href=""里去就好了。
  6. body：不可缺少的。但head可以根据实际需求进行省略的。
  7. 逻辑性代码，即要进行一些运算的代码。JS也是放这里面。

Script 可以写在body里，也可以写在body外边。

  1. style：书写样式的地方。也可以将样式书写成文件，这样可以直接引入。引入：link rel="stylesheet" href="style.css" stylesheet就是样式表，stylecss是样式文件。

<!DOVTYPE html> ！表示声明的意思；html 默认表示html5的意思；该行代码的意思是，下面的文档标签将以html5规范去解析。

基础标签

1、<html lang="en"> : 意思是默认语言是英语；

2、<div>：是用来布局的，没有具体含义；

3、<p>：表示段落，相当于一个回车；

4、<br>：有换行效果；（单标签）； 后期要更规范地写的时候，可以 <br /> 这样去写，更规范。

5、<hr>：生成一条水平线，主要起装饰作用。（单标签）； 默认颜色是黑色，高度是 1 px，宽度是 100% 。 也尽量是将其闭合一下，写成<hr />。

6、<hr>给高度赋值用 size

7、<a>：用来设置超文本链接，实现链接跳转。 超链接可以是一个字，一个词，或一组词，也可以一幅画像，点击这些内容可以跳转到新的文档。

  • href
  • title
  • target 设置链接跳转的方式；
  • _blank
  • _self
  • _parent
  • _top

8、<img> 用来加载外部图片、图像（单标签）。 是 行级块标签，img 虽然是一个行内标签，但它识别宽/高； 相当于执行了 display:inline-block 。

9、src

10、alt

11、title

12、<span>

13、<ul> / <ol> 列表，前者是无序列表，后者是有序列表。 ul>li{li$}*3 表示：ul 下面 有三个包含 $（序号，此处表示从1到3） 内容的 li 。

标签属性

<p title="段落"> 这是一个测试段落 </p> 这里面，

叫做标签；title 是属姓名，""里面的是属性值。

Id 和 class 的值可以相同。

文本格式化标签

文本格式化标签：就是通过标签来美化文本外观。

  1. 【 b 】和【 strong 】 都有加粗作用，但 strong 除了加粗，还有强调作用。 从外观上看，没有差别。 强调主要是便于 SEO 时，提取对应关键字。 也都是行内 / 行级标签，不会换行 / 独占一行，也不能设置宽高。
  2. 【 i 】和【 em
  3. 【 pre 】 预格式化文本，被包围在中，文字通常会保留空格和换行符，文本也会呈现为等宽字体？？？。但显示在浏览器中的字号会小一号？？？。 用得很少，因为我们其实可以通过样式来布这个局。 是块级标签（独占一行）。
  4. 【 small 】和 big 分别让文字缩小一号或大一号。是行级标签。 big 在 HTML5 中是已经淘汰掉了的，但并没有被删除，还是能用，不过开发中尽量不要使用，因为可能以后就不能用了。 浏览器支持的最小字号为 12 px 字，如果是要显示比 12 px 小的字号，需要另外做处理。
  5. 【 sub 】和【 sup
  6. sub 是英语中的一个常见前缀。 表示在某某之下，下面的，潜在的，如 subway 地下铁，subsoil 低层土，submarine 潜水艇； 表示级别上低人一等，副，如 subeditor 副编辑，subtitle 副标题。
  7. sup 前缀，表示在什么之上。

单标签必须要闭合。

HTML 实体转义

实体转义的一个特点是：以 & 开头，以 ；号结束。

HTML 块级元素和行内元素

根据 W3C 规定，每一个网页元素都有一个 display 元素。用以确定该元素的类型，每一个元素都有默认的 display 值。 比如，div 元素，其 display 默认值就是 block ，成为块级元素（block-level）；而 span 元素的默认 display 属性值为 inline ，称为行内元素。

块级元素（相当执行了 display: block

  1. 独占一行；
  2. 高度和宽度是可控的。如果没有设置宽度，将默认铺满整行。
  3. 其内可以包含块级和行级元素。

行级元素（相当于执行了 display: inline

  1. 不会独占一行，与相邻的行级元素占同一行，直到行占满，才会自动转到下一行。
  2. 宽度和高度是不可控的。
  3. 其内只有包含行级元素。

行级元素 和 块级元素 是可以转换的。 块级元素 ➡️ 行级元素：在块级标签中加入 display: inline。 行级元素 ➡️ 块级元素：在行级标签中加入 display: block。

一共学过的块级标签和行内标签：

1、块级标签：( display:block )

  1. div
  2. p
  3. h1 - h6
  4. ul
  5. ol
  6. pre
  7. table
  8. address

2、行内标签：( display:inline )

  1. span
  2. a
  3. b
  4. strong
  5. i
  6. em
  7. sup
  8. sub

3、行级块标签 ( display:inline-block )

  1. img

W3C

即 万维网联盟（ World Wide Web ） 一个专门负责统一 Web 相关的各项标准的国际性中立组织。

W3C 标准由 结构 表现 和 行为

标签嵌套标准

  1. 块元素中可以包含行级某些块元素； 行级元素却不能包含块元素，只能包含其他行级元素。
  2. p 标签里不能放块元素。
  3. h1, h2, h3, h4, h5, h6 , p , dt 这几个块元素只能包含行级元素。
  4. 块元素和块元素并列；行级元素和行级元素并列；行级元素和块级元素不能并列。 <div><h1></h1><span></span></div> ❌ h1 是块元素，span 是行元素，不能并列。这种嵌套是错误的。

HTML语义化标签

通俗说，就是明白每个标签的用途，在不同的地方使用合适的标签。

  1. <a>
  2. <p>
  3. <hx>标签：标题用。从 h1 到 h6 递减（块级标签）。
  4. <strong> 或 <em>：特别强调某几个字。 但<strong>表示比<em>更强烈的强调， 并且在<em>是默认用 斜体 表示，<strong>是默认用 粗体
  5. <q>：短文本引用。浏览器解析出来之后会给文本加上引号。
  6. <address>：为网页加入地址信息。默认是斜体效果。
  7. <ul>：无序列表。
  8. <ol>：有序列表。
  9. <caption>：为表格添加标题和摘要。 摘要的内容不会在浏览器中显示出来，其作用是使搜索引擎更好地读懂表格内容（语义化更友好），还可以是屏幕阅读器更好地帮助特殊用户读取表格内容。

为啥要用语义化标签：

  1. 更容易被搜索引擎收录；
  2. 更容易让屏幕阅读器读出网页内容；
  3. 能够更好的体现页面的主题；
  4. 兼容性更好，支持更多的网络设备。

文件命名规范

  1. 项目开发过程中，项目里的文件名或目录名 不能出现 汉字 和 空格
  2. 文件名和目录名 一般以 字母 和 下划线
  3. 首页命名 必须是 index.html , 产品页可以用 product.html , 命名要尽量规范。

表格

<table border="1"> <!--这里面的 border 是双线边框-->
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- tr 代表一行 -->
<!-- th 指的是表头 -->
<!-- td 指单元格 -->
<tr>
<td>160160127</td>
<td>nansen ho</td>
<td>22</td>
</tr>
</table>

  1. table
  2. tr
  3. td & th