02_Html的DOCTYPE、表格、表单标签

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" src="按钮.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）；

最后编辑于：2017.12.07 05:36:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342