手记

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);



作者:对方不想理你并向你抛出一个异常
链接:https://www.jianshu.com/p/800c7dc5dbbf


0人推荐
随时随地看视频
慕课网APP