DOCTYPE
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
Strict：严格型
Transitional ：过渡型
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
XHTML
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
XHTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD
当您希望使用框架时，请使用此 DTD！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Meta标签
meta 的属性有两种：name和http- equiv。
name属性主要用于描述网页，对应于content（网页内容）
<meta charset="utf-8">说明网页的编码方式<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；<meta name="Description" contect="">告诉搜索引擎你的站点的主要内容；<meta http-equiv="refresh" content="5;http://www.baidu.com">网页重定向<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
其中的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
关键字keywords:
<meta name="keywords" content="Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训">
网页描述description：
<meta name="description" content="传智播客专注Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训。">
http-equiv属性
<meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312">
网页重定向，5秒后跳转到百度的页面
<meta http-equiv="refresh" content="5;http://www.baidu.com">
链接外部样式表
<link rel="stylesheet" type="text/css" href="style.css">
icon图标
<link rel="icon" href="favicon.ico">
表格table
<table border="1" width="450px" height="300px" cellspacing="20" cellpadding="20"> <tr> <td align="center">1</td> <td>1</td> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> <td>1</td> </tr> </table>
属性
table属性
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用，tr或者td内容居中。caption 元素定义表格标题
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。表格的标准结构
<table border="1" width="450px" height="300px"> <caption>这是标题</caption> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td align="center">1</td> <td>1</td> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> <tfoot> <tr> <td>foter1</td> <td>foter2</td> <td>foter3</td> </tr> </tfoot> </table>
合并单元格
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格<th>标记及其属性
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。
注意：th中的内容自动加粗和居中subline中创建一个三行三列的表格
table>tr*3>td*3然后按下tab键边框颜色,table标签的属性
bordercolor="#ff00ff"内容垂直对齐方式
<tr valign="center">
valign=”top | middle | bottom”
top：顶部对齐
middle：居中对齐
bottom：底部对齐
案例：细线课程表
<table width="300" height="200" align="center" bgcolor="green" cellspacing="1"> <caption>课程表</caption> <thead bgcolor="#ffffff"> <tr> <th colspan="2"></th> <!-- <th></th> --> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tr bgcolor="#ffffff"> <td rowspan="2">上午</td> <td>1</td> <td>体育</td> <td>体育</td> <td>体育</td> <td>体育</td> <td>体育</td> </tr> <tr bgcolor="#ffffff"> <!-- <td></td> --> <td>2</td> <td>英语</td> <td>英语</td> <td>英语</td> <td>英语</td> <td>英语</td> </tr> <tr bgcolor="#ffffff"> <td rowspan="2">下午</td> <td>1</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr bgcolor="#ffffff"> <!-- <td></td> --> <td>2</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> </tr> </table>
细线课程表
表单form
<form action="1.php" method="post"></form>
属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
文本输入框
<input type="text" name="username" maxlength="6" readonly="readonly" value="大前端" disabled="disabled">
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件密码输入框
<input type="password" name="username" maxlength="6" readonly="readonly" value="大前端">
注意：文本输入框的所有属性对密码输入框都有效单选框
<input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女
只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。
注意：当name相同时，有多个radio有checked=”checked” 属性，根据DOM顺序加载的原则，最后一个radio的选中效果有效
下拉列表
<select multiple="multiple"> <option>江西</option> <option>河北</option> <option>湖南</option> <option>贵州</option> <option>北京</option> </select>
属性：
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<select> <optgroup label="东北"> <option>江西</option> <option>河北</option> </optgroup> <optgroup label="江南"> <option>湖南</option> <option>贵州</option> <option>北京</option> </optgroup> </select>
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
多选框
<input type="checkbox" name="mylike" checked="checked">抽烟 <input type="checkbox" name="mylike" checked="checked">喝酒 <input type="checkbox" name="mylike">烫头
可以有多个默认选中项
多行文本框
<textarea rows="5" cols="100"></textarea>
Cols ： 控制输入字符的长度。
Rows ： 控制输入的行数
文件上传控件
<input type="file" name="myfile">
表单提交
<input type="submit" name="mysubmit">
可以实现信息提交功能
普通按钮
<input type="button" value="普通按钮">
不能提交信息，一般配合JS使用。
图片按钮
<input type="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="按钮.jpg">
图片按钮也可实现信息提交功能
表单重置
<input type="reset">
将信息重置到默认状态
表单分组
<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
<form action="1.php" method="post"> <fieldset> <legend>测试表单</legend> <input type="text"/> </fieldset></form>
H5补充表单控件
H5表单控件
<form action="1.php"> <input type="time" name="mytime"> <input type="date" name="mydate"> <input type="url" name="mydurl"> <input type="email" name="myemail"> <input type="number" step="5"> <input type="range" step="10"> <input type="submit"> </form>
标签语义化
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
标签语义化（注意事项）
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/800c7dc5dbbf
共同学习，写下你的评论
评论加载中...
作者其他优质文章
