标签：构建 发送 col 资源 动态网页 doctype 作用 mon row
标签一般分为两种：
1. 块级标签
霸占一整行的标签。比如：<h>,<p>,<div>,<form>等
2. 行内标签
可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等
3. 块级标签特点
4. 行内标签特点
< >；"；©®
由上图可以看出，html文件主要由<head>标签和<body>标签组成。在这两个标签的标签体中能够嵌套如下标签：
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；
由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
window.top.document.compatMode： //BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 //CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
有两个属性：http-equiv属性 和 name属性，不同属性有不同的参数，这些不同的参数使得名，meta标签有不同的功能。
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页 <meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。（关于跳转，可以在应急的时候用，一般可以用js实现）
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="星际2，飞船，UFO，皮卡"> 关键字
<meta name="description" content="为您提供最新的信息"> 网站描述
title标签写网站头部信息，即网页标签的名称
link标签有两个作用：
<link rel="shortcut icon" href="image/favicon.ico"> # rel指的是类型，href是文件路径，(image是存放图片的文件夹)
<link rel="stylesheet" type="text/css" href="css/common.css"> # rel指的是类型，href是存放css文件的文件夹
在html文件中编写css样式
<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type="text/javascript">...</script>
<hn>：n的取值范围是1~6; 从大到小. 用来表示标题. <p>：段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>：加粗标签. <strike>：为文字加上一条中线. <em>：文字变成斜体. <sup>和<sub>：上角标 和 下角表. <br>：换行. <hr>：水平线 <div>：白板，本身没有特性，块级标签。 <span>：白板，本身没有特性，行内标签。
<p>这个文本包含 <sub>下标</sub>文本。</p> <p>这个文本包含 <sup>上标</sup> 文本。</p>
显示结果：
这个文本包含 下标文本。
这个文本包含 上标 文本。
可以有如下取值：
text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别？ file 提交文件：form表单需要加上属性enctype="multipart/form-data"
表单提交项的值。
radio 和 checkbox 默认被选中
只读，text 和 password 标签中使用
使得input标签无法编辑，对所用的input标签都有效
文本域标签，有如下三个属性：
name: 表单提交项的键. cols: 文本域默认有多少列 rows: 文本域默认有多少行
<label for="xxx">姓名</label> <input id="xxx" type="text">
当label标签通过for属性与其他标签的id属性关联时，点击label标签的标签体时，会自动响应label标签所关联的标签
选择框，有如下属性：
name: 表单提交项的键。
value：表单提交项的值。 size：选项个数 multiple：multiple
selectted：默认选择项
如果属性设置multiple="multiple" size="3"，表示选择框只能同时显示三项。<option>内的 value 为后台识别，innerText为文本内容。
<p>选择你的地址</p>
<select name="city">
<option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
<option value="2">深圳</option>
<option value="3">上海</option>
<option value="4">杭州</option>
<option value="5">成都</option>
</select>
<p>请选择籍贯</p>
<select name="jiguan">
<optgroup label="河北省">
<option value="1">石家庄</option>
<option value="2">保定</option>
<option value="3">邯郸</option>
</optgroup>
<optgroup label="湖南">
<option>长沙</option>
<option>株洲</option>
<option>湘潭</option>
</optgroup>
<optgroup label="广东">
<option>广州</option>
<option>深圳</option>
<option>佛山</option>
<option>珠海</option>
<option>中山</option>
</optgroup>
</select>
表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
表单的提交方式 post/get 。 默认取值就是 get。
get: 1. 提交的键值对.放在地址栏中url后面.
2. 安全性相对较差.
3.对提交内容的长度有限制.
post: 1. 提交的键值对 不在地址栏.
2. 安全性相对较高.
3. 对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
当上传文件时，form标签必须添加该属性，而且还必须已post方式发送请求
enctype="multipart/form-data"
有两个作用：
<a href="http://www.baidu.com" target="_blank" title="点一下看看啊">你好</a>
<a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <a href="#i5">第五章</a> <div id="i1" style="height:600px;">第一章的内容 <p>绪论</p></div> <div id="i2" style="height:600px;">第二章的内容 <p>公元500年</p></div> <div id="i3" style="height:600px;">第三章的内容 <p>公园1000年</p></div> <div id="i4" style="height:600px;">第四章的内容 <p>公元1900年</p></div> <div id="i5" style="height:600px;">第五章的内容 <p>公元2010年</p></div>
注意：<a>标签默认的显示样式会有下划线，如果看着不爽想要去掉，在a标签样式中设置：text-decoration:none;
图片显示标签
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放
注意：也可以把img标签嵌套在a标签中，来实现点击图片跳转的功能。
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下：
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器中显示如下：
1.Coffee
2.Milk
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
浏览器显示如下：
构建表格。
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.
<h4>单元格跨两格:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>单元格跨两列:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
标签：构建 发送 col 资源 动态网页 doctype 作用 mon row
原文地址：https://www.cnblogs.com/cjaaron/p/9570958.html
