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

最新推荐文章于 2024-10-08 18:55:50 发布

沈深

最新推荐文章于 2024-10-08 18:55:50 发布

阅读量324

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/gwhfamily/article/details/115872390

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

总目录

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）