HTML速查手册-CSDN博客

本文链接：https://blog.csdn.net/zyz031219/article/details/115231221

HTML知识点速查

网页基本结构

<!DOCTYPE html><!--声明-->
<html><!--根标签-->
	<head><!--头部-->
		<meta charset="utf-8"><!--定义字符集-->
        <!-- 这是注释 -->
		<title>第一个网页</title><!--网页标题-->
	</head>
	<body>
	<!--网页内容-->
	</body>
</html>

!DOCTYPE的作用

IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（DOCTYPE）切换实现的。

声明位于文档中的最前面的位置，处于 html 标签之前。声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
HTML5 不是基于 SGML，因此不要求引用 DTD。
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。（标准模式与兼容模式的区别：标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。）
一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。
在 html5 之后不再需要指定 DTD 文档，因为 html5 以前的 html 文档都是基于SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。

（在HTML4.01版本中HTML文档都基于SGML（标准通用标记语言），使用DTD的方式；h5不基于SGML，因此使用doctype的新的声明方式）

SGML 、 HTML 、XML 和 XHTML 的区别：
SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
（SGML是电子文档标记语言的起源；HTML是超文本标记语言，是一种网页规定；XML标签可自建，可扩展标记语言；XHTML即HTML的严格模式，更规范）

meta标签

meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta charset="UTF-8">
    <!-- 字符集：编码格式UTF-8被称为万国码；统一标准写为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义视窗（视口），针对移动端优化，viewport表示用户网页可视范围（指页面能够被浏览的范围）， -->
    <!-- width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
    height：控制viewport的高度。
    initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
    maximum-scale：允许用户缩放到的最大缩放比例。
    minimum-scale：允许用户缩放到的最小缩放比例。
    user-scaleable：是否允许用户缩放，可以传“yes”或“no” -->
    <!-- 移动端设备开发常用：
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
    <!-- 再深入学习见文档 -->
    <meta name="keywords" content="html,css,xml,javascript">
    <!-- 定义文档关键词，用于搜索引擎 -->
    <meta name="description" content="Free Web tutorials on HTML and CSS">
    <!-- 定义web页面描述 -->
    <meta name="author" content="Hege Refsnes">
    <!-- 定义页面作者 -->
    <meta http-equiv="refresh" content="30">
    <!-- 每30秒刷新页面 -->

补充：

<meta name=”robots” content=”index,follow”/>	搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免 IE 使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>	uc 强制竖屏
<meta name=”x5-orientation” content=”portrait”>	QQ 强制竖屏
<meta name=”full-screen” content=”yes”>	UC 强制全屏
<meta name=”x5-fullscreen” content=”true”>	QQ 强制全屏
<meta name=”browsermode” content=”application”>	UC 应用模式
<meta name=”x5-page-mode” content=”app”>	QQ 应用模式
<meta name=”msapplication-tap-highlight” content=”no”>	windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

link标签

link 标签定义文档与外部资源的关系。
link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。

页面导入样式时，使用 link 和 @import 有什么区别？

link是一种引入资源的标签，import是引入css的方式。所以，import引入的只能是css，而link可以引入所有的资源，包括图片，RSS等。
加载顺序上也有一些差异。link引用的CSS会同时被加载。import引用的CSS会等到页面全部被下载完再加载。
兼容性的差别。link无任何兼容问题，import兼容IE5以上。（当然，IE5估计也找不到了）
动态引入样式 link可以后期引入样式，而import是不可以后期引入的，只能初始化页面之前引入。
复用率的问题 import可以复用之前的css文件，而link只能一次引用一个文件。当然，import复用文件时，在浏览器实际上是加载了多个文件，会有多个请求。而每一个link只是一个http请求。

<link rel="stylesheet" type="text/css" href="style.css">
<!-- 链接 关联 样式表    数据类型           超链接 -->

<style type="text/css">
@import url(style.css);//载入样式表，可多个
</style>

（基本都用link）

标题标签

<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3 align="left">三号标题</h3>
<h4>四号标题</h4><!--标题标签是从h1~h6，数值越大，字体越小-->
<h5>五号标题</h5><!--`align`属性是用于设置标题在这里的水平排列，它常见的属性值有三个，分别是`left/center/right`-->
<h6>六号标题</h6>

字体标签

<font face="华文行楷" color="red" size="7">那些年的那些事</font> 
<!--`face`设置字体的样式。`color`设置字体的颜色。
 `size`属性用于设置字体的大小，它的值在`1~7`之间，1最小，7最大-->

段落标签

<p align="center">第三个段落</p>
<p align="right">第四个段落</p>
<!--每一个段落标签都会重启新的一行，并且段落与段落之间上下会有缝隙-->

特殊文字样式标签

<b>文字加粗</b>
<strong>表强调</strong> 
<hr><!--分割线-->
<i>文字倾斜</i>
<em>倾斜表强调</em>
<cite>倾斜</cite> 
<hr><!--分割线-->
<u>文字下划线</u>
<ins>下划线表强调</ins>
<hr><!--分割线-->
<strike>文字删除线</strike> 
<del>文字删除线表强调</del>

上标文字与下标文字

<sub>下标</sub><sup>上标</sup>
<hr><!--分割线-->
<!--注意字母指的方向和实际用作方向相反,如b指向上但是是下标-->

特殊文本内容

名称	代码
版权标志	`©`
商标标志	`®`
度数标志	`°`
小于符号	`<`
大于符号	`>`
空格符号	` `

列表标签

有序列表(ordered list)，无序列表(unordered list)以及自定义列表(data list)

<ul type="disc">
    <li>表里面的每一项使用`li`来表示，指的是`list item`</li>
    <li></li><!--`type`属性* `disc`实心圆
* `circle`空心圆
* `square`实心矩形 -->
</ul>
<ol type="1">
    <li>`1`则指定以数字为顺序</li>
    <li>`A`以大写字母为顺序</li>
    <li>`a`以小写字母为顺序</li>
    <li>`I`大写的罗马文为顺序</li>
    <li>`i`小写的罗马文为顺序</li>
</ol>
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    
</dl>

详细内容标签

 <details>
     <summary>这是新标签</summary>
     <p>这是一个段落</p>
     <font>这是一个字体标签</font>
     <h2>这是一个标题标签</h2>
</details>
<hr>
<details>
    <summary>男生</summary>
    <ul>
        <li>胡哥</li>
        <li>春哥</li>
        <li>发哥</li>
    </ul>
</details>
<!--1. `details`标签多半都与`summary`标签结合在一起使用
	2. `details`标签下面可以嵌套任何标签，`summary`标签就是这个`details`标签的标题-->

链接标签

链接标签指网页当中的超链接，点击以后可以跳转到新的页面，使用a标签去完成

<!-- _self在当前窗体打开 -->
<a href="http://www.baidu.com" target="_self">百度一下</a>
<hr>
<!-- _blank在新的窗体里面去打开 -->
<a href="http://www.iqiyi.com" target="_blank">爱奇异</a>
<!--1. `href`属性用于设置链接的地址
	2. `target`属性用于设置网页的打开方式，其实常见的属性值如下
   * `_self`在当前的窗体打开   * `_blank`在新的窗体打开-->

图片标签

<img src="img/022.jpg" width="200" height="150" alt="这是女生图片" 
    border="10" hspace="50" vspace="100" title="这是提示信息" />
<!--1. 在网页中插入图片我们使用`img`标签
    2. `src`属性用于设置图片的地址
    3. `width/height`属性用于设置图片的大小
    4. `border`属性用于设置图片的边框
    5. `hspace`全称叫`horizontal space`，指水平的间距
    6. `vspace`全称叫`vertical space`，指垂直的间距
    7. `title`提示信息
    8. `alt`属性，当图片不能够正常显示的时候，就会显示`alt`里面的提示文字，如果图片能够正常显示，则不显示`alt`的内容（它相当于一个备胎属性）-->

我们现在可以将链接标签与图片标签进行结合，做成一个图片链接

<a href="http://www.baidu.com">
    <img src="img/022.jpg" alt="图片">
</a>

map标签

这一个标签与img图片标签进行结合以后会产生很好的效果

<img src="img/022.jpg" border="10" usemap="#map1" width="500" height="350">
<map id="map1" name="map1">
    <!-- shape形状，rect全称rectangle矩形，coords坐标-->
    <area shape="rect" coords="0,0,200,150" href="http://www.baidu.com">
    <!-- circle的坐标是圆心与半径-->
    <area shape="circle" coords="300,300,50" href="http://www.iqiyi.com" target="_blank">
    <area shape="poly" coords="250,0,500,350,0,350" href="http://www.youku.com" target="_blank">
</map>
<!--1. `img`标签通过`usemap`属性与`map`标签进行结合，使用的是`map`的标签的`id`和`name`属性
	2. `map`标签下面有`area`标签，它指区域
	3. `shape`属性设置区域的形状，它的形状主要有下面三种
   		* `rect`全称叫`rectangle`矩形
   		* `circle`圆形
   		* `poly`全称叫`polygon`多边形
	4. `coords`属性根据形状设置坐标值
	5. `href`属性与`target`属性则和`a`标签保持一致-->

iframe标签

iframe全称叫insert frame，它可以向一个网页里面嵌入另一个网页

<iframe src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>

链接标签与iframe标签的第一种结合方式

<a href="https://www.iqiyi.com" target="aaa">视频</a>
<a href="" target="aaa">博客</a>
<hr>
<iframe name="aaa" src="https://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>

当a标签的target属性设置为iframe标签的name属性的时候，这个链接在打开的时候就会在这个iframe当中去打开

此处不深究，基本弃用，需要时再查文档

进度条标签

<progress></progress>
<hr>
<progress max="100" value="70"></progress>
<!--1. `progress`在没有设置`value`属性值的时候，它的进度块会左右滑动
	2. `max`属性设置最大值，`value`属性设置当前值-->

跑马灯

<marquee bgcolor="red" direction="left" width="1200" height="300"
         behavior="scroll" scrollamount="3" scrolldelay="1">
    <font size="7" color="white">众志成城，抗击疫情</font>
</marquee>
<!--1. `marquee`标签是跑马灯效果的标签
    2. `bgcolor`设置背景颜色
    3. `width/height`设置宽度与高度
    4. `direction`设置方法，它的属性值有`left/right/up/down`
    5. `behavior`设置行为，有`scroll/slide/alternate`三种
    6. `scrollamount`设置每次滚动的大小
    7. `scrolldelay`设置每次滚动的延时-->

表格标签

<table border="1" width="400" cellspacing="0" cellpadding="2">
    <caption>
        <h2>登记信息表</h2>
    </caption>
    <colgroup>
        <col width="80" bgcolor="green">
        <col width="220">
        <col width="100">
    </colgroup>
    <thead>
        <!-- table row -->
        <tr bgcolor="pink">
            <!-- table head -->
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- table data -->
            <td>张珊</td>
            <td colspan="2">女,17</td>
        </tr>
        <tr>
            <td>李四</td>
            <td rowspan="2">男</td>
            <td>29</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>33</td>
        </tr>
        <tr height="100">
            <td valign="top" align="right">赵六</td>
            <td valign="middle" align="center">女</td>
            <td valign="bottom">14</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>
<!--1. 行的标签是`tr`，全称叫`table row`
2. `td`代表`table data`表格的数据 
3. `th`代表表格的头部,全称叫`table head`
4. `caption`标签是表格的标题
5. `thead/tbody/tfoot`是表格的结构标签，如果不写，浏览器会自动生成`tbody`
6. `colgroup`列的设置标签
7. `col`代表列
8. `border`属性设置表格的边框
9. `cellspacing`属性用于设置单元格的间距
10. `cellpadding`属性设置单元格的内间距
11. `align`用于设置水平排列，常见的属性值`left/center/right`
12. `valign`用于垂直排列，常见的属性值有`top/middle/bottom`
13. `rowspan`用于设置行的合并
14. `colspan`用于设置列的合并
15. `width/height`属性用于设置宽度与高度-->

表单标签

<form action="url地址" method="get/post" name="" enctype="multipart/form-data">
    <!--enctype上传文件需要添加-->
        <!-- action为提交地址，method为表单提交方式； -->
        <input type="text" name="username" value="默认值" maxlength="6">
        <!-- 文本输入框 maxlength规定输入字符长度，无提示,默认宽度20个字符
autocomplete="off" on 历史记录自动补全-->
        <input type="password" name="pwd">
        <!-- 密码框 输入隐藏 -->
        <input type="radio" name="" value="" checked="checked">
        <!-- 单选按钮  圆框 name值相同则有单选功能 
         checked在页面加载时自动选中-->
        <input type="checkbox" name="sex[]" id="sex" value="1">
        <!-- 复选按钮  方框 -->
        <label for="sex">男</label>
        <!-- 点击范围扩大自动定位到复选框for对应id属性 -->
        <input type="button">
        <!-- 按钮 -->
        <input type="file" multiple accept="image/*" />
		1. `multiple`属性用于设置多选文件
		2. `accept`用于设置选择文件的类型，`image/*`代表图片类型文件
        <!-- 文件域 选择文件上传 -->
        <select name="位置" id="" size="3">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
        </select>
        <!--size表示最多显示几项， 下拉列表 selected默认选中-->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- 文本域 -->
        <input type="reset" value="重置">
        <!-- 重置表单所选数据 -->
        <input type="submit" value="提交">
        <!-- 提交数据 -->
    <!--了解-->
    数字<input type="number" max="40" min="18" step="3" />
    时间：<input type="time" />
    日期：<input type="date">
    日期时间：<input type="datetime-local" />
    颜色：<input type="color">
    滑块：<input type="range" max="100" min="0" step="10"/>
    </form>