HTML回顾 | 星期天

HTML初识

HTML超文本标记语言 (Hyper Text Markup Language) 是用来描述网页的一种语言。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容

HTML元素=HTML开始标签+元素内容+HTML结束标签（元素内容可以是另一个HTML元素）

HTML标签参考手册

https://www.w3school.com.cn/tags/index.asp

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

text-align 属性规定了元素中文本的水平对齐方式
<bdo> 定义文字的方向,属性dir=ltr(从左往右)、rtl(从右往左)

标签	描述
`<b>`	定义粗体
`<i>`	定义斜体
`<big>`	定义大号文本
`<small>`	定义小号文本
`<em>`	定义着重文本
`<ins>`	插入文本
`<del>`	删除文本
`<pre>`	定义预格式文本，会保留其中的空格和换行（代码段）
`<code>`	计算机代码
`<kbd>`	键盘码
`<bdo>`	定义文字方向
`<blockquote>`	定义长引用（区块）
`<q>`	定义短引用（加引号）

统一示例

<!-- 1.文本格式化 -->
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<small>This text is small</small>
<code>Computer code</code>
<kbd>Keyboard input</kbd>


<bdo dir="rtl">
Here is some Hebrew text
</bdo>

<pre>
for i = 1 to 10
     print i
next i
</pre>

<blockquote>
这是长的块引用
</blockquote>
<q>
这是短的块引用
</q>

<del>删除文本</del> <ins>插入文本</ins> 

引入外部CSS样式与JS：

<head>
    <!-- type属性可选 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myscript.js">
</head>

HTML超链接

<!-- 1. 站内链接 -->
<a href="/random.html">链接文本</a>
<!-- 2. 外部链接 -->
<a href="https://www.baidu.com/">链接文本</a>

<!-- "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 -->
<a href="/random.html">
<img src="https://mysource-hexo.wyun521.top/img/cover/1.jpg" />
</a>


<!-- 3. 锚链接（文档内的跳转） -->
<!-- 您可以使用 id 属性来替代 name 属性，命名锚同样有效。 -->
<!-- 假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。 -->
<a name="tips">提示</a>
<!-- (1) 在同一个文档中创建指向该锚的链接 -->
<a href="#tips">有用的提示</a>
<!-- (2) 在其他页面中创建指向该锚的链接 -->
<a href="https://blog.wyun521.top/posts/f05c05c2/#tips">有用的提示</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求：href="http://www.w3school.com.cn/html/"

正确的做法是href="http://www.w3school.com.cn/html/"

HTML图片

<!-- 1. 背景图片 -->
<!-- gif和jpg文件均可用作 HTML 背景 -->
<body background="/i/eg_background.jpg">

<!-- 2. 插入图片 src属性指向图片的url地址-->
<img src="/i/eg_mouse.jpg" width="200" height="200" title="这是一张图片" alt="该图片无法显示"/>

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

请始终对图像使用alt属性，当图像无法显示时该属性很重要。
请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

HTML表格

语法	描述
`<table>`	定义表格
`<tr>`	行
`<td>`	列，单元格
`<th>`	表头单元格
`<caption>`	表格标题

表格属性

属性	描述
border	表格边框
cellpadding	单元格内容与边框距离
cellspacing	单元格之间的距离（内边框大小）
background	表格背景

单元格属性

属性	描述
colspan	单元格跨列
rowspan	单元格跨行
align	单元格中的内容对齐方式,left默认

<table border="1" cellpadding="5">
<caption>员工统计表</caption>
<tr>
  <th>姓名</th>
  <th>性别</th>
  <th>手机号</th>
</tr>
<tr>
  <td>张三</td>
  <td>男</td>
  <td>123456</td>
</tr>
<tr>
  <td>rose</td>
  <td>女</td>
  <td>456789</td>
</tr>
</table>

HTML列表

语法	描述
`<ul>`	无序列表
`<ol>`	有序列表
`<li>`	列表项
`<dl>`	自定义列表
`<dt>`	自定义列表项
`<dd>`	自定义列表项描述
-	-
`type`	类型，会改变列表项前的符号

<!-- 1. 无序列表 type实心圆点-->
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<!-- 2. 有序列表 type罗马字符-->
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<!-- 3. 自定义列表 -->
<dl>
<dt>苹果</dt>
<dd>一种水果</dd>
<dt>牛奶</dt>
<dd>这是喝的</dd>
</dl>

<!-- 4.嵌套的列表 -->
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
        <li>红茶</li>
        <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

HTML块元素与行内元素

块元素举例 <h1> <p> <ul> <table> <div>
行内元素举例 <b> <td> <a> <img> <span>

类名与id：

同一个类名可以由多个HTML元素使用，id 属性的值在HTML文档中必须是唯一的
CSS和JavaScript可使用id和class属性来选取元素或设置特定元素的样式

HTML iframe子窗口

iframe 用于在网页内显示网页

<!-- iframe定义 -->
<iframe src="/tags/iframe.html" width="20px" height="200px"></iframe>

<!-- 2. 在iframe中打开链接的HTML文档 -->
<!-- iframe 可用作链接的目标,前提是链接的 target 属性必须引用 iframe 的 name 属性 -->
<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
<p><a href="https://mysource-hexo.wyun521.top/img/cover/1.jpg" target="iframe_a">在子窗口查看链接的图片</a></p>
<!-- 由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开 -->

</body>
</html>

HTML header头部

<head> 元素是所有头部元素的容器。以下标签都可以添加到header部分：<title>、<base>、<link>、<meta>、<script>、<style>

base标签用于统一定义本文档所有链接的打开方式，默认地址等
meta标签提供关于HTML文档的元数据，包括页面的描述、关键词、文档的作者、最后修改时间等
title标签定义文档的标题，用于：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
link标签定义文档与外部资源之间的关系，常用来引入外部CSS文件
style标签用于为HTML文档定义样式
script标签用于定义客户端脚本，如JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="author" content="w3school.com.cn">
<!-- 一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。 -->
<meta name="description" content="HTML examples">
<meta name="keywords" content="HTML, HTML5,XHTML">
<!-- base在新窗口打开链接 -->
<base target="_blank" />
<!-- <base href="http://www.w3school.com.cn/images/" /> -->
</head>
<body>

<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。

<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。

</body>
</html>

为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

tips: UTF-8 则是 HTML 中的默认字符集
tips：为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好

网站布局和H5新语义元素

我们可以使用div+float属性实现网页基础布局：

<!DOCTYPE html>
<html>
<head>
    <style>
        #header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;
        }
        #nav {
            line-height:30px;
            background-color:#eeeeee;
            height:300px;
            width:100px;
            float:left;
            padding:5px;	      
        }
        #section {
            width:350px;
            float:left;
            padding:10px;	 	 
        }
        #footer {
            background-color:black;
            color:white;
            clear:both;
            text-align:center;
        padding:5px;	 	 
        }
    </style>
</head>

<body>

    <div id="header">
        <h1>City Gallery</h1>
    </div>

    <div id="nav">
        London<br>
        Paris<br>
        Tokyo<br>
    </div>

    <div id="section">
        <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>
        <p>
            Standing on the River Thames, London has been a major settlement for two millennia,
            its history going back to its founding by the Romans, who named it Londinium.
        </p>
    </div>

    <div id="footer">
        Copyright ? W3Schools.com
    </div>

</body>
</html>

在H5中，我们可以使用新的语义元素代替div标签来定义网页的不同部分:

标签	描述
header	定义文档或节的页眉
nav	定义导航链接的容器
main	规定文档的主内容。
section	定义文档中的节，有主题的内容组
article	定义独立的文章，可以独立于网站其他内容进行阅读
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义用户能够查看或隐藏的额外细节
summary	定义details元素的可见标题
time	定义日期和时间
figure	规定自包含内容，比如图示、图表、照片、代码清单等。
figcaption	定义figure元素的标题。
mark	定义重要的或强调的文本。

<!DOCTYPE html>
<html>
<head>
    <style>
        header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;	 
        }
        nav {
            line-height:30px;
            background-color:#eeeeee;
            height:300px;
            width:100px;
            float:left;
            padding:5px;	      
        }
        section {
            width:350px;
            float:left;
            padding:10px;	 	 
        }
        footer {
            background-color:black;
            color:white;
            clear:both;
            text-align:center;
            padding:5px;	 	 
        }
    </style>
</head>
<body>

    <header>
        <h1>City Gallery</h1>
    </header>

    <nav>
        London<br>
        Paris<br>
        Tokyo<br>
    </nav>

    <section>
    <h1>London</h1>
        <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>
        <p>
            Standing on the River Thames, London has been a major settlement for two millennia,
            its history going back to its founding by the Romans, who named it Londinium.
        </p>
    </section>

    <footer>
        Copyright W3Schools.com
    </footer>

</body>
</html>

H5之前，开发者会使用他们喜爱的属性名来设置页面元素的样式：
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

如此，浏览器便无法识别正确的网页内容。
而H5语义元素的使用，统一了页面元素名称，让HTML文档的可重用性和可移植性进一步增强

HTML字符和符号

html字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

字符实体语法

&entity_name;  如&lt;
&#entity_number;  如&#60;

emoji符号

下表列出了utf-8中的一些emoji符号

字符实体	emoji
`🗻`	🗻
`🗼`	🗼
`🗽`	🗽
`🗾`	🗾
`🗿`	🗿
`😀`	😀
`😁`	😁
`😂`	😂
`😃`	😃
`😄`	😄
`😅`	😅

字符集

为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。

ASCII: 第一个字符编码标准; 定义了 128 种可以在互联网上使用的字符
ISO-8859-1: HTML 4 的默认字符集; 支持 256 个不同的字符代码/dd>
UTF-8: H5默认字符集; 涵盖了世界上几乎所有的字符和符号

HTML url与url编码

URL（Uniform Resource Locator）统一资源定位器用于定位万维网上的文档或其他数据，语法：

scheme://host.domain:port/path/filename

scheme  定义因特网服务的类型或协议，如http、https、ftp、file等
host    定义域主机（http 的默认主机是 www）
domain  定义因特网域名
port   定义主机上的端口号（http 的默认端口号是 80）
path    定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename 定义文档/资源的名称

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，所以URL 必须转换为有效的 ASCII 格式。
URL 编码使用%加上两位的十六进制数来替换非 ASCII 字符，如空格会被编码成%20,#会被编码成%23