Last updated on a year ago

这不是H5,以下内容包含了HTML5移除的标识属性，新浏览器可能不再适用

HTML基本标记

一个完整的HTML文档必须包含三个部分：

由<html>元素定义的文档版本信息
由<head>定义各项声明的文档头部
由<body>定义的文档主体部分

HTML头部标记head

<head>元素的作用范围是整篇文档，<head>元素中可以有<meta>信息元、文档样式表定义（CSS）和脚本（JS）等信息，定义在头部的内容一般不会在网页上显示。

标题标记title

页面的标题一般用来说明网页的用途，显示在浏览器的标题栏中。标题信息设置在头部内，语法：

1
2
3

<head>
    <title>标题内容</title>
</head>

元信息标记meta

meta元素提供的信息不显示在网页中，一般用来定义页面信息的说明、关键字、刷新等。在html里meta不需要结束标记，一个尖括号内就是一个meta内容。写在头部

设置页面关键字

一个页面可以有多个meta。meta的元素有name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类。搜索信息都是通过输入关键字来实现的，它是针对搜索引擎的信息。

1	`<meta name="keywords" content="输入具体的关键字">`

说明：name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。

设置页面说明

也是为了方便搜索引擎查找，用来详细说明网页的内容，页面说明在网页中不显示

1	`<meta name="description" content="设置页面说明">`

说明：name为属性名称，这里设置为description，也就是页面说明，在content中定义具体的描述语言

定义编辑工具

很多编辑软件都可以制作网页，在源代码的头部可以设置网页编剧工具的名称。在网页中不显示。

1	`<meta name="generator" content="编辑软件的名称">`

说明：name为属性名称，这里设置为generator，也就是设置编辑工具，在content中定义具体的编辑软件名称

添加作者信息

1	`<meta name="author" content="作者的名字"`

说明：name为属性名称，这里设置为author，也就是设置作者信息，在content中定义具体的信息

设置网页文字及语言

在网页中还可以设置语言的编码方式，这样浏览器就可以正确的选择语言，而不需要人工选择。

1	`<meta http-equiv="content-type" content="text/html; charset=字符集类型" />`

说明：在该语法中，http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集类型，国内常用的是GB码，往往设置为gb2312，即简体中文。英文是ISO-8859-1字符集，此外还有其他。

设置页面的定时跳转

使用<meta>标记可以使网页在经过一定时间后自动刷新，这可以通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间

1	`<meata http-euiv="refresh" content="跳转的时间;URL=跳转地址">`

说明：refresh表示刷新，content中设置刷新的时间和刷新后的链接地址，两者用分号隔开。默认情况下，时间以秒为单位

页面注释<!– –>

~~最讨厌的事：让我写注释和别人不写注释~~

1	`<!--注释内容-->`

说明：肚子饿了

标题字

标题字标记h

从<h1>到<h6>共有6个级别的标题，h表示headline。

1
2
3

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

对于不同浏览器，其确切的点阵尺寸大小也不相同，但一级标题大约是标注文字高度的2~3倍，六级标记则比标志文字略小

标题字对齐属性align

默认是左对齐，若需要选择其他方式则需要使用align参数进行设置

1	`<align= 对齐方式>`

属性值	含义
left	左对齐
center	居中对齐
right	右对齐

段落标记

段落标记p

<p>用来起始一个段落，可以没有结束标记</p>，而每一个新段落的开始同时表示上一个段落的结束。

1
2
3

<p>段落1
<p>段落2
<p>段落3

同时还可以配合align使用，调整段落的位置。

换行符br

<br>的作用是在不另起一段的情况下将当前文本强制换行

<br>

<b;r>是唯一可以为文字分行的方法，其他标记如<p>，可以为文字分段

不换行nobr

在网页中，如果一段文字过长，浏览器会自动对这段文字进行换行处理。可以使用nobr来禁止自动换行

1	`<nobr>不换行文字</nobr>`

水平线

<hr>标记代表水平分割模式，在浏览器中显示一条线，可以使用size属性修改线条的粗细，color设置线条的颜色

其他标记

插入空格

可以用许多不同的方法分开文字，包括空白、标签和Enther，这些都被称为空格，因为它们可增加字与字之间的距离。

&nbsp

说明：在网页中可以有多个空格，一个**&nbsp**表示一个半角空格

插入特殊符号

网页有时候需要用到一些特殊字符，比如现在我写博客记录HTML的知识，出现了<p>，如果直接写就会被识别为段落标记，这时可以用类似上面空格的方法，写入特殊字符。由前缀“&”、字符名称和后缀‘;“构成。

特殊字符	符号的代码
“	&quot
&	&amp
<	&lt
>	&gt
×	&times
§	&sect
©	&copy
®	&reg
™	&trade

建立超链接

内部链接

与自身网站页面相关的链接被称为内部链接

1	`<a href="链接地址">文本</a>`

链接的目标窗口

默认情况下，超链接都会在原来的浏览器窗口中打开，可以使用target属性来控制打开的目标窗口

1	`<a href="链接目标" target="目标窗口打开方式"></a>`

属性值	含义
-self	在当前页面中打开链接
-blank	在一个全新的空白窗口中打开链接
-top	在顶层框架中打开链接，也可以理解为在根框架中打开链接
-parent	在当前框架的上一层里打开链接

锚点链接

用于页面内跳转

建立锚点

利用锚点名称可以链接到相应的位置，名称可以是英文或数字或者混合，不能有名称相同的锚点

1	`<a name="锚点的名称"></a>`

链接同一页面的锚点

在建立锚点以后，就可以创建到锚点的链接，需要用**#号以及锚点的名称作为href**的属性值

1	`<a href=“#锚点名称"></a>`

如果锚点在屏幕上已经可见，那么浏览器可能不会跳转。

链接到其他页面的锚点

锚点链接不但可以链接到同义页面，也可以在不同页面中设置

1	`<a href="链接的文件地址" #锚点名称"></a>`

外部链接

外部链接是指跳转到当前网站之外的资源中

链接到http

1	`<a href="http://..."></a>`

链接到E-mail

在网页上创建E-mail链接可以使浏览者快速反馈自己的意见，当读者点击时，可以立即打开浏览器默认的E-mail处理程序，收件人的邮箱地址由E-mail超链接中指定的地址自动更新，无需浏览者输入。

1	`<a href="mailto:邮箱地址"></a>`

链接到FTP

FTP代表文件传输协议，一个站点通常包含一些上传和下载的目录，大部分FTP网站需要用户使用用户名和密码来登录

1	`<a href="ftp://地址"></a>`

新版的edge浏览器似乎取消了对FTP的支持

链接到Telnet

Telnet通常用来登录一些BBS网站，也是一种远程登录方式

1	`<a href="telnet://地址"></a>`

下载文件

1	`<a href="文件地址"></a>`

只要文件不是网页，单击链接的时候就会自动下载文件

使用图像

插入图像及其属性

插入图像的标记只有一个，那就是img标记，img元素的相关属性如下

属性	描述
src	图像的源文件
alt	提示文字
width，height	宽度和高度
border	边框
vspace	垂直间距
hspace	水平间距
align	排序
dynsrc	设定avi文件的播放
loop	设定avi文件循环播放次数
loopdelay	设定avi文件循环播放延迟
start	设定avi文件播放方式
lowsrc	设定低分辨率图片
usemap	映像地图

图像的源文件src

1	`<img src="图像文件地址">`

可以使用http://关键字作为图像的地址

图像的提示文字alt

当图片被下载后，把鼠标悬停在图像上会显示提示文字，如果没下载，则显示空白，悬停空白页会显示提示文字

1	`<img src="图像地址" alt="提示文字的内容">`

图像的高度和宽度width、height

如果不定义高度和宽度，则按原始尺寸显示

1	`<img src="图像地址" width="图像宽度" height="图像高度">`

单位是像素，无论设置什么大小，整张图片都会被加载，所以不会改变加载速度

图像的超链接

图像页可以设置超链接，同一个图像的不同部分也可以链接到不同的文档，这就是热区链接

图像的超链接

1	`<a href="链接地址"><img src="图像地址"></a>`

由于使用<a>,所以可以配合前面说过的属性使用。

热区链接

在HTML中可以把图片划分为多个热点区域，每一个热点区域链接到不同的网页，这种效果的是指是把一幅图片分为不同的热点区域，再让不同区域进行链接，这就是映射地图。

语法：首先要先在图像文件中设置映像图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称

1	`<img src="图像地址" usemap="映像图像名称">`

然后定义热区图像以及热区的链接属性

1
2
3

<map name="映射图像名称">
	<area shape="#热区形状" coords="热区坐标" href="链接地址">
</map>

说明：name用来定义映射图名称，shape定义热区形状，coords定义热区的坐标，不同的热区形状有不同的坐标写法，推荐使用***Dreamweaver绘制,下面是shaper*属性值和对应得coords写法

shape	coords
rect-正方形	x1,y1,x2,y2
circle-圆形	x,y,r
poly-多边形	x1,y1,x2,y2,x3,y3……xn,yn

使用列表

HTML列表共有三种：无序列表，有序列表，定义列表

有序列表ol

<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

有序列表的序号类型type

默认情况下，有序列表的序号是用数字表示，但可以通过type属性改变序号的类型

1
2
3

<ol type="序号类型">
    <li>有序列表项</li>
</ol>

序号类型有5种：

类型值	列表项目的序号类型
1	数字1，2，3…
a	小写字母a,b,c…
A	大写字母A,B,C…
i	小写罗马字母i,ii,iii,iv…
I	大写罗马字母I,II,III,IV…

type属性仅仅适用于有序列表和无序列表，并不适用于目录列表、自定义项和菜单列表

有序列表的起始数值start

默认情况下，有序列表的序号是从1开始的，通过start属性可以调整序号的起始值

1
2
3

<ol start="起始值">
    <li>有序列表项</li>
</ol>

无序列表

无序列表除了不使用数字和字母以外，其他于有序列表相似

无序列表ul

1
2
3

<ul>
    <li>列表项</li>
</ul>

无序列表的类型type

默认情况下是•而通过type参数可以调整无序列表的项目符号

1
2
3

<ul type="符号类型">
    <li>列表项</li>
</ul>

type可以设置的值有：

类型值	列表项目的符号
disc	•实心圆
circle	ο空心圆
square	■正方形

定义列表标记dl

定义列表由两部分组成：定义条件和定义描述<dt>用来指定需要解释的名词，<di>是具体的解释

<dl>
    <dt>定义条件</dt>
    <dd>定义描述</dd>
</dl>

实例与效果：

1
2
3
4
<dl>
    <dt>定义列表</dt>
    <dd>定义列表由定义条件和定义描述构成，用来解释指定的名词</dd>
</dl>
定义列表

定义列表由定义条件和定义描述构成，用来解释指定的名词

尽管在一个自定义列表之外使用<dd>标记缩进文本非常有用，但这并不是有效的HTML语法，可能会在部分浏览器中造成难以预料的后果

菜单列表在浏览器和无序列表的显示效果是相同的，它的功能也可以通过无序列表来实现

1
2
3

<menu>
	<li>列表项</li>
</menu>

实例与效果：

前端三件套：
<menu>
	<li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</menu>

前端三件套：

HTML

CSS

JavaScript

使用表格

创建表格

表格的基本构成table、tr、td

表格由行、列、单元格组成，一般通过三个标记来创建，分别是表格标记<table>、行标记<tr>、单元格<td>

<table>
    <tl>
        <td>第一行，第一列</td>
        <td>第二行，第二列</td>
    </tl>
    <tl>
        <td>第二行，第一列</td>
        <td>第二行，第二列</td>
    </tl>
</table>

设置表格的标题caption

可以使用<caption>来设置标题单元格，表格的标题一般位于整个表格的第一行，一个表格只能有一个

<table>
<caption>表格标题</caption>
    <tr>
    	<td>单元格内容</td>
    </tr>
</table>

实例与效果

<table>
    <caption>成绩表</caption>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>100</td>
    </tr>
</table>

成绩表
语文	100
数学	100
英语	100

表头th

表格的表头**<th>实际是<td>**单元格的一种变体，实质上仍是一种单元格，一般位于表格的第一行和第一列，用来表示这一行或列的内容类别。一般，浏览器会以粗体和居中的方式显示元素中的内容

<table>
    <tr>
        <th>单元格内容</th>
        <td>单元格内容</td>
    </tr>
</table>

th的起始标记必须有，但结束标记是可有可无的。

表格的基本属性

表格的宽度width

如果不指定宽度，浏览器就会根据内容的多少自动调整宽度

<table width="宽度">
    <tr>
        <td></td>
    </tr>
</table>

说明：表格宽度的值可以是像素，也可以是百分比，百分比的话会根据浏览器窗口大小改变

表格的高度height

<table height="高度">
    <tr>
        <td></td>
    </tr>
</table>

说明：同上，单位可以是像素也可以是百分比。

表格的对齐方式align

1	`<table align="对齐方式">`

参数如下：

属性值	说明
left	整个表格在浏览器页面中左对齐
center	整个表格在浏览器页面中居中对齐
right	整个表格再浏览器页面中右对齐

虽然会改变表格的对齐方式，但单元格内的对齐方式并没有改变，要改变，可以在对应的行、列或单元格内用align定义

表格边框

表格边框宽度border

1
2
3

<table border="边框宽度">
    
</table>

只要宽度不为0，就会出现边框

表格边框颜色bordercolor

默认情况下，边框颜色为灰色，可以通过bordercolor设置颜色

1
2
3

<table border="边框宽度" bordercolor="边框颜色">
    
</table>

说明：边框颜色可以是十六进制的颜色值，也可以是对应颜色的英文。

内框宽度cellspacing

表格的内框宽度用于设置表格内每单元格之间的间距

1
2
3

<table cellspacing="内框宽度值">
    
</table>

内框的单位是像素

表格内文字与边框间距cellpadding

1	`<table cellpadding="文字与边框的距离"`

表格背景

表格背景颜色bgcolor

表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色覆盖

1
2
3

<table bgcolor=“背景颜色">
                     
</table>

表格背景图像

1
2
3

<table background="背景图像地址">
    
</table>

表格的行属性

高度控制height

1	`<tr height="行的高度"></tr>`

边框颜色bordercolor

1	`<tr bordercolor="边框的颜色"></tr>`

行的背景bgcolor、background

1
2
3

<tr bgcolor="行的背景颜色"></tr>

<tr background="行的背景图片地址"></tr>

行文字的水平对齐方式align

默认为左对齐

1	`<tr align="对齐方式"></tr>`

align的属性值有以下三种：

属性值	效果
left	左对齐
center	水平居中
right	右对齐

行文字的垂直对齐方式valign

默认为垂直居中对齐

1	`<tr valign="对齐方式"></tr>`

行文字的垂直对齐方式有三种：

属性值	效果
top	顶端对齐
middle	垂直居中
bottom	底部对齐

单元格属性

注意，该部分内容可能仅适用于ie等浏览器。经尝试edge、火狐、Google均不再使用

单元格大小width、height

默认情况下，党员个的宽度和高度会根据内容自动调整

1	`<td width="宽度" height="高度"></td>`

水平跨度clospan

在使用表格时，有时候需要将两个或多个相邻的单元格合并

1	`<td clospan="跨度的列数"></td>`

垂直跨度rowspan

1	`<tr rowspan="跨度的行数"></tr>`

对齐方式align、valign

1	`<td align="水平对齐方式" valign="垂直对齐方式"></td>`

单元格的背景色

1	`<td bgcolor="背景色"></td>`

单元格的边框颜色bordercolor

1	`<td bordercolor="边框颜色"></td>`

单元格的亮边框bordercolorlight

1	`<td bordercolorlight="颜色"></td>`

单元格的暗边框bordercolordark

1	`<td borderdark="颜色"></td>`

表格的结构

还有一些标记是用来做表格结构的，包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoo>

表格的表首标记thead

用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等

1	`<thead bgcolor="背景颜色" align="水平对齐方式" valign="垂直对齐方式"></thead>`

一个表格内只能有一个表首，<thead>里还可以包含<**tr>,<td>，且<thead>可以在<table>内的任意位置，无论在哪，<thead>内的行列单元格都会被放在第一行作为表首**

表格的表主体标记tbody

表主体样式用于统一表主体部分的样式

1	`<tbody bgcolor="背景颜色" align="水平对齐方式" valign="垂直对齐方式"></tbody>`

使用表单

制作动态网页时常常用到表单，表单主要用来收集客户端提供的相关信息，使网页具有交互性，如文本域、列表框、复选框等

表单标记form

1
2
3

<form>
    
</form>

提交表单action

action用于指定表单数据提交到哪个地址进行处理

1
2
3

<form action="表单的处理地址">
    
</form>

表单名称name

name用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般需要给表单命名

1
2
3

<form name="表单名称">
    
</form>

传送方法method

method属性用于指定在数据提交单服务器的时候使用哪种HTTP提交方法，可取值为get或post

get：表单数据被传送到action属性指定的URL，然后这个新URL被送到处理程序上
post：表单数据被包含在表单主体中，然后被送到处理程序上

编码方式enctype

用于设置表单信息提交的编码方式

1
2
3

<form enctype="编码方式">
    
</form>

enctype属性为表单定义了MIME编码方式，编码方式取值如下：

enctype的取值	取值的含义
application/x-www-form-urlencoded	默认的编码形式
multipart/form-data	MIME编码，上传文件的表单必须选择该项

目标显示方式target

target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息

1
2
3

<form target="目标窗口的打开方式">
    
</form>

说明：打开方式有4个选项：**_blank、_parent、_self、_top**

插入表单

文字字段text

用户可以在文字字段内输入字符或者单行文字

1	`<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" />`

说明：该语法中包含的参数的含义、取值如下：

参数类型	含义
type	用来指定插入哪种表单元素
name	密码域的名称，用于和页面中其他控件加以区别，名称由英文或数字以及下划线组成，有大小写区分
value	用来定义密码域的默认值，以星号*显示
size	确定文本框在页面中显示的长度，以字符为单位
maxlength	用来设置密码域的文本框中最多可以输入的字符数

密码域password

密码域是一种特殊的文字字段，他的属性和文字字段是相同的，单密码域在输入时会显示为*号

1	`<input name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数"`

注意：密码域仅仅是使周围人看不见密码，但并不能使数据安全。

单选按钮radio

可以使用户从选择列表中选择一个选项

1	`<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked/>`

说明：单选按钮必须设置value的值，对于一个选择列表中的所有单选按钮来说，往往要设置为相同的名称，传递时才能更好地对某一个选择内容进行判断，在一个单选按钮组中只有一个单选按钮可以设置为checked，checked可以设置初始默认选项，若所有单选按钮都不设置，则没有初始选项

效果与实例

<form name="form1">
    <input name="单选按钮名称" type="radio" value="单选按钮的取值" checked/>设置checked
    <input name="单选按钮名称" type="radio" value="单选按钮的取值">不设置checked
</form>

<form name="form2">
    <input name="单选按钮名称" type="radio" value="单选按钮的取值">不设置checked
    <input name="单选按钮名称" type="radio" value="单选按钮的取值">不设置checked
</form>

复选框checkbox

1	`<input name="复选款名称" type="checkbox" vaue="复选框的取值" checked/>`

普通按钮button

一般配合JavaScript使用

1	`<input name="按钮名称" type="button" value="按钮的取值" onclick="处理程序"/>`

说明：value的取值就是按钮上显示的文字

提交按钮submit

1	`<input type="submit" name="按钮名称" value="按钮的取值" />`

重置按钮reset

重置按钮用来清除用户在页面中输入的信息

1	`<input type="reset" name="按钮名称" value="按钮取值"/>`

图像域image

使用一副图像作为按钮

1	`<input name="图像域名称" type="image" src="图像路径"/>`

隐藏域hidden

有时候想传送一些数据，这些数据对于用户来说是不可见的。可以通过一个隐藏域来传送这样额数据。

1	`<input name="隐藏域名称" type="hidden" value="隐藏域的取值"`

文件域file

文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，在上传图像时也常常用到。

1	`<input name="文字域名称" type="file" size="控件长度" maxlength="最长字符数"/>`

菜单和列表

菜单和列表主要用来选择给定答案中的一种，这类选择中往往答案比较多。菜单和列表主要是为了节省页面的空间，他们都是通过**<select>和<option>**标记来实现

下拉菜单

<select name="下拉菜单名称">
    <option value="选项值" selected>显示内容

</select>

说明：选项值是提交表单时的值，而在选项显示内容才是真正在页面中显示的，selected表示该选项在默认情况下是选中的，一个下拉菜单只能由一个默认选项被选中。下拉菜单的宽度是由最长文本的宽度决定的。

效果与实例

<select name="下拉菜单名称">
    <option value="1" selected>选项1
    <option value="2" >选项2
    <option value="3" >选项3
    <option value="4" >选项4
</select>

列表项

页面中的列表项可以显示几条信息，一旦超出这个数，就会产生滚动条。

1
2
3

<select name="列表项名称" size="显示的列表项数" multiple>
    <option value="选项值" selected>选项显示内容
</select>

说明：size用于设置列表项数，当超过这个数时就会出现滚动条。

效果与实例

<select name="列表项名称" size="2" multiple>
    <option value="1" selected>选项1
    <option value="2" >选项2
    <option value="3" >选项3
    <option value="4" >选项4
</select>

文本域textarea

当要让浏览器填入多行文字时，就应该使用哦文本域而不应该使用文字字段。

1	`<textarea name="文本域名称" cols="列数" rows="行数"></textarea>`

说明：在语法中，不能使用value属性来建立一个在文本域中显示的初始值，且应当在textarea标记的开头和结尾之间包含想要在文本域内显示的任何文本。

效果与实例
1
<textarea name="1" cols="18" rows="3">文本显示内容</textarea>
文本显示内容

id标记

id标记是一个较为特色的标记，它主要用于标示一个唯一的元素。这个元素可以是文字字段，可以是密码域，也可以是其他的表单元素，甚至可以是一幅图像、一个表单

1	`<id= 元素的标识名>`

说明：在定义标签名时最好根据含义命名

实例

1	`密码：<input name="password" type="password" if="password" size="10"/>`

添加多媒体

除了文本和图像，还可以添加视频、动画、声音等元素

设置滚动效果

滚动标记marquee

使用marquee不仅可以移动文字，还可以移动图片、表格等。

1	`<marquee>......</marquee>`

说明：在标记之间添加要进行滚动的内容，并可以在标记之间设置为你或图像的属性

实例与效果
1
<marquee>滚动</marquee>
滚动

设置滚动方向direction

默认是从右向左移动，可以通过direction设置不同的滚动方向

1	`<marquee direction="滚动方向">......</marquee>`

说明：滚动方向有四个取值：up、down、left、right，即向上、向下、向左、向右

滚动方式behavior

1	`<marquee behavior="滚动方式">......</marquee>`

滚动方式如下：

behavior	滚动效果
scroll	循环滚动，默认效果
slide	只滚动一次就停止
alternate	来回交替滚动

滚动速度srollamount

1	`<marquee srollamount="滚动速度">......</marquee>`

说明：实际上是设置每次滚动时移动的长度，单位是像素

edge已不支持

滚动延迟scrolldelay

1	`<marquee scrolldelay="时间间隔">......</marquee>`

说明：时间间隔的单位是毫秒

滚动循环loop

1	`<marquee loop="循环次数">...</marquee>`

说明：默认情况下会一直滚动下去，可以设置滚动几次后停止

滚动范围width、height

如果不设置滚动范围，默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用了width和height参数可以调整其水平和垂直的范围

1	`<marquee width="背景宽度" height="背景高度">......</marquee>`

滚动背景颜色bgcolor

1	`<marquee bgcolor="背景颜色">...</marquee>`

说明：背景颜色为十六进制的颜色

空白空间hspace、vspace

默认情况下，滚动对象周围的文字或图像是与滚动背景紧密结合的，使用hspace、vspace可以设置他们之间的空白空间

1	`<marquee hspace="水平范围" vspace="垂直范围">...</marquee>`

插入多媒体文件

插入Flsh动画

1	`<embed src="文件地址" width="宽度" height="高度"></embed>`

插入音频和视频

1	`<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>`

HTML5入门基础

HTML5中语法中的三个要点

可以省略的标签的元素

在HTML5中，有些元素可以省略标签，具体有三种：

不允许写结束符的标签:

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略结束符的标签

li、dt、dd、p、rt、rp、optground、option、colground、thead、tbody、tfoot、tr、td、th
可以省略整个标签

HTML、head、body、colground、tbody

取得boolean的属性

例如disabled属性和readonly属性，通过默认属性的值来表达”值为true”。此外，在属性值为true时，可以将属性值设为属性名称本身，也可以将值设为空字符串，如：一下checked的值都为true

1
2
3

<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">

省略属性的引用符

在HTML4中设置属性值时，可以适用双引号或单引号来引用，在HTML5中，只要属性值不包含空格、括号，单引号、双引号、等于号等字符，都可以省略属性的引用符。如：

1
2
3

<input type="text">
<input type='text'>
<input type=text>

HTML5中新增的元素和废除的元素

新增的结构元素

HTML4缺少了结构，必须分析标题的级别，才能看出各个部分的划分方式。边栏、页眉、页脚、导航条等都用通用的div元素表示

HTML5新增了一些新元素，专门用来标识这些常见的结构，不再需要为Div的命名操心，对于手机、阅读器等设备更有好处

section：可以表达书本的一部分或一章，或者一章内的一节
header：页面主体的头部，并非head元素
footer：页面的底部（页脚），可以是一封邮件签名的所在
nav：到其他页面的链接合集
article：博文、杂志、文章汇编等中的一篇文章

section

表示页面中的一个内容区块，比如章节、页眉、或页面中的其他部分，可以与h1,h2等元素结合起来使用，标示文档结构。

1	`<section>...</section>`

表示页面中的一个内容区块或者整个页面的标题

1	`<header>...</header>`

表示整个页面或者页面中的一个内容区块的脚注，一般来说，他会包含作者的姓名日期等

1	`<footer>...</footer>`

nav

表示页面中导航链接的部分

1	`<nav></nav>`

article

表示页面中的一块与上下文无相关的独立内容，如博客中的一篇文章，报纸中的一篇文章

新增块级元素

HTML5还增加了一些纯语义性的块级元素：

aside：定义页面内容之外的内容，比如侧边栏
figur：定义媒介内容的分组，以及它们的标题
figcaption：媒介内容的标题说明
dialog：定义对话（会话）

aside元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元，使用figcaption为figue元素组添加标题，如下：插入了图片和图片的标题

<!-- HTML4写法 -->
<img src="index.jpg" alt="xxxy有限公司">
<p>
    xxxy有限公司
</p>
<!-- HTML5写法 -->
<figure>
<img src="index.jpg" alt="xxxy有限公司">
	<figcaption>
    	<p>
            xxxy有限公司
        </p>
    </figcaption>
</figure>

HTML5通过采用figure元素对此进行了改正，当和figue和figcaption同时出项时，我们通过语义化就能联想到这是图片对应的标题

dialog元素用于表达人们之间的对话。在HTML5中，dt用于表示说话者，dd则表示说话内容

<dialog open>
<dt>问</dt>
    <dd>问题内容</dd>
<dt>答</dt>
	<dd>回答内容</dd>
</dialog>

新增的行内的语义元素

mark：定义有记号的文本
time：定义日期/时间
meter：定义预定义范围内的度量
progress：定义运行中的进度

mark用来高显某些字符，如这样

time元素用来定义时间或日期，该元素可以代表24小时中的某一时刻，允许有时间差在设置时间或日期时，只需将该元素的属性datetime设为相应的时间或日期即可

1	`<time datetime="2023-7-18">今天是2023年7月8日</time>`

页面在解析时，获取的是属性datetime中的值

progress是新增的状态交互元素，用来表示页面中某个任务的完成进度，比如下载文件时，可以通过该元素动态展示

1	`<progress value="1" max="2"></progress>`

value为当前进度，max为最大值，若不填则进度条会来回动

填：

不填：

meter元素用于表示在一定数量范围中的值，如投票中，各个人占的比例，或考试分数等，和progress相比适用于静态

1	`<meter value="当前度量" max="理论最大值,默认1" min="理论最小值，默认0" high="高值区的下限" low="低值区的上限" optimum="最优值"></meter>`

说明：当value位于[min,low]、[low,high]、[high,max]不同区间时，浏览器会有不同的视觉效果。optimum不写则默认在[low,high]区间

实例与效果

<!--不写optimum-->
<meter value="10" max="100" min="0" high="60" low="30"></meter>
<meter value="50" max="100" min="0" high="60" low="30"></meter>
<meter value="70" max="100" min="0" high="60" low="30"></meter>

<!--使用optimum并位于高区间-->
<meter value="10" max="100" min="0" high="60" low="30" optimum="90"></meter>
<meter value="50" max="100" min="0" high="60" low="30" optimum="90"></meter>
<meter value="70" max="100" min="0" high="60" low="30" optimum="90"></meter>

<!--使用optimum并位于低区间-->
<meter value="10" max="100" min="0" high="60" low="30" optimum="20"></meter>
<meter value="50" max="100" min="0" high="60" low="30" optimum="20"></meter>
<meter value="70" max="100" min="0" high="60" low="30" optimum="20"></meter>

新增的嵌入多媒体元素与交互性元素

video：定义视频

1	`<video src="视频地址" controls></video>`

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

说明：可以在video中间插入文字”您的浏览器不支持播放视频”，这样浏览器不支持该元素的时候，就会看到这行字

audio：定义音频
1
<audio src="地址" controls></audio>
embed：用来插入各种多媒体，格式可以是MIDI.WAV,AIFF,AU,MP3等
1
<embed src="地址" />

新增的input元素的类型

url类型：是专门用来输入url地址的文本框，若输入不是url地址则不允许提交
1
2
3
<form> <input type="url" /> </form>
email类型：如果不是email格式，无法提交
date类型：date类型是以日历的形式来方便用户输入的
1
2
3
<form> <input type="date"/> </form>
datetime类型：专门用来输入本地日期和时间的文本框，提交时会进行检查

废除的元素

能够使用CSS 代替的元素：对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为页面样式服务的，而HTML5中提倡把页面样式功能放在CSS样式表中
不再使用frame框架：对于framset元素、frame元素和noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5中不再支持frame框架，只支持iframe框架。
只有部分浏览器支持的元素
对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，所以在HTML5中被废除，其中applet元素可被embed元素或objec元素替代，bgsound元素由audio元素替代，marquee由JavaScript编程的方式替代
其他被废除的元素
- 废除acronym元素，使用abbr元素替代
- 废除dir元素，使用ul元素替代
- 废除isindex元素，使用form元素与input元素相结合的方式替代
- 废除listing元素，使用pre元素替代
- 废除xmp元素，使用code元素替代
- 废除nextid元素，使用GUIDS替代
- 废除plaintext元素，使用”text/plian”MIME类型替代

新增和废除的属性

新增的属性

表单相关的属性

新增与表单相关的属性如下：

可以对 input(type=text)、select、textarea 与 button 标签指定 autofocus 属性。可以让标签在页面打开时自动获得焦点。

可以对 input(type=text) 与 textarea 标签指定 placeholder 属性，它会对用户的输入进行提示，提示用户可以输入的内容。

可以对 input、output、select、textarea、button 与 fieldset 指定 form 属性，申明它属于哪个表单，然后将其放置在页面上任意位置，而不是表单之内。

可以对 input(type=text) 与 textarea 标签指定 required 属性。该属性表示在用户提交的时候进行检查，检查该标签内一定要有输入内容。

为 input 标签增加了几个新的属性：autocomplete、min、max、multiple、pattern 与 step。同时还有一个新的 list 标签与 datalist 标签配合使用。datalist 标签与 autocomplete 属性配合使用。multiple 属性允许在上传文件时一次上传多个文件。

为 input 标签与 button 标签增加了新属性 formaction、formenctype、formmethod、formnovalidate 与 formtarget，他们可以重载 form 标签的 action、enctype、method、novalidate 与 target 属性。为 fieldset 标签增加了 disabled 属性，可以把它的子标签设为 disabled(无效)状态。

为 input 标签、button标签、form标签、增加了 novalidate 属性，该属性可以取消提交时进行的有关检查，表单可以被无条件的提交。

链接相关属性

新增与链接相关的属性如下：

为 a 与 area 标签增加了 media 属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在 href 属性存在时使用。

为 area 标签增加了 hreflang 属性与 rel 属性，以保持与 a 标签、link标签的一致。

为 link 标签增加了新属性 sizes。该属性可以与 icon 标签结合使用(通过rel属性)，该属性指定关联图标(icon标签)的大小。

为 base 标签增加了 target 属性，主要目的是保持与 a 标签的一致性。

其他属性

除了上面介绍的与表达和链接相关的属性外，HTML5还增加了下面的属性：

为 ol 标签增加属性 reversed，它指定列表倒序显示。

为 meta 标签增加 charset 属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。

为 menu 标签增加了两个新的属性—-type 与 label。label 属性为菜单定义一个可见的标注，type 属性让菜单可以以上下文菜单、工具条与列表菜单的三种形式出现。

为 style 标签增加 scoped 属性，用来规定样式的作用范围，譬如只针对页面上某个树起作用。

为 script 标签增加 async 属性，它定义脚本是否异步执行。

为 html 标签增加属性 manifest，开发离线 Web 应用时它与 API 结合使用，定义一个 URL，在这个 URL 上描述文档的缓存信息。

为 iframe 标签增加三个属性 sandbox、seamless 与 srcdoc、用来提高页面安全性，防止不信任的 Web 页面执行某些操作。

废除的属性

HTML4中使用的属性	使用该属性的元素	在HTML5中的替代方案
rev	link、a	rel
charset	link、a	在被链接的资源的中使用HTTP Content-type头标签
shape、coords	a	使用area标签代替a标签
longdesc	img、iframe	使用a标签链接到校长描述
target	link	多余属性，被省略
nohref	area	多余属性，被省略
profile	head	多余属性，被省略
version	html	多余属性，被省略
name	img	id
scheme	meta	只为某个表单域使用scheme
archive、chlassid、codebose、codetype、declare、standby	object	使用data与typc属性类调用插件。需要使用这些属性来设置参数时，使用param属性
valuetype、type	param	使用name与value属性，不声明之的MIME类型
axis、abbr	td、th	使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性，来使单元格的内容变得简短
scope	td	在被链接的资源的中使用HTTP Content-type头标签
align	caption、input、legend、div、h1、h2、h3、h4、h5、h6、p	使用CSS样式表替代
alink、link、text、vlink、background、bgcolor	body	使用CSS样式表替代
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width	table	使用CSS样式表替代
align、char、charoff、height、nowrap、valign	tbody、thead、tfoot	使用CSS样式表替代
align、bgcolor、char、charoff、height、nowrap、valign、width	td、th	使用CSS样式表替代
align、bgcolor、char、charoff、valign	tr	使用CSS样式表替代
align、char、charoff、valign、width	col、colgroup	使用CSS样式表替代
align、border、hspace、vspace	object	使用CSS样式表替代
clear	br	使用CSS样式表替代
compace、type	ol、ul、li	使用CSS样式表替代
compace	dl	使用CSS样式表替代
compace	menu	使用CSS样式表替代
width	pre	使用CSS样式表替代
align、hspace、vspace	img	使用CSS样式表替代
align、noshade、size、width	hr	使用CSS样式表替代
align、frameborder、scrolling、marginheight、marginwidth	iframe	使用CSS样式表替代
autosubmit	menu	使用submit

HTML5的结构

新增的结构元素主要功能就是解决之前div漫天的情况，增强语义

新增的主体结构元素

article元素

article可以包含独立的内容项，可以包含一个论坛帖子、一篇杂志文章、用户评价等，这个元素可以将信息各部分进行任意分组，而不论信息原来的性质，每个article元素的内容都有独立的结构，可以使用header和footer等标签，它们不仅仅可以用在正文中，还可以用在各个节

<article>
    <header>
        <h1>我家乌龟到了我的房间</h1>
        <p>
            时间：<time>18:06</time>
        </p>
    </header>
    	<p>
            这是正文，可爱捏。乌龟正面是这样的*^*	
    	</p>
    <footer>
    	<p>
            <small>我家的是中华花龟</small>
        </p>
    </footer>
</article>

另外，article元素也可以用来表示插件

<artice>
	<h1>
        article表示插件
    </h1>
    <<object>
    	<param name="allowFullScreen" value="true">
    	<embed src="#" width="600"  height="395"></embed>
	</object>
</artice>

section元素

用于对网站或app中页面上的内容进行分块，一个sectino元素通常由内容及其标题组成，但section元素也并非是一个普通的容器当一个容器元素需要被重新定义样式或者定义脚本行为时，还是推荐使用Div控制

section和article的区别：section元素更强调分段，而article强调独立性和完整性。

nav元素

nav元素再HTML5中用于包裹一个导航链接组，用于说明这是一个导航组，在同一个页面中可以存在多个nav

<nav>
	<ur>
    	<li><a href="地址">首页</a></li>
        <li><a href="地址">简介</a></li>
        <li><a href="地址">xxx</a></li>
    </ur>
</nav>

aside元素

用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等，以及其他类似的有别于主要内容的部分。aside元素主要有以下两个用法：

包含在article元素内作为主要内容的附属信息部分，其中内容可以是与当前文章有关的资料

<article>
    <h1>主要内容标题</h1>
    <p>主要内容</p>
    <aside>附属信息</aside>
</article>

在artice元素外作为页面或站点全局的附属信息，比如侧边栏

<aside>
	<ur>
    	<li>侧边栏</li>
        <li>侧边栏</li>
    </ur>
    
</aside>

新增的非主体结构

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，header还可以包含表格、表单或logo图片

hgroup元素

该元素位于正文的开头，可以在这些元素中添加h1标签，用于显示标题，通常是不需要hgroup标签的，hgroup标签是将标题及其子标题进行分组的元素，一个内容区块的标签及其子标题为一组：

<header>
    <article>
        <hroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hroup>
        <p>正文内容</p>
    </article>
</header>

footer通常包括其相关区块的脚注信息，如作者等，在HTML5之前通常使用类似下面的代码来实现：

<Div id="tooter">
    <ur>
    	<li>作者</li>
        <li>联系方式</li>
    </ur>
</Div>

在HTML5中用更加语义化的footer：

<footer>
	 <ur>
    	<li>作者</li>
        <li>联系方式</li>
    </ur>
</footer>

address元素

通常用于文档的结尾没用来在文档只能呈现联系信息，包括名字】站点链接、邮箱等，浏览器显示地址的方式与周围其他文本不同，edge等浏览器用斜体的方式显示

学习笔记

#学习笔记 #前端

Goang基础 Previous

区块链技术与应用 Next

HTML学习笔记2.0

HTML基本标记

HTML头部标记head

标题标记title

元信息标记meta

设置页面关键字

设置页面说明

定义编辑工具

添加作者信息

设置网页文字及语言

设置页面的定时跳转

页面注释<!– –>

标题字

标题字标记h

标题字对齐属性align

段落标记

段落标记p

换行符br

不换行nobr

水平线

其他标记

插入空格

插入特殊符号

建立超链接

内部链接

内部链接

链接的目标窗口

锚点链接

建立锚点

链接同一页面的锚点

链接到其他页面的锚点

外部链接

链接到http

链接到E-mail

链接到FTP

链接到Telnet

下载文件

使用图像

插入图像及其属性

图像的源文件src

图像的提示文字alt

图像的高度和宽度width、height

图像的超链接

图像的超链接

热区链接

使用列表

有序列表ol

有序列表的序号类型type

有序列表的起始数值start

无序列表

无序列表ul

无序列表的类型type

定义列表标记dl

菜单列表标记menu

使用表格

创建表格

表格的基本构成table、tr、td

设置表格的标题caption

表头th

表格的基本属性

表格的宽度width

表格的高度height

表格的对齐方式align

表格边框

表格边框宽度border

表格边框颜色bordercolor

内框宽度cellspacing

表格内文字与边框间距cellpadding

表格背景

表格背景颜色bgcolor

表格背景图像

表格的行属性

高度控制height

边框颜色bordercolor

行的背景bgcolor、background

行文字的水平对齐方式align

行文字的垂直对齐方式valign

单元格属性

单元格大小width、height

水平跨度clospan