本文目录🧾
-
HTML简介
- 1）什么是HTML？
- 2）一个简单的HTML文档
- 3）HTML页面结构
- 4） <!DOCTYPE>声明
- 5）HTML编辑器
- 6）HTML基本范例
- 7）HTML元素
- 8）HTML属性
- 9）HTML标题
- 10）HTML段落
- 11）HTML样式
- 12）HTML格式元素
- 13）HTML引用和引用元素
- 14）HTML注释标签
- 15）颜色
- 16）CSS
- 17）HTML链接
- 18）HTML链接颜色
- 19）HTML链接-创建书签🔖
- 20）HTML图片 img
- 21）HTML图片地图 image-map
- 22）背景图片 background-image
- 23）HTML图片元素 picture
- 24）HTML表格
- 25）HTML列表
- 26）HTML块和内联元素
- 27）HTML类属性 class
- 28）HTML id属性
- 29）HTML iframe
- 30）HTML JavaScript
- 31）HTML文件路径
- 32）HTML head
- 33）HTML布局
- 34）HTML响应式网页设计
- 35）HTML计算机代码元素
- 36）HTML语义元素
- 37）HTML实体
- 38）HTML符号
- 39）HTML字符集属性
- 40）HTML 统一资源定位符URL
- 41）HTML和XHTML
- 42）HTML样式指南和编码约定
正文部分📝
开启MPI并行减肥与求职之路啦～🥳
今天开始看W3Cschool的HTML教程，大一那会用的是H4，如今都用H5了，所以得仔细做笔记，不要弄混啦！另外上web technologies时，老师说要减少css style的使用，尽量都写在css文件里～✍🏻
HTML简介
1）什么是HTML？
- 代表了超文本标记语言
- 描述了网页的结构
- 由一系列元素组成
- 告诉浏览器如何显示内容
- 元素由标签表示
- 标记了诸如标题、段落、表等内容
- 浏览器不显示HTML标记，而是使用它们来呈现页面内容
2）一个简单的HTML文档
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
-
<!DOCTYPE html>声明定义这个文件是HTML5 -
<html>是一个HTML页面的根元素 -
<head>包括关于文档的元信息 -
<title>指定该文档的标题 -
<body>包含可见页面内容 -
<h1>定义了一个大标题 -
<p>定义了一个段落
3）HTML页面结构
4） <!DOCTYPE>声明
-
该
<!DOCTYPE>声明代表文档类型，并有助于浏览器正确显示页面。 -
它只能在页面顶部（在任何HTML标记之前）出现一次。
-
该
<!DOCTYPE>声明不区分大小写。 -
<!DOCTYPE>HTML5的声明为：<!DOCTYPE html>
5）HTML编辑器
- 推荐使用记事本/TextEdit，选择纯文本格式
- 保存为HTML格式，编码设置为UTF-8，后缀用.htm/.html均可
6）HTML基本范例
-
所有HTML文档必须以文档类型声明，开头为
<!DOCTYPE html> -
文档本身以
<html>开头和</html>结尾 -
HTML文档的可见部分在
<body>和</body>之间 -
HTML标题是使用
<h1>到<h6>标记定义的，其中<h1>是最重要的标题 -
<p>用来标记定义html段落 -
HTML链接用
<a>标记定义，链接在href属性中指定<a href="https://www.w3schools.com">This is a link</a> -
HTML图片用
<img>标签定义，源文件(src)，替代文本(alt)，width和height作为属性提供：<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> -
HTML按钮使用
<button>标记定义，如：<button>Click me</button> -
HTML列表是用
<ul>(无序/项目符号列表)或者<ol>（有序/编号列表）标签定义的，其后是<li>标签（列表项）：<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
7）HTML元素
- 没有内容的HTML元素称为空元素，空元素没有结束标签，例如
<br>元素(表示换行)。 - HTML5不需要关闭空元素，即使用
<br/>，但如果想进行更严格的验证或需要使用XML解析器可以读取文档，则必须关闭所有HTM元素。 - HTML元素可以嵌套，元素可以包含元素。
- HTML不区分大小写！HTML5不需要小写标记，但更建议在HTML中使用小写，XHTML要求小写。
8）HTML属性
-
所有HTML元素都可以具有属性
-
属性提供有关元素的其他信息
-
属性始终在开始标记中指定
-
属性通常以名称/值对的形式出现，例如：name=”value”
-
href属性：在
<a>标签中指定链接地址<a href="https://www.w3schools.com">This is a link</a> -
src属性：在
<img>标签中定义图像源<img src="img_girl.jpg"> -
Width和height属性：指定图像的宽度和高度
<img src="img_girl.jpg" width="500" height="600"> -
alt属性：如果无法显示图像，则该属性指定要使用的替代文本
<img src="img_typo.jpg" alt="Girl with a jacket"> -
style属性：用于指定元素的样式，例如颜色，字体，大小等(CSS会学的)
<p style="color:red">This is a red paragraph.</p> -
lang属性：在
<html>标签中声明文档的语言<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> -
title属性：将
<title>属性加到<p>元素，将鼠标悬停在段落上时，title属性的值将显示为工具提示<p title="I'm a tooltip"> This is a paragraph. </p> -
属性始终要引用引号：“ ”
-
在HTML中，属性值周围的双引号是最常见的，但是也可以使用单引号。当属性值本身包含双引号时，有必要使用单引号。
<p title='John "ShotGun" Nelson'>如果属性值本身包含单引号，有必要使用双引号。
<p title="John 'ShotGun' Nelson">其他属性信息：
Attribute Description alt Specifies an alternative text for an image, when the image cannot be displayed disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element src Specifies the URL (web address) for an image style Specifies an inline CSS style for an element title Specifies extra information about an element (displayed as a tool tip)
9）HTML标题
- 标题有
<h1>至<h6>，其中<h1>最重要 - 仅将html标题用于标题，不要在文本中使用标题使其变大变粗
- 每个HTML标题都有一个默认大小，可以使用
style中加入CSSfont-size属性指定任何标题的大小 -
<hr>大多数情况下显示为一条水平线，用于分离HTML页中的内容 -
<head>是元数据的容器，元数据是有关HTML文档的数据，放置在<html>和<body>之间
10）HTML段落
-
<p>元素定义了一个段落，浏览器会在段落之前和之后自动添加一些空白 -
无法确定HTML的显示方式，调整窗口大小会产生不同的结果，无法通过在HTML代码中添加额外空格或行来更改输出
-
显示页面时，浏览器将删除所有多余的空格和多余的行
-
不要忘记结束标记，丢弃结束标签可能会产生意外的结果或错误
-
<br>定义换行符，如果要使用<br>，无需单独开启一个新的段落 -
<pre>元素定义了预格式化的文本，<pre>元素内的文本以固定宽度的字体（通常为Courier）显示，并且保留空格和换行符。
11）HTML样式
-
可以使用
<style>属性设置HTML元素的样式 -
<style>属性具有以下语法，该属性是CSS属性：<tagname style="property:value;"> -
用
background-color属性定义HTML元素的背景色：<body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> -
color属性定义HTML元素的文本颜色 -
font-family属性定义用于HTML元素的字体 -
font-size属性定义HTML元素的文本大小 -
text-align属性定义HTML元素的水平文本对齐方式
12）HTML格式元素
-
<b>: 粗体 -
<strong>: 重要文字 -
<i>: 斜体文字 -
<em>: 强调文字 -
<mark>: 标记文字，有底色加亮 -
<small>: 小文字 -
<del>: 删除的文字，有删除线 -
<ins>: 插入文字，有下划线 -
<sub>: 下标文字 -
<sup>: 上标文字 - 浏览器显示
<strong>为<b>，<em>作为<i>。但是，这些标记的含义有所不同，<b>和<i>定义了粗体和斜体文本，但是<strong>和<em>更能表示该文本“重要”。
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
13）HTML引用和引用元素
-
<q>元素定义了短引号，浏览器将在元素周围插入引号<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p> -
<blockquote>进行文本缩进<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> -
<abbr>元素定义缩写或首字母缩写词，标记缩写词可以为浏览器，翻译系统和搜索引擎提供有用信息<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> -
<address>元素定义文档或文章的联系信息，该元素通常以斜体显示。大多数浏览器都会在元素之前和之后添加一个换行符<address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> -
<cite>元素定义了作品的标题，通常用斜体显示元素<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p> -
<bdo>元素定义了双向替代，用于覆盖当前文本方向<bdo dir="rtl">This text will be written from right to left</bdo>
14）HTML注释标签
- 开始标记中有一个感叹号，结束标记中没有
<!-- write your comments here -->
- 通过注释来放置提醒和通知
- 也可以通过注释代码来查找调试代码
15）颜色
-
可以设置背景色
<p style="background-color:Tomato;">Lorem ipsum...</p> -
可以设置文字颜色
<h1 style="color:Tomato;">Hello World</h1> -
可以设置边框的颜色
<h1 style="border:2px solid Violet;">Hello World</h1> -
在HTML中，还可以使用RGB值，HEX值，HSL值，RGBA值和HSLA值来指定颜色
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> - rgba(红色，绿色，蓝色，alpha)是rgb颜色值的扩展，它指定了颜色的不透明性
- HEX（十六进制颜色）：#RRGGBB其中rr（红色），gg（绿色）和bb（蓝色）是介于00和ff之间的十六进制值（与十进制0-255相同）。例如，＃ff0000显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
- HSL颜色：在HTML中，可以使用色相，饱和度和亮度（HSL）形式指定颜色。其中色相是色轮上从0到360的度。0是红色，120是绿色，240是蓝色。饱和度是一个百分比值，0％表示灰色阴影，而100％是全色。亮度也是百分比，0％是黑色，50％既不是明暗也不是，100％是白色。
- HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-它指定了颜色的不透明度。
16）CSS
-
CSS代表级联样式表，CSS描述了HTML元素如何在屏幕上显示。
-
有三种方式将CSS添加到HTML元素：
-
内联：通过在HTML元素中使用style属性
<h1 style="color:blue;">This is a Blue Heading</h1> -
内部：在
<head>元素中定义<style><!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> -
外部：使用外部CSS文件(不得包含任何html代码，必须以.css扩展名保存)
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
-
-
最常见的方法是将样式保存在单独的CSS文件中
-
将CSS
color属性用于文本颜色 -
将CSS
font-family属性用于文本字体 -
使用CSS
font-size属性设置文字大小 -
使用CSS
border属性设置边框 -
使用CSS
padding属性定义了文本和边框之间的填充（空格） -
将CSS
margin属性用于边界外的边距（空格） -
要为一个特殊元素定义特定样式，在该元素中添加
<id>属性<p id="p01">I am different</p>然后为具有特定ID的元素定义样式：
#p01 { color: blue; } -
要为一种特殊类型的元素定义样式，需要向元素添加
<class>属性<p class="error">I am different</p>然后为具有特定类的元素定义样式：
p.error { color: red; } -
可以使用完整URL或相对于当前网页的路径引用外部样式表
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"> <link rel="stylesheet" href="/html/styles.css"> <link rel="stylesheet" href="styles.css">
17）HTML链接
-
超链接是使用
<a>标记定义的：<a href="url">link text</a> <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> -
该链接的文本是可见部分，单击链接文本将把链接转送到指定的地址
-
本地链接：使用相对URL指定本地链接
<a href="html_images.asp">HTML Images</a> -
target属性定义在何处打开链接🔗
-
_blank：在新窗口或标签中打开链接 -
_self：在与单击相同的窗口/选项卡中打开链接（默认设置） -
_parent：在父框架中打开链接 -
_top：在整个窗口中打开链接 - 框架名称 ：在命名框架中打开链接(下面讲的iframe)
-
-
图片作为链接：
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>border:0;添加此选项是为了防止IE9（或更早版本）在图像周围显示边框（当图像是链接时） -
要将HTML按钮用作链接，你必须添加一些JavaScript代码：
<button onclick="document.location = 'default.asp'">HTML Tutorial</button> -
链接标题：
title属性指定有关元素的额外信息，当鼠标移到元素上时，该信息通常显示为工具提示文本。<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a> -
外部路径：
<!-- 使用完整URL或相对于当前网页的路径来引用外部页面 --> <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a> <!-- 本示例链接到当前网站上html文件夹中的页面 --> <a href="/html/default.asp">HTML tutorial</a> <!-- 本示例链接到与当前页面位于同一文件夹中的页面 --> <a href="default.asp">HTML tutorial</a>
18）HTML链接颜色
-
默认情况下，链接将在所有浏览器中显示如下：
- 未访问的链接（a:link）带有下划线并显示为蓝色
- 已访问链接(:visited)带有下划线和紫色
- 活动的链接(:active)带有下划线和红色
- 鼠标放在链接上(:hover)
-
可以使用CSS更改：
<style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> -
也可以使用CSS将链接设置为按钮样式
19）HTML链接-创建书签🔖
-
HTML书签用于允许读者跳至网页的特定部分。如果网页很长，则书签可能很有用。首先创建书签，然后添加一个指向书签的链接。单击链接后，页面将向下或向上滚动到带对应书签的位置。
-
首先，创建一个具有以下
id属性的书签：<h2 id="C4">Chapter 4</h2>然后，创建从同一页面内指向书签的链接（“跳至第4章”）：
<a href="#C4">Jump to Chapter 4</a>您还可以在另一个页面上添加指向书签的链接：
<a href="html_demo.html#C4">Jump to Chapter 4</a>
20）HTML图片 img
-
在HTML中，图像是用
<img>标签定义的。该<img>标签只包含属性并没有关闭标签。 -
src属性指定图像的URL（网址） -
alt如果用户由于某种原因无法查看图像（由于连接缓慢，src属性错误或用户使用屏幕阅读器），则该属性为图像提供替代文本 -
如果浏览器找不到图像，它将显示该
alt属性的值 -
该
alt属性是必需的，没有的话，网页将无法正确验证 -
可以用
style属性指定图像的宽度和高度 -
也可以用
width和height属性：<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> -
建议使用
style方式去修改高度宽度，这可以防止样式表修改图片大小。 -
HTML允许动画GIF
-
要将图片用作链接，需要将
<img>标签放在标签内<a> -
border:0添加此选项是为了防止IE9（或更早版本）在图像周围显示边框（当图像作为链接时） -
使用CSS
float属性使图像浮动到文本的右侧或左侧<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> -
屏幕阅读器是一种软件程序，可以读取HTML代码，转换文本并允许用户收听内容。屏幕阅读器对于视力障碍或学习障碍的人很有用。
21）HTML图片地图 image-map
-
<map>标签定义图像映射。一个image-map是具有可点击区域的图像。<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map> -
图像映射背后的想法是，您应该能够根据单击的图像位置执行不同的操作。要创建图像地图，您需要一张图像，以及一张包含一些描述可点击区域的规则的地图。
-
使用
<img>标签插入图像。与其他图像的唯一区别是必须添加一个usemap属性。<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> -
该
usemap值以井号标签开头，#后跟图像图的名称，并用于在图像和图像图之间创建关系。 -
然后添加一个
<map>元素。所述map元件被用来创建图像映射，并且通过使用所述链接到图像name属性：<map name="workmap">该
name属性必须具有与usemap相同的值。 -
可点击区域是使用
area元素定义的。 -
你必须定义区域的形状，并且可以选择以下值之一：
-
rect-定义一个矩形区域 -
circle-定义一个圆形区域 -
poly-定义一个多边形区域 -
default-定义整个区域
-
-
你必须定义一些坐标才能将可点击区域放置到图像上。坐标成对出现，一个用于x轴，一个用于y轴。
-
对于矩形而言，坐标
34, 44位于距左边距34像素和距顶部44像素的位置，坐标270, 350位于距左边距270像素和距顶部350像素的位置。利用足够的数据来创建可单击的矩形区域：<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">这是可单击的区域，它将把用户发送到computer.htm页面
-
对于圆形而言，首先找到圆形中心的坐标
337,300，然后指定圆的半径：44px。然后创建可单击的圆形区域：<area shape="circle" coords="337, 300, 44" href="coffee.htm">它将用户发送到页面coffee.htm
-
可点击区域不必是指向另一个页面的链接，它也可以触发JavaScript函数。
click在area元素上添加一个事件以执行JavaScript函数。<area shape="circle" coords="337,300,44" onclick="myFunction()">Onclick单击该区域时，可以使用该属性执行JavaScript函数
22）背景图片 background-image
-
要在HTML中添加背景图片，需要使用CSS属性
background-image -
要在HTML元素上添加背景图片，可以使用
style属性：<div style="background-image: url('img_girl.jpg');"> -
也可以在
<style>元素中加背景图片：<style> div { background-image: url('img_girl.jpg'); } </style> -
如果想整个界面拥有一个背景图片，你需要在
<body>元素上定义背景图片：<style> body { background-image: url('img_girl.jpg'); } </style> -
如果背景图像小于元素，直到到达元素的末端。该
background-image属性则图像将水平和垂直重复自身填充div元素，直到到达末尾。为避免背景图像重复出现，请使用background-repeat属性。<style> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; } </style> -
如果希望背景图像覆盖整个元素，则可以将
background-size属性设置为cover。另外要确保始终覆盖整个元素，请将background-attachment属性设置为fixed。图像将覆盖整个元素，而且不会拉伸，图像保持其原始比例。background-attachment用于设置背景图片是否固定或随着页面的其余部分滚动。<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> -
如果希望背景图像拉伸至适合元素的整个图像，可以将
background-size属性设置为100% 100%，尝试调整浏览器窗口的大小，您将看到图像会拉伸，但始终会覆盖整个元素。<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style>
23）HTML图片元素 picture
-
HTML5引入了
picture元素，以在指定图像资源时增加灵活性。 -
该
<picture>元件包含许多<source>元件，每个参照不同的图像源。这样，浏览器可以选择最适合当前视图或设备的图像。 -
每个
<source>元素都有描述其图像最合适的属性。 -
在不同的屏幕尺寸上显示不同的图像，刚点进去屏幕尺寸很小，显示img_girl，当屏幕尺寸稍微变大变成img_car，然后再变大时变成img_food。
<picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture> -
始终将
<img>元素指定为元素的最后一个子<picture>元素。该<img>元素由不支持<picture>元素的浏览器使用，或者如果没有<source>匹配的标记，则使用该元素。 -
该
<picture>元素有两个主要目的：-
带宽：如果屏幕或设备较小，则无需加载较大的图像文件。浏览器将使用
<source>具有匹配属性值的第一个元素，而忽略以下任何元素。 -
格式支持：某些浏览器或设备可能不支持所有图像格式。通过使用
<picture>元素，您可以添加所有格式的图像，浏览器将使用它可以识别的第一种格式，并忽略以下任何一种格式：<picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>
-
-
浏览器将使用
<source>具有匹配属性值的第一个元素，并忽略随后的任何<source>元素。
24）HTML表格
-
HTML表是用
<table>标记定义的。 -
每个表行都用
<tr>标签定义，表头是用<th>标签定义的。默认情况下，表头为粗体和居中，表格数据/单元格是用<td>标签定义。<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> -
<td>元素是表的数据容器，它们可以包含各种HTML元素，如：文字、图片、列表、其他表格等。 -
如果没有为表格指定边框，它将显示无边框。
-
使用CSS的
<border>属性设置边框：table, th, td { border: 1px solid black; }切记是为表格和表格单元格定义边框。
-
如果希望边框折叠成一个边框，请添加CSS的
border-collapse属性：table, th, td { border: 1px solid black; border-collapse: collapse; }
-
单元格填充指定单元格内容及其边界之间的空间。如果不指定填充，则表格单元格将不显示填充。要设置填充，请使用CSS的
padding属性：th, td { padding: 15px; }
-
默认情况下，表头为粗体和居中。要使表头左对齐，请使用CSS的
text-align属性：th { text-align: left; } -
border-spacing可以设置表格的边框间距：table { border-spacing: 5px; }如果折叠了边框，
border-spacing属性会失效！ -
要使一个单元格跨越一列以上，请使用
colspan属性：<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> -
要使单元格跨度超过一行，请使用
rowspan属性：<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>注意表头可以设置在左侧，就是上述代码的写法。不管怎么样，
<tr>内的内容始终在一行里。 -
要将标题添加到表中，需要使用
<caption>标签：<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table><caption>紧接着插在<table>标签后。 -
要为特殊表格定义特殊样式，需要在表中添加一个
id属性：<table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>然后就可以为此表定义特殊样式：
table#t01 { width: 100%; background-color: #f1f1c1; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; } -
其他表格标签：
Tag Description <colgroup>定义表内一个或多列进行格式化 <col>为元素内的每一列指定列属性 <thead>Groups the header content in a table <tbody>Groups the body content in a table <tfoot>将表中页脚内容分组 -
colgroup和<col>用法：<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>
-
<thead>、<tbody>、<tfoot>的用法：<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>
25）HTML列表
-
无序列表以标签开头，其中每个列表项均以标签开头，如
<ul>和<li>。 -
默认情况下，列表项将标记有黑色小圆圈符号。
-
其中CSS的
list-style-type属性用于定义列表项标记的样式：Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked -
无序列表的示例代码：
<ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> -
有序列表也以标签开头，每个列表项均以标签开头。如
<ol>和<li>。 -
默认情况下，列表项将用数字标记：
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> -
有序列表可以通过
type属性定义列表项标签的类型：Type Description type=”1” 列表项以数字编号 type=”A” The list items will be numbered with uppercase letters type=”a” 列表项以小写字母编号 type=”I” 列表项以大写罗马数字编号 type=”i” 列表项以小写罗马数字编号 -
有序列表的示例代码：
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> -
HTML还支持描述列表，描述列表是术语列表，其中包含每个术语的描述。
<dl>标记定义了描述列表，<dt>标记定义了术语（名称）和<dd>标记描述了各个术语。<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> -
列表可以嵌套，如：
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>列表项可以包含新列表以及其他HTML元素，例如图像和链接等。
-
默认情况下，有序列表将从1开始计数，如果要从指定数字开始计数，可以使用以下
start属性：<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> -
HTML列表可以使用CSS以多种不同方式设置样式。其中一种流行的方法是水平设置列表样式，以创建导航菜单。
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>
26）HTML块和内联元素
-
每个HTML元素都有默认的显示值，具体取决于元素的类型
-
两个显示值是block（块级元素）和inline（内联元素）
-
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
-
HTML的块级元素有：
-
内联元素不从新行开始，仅占用所需的宽度。像
<span>元素用于组合行内元素，以使通过样式来格式化它们。 -
HTML中的内联元素有：
-
<div>元素通常用作其他HTML元素的容器，该元素没有必需的属性，但是style、class、id是很常用的。与CSS一起使用时，<div>元素可用于设置内容块的样式。<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> -
<span>元素通常用作某些文本的容器，该元素也没有必需的属性，但是style、class、id是很常用的。与CSS一起使用时，<span>元素可用于设置内容块的样式。<h1>My <span style="color:red">Important</span> Heading</h1>
27）HTML类属性 class
-
HTML
class属性用于为具有相同类名的元素定义相同的样式。因此，具有相同class属性的所有HTML元素将具有相同的样式。<!DOCTYPE html> <html> <head> <style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> -
class属性可以用于内联元素：<!DOCTYPE html> <html> <head> <style> span.note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> -
class属性可以在任何HTML元素上使用，类名区分大小写。 -
在CSS中，要设置特定类的元素，需要写一点句点后接类名。
<style> .city { background-color: tomato; color: white; padding: 10px; } </style> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> -
HTML元素可以有多个类名，每个类名必需用空格分割。
<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>在上面代码中，第一个
<h2>元素属于city类和main类。 -
不同的标签（例如
<h2>和<p>）可以具有相同的类名，从而共享相同的样式。<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> -
JavaScript也可以使用该类名来对具有指定类名的元素执行某些任务。JavaScript可以使用以下
getElementsByClassName()方法访问具有指定类名的元素：<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script>用户点击按钮时，将隐藏所有具有类名称为city的元素。
28）HTML id属性
-
该
id属性为HTML元素指定唯一ID（该值在HTML文档中必须唯一）。CSS和JavaScript可以使用ID值对具有特定ID值的元素执行某些任务。在CSS中，要选择具有特定ID的元素，请写一个井号（＃）字符，后跟该元素的ID。<style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> <h1 id="myHeader">My Header</h1> -
id属性可在任何HTML元素上使用
-
id值区分大小写
-
id值必需至少包含一个一个字母，不能包含空格（空格，制表符等）
-
类和id的区别：一个HTML元素只能有一个属于该单个元素的唯一ID，而一个类名可以由多个元素使用
<style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style> <!-- A unique element --> <h1 id="myHeader">My Cities</h1> <!-- Multiple similar elements --> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> -
HTML书签用于允许读者跳至网页的特定部分。如果您的网页很长，则书签可能很有用。要制作书签，必须首先创建书签，然后为其添加链接。单击链接后，页面将滚动到带有书签的位置。
<h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a>也可以添加到从另一个页面链接来的书签
<a href="html_demo.html#C4">Jump to Chapter 4</a> -
JavaScript可以使用以下
getElementById()方法访问具有指定ID的元素：<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script>
29）HTML iframe
-
iframe用于显示网页内的网页
-
HTML iframe是使用
<iframe>标记定义的：<iframe src="URL"></iframe>该
src属性指定嵌入式框架页面的URL（Web地址） -
使用
height和width属性来指定iframe的大小。默认情况下，高度和宽度以像素为单位：<iframe src="demo_iframe.htm" height="200" width="300"></iframe> -
也可以使用CSS设置高度和宽度：
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe> -
默认情况下，iframe周围有边框。要删除边框，需要使用
style属性并使用CSSborder属性：<iframe src="demo_iframe.htm" style="border:none;"></iframe> -
还可以使用CSS更改iframe边框的大小、样式和颜色
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe> -
iframe可用作链接的目标框架，链接的
target属性值设置为iframe的name值<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
30）HTML JavaScript
-
JavaScript使HTML页面更具动态性和交互性。
-
该
<script>标记用于定义客户端脚本（JavaScript）。该<script>元素中包含脚本语句，或者它通过src的属性指向外部脚本文件。JavaScript的常见用途是图像处理，表单验证和内容的动态更改。 -
JavaScript最常使用该
document.getElementById()方法<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> -
JavaScript可以更改HTML内容
-
JavaScript可以更改HTML样式
document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; -
JavaScript可以更改HTML属性
document.getElementById("image").src = "picture.gif"; -
该
<noscript>标签提供可选内容给那些浏览器禁用Javascript脚本或不支持客户端脚本的用户<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>Sorry, your browser does not support JavaScript!</noscript>
31）HTML文件路径
| 路径 | 描述 |
|---|---|
| <img src =“ picture.jpg”> | picture.jpg与当前页面位于同一文件夹中 |
| <img src =“ images / picture.jpg”> | picture.jpg位于当前文件夹的images文件夹中 |
| <img src =“ / images / picture.jpg”> | picture.jpg位于当前站点根目录的images文件夹中 |
| <img src =“ ../ picture.jpg”> | picture.jpg位于当前文件夹上一层的文件夹中 |
如果可以，最好是用相对文件路径。使用相对文件路径时，您的网页将不会绑定到当前的基本URL。所有链接都可以在您自己的计算机（localhost）以及当前的公共域和将来的公共域中使用。
32）HTML head
-
<head>元素是元数据（关于数据的数据）的容器，并且被放置在<html>标记和<body>标签之间。 -
元数据通常定义文档标题，字符集，样式，脚本和其他元信息。
-
这些标签描述元数据：
<title>，<style>，<meta>，<link>，<script>，和<base>。 -
<title>元素定义了文档的标题，并在所有的HTML文档是必需的。 -
<style>元素用于定义一个HTML页面样式信息。 -
<link>元素用于链接到外部样式表： -
<meta>元素用于指定使用哪个字符集，页面描述，关键字，作者和其他元数据。浏览器（如何显示内容），搜索引擎（关键字）和其他Web服务都依赖元数据。-
定义使用的字符集
<meta charset="UTF-8"> -
定义网页描述
<meta name="description" content="Free Web tutorials"> -
定义搜索引擎的关键字
<meta name="keywords" content="HTML, CSS, XML, JavaScript"> -
定义页面作者
<meta name="author" content="John Doe"> -
每30秒刷新一次文档
<meta http-equiv="refresh" content="30">
-
-
HTML5引入了一种使web设计人员可以通过
<meta>标签控制视口（viewport）的方法。 -
视口是用户在网页上的可见区域。它随设备的不同而不同，在手机上会比在计算机屏幕上小。
-
应该在所有网页中包含以下
<meta>视口元素：<meta name="viewport" content="width=device-width, initial-scale=1.0">- 一个
<meta>视口元素提供了如何控制尺寸和缩放的浏览器操作 - width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）
- initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别
- 一个
-
该
<base>元素指定页面中所有相对URL的基本URL和基本目标<base href="https://www.w3schools.com/images/" target="_blank"> -
根据HTML5标准，
<html>、<body>、<head>可以省略。以下代码被验证为HTML5：
<!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p>不建议省略
<html>和<body>标记。省略这些标签可能会使DOM或XML软件崩溃，并在较旧的浏览器（IE9）中产生错误。但是，在相当长的一段时间内，省略<head>标签已成为一种普遍做法。 -
HTML头元素集合：
Tag Description <head>Defines information about the document <title>Defines the title of a document <base>Defines a default address or a default target for all links on a page <link>Defines the relationship between a document and an external resource <meta>Defines metadata about an HTML document <script>Defines a client-side script <style>Defines style information for a document
33）HTML布局
-
网站通常在多个列中显示内容（例如杂志或报纸），HTML提供了几个定义网页不同部分的语义元素：
-
<header>- 定义文档或节的标题 -
<nav>- 为导航链接定义一个容器 -
<section>- 在文档中定义一个部分 -
<article>- 定义独立的独立文章 -
<aside>- 定义除内容之外的内容（如边栏） -
<footer>- 为文档或节定义页脚 -
<details>- 定义其他细节 -
<summary>- 为<details>元素定义标题
-
-
有五种不同的方法来创建多列布局，每种方式都有其优点和缺点：
- HTML表格（不推荐）
- CSS float属性
- CSS flexbox
- CSS framework
- CSS grid
-
<table>元素并非旨在用作布局工具，目的是为了显示表格数据。因此，请勿在表布局中使用表格，它们会把代码弄得一团糟 -
要想迅速创建布局，可以使用W3.CSS或Bootstrap之类的框架
-
通常使用CSS float属性进行整个web布局，float很容易学习，只需要记住
float和clear的工作方式。缺点是浮动元素和文档流相关联，可能会损害灵活性。 -
CSS flexbox是CSS3中的新布局模式。使用flexbox可以确保当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测。缺点是在IE10及更早版本中不起作用。
-
CSS grid布局模块提供了一个基于网格的布局系统，该系统具有行与列，可以更轻松地设计网页，而且无需使用浮点和定位。缺点是在IE或Edge 15及更低版本中均不起作用。
34）HTML响应式网页设计
-
响应式Web设计是关于使用HTML和CSS自动调整，隐藏，缩小或放大网站的大小，以使其在所有设备（台式机，平板电脑和电话）上看起来都不错
-
制作自适应网页时，需要设置viewport，
<meta>在所有网页中添加以下元素:<meta name="viewport" content="width=device-width, initial-scale=1.0">这将设置页面的视口，这将向浏览器提供有关如何控制页面的尺寸和缩放比例的说明。
以下是有
<meta>和没有<meta>标签的区别：
-
自适应式图像是可以很好的缩放以适合任何浏览器尺寸的图像。如果CSS
width属性设置为100%，图像将响应并放大或缩小<img src="img_girl.jpg" style="width:100%;">请注意，在上面的示例中，图像可以放大到大于其原始大小。在许多情况下，更好的解决方案是改为使用
max-width属性。 -
如果将该
max-width属性设置为100％，则图像将按比例缩小，但绝不会放大到大于其原始大小<img src="img_girl.jpg" style="max-width:100%;height:auto;"> -
HTML的
<picture>元素允许您为不同的浏览器窗口大小定义不同的图像。调整浏览器窗口大小，图像会随着宽度的变化。<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture> -
文本大小可以用
vm单位设置，即视口宽度。这样，文本大小将遵循浏览器窗口的大小。<h1 style="font-size:10vw">Hello World</h1>视口是浏览器窗口的大小。1vw =视口宽度的1％。如果视口为50厘米宽，则1vw为0.5厘米。
-
除了调整文本和图像的大小外，在响应式网页中使用媒体查询也很常见。使用媒体查询，您可以为不同的浏览器尺寸定义完全不同的样式。
-
调整浏览器窗口的大小，以下三个div元素将在大屏幕上水平显示，在小屏幕上将垂直堆叠：
<style> .left, .right { float: left; width: 20%; /* The width is 20%, by default */ } .main { float: left; width: 60%; /* The width is 60%, by default */ } /* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } } </style> -
响应式网页的完整示例：
-
响应式网页设计-框架：
-
W3.CSS：创建响应式设计的一种好方法是使用响应式样式表，例如W3.CSS。W3.CSS使开发任何大小的站点变得容易。
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container w3-green"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </body> </html> -
Bootstrap：另一个流行的框架是Bootstrap，它使用HTML，CSS和jQuery制作响应式网页。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> </div> <div class="row"> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> </div> </div> </body> </html>
-
35）HTML计算机代码元素
-
HTML
<kbd>元素表示用户输入，例如键盘输入或语音命令，<kbd>标签周围的文本通常以等宽字体显示:<p>Save the document by pressing <kbd>Ctrl + S</kbd></p> -
HTML
<samp>元素表示程序或计算系统的输出，<samp>标签周围的文本通常以等宽字体显示:<p>If you input wrong value, the program will return <samp>Error!</samp></p> -
HTML
<code>元素定义了一段计算机代码，<code>标签周围的文本通常以等宽字体显示:<code> x = 5; y = 6; z = x + y; </code> -
请注意，该
<code>元素不会保留额外的空格和换行符。要解决此问题，可以将<code>元素放在元素<pre>内：<pre> <code> x = 5; y = 6; z = x + y; </code> </pre> -
HTML
<var>元素定义了一个变量，变量可以是数学表达式中的变量，也可以是编程上下文中的变量：Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>. -
HTML计算机代码元素汇总
Tag Description <code>Defines programming code <kbd>Defines keyboard input <samp>Defines computer output <var>Defines a variable <pre>Defines preformatted text
36）HTML语义元素
-
语义元素 = 具有含义的元素
-
语义元素对浏览器和开发人员都清楚地描述了其含义。
-
非语义元素的示例：
<div>和<span>元素不告知其内容。 -
语义元素的示例：
<form>，<table>和<article>元素明确定义其内容。
-
-
许多网站包含HTML代码，例如：<div id =“ nav”> <div class =“ header”> <div id =“ footer”>以指示导航，页眉和页脚。
-
在HTML中，有一些语义元素可用于定义网页的不同部分：
-
<article> <aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
-
-
<section>元素定义了一个文档中的一个部分。根据W3C的HTML文档，“section是内容的主题分组，通常带有标题。”通常可以将主页分为介绍，内容和联系信息的各个部分。
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section> -
<article>元素指定独立的，自包含的内容。文章应该是有意义的，并且可以独立于网站的其余部分来阅读。<article>元素可以在以下几种情况使用：- 论坛帖子
- 博客文章
- 报纸文章
<article> <h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> -
<article>元素指定独立的内容而<section>元素在文档中定义部分。但我们不可以使用这些定义来决定如何嵌套这些元素。在网上，可以找到有些页面的<section>元素包含<article>元素，也有些页面的<article>元素包含<section>元素。另外还可以发现在一些网页中，<section>元素可以包含<section>元素，<article>元素可以包含<article>元素。比如对于一份报纸而言，运动文章
<article>在运动模块<section>中，可能在每一篇文章<article>中有一个技术部分section。 -
<header>元素指定为一个文件或部分标题。<header>元素作为一个包含介绍性内容的容器且一个文档中可以包含多个<header>元素。 -
<footer>元素指定为一个文件或部分页脚，<footer>元件应包含它包含的元素信息。页脚通常包含文档的作者，版权信息，使用条款的链接，联系信息等。一个文档中可能包含多个
<footer>元素。 -
<nav>元素限定了一组导航链接。注意⚠️：并非文档的所有链接都应位于<nav>元素内，<nav>元素仅用于主要的导航链接块。 -
<aside>表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> -
图像和标题可以组合在一个
<figure>元素中，字幕的目的是为图像添加视觉说明。<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>该
<img>元素定义了图像，<figcaption>元素定义了字幕。 -
为什么要使用语义元素？
根据W3C：“一个语义Web允许在应用程序，企业和社区之间共享和重用数据。”
-
HTML的语义元素汇总：
Tag Description <article>Defines an article <aside>Defines content aside from the page content <details>Defines additional details that the user can view or hide <figcaption>Defines a caption for a <figure>element<figure>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer>Defines a footer for a document or section <header>Specifies a header for a document or section <main>Specifies the main content of a document <mark>Defines marked/highlighted text <nav>Defines navigation links <section>Defines a section in a document <summary>Defines a visible heading for a <details>element<time>Defines a date/time
37）HTML实体
-
HTML中的保留字符必须替换为字符实体，键盘上不存在的字符也可以由实体代替。
-
一些字符保留在HTML中。
-
如果在文本中使用小于（<）或大于（>）符号，浏览器可能会将它们与标签混合使用。字符实体用于显示HTML中的保留字符。
-
角色实体如下所示：
&entity_name; OR &#entity_number;为了展示小于（<）号，必须写成：
<or<
-
-
使用实体名称的优点：实体名称易于记忆。 使用实体名称的缺点：浏览器可能不支持所有实体名称，但是对数字的支持很好。
-
HTML中使用的常见字符实体是不间断空格：
＆nbsp;。一个不间断的空格是一个不会换行的空格。由一个不间断的空格分隔的两个单词将粘在一起（不会将其折断分开在不同的两行）。这在中断单词可能具有破坏性时很方便。比如以下这几种情况：- § 10
- 10 km/h
- 10 PM
-
不间断空格的另一个常见用法是防止浏览器截断HTML页面中的空格。如果在文本中写入10个空格，浏览器将删除其中9个空格。要在文本中添加实际空格，可以使用
＆nbsp;角色实体。 -
不间断的连字符
‑使您可以使用不间断的连字符（-） -
其他一些有用的HTML字符实体：
- 附加符号/变音符是添加到字母上的“字形、音符”。附加符号可以出现在字母的上方和下方，字母内部以及两个字母之间。
38）HTML符号
-
普通键盘上没有许多数学，技术和货币符号。要将此类符号添加到HTML页面，可以使用HTML实体名称。如果不存在实体名称，则可以使用实体编号，十进制或十六进制引用。
<p>I will display €</p> <p>I will display €</p> <p>I will display €</p> -
HTML支持的一些数字符号：
- HTML支持的一些希腊字母：
- HTML支持的一些实体：
39）HTML字符集属性
-
为了正确显示HTML页面，Web浏览器必须知道页面中使用的字符集。字符集在
<meta>标记中指定的：<meta charset="UTF-8">如果浏览器在网页中检测到ISO-8859-1，则默认为ANSI。
-
字符集之间的差异：
-
ASCII字符集
-
ASCII使用0到31（和127）之间的值作为控制字符。
-
ASCII使用32到126的值表示字母，数字和符号。
-
ASCII不使用128到255之间的值。
-
-
ANSI字符集（Windows-1252）
-
对于0到127的值，ANSI与ASCII相同。
-
ANSI具有一组专有的字符，其值从128到159。
-
对于160到255的值，ANSI与UTF-8相同。
-
-
ISO-8859-1字符集
-
对于0到127的值，8859-1与ASCII相同。
-
8859-1不使用128到159之间的值。
-
对于从160到255的值，8859-1与UTF-8相同。
-
-
UTF-8字符集
-
对于0到127的值，UTF-8与ASCII相同。
-
UTF-8不使用128到159之间的值。
-
对于160到255之间的值，UTF-8与ANSI和8859-1相同。
-
UTF-8从值256继续，包含超过10 000个不同字符。
-
-
可以使用CSS
@charset规则来指定样式表中使用的字符编码：@charset "UTF-8";这样会将编码格式设置为Unicode UTF-8
-
更多字符集，阅读《完整HTML字符集参考》。
40）HTML 统一资源定位符URL
-
URL是网址的另一个词。
-
URL可以由单词（w3schools.com）或Internet协议（IP）地址（192.68.20.50）组成。大多数人在冲浪时都会输入名字，因为名字比数字更容易记住。
-
Web浏览器使用URL从Web服务器请求页面。统一资源定位符（URL）用于寻址Web上的文档（或其他数据）。像 https://www.w3schools.com/html/default.asp这样的 网址 遵循以下语法规则：
scheme://prefix.domain:port/path/filename说明：
- scheme：定义Internet服务的类型（最常见的是http或https）
- prefix：定义域前缀（http的默认值为www）
- domain： 定义Internet 域名（如w3schools.com）
- port：定义主机上的端口号（http的默认值为80）
- path：在服务器上定义路径（如果省略：站点的根目录）
- filename： 定义文档或资源的名称
-
通用网址方案：
Scheme Short for Used for http HyperText Transfer Protocol Common web pages. Not encrypted https Secure HyperText Transfer Protocol Secure web pages. Encrypted ftp File Transfer Protocol Downloading or uploading files file A file on your computer -
URL编码：
- URL只能使用ASCII字符集通过Internet发送 。如果URL包含ASCII集之外的字符，则必须转换URL。
- URL编码将非ASCII字符转换为可以通过Internet传输的格式。
- URL编码将非ASCII字符替换为“％”，后跟十六进制数字。
- 网址不能包含空格。URL编码通常用加号（+）或％20代替空格。
-
浏览器将根据页面中使用的字符集对输入进行编码，HTML5中的默认字符集为UTF-8。
Character From Windows-1252 From UTF-8 € %80 %E2%82%AC £ %A3 %C2%A3 © %A9 %C2%A9 ® %AE %C2%AE À %C0 %C3%80 Á %C1 %C3%81 Â %C2 %C3%82 Ã %C3 %C3%83 Ä %C4 %C3%84 Å %C5 %C3%85 有关所有URL编码的完整参考，访问 URL编码参考。
41）HTML和XHTML
-
XHTML是用XML编写的HTML。
- XHTML代表EXtensible HyperText Markup Language
- XHTML与HTML几乎相同
- XHTML比HTML更严格
- XHTML是定义为XML应用程序的HTML
- 所有主要浏览器均支持XHTML
-
互联网上的许多页面都包含“错误的” HTML，此HTML代码在大多数浏览器中都可以正常工作（即使它不遵循HTML规则），如下：
<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> - 当今市场由不同的浏览器技术组成。一些浏览器在计算机上运行，而某些浏览器在手机或其他小型设备上运行。较小的设备通常缺乏解释“不良”标记的资源或能力。
- XML是一种标记语言，在其中必须正确标记文档（“格式正确”），XHTML是通过结合HTML和XML的优势而开发的，XHTML是重新设计为XML的HTML。
- XHTML与HTML最重要的区别：
-
XHTML文档必须具有XHTML DOCTYPE声明，还必须存在
<html>，<head>，<title>和<body>元素，并且<html>中的xmlns属性必须指定文档的xml命名空间。以下显示了一个XHTML文档，其中包含最少的必需标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> some content </body> </html> -
如何从HTML转换为XHTML：
- 将XHTML <！DOCTYPE>添加到每个页面的第一行
- 向每个页面的html元素添加xmlns属性
- 将所有元素名称更改为小写
- 关闭所有空元素
- 将所有属性名称更改为小写
- 引用所有属性值
42）HTML样式指南和编码约定
-
样式一致可以使其他人更容易理解自己的代码，使用格式正确的接近XHTML语法更好。
-
确保始终保持代码整洁且格式正确。
-
使用正确的文档格式，始终把文档类型声明为文档的第一行。
<!DOCTYPE html> or <!doctype html> -
使用小写元素名称。统统小写，不要开头首字母大写！
-
关闭所有HTML元素。
-
关闭空HTML元素。XHTML和XML中必须使用斜杠（/）关闭空元素。
-
使用小写属性名称。
-
属性值用引号印起来。
<table class="striped"> -
始终将
alt属性添加到图像<img>中。当由于某种原因无法显示图像时，此属性很重要。另外，请始终定义图像的宽度和高度。由于浏览器可以在加载图像之前为图像保留空间，因此可以减少闪烁。 -
HTML允许等号周围有空格。但是，等号附近没有空格更易于阅读，并且实体可以更好地组合在一起。
<link rel="stylesheet" href="styles.css"> -
使用HTML编辑器时，向右和向左滚动以读取HTML代码很不方便。尽量避免代码一行超过80个字符。
-
不要无故添加空白行。为了提高可读性，请添加空白行以分隔大型或逻辑代码块。
-
为了便于阅读，请添加两个缩进空格。不要使用Tab键。要使用不必要的空行和缩进。不必缩进每个元素。
-
在HTML中，可以省略
<html>标签和<body>标签。但是，不建议省略<html>和<body>标签。该<html>元素是文档根，指定页面语言。<!DOCTYPE html> <html lang="en-US">声明语言对于可访问性应用程序（屏幕阅读器）和搜索引擎很重要。省略
<html>或<body>可能导致DOM和XML软件崩溃，省略<body>会在较旧的浏览器（IE9）中产生错误。 -
不建议省略
<head>标签 -
<title>HTML中的元素是必需的。为了确保正确的解释和正确的搜索引擎，应在文档中尽早定义语言和字符编码。<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML Syntax and Coding Style</title> </head> -
HTML具有让Web设计人员通过
<meta>标记控制视口的方法 。视口是用户在网页上的可见区域，它随设备的不同而不同，在手机上会比在计算机屏幕上小。应该所有网页中 的<meta>包含以下视口元素：<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
简短的注释应该写在一行上：
<!-- This is a comment -->注释跨越多行，注释缩进两个空格，则更易于观察：
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. --> -
使用简单的语法链接样式表（不需要type属性）
<link rel="stylesheet" href="styles.css">简单的css规则可以写成压缩形式：
p.intro {font-family: Verdana; font-size: 16em;}长规则应该写在多行上：
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }- 将开括号与选择器放在同一行
- 在开括号之前留出一个空格
- 使用两个空格缩进空间
- 在每个属性值对（包括最后一个）之后使用分号
- 如果值包含空格，则仅在该值周围使用引号
- 将右方括号放在新行上，没有前导空格
- 避免超过80个字符的行
-
使用不统一的HTML样式可能会导致JavaScript错误，下面两个Javascript语句将产生不同的结果：（📌class值和id值区分大小写）
var obj = getElementById("Demo") var obj = getElementById("demo") -
某些Web服务器（如Apache，Unix）对文件名区分大小写：“ london.jpg”不能作为“London.jpg”访问。其他Web服务器（如Microsoft，IIS）不区分大小写：“ london.jpg”可以作为“ London.jpg”或“ london.jpg”访问。
-
如果混合使用大写和小写，则必须非常一致。如果您从不区分大小写的服务器迁移到区分大小写的服务器，那么即使是很小的错误也会破坏您的网站！为避免这些问题，请始终使用小写文件名。
-
文件扩展名：
- HTML文件应具有.html或.htm扩展名
-
CSS文件的扩展名应为.css
- JavaScript文件应具有.js扩展名
- .htm和.html扩展名之间没有区别，任何网络浏览器或网络服务器都将两者视为HTML。
- 如果URL未指定文件名（例如https://www.w3schools.com/css/），则服务器将返回默认文件名。常见的默认文件名是index.html，index.htm，default.html和default.htm。如果您的服务器仅使用“ index.html”作为默认文件名进行配置，则您的文件必须命名为“ index.html”，而不是“ index.htm”。但是，服务器可以配置多个默认文件名，通常，您可以根据需要设置多个默认文件名。无论如何，HTML文件的完整扩展名是.html，因此没有理由不使用它。
花了将近三天时间，终于把HTML tutorial部分认认真真看完了，发现了以前没接触到的很多东西。不得不说自己之前的学习真的太浮躁了，都没有好好沉淀下来认真看完documentation，总是做作业时要用的时候就上网查，所以学到的知识一点都不系统完整。
接下来两天打算另外开一篇post，把HTML余下来的forms、graphics、media、API、examples、references部分看完并记录下来📝，最好能把W3schools HTML证书考下来。周末开始看CSS部分，尽量早点把HTML/CSS部分结束，开始最重要的JavaScript的学习🥳～