前端三剑客速查笔记之HTML5

前言

本文是速查表，用于快速查询基础用法、标签释义等。
REF: w3school.com.cn

HTML基础

标题 Heading

1	<h1></h1> ... <h6></h6>

段落

1	<p> This is a paragraph. </p>

链接

1	<a herf="https://ajioy.cn">Ajioy's World</a>

图像

1	<img src="https://ajioy.cn/img/avatar.jpg" width="200" height="200" />

HTML元素

html元素

定义了整个HTML文档。

body元素

定义了HTML文档的主体。

p元素

定义了HTML文档中的一个段落。

TIPS

<br/>是长远的保障，勿用<br>。
标签对大小写不敏感，但建议用小写。

HTML属性

1	<a href="https://ajioy.cn">Ajioy's World</a>

HTML标签可以拥有属性，通常都是以名称/值对的形式出现。如href=”url”。

1 2	<h1 align="center">中心对齐</h1> <body bgcolor="yellow">

class、id、style、title

HTML标题

标题

通过<h1> - <h6>等标签进行定义。
h1最大标题，h6最小标题。
默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，如段落、标题元素前
后。
使用标题醒目，文章结构清晰，搜索引擎可以结构化网页。

水平线

<hr />标签创建水平线，用于分割内容。

<p> hello, ajioy </p>
<hr />
<p> you are the one </p>
<hr />
<p> please save the world... </p>

注释

1	<!-- This is a comment -->

HTML段落

通过<p>标签定义。

HTML折行

不产生一个新段落的情况下进行换行，使用<br \>。

1	<p>This is <br /> a para<br />graph with line breaks</p>

浏览器会忽略源代码中的排版，省略掉多余的空格的换行。

HTML样式

style属性用于改变HTML元素样式。

更多样式设定，参见CSS教程。

不赞成使用的标签和属性。

标签
- <center>：居中
- <font>、 <basefont>：字体
- <s> 、<strike>：删除线
- <u>：下划线
属性
- <align>：对齐
- <bgcolor>：背景颜色
- <color>：文本颜色

背景颜色

style属性淘汰了旧的bgcolor属性。

background-color

<html>

<body style="background-color:yellow">
<h2 style="background-color:red"> This is a heading </h2>
<p style="background-color:green"> This is a paragraph.</p>
</html>

字体、颜色、尺寸

font-family、color、font-size

<html>

<body>
<h1 style="font-family:verdana"> A heading </h1>
<p style=font-family:arial;color:red;font-size:20px;"> A paragraph. </p>

</body>

</html>

文本对齐

text-align

1
2
3

<h1 style="text-align:center"> This is a heading </h1>
<p> The heading above is aligned to the center of this page.</p>

HTML格式化

标签	描述
`<b>`	粗体
`<big>`	大号字
`<em>`	着重文字
`<i>`	斜体
`<small>`	小号字
`<strong>`	加重语气
`<sub>`	下标字
`<sup>`	上标字
`<ins>`	插入字
`<del>`	删除符
`<s>、<strike>`	不建议，使用替换
`<u>`	不建议，使用style代替
`<bdo>`	文字方向
`<pre>`	预格式文本
`<blockquote>`	长的引用
`<q>`	短的引用

文本格式化

<b> bold text </b>
<strong> strong text </strong>
<big> big text </big>
<em> emphasized </em>
<i> italic text </i>
<small> small text </small>
This text contains X<sub>2</sub>
X<sup>superscript</sup>

预格式文本


<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

文字方向

bi-directional override(bdo)
从右向左输出。

1
2
3

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

块引用

使用blockquote元素，浏览器会插入换行和外边距，而q元素不会有任何特殊的呈现。

长引用：
<blockquote>
这这是长引用。这是长引用。这是长引用。这是长引用。是长引用。这是长引用。
</blockquote>
短引用：
<q>
这是短引用。
</q>

删除字和插入字

1	<del>delete</del> <ins>底部下划线</ins>

其他

计算机输出标签
地址
首字母缩写
略，参见(https://www.w3school.com.cn/html/html_formatting.asp)

HTML引用

标签	描述
`<abbr>`	缩写或首字母缩略语
`<address>`	文档作者或拥有者的联系信息
`<bdo>`	文本方向
`<blockquote>`	长引用
`<dfn>`	缩略词的定义
`<q>`	短的行内引用
`<cite>`	著作的标题

HTML CSS

所有格式化代码均可移出HTML文档，放入一个独立的样式表中。

HTML中的样式

<html>
<head>
<style stype="text/css">
h1 {color: red}
p <color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p> A paragraph </p>
</body>

</html>

没有下划线的链接

1	<a href="https://ajioy.cn" style="text-decoration:none">这是一个url</a>

链接到一个外部样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>
<h1>通过外部引用的样式表格式化。</h1>
<p> 效果是一样的 </p>
</body>

内部样式表

<head>
<style type="text/css">
body {background-color:red}
p {margin-left: 20px}
</style>
</head>

内联样式

1
2
3

<p style="color:red; margin-left: 20px">
this is a paragraph
</p>

标签	描述
`<style>`	定义样式定义
`<link>`	定义资源引用
`<div>`	定义文档中的节或区域（块级）
`<span>`	定义文档中的行内的小块或区域
`<font>`	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式
`<basefont>`	定义基准字体。不赞成使用。请使用样式
`<center>`	对文本进行水平居中。不赞成使用。请使用样式

HTML链接

文本链接

网站页面的链接

1	<a href="/index.html">点我进去</a>

外部网站链接

1	<a href="https://ajioy.cn">点我进去</a>

图像作为链接

1	<a href="https://ajioy.cn"><img border="0" src="/img/avatar.jpg" /></a>

target属性打开新窗口

使用target，可以定义被链接的文档在何处显示。

下面这行会在新窗口打开文档。

1	<a href="https://ajioy.cn" target="_blank">Visit Ajioy's World</a>

name属性规定锚anchor的名称

通常用来创建文章目录用

使用name属性创建HTML页面中的书签。
书签对读者不可见。
使用命名锚（named anchors）时，可以创建直接跳至该命名锚（某个小节）的链接。

1
2
3

<a name="tips">锚(显示在页面上的文本)</a>
<a href="#tips">有用的提示</a>
<a href="https://ajioy.cn/tools/markdown-guide.html#tips">有用的提示</a>

发送邮件

%20代表空格

<a href="mailto:ajioy@hotmail.com?
cc=someoneelse@hotmail.com&&bcc=andsomeoneelse2@hotmail.com&&
subject=Hello%20again&&
body=You%20are%20hero!">发送邮件</a>

HTML图像

插入图像

1
2
3

<img src="gif/mouse.gifs" width="50" height="50" />
<img src="https://ajioy.cn/gif/mouse.gifs" width="50" height="50" />
<img src="gif/mouse.gifs" alt="i hate cat" width="50" height="50" />

背景图片

gif和jpg文件都可以用作HTML背景。
如果图像小于页面，图像会进行重复。

1 2	<body background="/img/eg_background.jpg"> <p> gif和jpg文件都可以用作HTML背景。</p>

排列图片

默认是bottom对齐
bottom/middle/top

图像与文本同在一行时。

<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>

浮动图像

left浮动在文本的左侧
right浮动在文本的右侧

1 2	<img src="i/eg_cute.gif" align="left">带有图像的一个段落。 <img src="i/eg_cute.gif" align="right">带有图像的一个段落。

调整图片尺寸

1	<img src="i/eg_cute.gif" width="200" height="200" />

为图片显示替换文本

alt 标签作用，在浏览器无法载入图像时，替换文本属性告知失去的信息。

1	<img src="/i/eg_gogo.gif" alt="turn left" />

制作图像链接

1	<a href="https://ajioy.cn"><img border="0" src="/i/eg_buttonnext.jpg" /></a>

*创建图像映射

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

*把图像转为图像映射

略

标签	描述
`<img>`	定义图像。
`<map>`	定义图像地图。
`<area>`	定义图像地图中的可点击区域。

HTML表格

表格

table开头
tr 行
td 列
th 表头
border 边框

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
    <td>100</tb>
    <td>200</tb>
    <td>300</tb>
</tr>
<tr>
    <td>400</tb>
    <td>500</tb>
    <td>600</tb>
</tr>

</table>

表格边框

border=”1” 边框

<table border="2">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>

表格表头

th
列表头

<table border="1">
<tr>
<th>Heading</th>
<th>Author Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

行表头

<table border="1">
<tr>
    <th>name</th>
    <td>Ajioy</td>
</tr>
<tr>
    <th>phone</th>
    <td>18888888888</td>
</tr>
</table>

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示不友好。如果某个单元格是空的，浏览器可
能无法显示出这个单元格的边框。
为了避免上述情况发生，在空单元格中添加一个空格占位符就行了。

<table>
<tr>
<td>&nbsp;</td>
<td>row2,cell2</td>
</tr>
</table>

带标题的表格

caption

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

跨行或跨列的表格单元格

colspan

<h4>合并两列单元格</h4>
<table border="1">
<tr>
    <th>name</th>
    <th colspan="2">phone</th>
</tr>
<tr>
    <td>Ajioy</td>
    <td>18888888888</td>
    <td>18888888888</td>
</tr>
</table>


<h4>合并两行单元格</h4>
<table border="1">
<tr>
    <th>name</th>
    <td>Ajioy</td>
</tr>
<tr>
    <th rowspan="2">phone</th>
    <td>18888888888</td>
</tr>
<tr>
    <td>18888888888</td>
</tr>

</table>

表格内嵌套标签

<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

单元格边距 Cell padding

cellpadding

创建单元格内容与其边框之间的空白。

<table border="1" cellpadding="10">
<tr>
    <td>first</td>
    <td>second</td>
</tr>
<tr>
    <td>third</td>
    <td>the last one</td>
</tr>
</table>

单元格间距 Cell spacing

cellspacing
单元格之间的距离。

表格添加背景颜色和图像

bgcolor
background

<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
<tr><td>111</td><td>222</td></tr>
<tr><td>333</td><td>444</td></tr>
</table>
<h4>背景图片：</h4>
<table border="1" background="/img/avatar.jpg">
<tr><td>111</td><td>222</td></tr>
<tr><td>333</td><td>444</td></tr>
</table>

单元格添加背景颜色和图像

<h4>单元背景：</h4>  
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="/i/eg_bg_07.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>

在表格单元中排列内容

align=left/right

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

*框架（frame）属性

略，查看（https://www.w3school.com.cn/html/html_tables.asp）

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题。
`<th>`	定义表格的表头。
`<tr>`	定义表格的行。
`<td>`	定义表格单元。
`<thead>`	定义表格的页眉。
`<tbody>`	定义表格的主体。
`<tfoot>`	定义表格的页脚。
`<col>`	定义用于表格列的属性。
`<colgroup>`	定义表格列的组。

total: 2小时50分钟

Begin 10:40-

HTML列表

无序列表

无序列表始于<ul>标签，每个列表项始于<li>标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

不同类型的无序列表

desc
circle
square

<h4> Desc 项目符号列表：</h4>
<ul type="disc">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>

<h4> Circle 项目符号列表：</h4>
<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>

<h4> Square 项目符号列表：</h4>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>

有序列表

有序列表始于<ol>。
计数可以用start指定。

<ol>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
</ol>
<ol start="50">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
</ol>

不同类型的有序列表

默认是数字列表
字母列表A
小写字母列表a
罗马字母I
小写罗马字母i

<h4>数字列表：</h4>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
</ol>

<h4>字母列表：</h4>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
</ol>

<h4>罗马字母列表：</h4>
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
</ol>

<h4>小写罗马字母列表：</h4>
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
</ol>

定义列表

<dl>标签开始，自定义列表项以<dt>开始，自定义列表项的定义以<dd>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

嵌套列表

<ul>
    <li>咖啡</li>
    <li>茶
        <ul type="circle">
            <li>红茶</li>
            <li>绿茶</li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>

列表标签汇总

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义定义列表
`<dt>`	定义定义项目
`<dd>`	定义定义的描述
`<dir>`	已废弃。使用`<ul>` 代替它
`<menu>`	已废弃。使用`<ul>` 代替它

HTML块

大多数HTML元素被定义为块级元素（block level element）或内联元素（inline
element）。

块元素

块级元素在浏览器显示时，通常会以新行来开始和结束。
如<h1>, <p>, <ul>, <table>。

内联元素

内联元素在显示时通常不会以新行开始。
如<b>,<td>,<a>,<img>。

元素

div是块级元素，可用于组合其他HTML元素的容器。
div元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示折行。
如果与CSS一同使用，div元素可用于对大的内容块设置样式属性。
div元素也可用于文档布局。

元素

span是内联元素，可用作文本的容器。
span也没有特定的含义。
当与CSS一起使用时，span元素可用于为部分文本设置样式属性。

HTML类

对HTML进行分类（设置类），使得可以为元素的类定义CSS样式。
为相同的类设置相同的样式，不同的类设置不同的样式。

<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}
.intro {
    color:yellow;
}
</style>
</head>
<div class="cities">
<h2>London</h2>
<p class="intro">
London is the capital city of England.
It is the most popular city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p> another intros </p>
</div>

HTML布局

使用div元素的HTML布局

div元素常用作布局工具，因为能够轻松地通常CSS对其进行定位。

<head>
<style>
<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</h2>
</div>

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

<div id="section">
<h2>London</h2>
<p>London is a capital city of the England. Bla bla bla bla bla bla bla...</p>
</div>

<div id="footer">
Copyright Ajioy.cn
</div>
</body>

使用HTML5的网站布局

H5提供的新语义元素定义了网页的不同部分。

标签名	作用
`header`	定义文档或节的页眉
`nav`	定义导航链接的容器
`section`	定义文档中的节
`article`	定义独立的自包含文章
`aside`	定义内容之外的内容（比如侧栏）
`footer`	定义文档或节的页脚
`details`	定义额外的细节
`summary`	定义details 元素的标题

比起上个例子，只有两点不同：

CSS样式中，不用加.或#；
标签名替换div标签；

<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
...
</head>

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

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

...
</body>

使用表格的HTML布局

table元素不是作为布局工具而设计的。
table元素的作用是显示表格化的数据。
使用table元素能够取得布局效果，通过CSS设置表格元素的样式。

<head>
<style>
table.lamp {
    width: 100%;
    border: 1px solid #d4d4d4;
}
table.lamp th, td {
    padding: 10px;
}
table.lamp th {
    width: 40px;
}
</style>
</head>

<body>
<table class="lamp">
<tr>
    <th>
        <img src="/img/avatar.jpg" alt="avatar" style="height:32px;
        width:32px">
    </th>
    <td>
        The table element was not designed to be a layout tool.
    </td>
</tr>
</table>
</body>

响应式设计

定义

RWD指的是响应式WEB设计（Responsive Web Design）。
RWD能够以可变尺寸传递网页。
RWD对于平板和移动设备是必需的。

<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>
</head>

<body>

<h1>Demo</h1>
<h2>Resise this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p> It is the most populous city in the United Kingdom</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital city of French.</p>
<p> It is the most populous city in the French</p>
</div>

<div class="city">
<h2>Wuhan</h2>
<p>Wuhan is the capital city of Hubei Province.</p>
<p> It is the most populous city in China.</p>
</div>

</body>

HTML框架

通过框架，可以在同一个浏览器容器中显示不止一个页面。每份HTML文档称为一个框架，
并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档。
很难打印出整张页面。

框架结构标签

frameset
cols 列屏幕占比
rows/columns 列屏幕占比
frame
noresiez=”noresize”
自动推算比例 “50%, *, 25%”

垂直框架

<frameset cols="25%, 50%, 25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
</frameset>

水平框架

<frameset rows="25%, 50%, 25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
</frameset>

混合框架

<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

导航框架

<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>

内联框架

<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>

HTML内联框架

添加iframe的语法，URL指向隔离页面的位置。

1	<iframe src="URL"></iframe>

设置高度和宽度

1	<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

删除边框

1	<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe作为链接的目标。

1 2	<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://ajioy.cn" target="iframe_a">Ajioy's World</a></p>

HTML背景

设置背景颜色的三种方式：

1
2
3

<body bgcolor="#d0d0d0" text="black">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景图像

如果图像尺寸小于浏览器窗口，图像将在整个浏览器窗口进行复制。

1 2	<body background="cloud.gif"> <ody background="https://ajioy.cn/img/clouds.gif">

TIPS：

背景图像是否增加了页面的加载时间。图像文件不应超过10k。
背景图像是否与页面中的其他图像搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还行吗？
对文字的注意力被背景图像喧宾夺主了吗？

标签中的背景颜色bgcolor、背景background和文本text属性在最新的HTML标准（ HTML4和XHTML）中已被废弃。应该使用层叠样式表CSS来定义HTML元素的布局和显示属性。

HTML脚本

script元素

1
2
3

<script type="text/javascript">
document.write("Hello World")
</script>

noscript元素

noscript标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

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 位于当前文件夹的上一级文件夹中

文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到。

网页
图像
样式表
Javascript

绝对文件路径

1	<img src="https://ajioy.cn/img/avatar.jpg" alt="avatar">

相对文件路径

相对路径指向了相对于当前网站根目录中imgs文件夹里的一个文件。

1	<img src="/imgs/picture.jpg" alt="flower">

相对路径指向了位于当前文件夹imgs文件夹中的一个文件。
1
<img src="imgs/picture.jpg" alt="flower">
相对路径指向了位于当前文件夹上一级目录中的一个文件。
1
<img src="../imgs/picture.jpg" alt="flower">

总结：使用相对路径是个好习惯。网页就不会与当前的基准URL进行绑定。

HTML头部

HTML头部元素

标签	描述
`<head>`	定义关于文档的信息。
`<title>`	定义文档标题。
`<base>`	定义页面上所有链接的默认地址或默认目标。
`<link>`	定义文档与外部资源之间的关系。
`<meta>`	定义关于 HTML 文档的元数据。
`<script>`	定义客户端脚本。
`<style>`	定义文档的样式信息。

head元素

head元素是所有头部元素的容器。
head内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。
可添加到head部分的标签，title\base\link\meta\script\style。

base元素

base标签为页面上的所有链接规定默认地址（目录）或默认属性（target）。
base标签针对所有的a元素起作用。
base标签必须在head标签中使用。
base标签全局地址（href指定的地址）是针对相对链接的a标签起作用。
base标签全局属性（target属性）是针对所有没有设置该属性（target属性）的a标签起
作用。
base标签全局地址也可以是相对地址。

<head>
<base target="_blank" />
</head>
<body>

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

<p>
<a href="https://blog.csdn.net/ajioy">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。
</p>

link元素

link标签定义文档与外部资源之间的关系。常用于连接样式表。

1
2
3

<head>
<link rel="stylesheet" type="text/css" href="mystlye.css" />
</head>

<++>

meta元素

针对搜索引擎的关键词。
一些搜索引擎会利用meta元素的name和content属性来索引页面。

1	<meta name="description" content="Free Web tutorial on HTML, CSS, XML" />

下面的meta元素定义页面的关键词。name和content属性作用是描述页面的内容。

1	<meta name="keywords" content="HTML,CSS,XML" />

HTML实体

前言

在HTML中，某些字符是预留的。
在HTML中，不能使用小于号和大于号，因为浏览器会误以为它们是标签。
如果希望正确地显示预留字符，必须在HTML源码中使用字符实体（character entities）。

1
2
3

&entity_name;
or
&#entity_number;

使用实体名而不是数字的好处是便于记忆。坏处是浏览器不支持所有实体名称，对实体数
字支持却非常好。

不间断空格

（non-breaking space）是HTML常用字符实体。
浏览器总是会截断HTML页面中的空格。如果在文本中写10个空格，在显示该页面之间，浏
览器会删除它们中的9个，如需增加空格的数量，需要使用 字符实体。

HTML中的所有字符实体

| 显示结果 | 描述              | 实体名称 | 实体编号 |
|:---------|:------------------|:---------|:---------|
| `+`      | 空格              | &nbsp;   | &#160;   |
| `<`      | 小于号            | &lt;     | &#60;    |
| `>`      | 大于号            | &gt;     | &#62;    |
| `&`      | 和号              | &amp;    | &#38;    |
| `"`      | 引号              | &quot;   | &#34;    |
| `'`      | 撇号              | &apos;   | &#39;    |
| `￠`     | 分（cent）        | &cent;   | &#162;   |
| `£`      | 镑（pound）       | &pound;  | &#163;   |
| `¥`      | 元（yen）         | &yen;    | &#165;   |
| `€`      | 欧元（euro）      | &euro;   | &#8364;  |
| `§`      | 小节              | &sect;   | &#167;   |
| `©`      | 版权（copyright） | &copy;   | &#169;   |
| `®`      | 注册商标          | &reg;    | &#174;   |
| `™`      | 商标              | &trade;  | &#8482;  |
| `×`      | 乘号              | &times;  | &#215;   |
| `÷`      | 除号              | &divide; | &#247;   |

HTML URL

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

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

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

HTML URL编码

URL只能使用ASCII字符集来通过因特网进行发送。
URL通常会包含ASCII字符集以外的字符，URL必须转换为有效的ASCII格式。
URL编码使用%，其后跟随两位的十六进制数来替换非ASCII字符。
URL不能包含空格。URL编码通常使用+来替换空格。

€ %80
£ %A3
© %A9
® %AE

HTML文档类型

<!DOCTYPE>声明帮助浏览器正确地显示网页。它不是HTML标签，只是为浏览器提供一
项信息，即HTML是用什么版本编写的，因为HTML有多个不同的版本。

1	<!DOCTYPE html> HTML5

HTML语言代码

通过lang属性来对每张页面中的主要语言进行声明，如：

<html lang="en">
<html lang="zh-cn">
...
</html>

中国 zh

HTML表单

HTML表单用于收集用户输入。

form元素

form元素定义HTML表单。表单元素指的是不同类型的input元素、复选框、单选按钮、提
交按钮等。

<form>
...
form elements
...
</form>

input元素

text: 定义常规文本输入。
radio: 定义单选按钮。
submit: 定义提交按钮，提交表单。

<form>
First Name: <br>
<input type="text" name="firstname">
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female" >Female
<br>
<input type="submit" value="Submit">
</form>

Action属性

action属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按
钮。通常，表单被会提交到WEB服务器上的网页。
如果省略action属性，则action会被设置为当前页面。

1	<form action="action_page.php">

Method属性

method属性规定在提交表单时所有的HTTP方法（GET或POST）
GET时，表单数据在页面地址栏中是可见的，适合少量数据的提交。
POST时，表单数据在地址栏中不可见，安全性强。

1 2	<form action="action_page.php" method="GET"> <form action="action_page.php" method="POST">

Name属性

如果要正确地被提交，每个输入字段必须设置一个name属性。

用fieldset组合表单数据

fieldset元素组合表单中的相关数据。
legend元素为fieldset元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

HTML表单元素

input元素

见上一节

select元素（下拉列表）

select元素定义下拉列表。
option元素定义待选择的选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

textarea元素（文本域）

定义多行输入字段。

1
2
3

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button元素

1	<button type="button" onclick="alert('hello,ajioy')">Click me</button>

HTML5表单元素

HTML5增加以下表单元素：

datalist
keygen
output

参考链接

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

to be continued…

本文历史

2019年12月23日完成初稿，整理笔记花时5小时以上。