HTML——基础

镇楼图

Pixiv:覺醒

〇、HTML基本概念

点击查看详细内容

HTML(Hyper Text Markup Language)是一门标记语言，主要去呈现一个网页之中的元素，元素类型有很多，如文字、图像、声音、视频、动画等

HTML历经了多个版本，这里主要写第5版，主要参考W3C的教程与标准

此blog不会说明网络、工具相关内容，且视为你已经拥有了一定的基础

■注：打上*的表明这是HTML5才具有的新特性

■注：打上+的表明新版本对旧版本进行了一定的修改

■注：打上4.01的表明这是HTML4中存在的特性（可能在4中就废弃了）但在HTML5中删除了因此不赘述其说明

■注：不会说明一个元素是不是空元素，但会演示来间接说明

■注：如果我将几个属性或标签一起展示，则说明之间可能有联系，也可能单纯说明这些都是不能用的

■注：如果我同时展示多个属性或标签，且其中只有部分需要打上*、+、4.01则会加上前缀part

如 br、wbr、xmlns (part *)是说明这两个标签中部分存在HTML5才具有的新特性

■注：如果我标注了略表明我认为这是不需要学习的

初学建议

我建议在free.3v.do网站中花大概10元左右去注册一个网站，这样就有了一个测试的网站，然后在使用过程中FTP软件去传自己的代码去测试即可。

FTP软件我是使用8uftp

8uftp：百度云

提取码：yyds

编程软件我推荐使用VScode，这里不介绍工具的具体使用，请参考其他资料自行完成搭建开发环境

历史（引用于WHATWG，部分修改）

在1990~1995，最初由CERN负责，然后转交给IETF。W3C诞生后由W3C负责，在1995年第一次尝试HTML3.0但失败了。于是在1997年制定了3.2版本，在1997年同时开始了HTML4的开发

但在1998年W3C成员决定停止开发HTML的演变版本，转而去开发基于XML的XHTML。在2000年完成了XHTML1.0的工作，与此同时在开发与HTML、XHTML都不兼容的语言XHTML2

2003年XForms的发布重新激发了对于HTML版本的演化，在HTML4.0的标准中引入了XForms诸多特性，但此标准只在Opera Software的版权下发布

2007年W3C组建了工作组与WHATWG共同开发HTML5标准，但两个组织的目标并不一致。W3C希望发布一个完整的版本，而WHATWG希望持续维护版本。在2019年，W3C、WHATWG共同约定一起合作只开发一个版本

至此HTML5还在修订中，并不是一个稳定的标准

HTML在设计的很多方面上都不一致，因此特性也有着不同的来源，其设计方案也并非一致，有些bug甚至变成了习以为常的惯例

标准内设计之间可能相互影响、相互依赖、相互冲突

HTML具有较好的可扩展性

HTML与XML中最显著的区别就是XML必须使用规范的语法，而在HTML中不严谨的语法很多情况上依然可以运行

Hello World

创建一个index.html文件（在服务器中默认是以index作为默认网页）然后编写以下代码传至FTP服务器即可浏览你所创建的网页(有网环境)

<!DOCTYPE html>
<html>
    <head>
		<title>Hello</title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<p>Hello World!</p>
        <!--body内是写代码的 -->
	</body>
</html>

兼容性问题

不同浏览器之间可能兼容不同的特性，在每个标签之间我会特别说明其兼容性

对于用户而言，浏览器的选择是自由的。假设你在一个firefox上可以正常显示却在IE上无法显示，那用户可能会无法查看，这也是要着重考虑的问题

目前最新的HTML版本是2017年W3C所推荐的5.2

我也会说明版本之间的差异

一、HTML元素

点击查看详细内容

HTML是一种标记语言，其规则就是使用一系列的标记标签(Markup Tag)通过标签标记即可描述出你要在网页上所展示的内容

要想理解HTML就需要先了解标签

通常标签和元素的意思是一样的，除去基本语法很多是需要识记的

HTML元素组成

■开始标签(Opening Tag)

■结束标签(Closing Tag)

通常来说，标签同时具有开始标签和结束标签。但要注意结束标签一定要有斜杠

■内容(Content)

标签之间则用来填写你想展示的内容

■属性(attr)

标签具有着不同的属性，提供不同显示的特性

<标签 属性="属性值">内容</标签>

空元素(empty element)

虽然组成上有4个，但有一类特殊的元素称为空元素，它们没有成对的标签，只有一个标签附上一些属性，因为不成对所以也不具有内容

<标签 属性="属性值"/>

嵌套元素

HTML元素是可以相互嵌套的比如文档的结构本身就是一个嵌套

html里嵌套了head和body，然后在body里继续嵌套

嵌套在很多情况下是随意的（虽然有时候并不是）但不需要清楚哪些能嵌套哪些不能嵌套，根据常理来即可。

比如html是最顶级的元素，但按常理你已经清楚了不能被其他元素嵌套

其它小问题

①HTML标签对大小写并不敏感，因此你完全可以混着来，但标准推荐一律采用小写

②空元素关闭问题：在XHTML、XML以及未来版本中，写上一个空元素也需要一个斜杠，虽然现在的HTML文档并不需要（例如<img src="0.jpg" />）

③元素的属性值推荐使用单引号或双引号框定

二、大体框架

点击查看详细内容

从上述代码中可以抽取出一个写HTML代码的大体框架

①DOCTYPE

DOCTYPE是一个文档类型的标记，用来声明这是什么版本的语言，不过这里你只需要填写html即可表明这是HTML5的代码文档。具体内容在DTD里，初学不需要具体深入

兼容性：所有主流浏览器均支持

②html

html标签会说明这是一个HTML文档，是最外层的元素，可以包含一切除了DOCTYPE的元素

元素的兼容性：所有主流浏览器均支持

xmlns

版本说明：HTML中并不支持，但在XHTML中则是必须的

作用：规定文档的xml命名空间（xml name space）

其他说明： XHTML文档中也可以不写xmlns，虽然是必须的，但已经默认了xmlns="http://www.w3.org/1999/xhtml"

兼容性：所有主流浏览器均支持

manifest (*)

HTML5中引入了应用程序缓存，意味着Web应用程序可以被缓存起来，可以在无联网的情况下依然可以访问。具体内容会在HTML5章节说明

值的类型：（URL）

其他说明：只有使用了manifest才会发挥其缓存功能，否则视为不启用

兼容性：IE9以下版本不支持，其余IE10, Firefox, Chrome, Safari 、 Opera均支持

③head

head标签会包含着页面的基本信息，比如页面标题或是文件风格格式之类的东西

兼容性：所有主流浏览器均支持

profile (4.01)

④body

body标签即为网页的主体部分，在这里开始写代码，但一个HTML文档只能有一个body

兼容性：所有主流浏览器均支持

alink、background、bgcolor、bgcolor、link、text、vlink (4.01)

三、元信息(meta-information)

点击查看详细内容

head文件中一般会存放有关文档的元信息，也会存放其他工具的文件信息，这里只提及HTML自身的信息

①title

title用来展示网页的标题

兼容性：所有主流浏览器均支持

比如在之前演示时我写了title为Hello，则网页的标题也是Hello

但再尝试以下代码

<!DOCTYPE html>
<html>

<head>
    <title>你好</title>
</head>

<body>
    <h1>Hello World!</h1>
    <p>Hello World!</p>
</body>

</html>

可以发现网页标题会显示乱码，如果熟悉的人会立马知道这是编码问题，因此需要另外一个标签meta用来解决

请使用FTP提交到服务器上去测试，离线打开显示正常，无法体现出编码问题。原因在于当你打开网页时相当于服务器向你传递信息，但服务器无法得知你HTML文档的编码因此采用默认的编码向你传递信息，因此发生问题

②meta

meta内含了很多属性，除了上面所说解决编码问题以外还有其他作用，具体参考其特殊属性

兼容性：所有主流浏览器均支持

charset (*)

作用：

规定这个HTML文档是采用什么样的编码，用来解决刚才那样的编码问题

常见的是采用UTF-8编码

值的类型：编码名（规定值）

其他说明：可以通过任何元素的lang来重写

兼容性：所有主流浏览器均支持

http-equiv、content

这涉及到了HTTP协议部分，HTTP协议具有很多首部，meta可以通过模拟来传递一定的HTTP信息。http-equiv表明传递的首部名，content表明传递该首部的内容。

如果对HTTP了解，可以发现这个属性非常强大，可以传达很多信息。具体怎么使用完全取决于你对HTTP的了解，比如HTTP里面有个首部Content-Type用来定义所要传递信息的编码，同样可以完成charset的效果

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

还比如HTTP协议中有个用于重定向的首部refresh，下面代码用来实现3秒后跳转到百度

<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />

请尝试以下代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com" />
    <title>你好</title>
</head>

<body>
    <p>正在前往百度，请等3秒...</p>
</body>

</html>

上传后，可以在你的网页使用F12自带的抓包工具，用来查看HTTP数据包

但这主讲HTML而非HTTP，有关HTTP可以参考《HTTP权威指南》

兼容性：所有主流浏览器均支持

name、content

content也可以和name搭配，name用来说明其他一些的信息，一个好的网页应当还包括作者信息、描述、版本等信息，可以算是一个标签信息，并无实质性的作用，只是作展示。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="作者" content="moshan" />
    <meta name="版本" content="test" />
    <title>你好</title>
</head>

<body>
    <h1>Hello World!</h1>
    <p>Hello World!</p>
</body>

</html>

在线Meta标签生成器

其他说明：如果使用了name就不应使用http-equiv

兼容性：所有主流浏览器均支持

scheme (4.01)

③base

base是一个基准网页标记，用来标记一个整体的大致情况

若不清楚HTML如何表示超链接的请先跳过这一部分内容，看完超链接后再来这

其他说明：只能使用一个base且建议设定在head中的第一个，而且一旦使用base则至少具备href和target属性

兼容性：所有主流浏览器均支持

href

作用：规定了一个相对URL中绝对路径的一部分

比如

<base href="//game/sounds/">

那么在此网页中所有的相对的超链接都是在sounds文件中打开

兼容性：所有主流浏览器均支持

target

作用：规定所有超链接默认是以什么方式打开

可以设定一个整体的target是怎样的方式打开，然后局部特殊的可以另外设定

兼容性：所有主流浏览器均支持

④basefont (4.01)

四、标题、段落

点击查看详细内容

①h1、h2、h3、h4、h5、h6

作用：

这一系列标签主要用来定义标题，h1最大，h6最小。标题不仅仅体现在文字大小和粗细上，搜索引擎也会根据标题进行编制索引。不建议仅仅为了获得更大更粗的字体而采用此标签，应当使用CSS

<!DOCTYPE html>
<html>
<!--由于代码过长，省略了head之后也会省略-->
<body>
    <h1>h1这么大</h1>
    <h2>h2这么大</h2>
    <h3>h3这么大</h3>
    <p>段落这么大</p>
    <h4>h4这么大</h4>
    <h5>h5这么大</h5>
    <h6>h6这么大</h6>
</body>

</html>

可以发现h3的文字基本和正常文字大小一样

align (4.01)

兼容性：所有主流浏览器均支持

②hr

作用：会单独生成一行横线用来区分内容

<!DOCTYPE html>
<html>
<body>
    <h1>败者树介绍</h1>
    <hr/>
	<p>
        败者树在实现上要比胜者树更加简单，只需要考虑其父节点
    </p>
</body>
</html>

align、noshade、size、width (4.01)

兼容性：所有主流浏览器均支持

③br、wbr (part *)

作用：br用于换行；wbr稍特殊是HTML5的新标签

wbr常常用来框定整个单词，一般而言一个单词在显示上如果剩余空间无法支撑则会换行。可以在这个单词中进行分割，这样在换行时不再以整个单词为单位，而会细致到wbr分割的部分

<!DOCTYPE html>
<html>

<body>
    <p>pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
        pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
        pneumonoul<wbr/>tramicroscopicsilicovol<wbr/>canoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
    </p>
</body>

</html>

由上图可以发现其他单词都在完整的情况下换行，而唯独其中一个分割后换行，这就是wbr的作用。wbr的作用一般情况并不会太明显，主要是在细节上防止在错误的位置换行，但一般不使用这个标签

兼容性：所有主流浏览器均支持br；除了IE所有主流浏览器均支持wbr

④p

作用：生成文字段落，段落之间会空行

<!DOCTYPE html>
<html>
<body>
    <p>这是一个段落。</p> 
    <p>这是另外一个段落。</p>
</body>

</html>

align (4.01)

其它说明：值得注意的是HTML显示的效果会受限于硬件屏幕的大小，因此很难确定。还有一点是HTML语言中的空格并非那么容易打出，哪怕使用多个空白符它也会解释为一个空格，这方面请参考HTML的转义字符

兼容性：所有主流浏览器均支持

⑤pre

作用：可以保留原先的格式，不会取消换行、空格等空白符

<!DOCTYPE html>
<html>
<body>
    <pre>
    	换行了
    	空   格了
    </pre>
</body>

</html>

上面虽然避免了这种问题，但你可能会发现一个新的问题，如果显示上前面不空，那么代码上也不能空

width (4.01)

其他说明：由于pre特殊的语法规则，因此无法在里面嵌套元素会视为一个文本而不是一个代码。通常要和code标签结合以获得表示计算机代码这样更适合的语义

兼容性：所有主流浏览器均支持

五、框架

点击查看详细内容

URL(Uniform Resource Locators,统一资源定位器)

有必要简单说明一下URL，URL本身也算是一种技术标准，但本篇只会简单说明，具体说明再以后HTTP中我会详细说明。简单来说就是一个URL可以定位任何一切的已有的文件、信息。

这里给出一个简化不完整的结构

（某些细节我也省略了但不影响学习）

\(scheme://host.domain/path/filename\)

①scheme协议：所使用的网络协议

②host定义域主机：一般为www

③domain域名：网络我域名

④path路径：服务器上的路径

⑤filename文件：最终给所指向的文件

URL的字符编码

URL只能使用ASCII编码，如果发现不是ASCII码必然要做转换

转换流程：

使用%跟随两位十六进制数代替非ASCII码

最简单认证方法就是找一个有非ASCII码的URL然后复制粘贴

另外URL不允许出现空格，一般采用其他符号代替空格

绝对URL与相对URL

URL有绝对和相对之分，像之前的格式其实是绝对URL

所谓绝对URL就是包含了完整的信息

这种是最基本的表达，但更多是采用相对URL

相对URL省略了很多信息最后只保留了path和filename，即访问当前根目录下的文件

相对URL不仅可以在代码层面省略很多信息，还可以避免一个变动的域名引发的额外工作量（专业点说，绝对URL会绑定域名），比如原本域名是test，结果改成了hello，绝对URL中还需要改但相对URL则完全不必担心

URL的强大性

URL常常容易被忽略，哪怕现在URL的标准还在修改，而更先进的是URI技术

在开放平台上，URL会作为接口的载体，如果没有这种载体自然无法接入各种服务

iframe (+)

在网页的同一窗口中并不一定只有一个文档，可能存在多个文档相互穿插

不仅元素之间可以嵌套，整个文档也可以相互嵌套

版本说明：与旧版本相比H5去除了很多不必要的属性，而在XHTML中唯独将name改成了id

iframe会创建一个展示于网页窗口内部的网页

兼容性：所有主流浏览器均支持

align、frameborder、longdesc、marginheight (4.01)

marginwidth、scrolling (4.01)

上述全是显示相关的元素，全部移植到了CSS中。但其中存在着一些默认设定还是需要知道。

■不存在边框

■如果内容超出框架默认有滚动条

name

name为一个文档起名标志

兼容性：所有主流浏览器均支持

src

src是必要的，规定了框架内容的文件的URL

兼容性：所有主流浏览器均支持

height、width

版本说明：在旧版本中单位可以为像素或百分比，但新版本必须以像素为单位（有关HTML单位的部分我放在了最后的附录中）

兼容性：所有主流浏览器均支持

seamless (*)

作用：设置后将取消文档的滚动条和边框

其他说明：在XHTML中必须指定值以符合语法规范

兼容性：兼容性过差，只有Chrome、Safari 6支持

<iframe src="other.html" seamless></iframe><!--注:若使用XHTML则需要定义为seamless="seamless" -->

srcdoc (*)

作用：填写HTML代码，并且会覆盖原本src所指向的文件

其他说明：常常和seamless、sandbox一起使用

兼容性：兼容性过差，只有Chrome、Safari 6支持

<iframe src="other.html" srcdoc="<p><strong>Hello</strong></p>" seamless></iframe><!--注:若srcdoc内的代码会完全替代other.html -->

sandbox (*)

作用：通过限制某些操作提高iframe的安全性

兼容性：IE 10、Firefox、Chrome、Safari支持，Opera、IE 9及之前版本不支持

■可以防止访问父页面DOM

■可以防止执行脚本

■可以防止被脚本嵌入

■可以防止cookie、存储、数据库的读写

属性值	作用
""	启用所有限制
allow-same-origin	只允许将内容不作为独立来源
allow-top-navigation	只允许iframe页面可以任意导航
allow-forms	只允许表单提交
allow-scripts	只允许脚本执行

注：属性值无法复合

<!--注:这里以https://www.w3cschool.cn/statics/demosource/demo_iframe_sandbox.html网站为例，此文件可以获取时间-->
<!DOCTYPE html>
<html>
    <body>
    <iframe src="https://www.w3cschool.cn/statics/demosource/demo_iframe_sandbox.html" sandbox="">
      <p>您的浏览器不支持 iframes</p>
    </iframe>
    <!--由于这里设置了sandbox因此不允许脚本执行，点击按钮也没用，但如果改为allow-scripts就可以运行了 -->
    </body>
</html>

frameset、frame、noframes (4.01)

框架集并非必要，iframe即可完成任务，因此在H5中删除了这部分内容

六、全局属性

点击查看详细内容

全局属性指的是某些属性可以适用于所有元素的属性，但是在旧版本中全局属性并非全局属性，只能适用一部分元素，但在H5中已经能适用所有元素了

(1)accesskey

作用：为某一元素设置快捷键

兼容性：所有主流浏览器均支持

每个浏览器都有设计这一机制，可以快速与某个元素交互

基本上都是Alt+设置键或Alt+Shift+设置键，剩下的也可以查到

全局属性真的全局吗？

accesskey在旧版本是专门给按钮、超链接等这一类鼠标点击即可交互的元素而设计的，也就是像其他图片、文字之类的根本用不了accesskey。个人猜测H5是为了语法上严谨，即全局属性真的要能适用所有元素，打消一些疑问，因此改成了可适用于所有元素的属性。但事实上真正有效果的还是鼠标点击可交互的元素，因此给p、br这类元素并无显示上的效果，但确实起作用了

(2)title

作用：规定了某一元素额外显示的文字（鼠标稍作停顿即可显示）

其他说明：在无障碍设计上具有非常显著的作用，尤其是图像这种元素非常常用

兼容性：所有主流浏览器均支持

(3)id、class

id、class在HTML中除了超链接以外很少使用，更多的是在CSS、JS上使用

作用：id指定特殊元素，class指定某一类元素

其他说明：原则上id、class不能重复，且对html、head、meta等全局性的元素不起作用

命名规则：id和class的取名规则有要求，首先是大小写敏感。必须是英文字母开头，其次只能使用英文字母、数字、下划线_、连字符-、冒号:、点号.

兼容性：所有主流浏览器均支持

(4)dir

作用：设定文本排版显示方向

兼容性：所有主流浏览器均支持

属性值	作用
ltr	默认，从左往右
rtl	从右往左
auto	浏览器根据内容自动设定

(5)lang

作用：设定元素内容的语言，显示上无任何效果

其他声明：和浏览器自动翻译有一定的关联，属性值必须是特定的语言代码

兼容性：所有主流浏览器均支持

(6)style

作用：设置简短的CSS代码用以修改显示效果

兼容性：所有主流浏览器均支持

(7)tabindex

作用：设置tab检索并设定检索的顺序,按TAB键被检索中的元素会有边框框定

兼容性：所有主流浏览器均支持

<!DOCTYPE html>
<html>
    <body>
        <p tabindex="4">Hello</p>
        <p tabindex="3">Hello</p>
        <p tabindex="6">Hello</p>
    </body>
</html>

(8)contextmenu、 dropzone、translate (*、略)

这三个均是HTML5新增的，但鉴于兼容性几乎没有可支持的，这块内容会在另一篇blog介绍

(9)draggable、spellcheck (*、略)

(10)contenteditable (*)

作用：文本设定是否可编辑

兼容性：所有主流浏览器均支持

属性值	作用
true	设定可编辑文本
false	设定不可编辑文本

<p contenteditable="true">可编辑</p>

(11)hidden (*)

作用：隐藏元素

其他说明：若为XML则必须定义布尔值以符合规范性

兼容性：除IE外主流浏览器均支持

<p hidden>隐藏了</p>

(12)data-* (*)

作用：自定义数据

其他说明：可以适当只使用H5设定数据而不采用其他技术

兼容性：除IE外主流浏览器均支持

<p data-type="1">1</p>
<p data-type="2">2</p>

七、超链接

点击查看详细内容

(1)a (+)

版本说明：HTML5删除了旧版本部分属性也改善了锚的机制，新版本新增了功能性上的属性

a可以链接其他URL，而不止你当前页面一个URL

其他说明：链接具有一种默认外观这和你日常使用相吻合

■所有链接都具有下划线

■未被访问的链接是蓝色的

■已被访问的链接是紫色的

■活动链接（活动即鼠标指针移到链接上的状态）是红色的

■上述外观均是默认且能显示的情况下，因为某种设定或元素显示不出或改变就另说了

兼容性：所有主流浏览器均支持

charset、rev、name、shape、coords (4.01)

首先是多余的charset，在a标签里的charset用来设定链接文档的编码，在旧版本虽然有一定合理性（meta 的charset到H5才出现）但稍显混乱（哪怕没有charset，meta也可以用http-equiv设置，功能上重叠了）

shape和coords主要是改善显示效果，但也是过于混乱，显示效果应该由CSS解决，你可以发现很多在H5中删掉的属性都是用来改善显示效果的

name、rev是用来设定锚的，有关锚我一会会讲到，H5采用新的性能更好的id代替name。name原本是标明元素的唯一，但CSS也有一个id标明元素的唯一，又引起了混乱。在H5中统一为id（旧版本的id属性存在缺陷），即不管是CSS还是JS都只用id标明唯一，这样防止了混乱还减少了多余的name属性。你可以发现H5在某种程度上简化和精确化了（虽然依然像大杂烩一样）

href、hreflang

作用：href用来设定超链接，hreflang用来设定超链接文档的语言

其他说明：hreflang只有存在href时才能生效

兼容性：所有主流浏览器均支持

<a href="https://www.baidu.com"><p>百度一下</p></a>
<!--注:若使用绝对URL需要设定好协议名，否则被认为是相对URL -->

type

type属性规定了目标链接文档的MIME类型

至于MIME是什么暂时不会用到不需要考虑

兼容性：所有主流浏览器均支持

target

作用：决定跳转方式，在浏览器上具有不同的打开方式

其他说明：默认为_self

兼容性：所有主流浏览器均支持

属性值	说明
_self	默认，在当前网页打开（注：若在框架内则在框架内打开）
_blank	在新页面打开
_parent	在上一级框架即父框架上打开（注：可将整个页面也看做是一框架，若本身不存在父框架即顶级框架则效果等同于_self）
_top	在整个窗口中打开，类似于_self
< framename >	iframe标签中有name标签标识，如果target设置为一个框架，则会在框架中打开

download (*)

作用：提供下载功能并定义下载文件名，但下载地址由href提供

其他说明：必须先设定href才能用download

兼容性：谷歌14.0、IE13.0、Firefox20.0、Opera15.0及以上版本支持，Safari不支持

<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download="baidu_icon"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/></a>

rel (*)

作用：语义化以及SEO优化

其他说明：并不会其他任何显示或交互上的效果

兼容性：所有主流浏览器均支持

属性值	说明
alternate	文档的其他可选版本
stylesheet	外部样式表
start	第一个文档
next	下一个文档
prev	前一个文档
contents	目录
index	索引
glossary	术语表、解释
copyright	包含版权信息的文档
chapter	章
section	节
subsection	子段
appendix	附录
help	帮助文档
bookmark	相关文档
nofollow	指定Google搜索引擎不要跟踪链接
licence	版权信息
tag	关键词
friend	赞助、友链

media (*)

作用：优化

其他说明：可以采用基本的and、or、not进行复合运算

兼容性：所有主流浏览器均支持

属性值	说明
all	默认，适合一切设备
aural	语音合成器
braille	盲文反馈装置
handheld	手持设备
projection	投影机
print	打印预览模式
screen	计算机屏幕
tty	打字机、使用等宽字符网格的设备
tv	电视、低分辨率有限分页能力的设备
width	规定显示区域的宽度，可使用min-、max-前缀规定其范围
height	规定显示区域的高度，可使用min-、max-前缀规定其范围
device-width	规定设备的宽度，可使用min-、max-前缀规定其范围
device-height	规定设备的高度，可使用min-、max-前缀规定其范围
orientation	规定设备的取向，可用portrait、landscaoe
aspect-ratio	规定显示区域的宽度/高度比，可使用min-、max-前缀规定其范围
device-aspect-ratio	规定设备的宽度/高度比，可使用min-、max-前缀规定其范围
color	规定设备单位像素的颜色数，可使用min-、max-前缀规定其范围
color-index	规定设备可处理的颜色数，可使用min-、max-前缀规定其范围
monochrome	规定单色帧缓冲中的像素比特数，可使用min-、max-前缀规定其范围
resolution	规定设备的像素密度即dpi，可使用min-、max-前缀规定其范围
scan	若设备类型为tv，则规定其扫描方式，可用progressive、interlace
grid	规定输出设备是网格还是位图，1表示网格，0表示其他

<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
   media="screen and (color:1)" >点击打开</a>

(2)link (+)

link与a不同是空元素，用于定义文档与其他资源的关系，而且只能出现于head部分

兼容性：所有主流浏览器均支持

charset、rev、target (4.01)

href、hreflang、media、rel、type

详细请参考a标签

sizes (*、略)

几乎无浏览器支持

八、其他文字或其他效果

点击查看详细内容

这一块内容可以说是非常繁杂，毕竟效果太多了，虽然效果实现集中在CSS上，但HTML也提供了一定的效果。文字上就能描述的效果我就不演示了

(1)font 、center、big、acronym、tt、strike (4.01)

(2)bdi、time (略)

(3)abbr

作用：abbr是acronym的上位替代品，有虚线下划线效果

<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Trade Organization，世界贸易组织 ">WTO</abbr> was founded in 1995.</p>
</body>
</html>

兼容性：除IE6或之前的版本所有主流浏览器均支持

(4)strong、b

作用：都是将文字设置为粗体

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(5)small、code、samp、kbd

作用：都是将文字大小变小一号

其他说明：如果文字本身就是最小字号，则无效果

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(6)del、s

作用：都是将文字设置为删除线

其他说明：不是空元素

cite、datetime (略)

兼容性：所有主流浏览器均支持

(7)mark (*)

作用：用黄色高亮文字背景色标记

其他说明：不是空元素

兼容性：除IE8或更早版本所有主流浏览器均支持

(8)i、em、var、dfn、cite、address

作用：都是文字斜体的效果

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(9)ins、u

作用：都是文字下划线的效果

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(10)bdo

作用：修改显示文字的顺序，将值设为rtl则是逆序显示

其他说明：不是空元素

兼容性：所有主流浏览器均支持

dir

值的类型：ltr或rtl（规定值）

兼容性：所有主流浏览器均支持

(11)sub、sup

作用：sub和sup具有相反的效果，sub会将文字设置为下标，sup会设置为上标

其他说明：不是空元素，常常用于公式表达

兼容性：所有主流浏览器均支持

(12)q

作用：引用，会自动添加双引号

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(13)blockquote

作用：用于引用长文本，会自动缩进

<!DOCTYPE html>
<html>
<body>
<h1>About WWF</h1>
<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>

</body>
</html>

其他说明：不是空元素

兼容性：所有主流浏览器均支持

(14)ruby、rt、rp (*)

作用：为文字标音标

<!DOCTYPE html>
<html>
<body>

<ruby>
    中国人不骗中国人
	<rp>(</rp><rt>zhong guo ren bu pian zhong guo ren</rt><rp>)</rp>
</ruby>

</body>
</html>

ruby构成整体框架，其中rt内放置拼音，rp分别在rt左侧右侧放置圆括号

其他说明：rp只在浏览器不支持时显示，即显示()

兼容性：IE8或更早版本不支持，Firefox、Opear、Chrome、Safari 6支持

(15)progress (*)

作用：生成进度条的图形

max、value (*)

max指示需要完成的值，value指示当前已完成的值

其他说明：max为正浮点数，value为0和正浮点数，且value不要超出max。而且需要这并非空元素

兼容性：IE不支持，Firefox、Opear、Chrome、Safari 6支持

<!DOCTYPE html>
<html>
<body>

下载进度
<progress value="6.6" max="10">
</progress><br/>

</body>
</html>

(16)meter (*)

作用：在一定范围内衡量其合适的值

form、high、low、max、min、optimum、value (*)

目前几乎没有一款浏览器支持form因此这里不说明

max和min用来设定其可能出现的最值

high设定高值，low设定低值

optimum设定为[low,high]中的最优值

value用来设置值，如果发现在[low,high]显示绿色，否则显示黄色

<!DOCTYPE html>
<html>

<body>
    <meter max="100" min="0" low="20" high="60" optimum="40" value="27">
    </meter>
</body>

</html>

兼容性：IE不支持，Firefox、Opear、Chrome、Safari 6支持

语义化的争议

上述有很多功能相似或一样的标签，为何要这么设置？

原因在于HTML语义化的工作：每个标签W3C都设置了对应的应用场景，只要看到这个标签就知道其应用场景，而不是关注其功能上的差异。比如同样是文字斜体，var用来定义变量上，cite用来定义某些作品名（电影、书籍等），dfn则用在特殊短语或术语上。

由此可见虽然功能上一样，但在语义上承担了不同功能，但这一块是有争议的，是否使用语义化各有看法，因此上述标签我并没有说明具体的语义，只是简单提及了功能。

这一块内容在W3C的ARIA规范上，具体地可查看ARIA

语义化的优点：

■大幅度提升了代码可读性

■有利于SEO（搜索引擎优化）

■增强可识别性，利于开发维护

语义化的缺陷：

■学习成本高，要分类去记忆不同场景下同一功能不同应用场景的语义化标签并不是一件容易事，光是从上面看到这估计也有很多忘记了

■重构工作量大且有风险，由于语义化是一个新鲜事物，很多已有的工程上再作重构太费精力

语义化大概分两类，一类是结构上的语义，一类是语义类上的

■兼容性问题，很多新标签虽然有新的语义，但在某些浏览器旧版本上却不支持

语义化现状：目前语义化可以非常堪忧，很多人基本不会特别关注语义化，因为我不做语义化并没有什么缺陷，这种吃力不讨好的工作很少人愿意做

参考文章：大多数前端工程师了解但并不擅长的HTML语义化

个人观点：

可以考虑结构上的语义化，但细致到什么情况该用什么斜体或是粗体等语义化的标签，这不需要

在上述语义繁多但功能却一样的标签我建议选择简单或是目前常用的标签

本篇blog只会罗列出语义化标签，但不会具体说明其语义

九、注释、符号实体

点击查看详细内容

注释

<!--
这个标签就是注释
可能还会有其他条件、程序注释之类的
不再此说明
-->

符号实体

HTML中存在大量由于键盘无法打出或是像空格一样无法正常输出的字符可以采用特殊语法打出，但由于过多建议查表

采用&（字符名）;形式或&#（UTF-8字符编号）;

<p>
    这是空格 &ensp;
</p>

十、图像

点击查看详细内容

(1)img

作用：显示图像

兼容性：所有主流浏览器均支持

align、border、hspace、longdesc、vspace (4.01)

src、alt

如同a标签需要href一样，图像需要用src通过URL定义其来源才能显示图像

src用来定义图像URL，alt则是对可用性上起到非常显著的作用，当图像因为一些如网络差等原因无法加载图片时alt会替换图像采用文本描述

其他说明：几乎我所观察到的大部分网站在图像都采用了title即鼠标停顿时额外强调或显示文本信息

其他说明:当alt设定为空即alt=""时，在图像无法显示时不会显示碎裂的图像图形

兼容性：所有主流浏览器均支持

<img src="image\1.jpg" alt="风铃花" title="风铃花"/>

width、height (+)

作用：设定宽度width和高度height

其他说明：新版本必须以像素为单位

兼容性：所有主流浏览器均支持

ismap

作用：点击图像后会以左上角(0,0)为起点，像素为单位返回一个鼠标点击的坐标值

其他说明：img必须被a标签嵌套，常常其他程序语言进行搭配使用

兼容性：所有主流浏览器均支持

usemap

建立图像映射，与map、area一起使用，在下面会介绍

其他说明：img不是a或button标签嵌套时才可使用

兼容性：所有主流浏览器均支持

(2)figure、figcaption (*)

作用：语义化的标签，用于显示图像下的标题，效果完全可用br标签+文字实现。figure用来框定img和figcaption

其他说明：figure不止可以应用于图像上，其他的单独独立的内容也可以应用。figcaption必须在figure内使用即对独立内容进行解释

兼容性：除IE8及更早版本不支持，其他主流浏览器均支持

个人观点：由于结构性强，个人认为可以采用

<figure>
	<img src="1.jpg"/>
    <figcaption>游戏地图介绍</figcaption>
</figure>

(3)canvas (*、略)

(4)area、map

作用：用来定义图像映射，map为框架，area确定映射的具体元素

图像映射是指使得图像可点击的一个功能，如ismap可以返回图像的坐标

兼容性：所有主流浏览器均支持

name

name是map唯一的一个属性，用来标识映射。

其他说明：XTML是用id来标识，而H5中仍然要用name。和iframe类似这可能是H5的缺陷，依然统一起来

兼容性：所有主流浏览器均支持

nohref (4.01)

href、hreflang、alt、media、rel、target、type (part *)

shape、coords

作用：用于指定映射的范围，shape设定形状，coords设定坐标

兼容性：所有主流浏览器均支持

shape属性值	说明
default	全部区域
rect	矩形区域
circle	圆形区域
poly	多边形区域

coords属性值	说明
x1,y1,x2,y2	若shape为rect，(x1,y1)确定左上角，(x2,y2)确定右下角来确定矩形范围
x,y,r	若shape为circle，(x,y)确定圆心，r确定半径来确定圆形范围
x1,y1,...,xn,yn	若shape为poly，由一系列坐标点按照路径序列来围成多边形（注：最后坐标可与最初坐标不同，浏览器会自动填上来围成）

usemap

img有一usemap属性就是用来设定映射，其属性值为map名确定映射

<img src="1.jpg" usemap="#test">
<!--img确定基本的图像，usemap用来确定一个map映射 -->

<map name="test">
    <area href="other\1.jpg" shape="circle" coords="15,20,5"/>
    <area href="other\2.jpg" shape="rect" coords="50,60,100,80"/>
    <!--map设定映射框架
	area用来确定可点击的一个范围
	映射的范围不要发生重合
	如果在映射的范围中发生点击则会打开URL
	-->
</map>

十一、表格（重点）

点击查看详细内容

表格简单来说就是excel那样，但与传统的表格不太一样。首先这种表格本质上是一种对元素的整理和划分，需要区别。

H5中定义了相当多的语义化标签为代码编写带来了便利，要学习表格得先想如何构造框架，其中里面有很多CSS就能实现的属性在H5中被删除了，这里就不再赘述

<!-- 框架结构 -->
<table>
    <thead>
        <!-- ... -->
    </thead>
    <tbody>
        <!-- ... -->
    </tbody>
    <tfoot>
    	<!-- -->
    </tfoot>
</table>

table

table用来定义表格的框架

兼容性：所有主流浏览器均支持

border

作用：设定表格有无边框

其他说明：默认无边框

兼容性：所有主流浏览器均支持

属性值	说明
""	默认，无边框
1	有边框

thead、tbody、tfoot

thead用来设定表头，tbody用来设定表格主体，tfoot用来设定表尾，结构的语义化特别强

其他说明：thead、tfoot就是设定表头和表尾的，不管顺序如何都是如此，但还是建议thead、tbody、tfoot这样的顺序。此外有时并不需要tfoot

兼容性：所有主流浏览器均支持

<table border="1">
        <tfoot>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </thead>
</table>

tr、td、th

tr用来定义一行元素的框架，而td、th则用来定义这一行开始的列元素

■td的文本效果上默认是左对齐

■th的文本效果上默认是粗体、居中

在语义上th是用在thead上的

tr在H5版本中不存在属性，th、td属性都是一样的

兼容性：所有主流浏览器均支持

headers、scope (略)

rowspan、colspan

作用：实现合并单元格，rowspan行合并数（表现上下），colspan列合并数（表现左右）

其他说明：若为0，则根据设定的行数和列数设定为最大值（部分浏览器可能无法使用此功能）

兼容性：所有主流浏览器均支持

<table border="1">
    <thead>
        <tr>
            <th rowspan="1" colspan="4">HEAD</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3" colspan="1">Title</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
        </tr>
        <tr>
            <td>element</td>
            <td>element</td>
            <td>element</td>
        </tr>
        <tr>
            <td>element</td>
            <td>element</td>
            <td>element</td>
        </tr>
    </tbody>
</table>

colgroup、col

可以发现表格只有一个tr定义一组行，CSS是要专门为标签定义样式的。也就是你可以很简单的定义出表格行的样式，但HTML还存在另外两个标签用来定义表格的列

但由于还没学习CSS，只需要知道这两个标签提供了一种新的方法去选择列

兼容性：所有主流浏览器均支持

<table>
    <colgroup>
    	<col span="2" style="样式1"/>
        <col span="3" style="样式2"/>
        <!--
		col只有一个属性span
		span用来定义是几列
		通过这样一个标签快速选择列
		而行可以用tr
		-->
    </colgroup>
    <!-- ... -->
</table>

十二、区块（重点）

点击查看详细内容

HTML中绝大多数元素被定义为块级元素和内联元素

块级元素在显示时会另起一行，而内联元素则在本行继续显示

div、span

而存在两个极其重要的标签，div表示块级元素，span表示内联元素

此外在H5中还多了许多语义化的标签表示区块

在div下相当于一个区块，一般span在div中

兼容性：所有主流浏览器均支持

其他语义化标签

header：页首

nav：导航栏

footer：页脚

aside：侧栏

article：文章

section：表示其他部分

details、summary (*)

这一类标签实现内容折叠功能

兼容性：Chrome、Safari 6支持

details标签在上，summary表示折叠按钮显示的文本

如我这篇blog就用了这个标签

<details open>
<!--
open是details的唯一属性
刚打开网页时是不展开的
如果使用open则展开
-->
<summary>点击查看详细内容</summary>
...
</details>

十三、列表（重点）

li表示列表中的项目，而ol表示有序列表的框架，ul表示无序列表的框架

li

用来表示列表中的项目

兼容性：所有主流浏览器均支持

value

在有序列表中存在着序号，value可以定义某项的序号

<li value="3">我是第3项</li>

ol

ol是order list的缩写，是有序列表的框架

reversed

作用：对列表的序号降序，默认为升序

兼容性：只有Chrome、Safari 6兼容

start

作用：设定列表初始的序号

兼容性：所有主流浏览器均支持

type

作用：设定序号的类型

可以使用CSS替代而且花样更多，但依然保留了这种方式

值	作用
1	默认，阿拉伯数字
a	小写字母
A	大写字母
i	小写罗马字母
l	大写罗马字母

<ol reversed start="10" type="i">
    <li>一</li>
    <li value="3">二</li>
    <li>三</li>
    <li>四</li>
</ol>

ul

ul是unorder list的缩写，是无序列表的框架

和ol不一样，没有序号因此属性也少了很多，但是CSS又可以替代，因此不需要考虑ul的属性

兼容性：所有主流浏览器均支持

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ul>

描述列表dl、dd、dt

dl是descrip list的缩写，包含了两级内容，第一级是项目名，第二级是具体描述

兼容性：所有主流浏览器均支持

<dl>
    <dt>one</dt>
    <dd>一</dd>
    <dd>量词</dd>
    <dt>two</dt>
    <dd>二</dd>
</dl>

十四、表单（重点）

表单用于收集用户输入的信息

form (+)

form是表单的框架，规定了如何输入

兼容性：所有主流浏览器均支持

name

作用:设定表单的名字

其他说明：在XHTML中采用id标识

兼容性：所有主流浏览器均支持

accept-charset

作用：规定提交数据的编码

其他说明：默认为UNKNOWN表示编码与文档默认编码一致

兼容性：所有主流浏览器均支持

action

作用：表明提交的数据去往哪个URL

兼容性：所有主流浏览器均支持

method

作用：设定提交数据的方式get或post

其他说明：这属于HTTP协议的内容

兼容性：所有主流浏览器均支持

GET	POST
会将数据附加到URL	会将数据附加到HTTP报文的body部分
由于URL长度有限（大约3000字）因此只能发送小量数据	没有长度限制
提交数据作为URL可被收藏	不可被收藏
可缓存	不可缓存
编码类型唯一	编码不唯一，详细见enctype
由于存在于URL，用户角度可见，安全性较低	安全性较高
URL字符只允许ASCII	无限制

enctype

作用：设定编码类型，但只对POST方法生效，GET为application/x-www-form-urlencoded类型

兼容性：所有主流浏览器均支持

值	说明
application/x-www-form-urlencoded	默认，将空格转换为`+`，非ASCII字符会转换为十六进制形式
multipart/form-data	不编码，即输入什么就是什么
text/plain	只会将空格转换为`+`，但不对非ASCII字符编码

target

表明提交时网页如何跳转，详细参考超链接

autocomplete (*)

作用：设定是否支持自动填充

兼容性：除Opera其他主流浏览器均支持

【【】】

只有两个值on或off，默认为on，会像上图一样出现以往你填写过的内容，然后点击即可快速填充，提高用户输入的效率。由于默认是on，一般不用管这个属性

novalidate (*)

作用：不验证数据

HTML中有个标签email，如果输入的不是邮箱格式则会提示用户输入错误，会对输入的数据进行验证。但如果启用novalidate则不会验证数据

兼容性：IE 10、Firefox、Opera、Chrome均支持，Safari、IE 9及之前版本不支持

input (+)

input是输入控件，HTML提供相当多的类型

type (+)

定义输入控件的类型

特殊的输入控件会进行验证，可在form元素内使用novalidate设置取消验证

属性值	说明	兼容性
hidden	隐藏	all
image	图像（会提交坐标信息）	all
text	文本框	all
email	文本框定义电子邮件（有验证）	Safari不支持
password	文本框定义密码（字符形式上为）	all
url	文本框定义网址（有验证）	Safari不支持
search	文本框定义搜索字段	IE、Firefox、Opera不支持
number	数字（旁边有调大调小按钮） max、min定义可输入最值 value定义默认值 step定义每个数字的合法间隔	Firefox不支持
datetime-local	输入时间（不带时区）年月日时分	IE、Firefox不支持
date	输入时间年月日	IE、Firefox不支持
week	输入时间年周	IE、Firefox不支持
month	输入时间年月	IE、Firefox不支持
file	上传文件	all
radio	单选框	all
checkbox	复选框	all
color	选择颜色	IE、Firefox、Safari不支持
button	按钮（需要和JS一起使用）	all
range	数字滚动条 max、min定义可输入最值 value定义默认值 step定义每个数字的合法间隔	all
reset	重置按钮，恢复表单默认情况	all
submit	提交按钮，提交输入信息至action	all

alt、name（略）

value

兼容性：主流浏览器均支持

针对不同类型的输入控件会有不同的效果

■对于button、reset、submit按钮类型，会定义按钮上的文本

■对于text、password文本框和hidden类型，会定义输入字段的默认值

■对于radio、checkbox选择框和image类型，会定义相关值，提交时会传输action URL

注：radio、checkbox只有选择，而value定义了选择的值是必须的

注：不适用于file类型

src

作用：定义image类型图像来源的URL

兼容性：主流浏览器均支持

accept

作用：定义file类型允许的文件类型

兼容性：主流浏览器均支持

属性值	说明
audio/*	允许所有音频类型文件
video/*	允许所有视频类型文件
image/*	允许所有图像类型文件
MIME类	参考MIME标准

readonly

作用：布尔值，定义输入字段用户无法输入

兼容性：主流浏览器均支持

disabled

作用：布尔值，定义元素无法点击、使用

兼容性：主流浏览器均支持

checked

作用：布尔值，对于radio、checkbox类型设置为已预选

如隐私协议经常是被预选的

兼容性：主流浏览器均支持

maxlength

作用：规定元素允许输入的最大字符数（防止恶意用户提交大量数据）

兼容性：主流浏览器均支持

size

作用：根据规定的字符数设定宽度，默认20

其他说明：只适用text、search、tel、url、email、password类型

兼容性：主流浏览器均支持

multiple (*)

作用：对于email、file类型允许用户输入多个值

兼容性：主流浏览器均支持

min、max、step (*)

作用：创建合法的属性范围约束

其他说明：适用于number、range、datetime-local、month、week

兼容性：除Firefox其他浏览器均支持

width、height (*)

作用：对于image类型设定图像长宽

兼容性：除Firefox其他浏览器均支持

required (*)

作用：布尔值，规定元素必须要输入，只有输入了才能提交

其他说明：适用于text、url、tel、email、password、number、checkbox、radio、file类型

兼容性：主流浏览器均支持

placeholder (*)

作用：设定文本输入框的提示消息

其他说明：适用于text、search、url、tel、email、password

兼容性：主流浏览器均支持

autocomplete (*)

作用：是否启用自动完成输入功能，默认为on

其他说明：属性值只有on或off

兼容性：主流浏览器均支持

autofocus (*)

作用：布尔值，设定在页面打开时获取焦点

其他说明：只能设置一个元素具有autofocus

兼容性：主流浏览器均支持

form (*)

作用：设置input归属哪一个表单（form的id属性标识），可以存在多个归属

其他说明：设定多个归属时用空格分隔

<form id="T1">
    ...
</form>
<input form="T1"/>
<!--虽然input不在T1元素内，但也是T1表单中的 -->

兼容性：除IE其余主流浏览器均支持

formaction (*)

作用：会覆盖form的action属性值，更改提交的URL

其他说明：只适用于submit、image

兼容性：除IE其余主流浏览器均支持

formenctype (*)

作用：和上个一样，会覆盖enctype属性

其他说明：只适用于submit、image

兼容性：主流浏览器均支持

formmethod (*)

作用：和上个一样，会覆盖method属性

其他说明：只适用于submit、image

兼容性：主流浏览器均支持

formnovalidate (*)

作用：和上个一样，会覆盖novalidate属性

其他说明：只适用于submit

兼容性：除Safari其余主流浏览器均支持

formtarget (*)

作用：和上个一样，会覆盖target属性

其他说明：只适用于submit、image

兼容性：主流浏览器均支持

list (*)

作用：HTML5引入了新标签datalist，通过list输入datalist的id值引入使用

兼容性：除Safari其余主流浏览器均支持

pattern (*)

作用：使用正则表达式规范输入格式

其他说明：当格式不正确时会弹出提醒，提醒可用title属性设置

兼容性：除Safari其余主流浏览器均支持

<input type="text" pattern="[0-9]{1}" title="请输入一位数字" />

datalist (*)

作用：datalist是HTML5新引入的标签生成下拉表以提供可选值

其他说明：option是select、optgroup、datalist的子项需要搭配使用，与select不同，datalist不会限制只是提供这样的选项

兼容性：除Safari其余主流浏览器均支持

<input type="text" placeholder="请选择输入" list="t1"/>

<datalist id="t1">
	<option>咖啡</option>
    <option>牛奶</option>
    <option>果茶</option>
    <option>绿茶</option>
    <!-- 提供的是可选值不代表只限定于此 -->
</datalist>

option属性值	说明	兼容性
disabled	布尔值，略	all
selected	布尔值，表示被预选（似乎只有select能用）	all
value	设定属性值，会提交至服务器	all
label	设定更短的标语	Firefox不支持

对于label属性而言，可以以更加简短或是更加具体的信息形式告知用户

【【】】

label (+)

作用：一般而言会采用label标签以提高用户体验

兼容性：主流浏览器均支持

比如一个radio类型的输入控件，旁边有文字介绍。但用户要点击那一个控件是非常困难的，如果旁边的文字也能点击那就更好了。label便是这样的作用

label标签通过for属性与某一标签绑定，当点击label标签时，焦点会自动转到所绑定的标签上

属性值	说明
for	表明要绑定的元素，以id属性标识
form	略

textarea (+)

作用：定义多行文本框

属性	说明
name	略
rows、cols	定义长宽，也可用width、height定义。其中rows、cols是定义平均字符长宽 cols默认20，rows默认2
disabled	略
form (*)	略
autofocus (*)	略
placeholder (*)	略
required (*)	略
maxlength (*)	定义文本框可容纳字符换行符也算在内初始化的字符可超出maxlength
wrap (*)	声明在提交时是否包含换行符值只有两类：soft（默认，不包含）、hard（包含）

<textarea maxlength="5">
这个内容可以随意编辑
</textarea>

button (+)

与input中的按钮稍有区别，input的按钮只能有文本信息，而button的按钮可以有图像信息

属性	说明
name	略
value	略
type	定义按钮类型，总共button、submit、reset三类
disabled	略
autofocus (*)	略
form	略
formaction	略
formenctype	略
formmethod	略
formnovalidate	略
formtarget	略

<button>
    内部可以放其他元素而input无法做到
</button>

optgroup、select (+)

与datalist不同会严格限制选项内容

其中optgroup用于分组

<select>
    <option selected>菜单</option>
    <optgroup label="饮料">
        <option>牛奶</option>
        <option>咖啡</option>
        <option>果汁</option>
    </optgroup>
    <optgroup label="水果（缺货）" disabled>
    	<option>西瓜</option>
        <option>苹果</option>
        <option>葡萄</option>
    </optgroup>
</select>

select属性	说明
name	略
disabled	略
multiple	布尔值，表示允许选择多项 Windows选择Ctrl选择多项
size	表明可见的选项个数，默认为1，当>1时会出现滚动条
autofocus (*)	略
form (*)	略
required (*)	略

optgroup属性	说明
disabled	禁用该属性组
label	定义名字

fieldset、legend (+)

是表单中用于定义一块区域的标签，会有特别的样式标注

其中fieldset是框架，legend则是定义标题

fieldset具有name、form、disabled这些元素

<form>
    <fieldset>
        <lengend>区域1</lengend>
        <input type="text"/>
    </fieldset>
</form>

十五、HTML的布局（重点）

HTML中分为两种简单的布局方式

表格布局

可以使用表格通过合并单元格，来设计任意的方方阵阵的布局，但表格不是布局工具，因此不推荐使用

div、span布局

可以用div定义块级元素，span定义行内元素来嵌套组合，不仅比表格布局灵活还简单。此外在H5中由于引入了更多了语义化标签，还可以用header、footer提高代码的可读性。这是非常重要的布局方式，是用CSS布局的前提

附一：颜色

点击查看详细内容

#### 颜色名

在表示颜色时可以使用像是red、yellow、grey之类的单词表示某一特殊颜色，但数量庞大，这里就不再说明。可以在网上查找到更多的颜色名

RGB十六进制

HTML、CSS采用RGB颜色，使用十六进制表示

可以用六位也可以用三位

如#FA24A5

用三位如#5E0表示的是#55EE00

具体如何选择颜色可以使用专业的设计工具

参考网站

HTML Living Standard

W3Cschool

W3C中国

大多数前端工程师了解但并不擅长的HTML语义化

posted on 2022-01-02 09:28 摸鱼鱼的尛善阅读(41) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部