总目录

HTML标签
- 声明
- 基础标签
- 格式相关
- 表格
- 列表
- 多媒体
- 交互
- - 内容交互：
  - 菜单交互：
  - 状态交互：
- 表单
- 超链接
各大浏览器
- 浏览器内核
- 性能方面：

HTML标签

声明

<!DOCTYPE HTML>

在html5出现之前，程序员需要写一段冗长的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如今不仅简化了，而且可以不区分大小写。

基础标签

<html> 定义HTML文档
<head>    定义关于文档的信息
<title>   定义文档的标题
<body>    定义文档的主体
<h1> ~ <h6> 定义 HTML 标题
<p>   定义段落
<!--...--> 定义注释

格式相关

<br>   定义简单的折行
<hr>  定义水平线
<i>     定义斜体
<sub>   定义上标
<sup>   定义下标
<pre>   原样输出
<u>     定义下划线
<s>     定义删除线

以下是一个用到以上标签的html网页：

<i>这是斜体</i>
<br>
<b>这是粗体</b>
<p>这是上标<sup>2</sup></p>
<p>这是下标<sub>3</sub></p>
<p>这是水平线：</p>
<hr>
<s>这是删除线</s>
<u>这是下划线</u>

表格

<table>    定义表格
<tr>       定义行
<td>       定义列
<caption>  定义表标题
<thead>    定义表头
<tbody>    定义表身
<tfoot>    定义表尾

以及合并行合并列：rowspan、colspan。
以下是一段随便写的代码：

<table border="1"><tr><td>什么东西</td><td>随便写写</td><td>就是这样</td></tr><tr><td>两个</td><td>黄鹂</td><td>鸣翠柳</td></tr><tr><td rowspan="2">一行白鹭</td><td>上青天</td><td>窗含西岭</td></tr><tr><td>千秋雪</td><td>门泊</td></tr><tr><td>东吴</td><td>万里</td><td>船</td></tr>
</table>

效果如下

列表

<nav>
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
<ol>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ol>
<nav>
<dl>
<dt>这是dt</dt>
<dd>这是dd</dd>
<dt>这是dt</dt>
<dd>这是dd</dd>
</dl>

效果如下：

此外，ul还有几种属性取值。如disc默认实心圆，circle空心圆

square实心正方形

多媒体

插入视频或者音乐或者flash（尽管现在很多浏览器禁用flash）可以用<embed>
图片可以用img标签。alt标签用来给搜索引擎抓取，title为鼠标悬停的时候显示的文字，这些用截图没办法表现出来。

<embed src="bad guy.mp3" width="400px" height="60px"/>
<br>
<embed src="1.swf"/>
<br>
<img src="6.png" width="400"height="250px"/>
<br>
<embed src="1.mp4" width="400px" height="250px"/>

交互

内容交互：

<details>
<summary>HTML标签</summary>
<details>
<summary>表格</summary>
<p>运用table标签。</p>
</details>
</details>

效果如下：

菜单交互：

menu，常常与li一起使用。command元素，按W3C的说法，该元素有单选按钮，复选框，按钮三中类型，但是目前主流浏览器似乎并不支持command。

状态交互：

<p>下载进度：30%</p><progress value=30 max=100></progress>
<p>甲</p><meter value="20" optimum="100" high="100" low="0" max="100" min="0"></meter><p>20%</p>
<p>乙</p><meter value="80" optimum="100" high="100" low="0" max="100" min="0"></meter><p>80%</p>

效果如下：

目前还不知道怎么让他们动起来。

表单

form的标签有：input，textarea，select，option等
目前我了解到的input的type：button,text,password,reset,image,radio,checkbox,hidden,file。

<form enctype="multipart/form-data">
<p>性别：</p>
<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl"/>女
<!--两个选择是冲突的，因为name相同-->
<br>
<input id="checkbox1" type="checkbox"  checked="checked"/><label for="checkbox1">选项一<label><br>
<input id="checkbox2" type="checkbox" /><label for="checkbox2">选项一<label><br>
<input id="checkbox3" type="checkbox" /><label for="checkbox3">选项一<label><br>
<p>用户名</p>
<input type="text" value="请输入你的用户名"/>
<br>
<p>密码</p><input type="password"/>
<br>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<p>上传你的作业：</p><input type="file"/>
<br>
<textarea rows="6" cols="30">你对自己的介绍</textarea>
<br>
<button>提交</button>
<br>
<p>生源地</p><select>
<option>吉林省</option>
<option>黑龙江省</option>
<option>辽宁省</option>
<option>贵州省</option>
<option>天津省</option></select>
</form>

目前还不懂怎么让按钮和数据建立联系，提交数据。file文件域需要说明编码方式enctype=“multipart/form-data”，才能让浏览器接受数据（具体原因不懂）

超链接

<a href="about.html">ABOUT</a>
<br>
<a href="#up">一个锚点链接</a>

超链接的target属性有：
_self默认方式，在当前窗口打开链接
_blank在全新空白页打开链接
_top在顶层框架中打开链接
_parent在当前框架的上一层打开

各大浏览器

浏览器内核

1993年第一个面向普通用户的浏览器Mosaic发布，1994年Netscape发布，它和IE在争夺浏览器市场份额的时候，微软将IE绑定到操作系统并免费提供，最后Netscape市场份额逐渐下降。
以下为各浏览器内核总结（部分数据可能已经过时了）：

浏览器名称	内核演变
IE	Trident内核，又称IE内核
世界之窗	Trident内核
遨游	Trident内核
腾讯TT	Trident内核
360浏览器	Trident内核
Edge	IE内核---->Edge内核----->Blink内核
Firefox	Gecko内核
Safari	webkit内核
Camino	webkit内核
Opera	Presto内核---->Webkit内核----->Blink内核
Chrome	Webkit内核---->Blink内核
Sansung Internet	Webkit内核---->Blink内核（完全紧跟Chromium）
UC浏览器	U3内核（实际基于Webkit）

性能方面：

引用：
1.各种浏览器性能评测

2.浏览器份额及其历史以及内核变迁总结

HTML标签以及各大浏览器份额、性能相关推荐

2011 年互联网十大浏览器
互联网上网浏览网页内容离不开浏览器,现在已经有非常多的浏览可供选择如safari, opera, internet explorer,Google Chrome.Firefox等.据统计Google ...
手机 html5评测,三款主流手机浏览器HTML5性能横向评测
到目前为止带给大家更多的是一种神秘感,我们并未看到很多以HTML5为主的网站在我们生活中出现,正是因为这份神秘感让我们想对HTML5进行一次深入的探秘,去了解一下什么是HTML5,并且HTML5究竟应 ...
9月全球浏览器份额之争：IE领先Chrome21.73%
IDC评述网(idcps.com)10月10日报道:根据市场研究公司Net Applications最新数据显示,在9月,全球浏览器市场份额前三位依然是IE.Chrome.Firefox,份额依次是5 ...
一个时代的结束：全球第一大浏览器重磅更新！永久取消对Flash的支持
点击上方 "编程技术圈"关注, 星标或置顶一起成长后台回复"大礼包"有惊喜礼包! 每日英文 To live a beautiful life, one mus ...
HTML5大屏版性能测试报告
1.编写目的 HTML5作为当前"最火"的跨平台.跨终端(硬件)开发语言,越来越受到前端开发者的重视,无论是PC端还是当前"火热"的移动端,其前端开发人员的占比 ...
Android 浏览器内核浅谈,基于WebKit内核的Android手机浏览器的性能研究与加载优化...
南京邮电大学硕士 2017 基于WebKit内核的Android手机浏览器的性能研究与加载优化 Performance Research and Load Optimization of Andro ...
html5手机排行,三款主流手机浏览器HTML5性能横向评测
到目前为止HTML5带给大家更多的是一种神秘感,我们并未看到很多以HTML5为主的网站在我们生活中出现,正是因为这份神秘感让我们想对HTML5进行一次深入的探秘,去了解一下什么是HTML5,并且HTM ...
各大浏览器 CSS3 和 HTML5 兼容速查表
2019独角兽企业重金招聘Python工程师标准>>> 不知不觉中,支持 CSS3 和 HTML5 的浏览器变得越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 ...
php in_array 遍历,in_array大数组查询性能问题
问题最近在实现一个项目接口的时候发现当数组过大的时候,数据返回的速度有点慢.接口数据返回最长反应时间2s,经过反复调试发现代码段耗时最长的部分在in_array()函数. 解决过程在stackov ...

HTML标签以及各大浏览器份额、性能

总目录