目录
一, web标准介绍
web标准:
总结说明：
二, 浏览器介绍
| 浏览 | 内核 |
|---|---|
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
| IE | trident |
三, html介绍
一, html的网络术语
<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义<p>内容</p>称为元素二, html的规范
三, 编写html的规范
<h1><font></font></h1><span></span><br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” /><h1 id="head"></h1><input type="radio" checked="checked" />四, html的基本语法特征
HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，有良好的缩进，代码更易读。
空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
<html></html><meta/>使用pycharm新建html文件,输入‘!‘或‘html:5‘按tab键后,自动生成的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE html>开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
常见声明格式:
HTML5:
<!DOCTYPE html>HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系<style>：定义内部样式表与网页的关系一, meta标签
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name=viewport content="width=device-width, initial-scale=1">上面这个标签，是让我们网页支持移动端，移动设备优先
二, title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
<title>怀心抱素的个人空间</title>html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度| 标签类型 | ||||||
|---|---|---|---|---|---|---|
| 标题 | h1 | h2 | h3 | h4 | h5 | h6 |
| 列表 | ol | ul | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。
| ol | order list | 有序列表 | li list item | 列表项 | ||
| ul | unoedered list | 无序列表 | li list item | 列表项 | ||
| dl | definiton list | 定义列表 | <dt>：definition title |
列表的标题，这个标签是必须的 | <dd>：definition description |
列表的列表项，如果不需要它，可以不加 |
需要注意的是：
一, ol列表（ordered list，即有序列表）
代码示例:
<body>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>属性:
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始
属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字)
属性start:开始位置
<!--默认显示1,2,3序号,可以指定开始的值-->
<ol>
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据a,b,c显示,可以指定开始的值-->
<ol type="a" start="2">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据A,B,C显示,可以指定开始的值-->
<ol type="A" start="26">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据罗马数字,可以指定开始的值-->
<ol type="I">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>有序列表也可以进行嵌套
<body>
<ol type="a">
<li>我是有序列表</li>
<ol type="1">
<li>我是子列表</li>
<li>我是子列表</li>
<li>我是子列表</li>
</ol>
<li>我是有序列表</li>
</ol>
</body>二, ul列表（unordered list，即无序列表）
代码示例:
<body>
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
</body>属性:
type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆),none(不显示样式)
<!--设置不显示任何样式-->
<ul type="none">
<li>手机</li>
<li>电脑</li>
<li>其他电器</li>
</ul>
<!--设置显示实心方块-->
<ul type="square">
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>
<!--设置显示空心圆-->
<ul type="circle">
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>
<!--默认显示实心圆 disc-->
<ul>
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>三, dl列表（definition list，即定义列表）
实例代码:
<body>
<dL>
<dt>第一个标题</dt>
<dd>第一个内容</dd>
<dd>第二个内容</dd>
<dd>第三个内容</dd>
<dt>第二个标题</dt>
<dd>第一个内容</dd>
<dd>第二个内容</dd>
<dd>第三个内容</dd>
</dL>
</body>定义列表表达的语义是两层：
<dt>是一个列表，列出了几个<dd>项目用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）
一, p
段落标签<p>
段落：是英文paragraph的缩写
属性:
align=‘属性值‘：对齐方式。属性值包括：left、center、right
<body>
<p>这是一个段落</p>
<p align="left">这是左对齐的段落</p>
<p align="right">这是右对齐的段落</p>
<p align="center">这是居中的段落</p>
</body>p标签是一个文本级标签，p里面只能放文字、图片、表单元素,内部不能再嵌套块级标签
二, div
div和span是非常重要的标签，div的语义是division“分割”
div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行
div标签的属性:
代码示例:
<body>
<div>我是div标签</div>
<div>又是一个div标签</div>
</body>div在浏览器中，除了换行以外，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
三, hr
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分
代码示例:
<body>
<div>我是div标签</div>
<hr>
<div>又是一个div标签</div>
</body>四, 内容居中标签(center)
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
<body>
<!--已废弃-->
<center>
<div>我是div标签</div>
<div>又是一个div标签</div>
</center>
</body>五, 预定义（预格式化）标签：<pre>
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。
代码示例:
<body>
<pre>
咏鹅
作者:骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
</pre>
</body>表格标签用<table>表示
标准表格:thead tbody的内容
tr表示每一行
th表示thead中的每一个元素
td表示tbody中的每一个元素
<table border="1" cellpadding="10px" cellspacing="5px">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table>不写thead只写tbody 就没有表头样式
<table border="1" cellpadding="10px" cellspacing="5px">
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table><table>的属性:
border：边框。像素为单位。style="border-collapse:collapse;"：单元格的线和表格的边框线合并width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。<td>进行设置）cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。dir="rtl"，那就指的是内容到右边那条线的距离。cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#99cc66"：表格的背景颜色background="路径src/..."：背景图片。<tr>: 行
属性:
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色height：一行的高度align="center"：一行的内容水平居中显示，取值：left、center、rightvalign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>:单元格
属性:
align：内容的横向对齐方式。属性值可以填：left right centervalign：内容的纵向对齐方式。属性值可以填：top middle bottomwidth：绝对值或者相对值(%)height：单元格的高度bgcolor：设置这个单元格的背景色background：设置这个单元格的背景图片单元格的合并:
如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
要占据两个单元格的位置
<th>: <thead>标题单元格 属性同<td>标签
<caption>：表格的标题。使用时和tr标签并列
内联标签是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用内联标签来进行文字、小图标（小结构）的搭建
内联标签的特性:
和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）| 字体 | 粗体 | 斜体 | 上下标 | 划线 |
| 字体 | b | em | sup | del |
| 字体 | strong | i | sub | u |
| 排版 | span | br | ||
| 超链接 | a | |||
| 图片 | img |
粗体标签<b>或<strong>(已废弃)
代码示例:
<body>
乳娃娃
<b>乳娃娃</b>
<strong>乳娃娃</strong>
</body>斜体标记 <i>或<em>（已废弃）
代码示例:
<body>
哇哈哈
<i>哇哈哈</i>
<em>哇哈哈</em>
</body>上标<sup>下标<sub>
代码示例:
<body>
5<sup>2</sup>
8<sub>2</sub>
</body>下划线标记<u>中划线标记<s>（已废弃）和<del>
代码示例:
<body>
<u>哇哈哈</u>
<s>哇哈哈</s>
<del>哇哈哈</del>
</body>一, span
div和span是非常重要的标签，div的语义是division“分割”;span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
代码示例:
<body>
<div>导航栏</div>
<div>横幅</div>
<span>这里是span</span>
</body>span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
代码示例:
<body>
商品简介:
<span>
<a href="">详细信息</a>
<a href="">生产日期</a>
</span>
</body>二, 换行标签<br>
打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论将它置于何处，<br>标签都会产生一个强制的换行
代码示例:
<body>
<span>br标签老厉害了</br>能让我们换行</span>
</body><p>标签和<br>标签的区别：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性
三, 超链接<a>
超链接有三种形式:
外部链接：链接到外部文件。举例：
<body>
<a href="https://www.baidu.com">百度一下</a>
</body>a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写。
锚链接:
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。首先要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字
代码示例:
<body>
<h1>我是一个h1</h1>
<h2>我是一个h2</h2>
<h3>我是一个h3</h3>
<h4>我是一个h4</h4>
<h5>我是一个h5</h5>
<h6>我是一个h6</h6>
<h1>我是一个h1</h1>
<h2>我是一个h2</h2>
<h3>我是一个h3</h3>
<h4>我是一个h4</h4>
<h5>我是一个h5</h5>
<h6>我是一个h6</h6>
<h1>我是一个h1</h1>
<h2>我是一个h2</h2>
<h3>我是一个h3</h3>
<a name="xx">a标记的位置</a>
<h4>我是一个h4</h4>
<h5>我是一个h5</h5>
<h6>我是一个h6</h6>
<h1>我是一个h1</h1>
<h2>我是一个h2</h2>
<h3>我是一个h3</h3>
<h4>我是一个h4</h4>
<h5>我是一个h5</h5>
<h6>我是一个h6</h6>
<h1>我是一个h1</h1>
<h2 id="xxx">我是一个h2</h2>
<h3>我是一个h3</h3>
<h4>我是一个h4</h4>
<h5>我是一个h5</h5>
<h6>我是一个h6</h6>
<!--注意:如果href这里只写#表示跳转到网页的最上面-->
<a href="#">回到顶部</a>
<a href="#xx">回到a标识的位置</a>
<a href="#xxx">回到h2位置</a>
</body>邮件链接:
代码示例:
<body>
<a href="383838@qq.com">联系我</a>
</body>特殊的链接:
返回页面顶部的位置:
<a href="#">跳转到顶部</a>超链接的属性:
href：目标urltitle：鼠标悬停显示的文本name：主要用于设置一个锚点的名称target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开_parent：在父窗口中显示_top：在顶级窗口中显示<img>img: 代表的就是一张图片。是单边标记
img是自封闭标签，也称为单标签
能插入的图片类型：
src属性: 图片的相对路径和绝对路径
相对路径
相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径
<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">绝对路径
以盘符开始的绝对路径
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">网络路径
<img src="http://www.baidu.com/2016040102.jpg">img标签常用的其他属性:
注意事项:
除此之外，从HTML的角度来讲，标签还可以分为文本级和容器级：
| 代码 | 特殊字符 |
|---|---|
|
空格 （non-breaking spacing，不断打空格） |
< |
小于号（less than） |
> |
大于号（greater than） |
& |
符号& |
" |
双引号 |
' |
单引号 |
© |
版权? |
™ |
商标? |
颜色表示:
RGB色彩模式:
原文：https://www.cnblogs.com/zyyhxbs/p/11324415.html