HTML入门2

快速建结构方式：

 v ！+tab       html5的标签结构

 v Meta        

一、Meta标签

1. 规范电脑编码格式（charset）

    <meta charset=”UTF-8”>

       编码    Ascll  早期编码识别英文

                Ansi   英文编码

                Unicode  日文编码

                Gbk  包含全部中文 繁体

             Gb2313    简单中文

                Big5     繁体中文

                Utf-8    通用字符集（现流行）

2. 关键字（name）

<meta name=”keywords” content=”春，薄款，宽松，嘻哈”>向搜索引擎说明你的网页的关键词

3. 网页描述（name）

   <meta name=”description” content=”新东方英语公司，是一家......”>

4. 网页重定向（http-equiv）

<metahttp-equiv=”refresh”content=”5;url=http://ww.mi.com”>

五秒后自动跳转到指定地址（小米官网）。

二、 Link标签

1. 链接外部样式文件

   <link rel=”stylesheet” href=”1.css“>

2. icon图标

<link rel=”icon” href=”jd.ico”

 

三、表格

1、展示数据，是对网页重构(css+div）的一个有益补充

2、<table>

        <tr>

             <td></td>

             <td></td>

             <td></td>

             <td></td>

        </tr>

        <tr>

             <td></td>

             <td></td>

             <td></td>

             <td></td>

        </tr>

   </table>

属性：border:=”1” 边框

         Width=”500” 表格的宽度

         Height=”300” 表格的高度

         Cellspacing=”2” 单元格与单元格之间的距离

         Cellpading=”2”  单元格中的内容与边框之间的距离

         Align=”left/center/right”

         bgcolor=”red”背景颜色

    注意：如果直接给表格用align=”center” 表格居中

             如果给tr或者td使用    tr或者td中的内容居中     

   

3、表格结构

     <table>

           <thead>

                <tr  width=”300”> 注：不可以在thead中设置参数，thead只是一种规范格式

                    <td></td>

                     <td></td>

                      <td></td>

                </tr>

            </thead>

            <tbody>

                  <tr>

                          <td></td>

                           <td></td>

                            <td></td>

                    </tr>

            </tbody>

            <tfoot>

                     <tr>

                            <td></td>

                            <td></td>

                            <td></td>

                    </tr>

           </tfoot>

        </table>

4、表头和单元格合并

    （1）表头

             <caption></caption>

    （2） colspan=”2” 合并同一行上的单元格

              Rowspan=“2” 合并同一列上的单元格

5、表格标题、边框颜色、内容垂直方式

     （1）表格标题<th></th>  用法和td一样  在tr里面

     （2）.边框颜色bordercopor=”red” 

6、内容垂直对其方式

        <td valign=”bottom”>阿娇</td>

        Valign=”top”|”middle”|”bottom”

7、 细线表格

    <table width=”500” height=”300” bgcolor=”green” cellspacing=”1”>

    <tr bgcolor=”white”><tr>

 

三、表单之文本输入框，密码输入框，单选框

1、表单的作用：收集信息

2、表单的组成：提示信息，控件，表单域

   <inform action=”1.php” method=””></form>

     Action：处理信息

      Method：“”get  |  post”（get通过地址栏提供传输信息，安全性差，post通过1.PHP处理信息，安全性高）

3、文本输入框

   <input type=“text”maxlength=“6” readonly=“readonly”disabled=“disabled”>

    Maxlength=“6”：限制字符输入长度

    Readonly=“readonly”将输入框设置为只读状态（不能编辑）

    Disabled=”disabed”

    name="username"   输入框的名称

    value="大前端"     将输入框的内容传给处理文件

4、密码输入框

  <input type=“password” name="pwd"> 

   注意：文本输入框的所有属性对密码输入框都有效。

5、单选框

  <input type=“radio” name="gender" checked="checked"> 男

   <input type=“radio” name="gender" checked="checked"> 女

   注意：只有将name的值设置相同的时候，才能实现单选效果。

                       checked=”checked” 设置默认选择项。

6、下拉列表 

• <select multiple=”multiple”>

     <option>山东</option>

     <option selected="selected">上海</option>

   </select>   

   属性：Multiple=”multiple”  将下拉列表设置为多选项

       Selected=”selected”  设置默认选中项目

• 对下拉列表进行分组 <optgroup></optgroup> 

   <select multiple=”multiple” label="山东">

         <option>济南</option>

         <option>青岛</option>

   </select>   

    属性：<optgroup></optgroup>   对下拉列表进行分组。

      Label=””  分组名称。

7、多选框

 <input type="checkbox" checked="checked">语文
 <input type="checkbox" checked="checked">数学

 <input type="checkbox" checked="checked">英语

 属性：Checked=”checked” 设置默认选中项

8、多行文本框

 <textarea cols="30" rows="10"></textarea>

 属性：Cols  控制输入字符的长度。

    Rows  控制输入的行数

9、文件上传控件

 <input type="file">

10、按钮

  文件提交按钮   <input type="submit">   可以实现信息提交功能

  普通按钮      <input type="button" value="注册">   不能提交信息，配合JS使用

  图片按钮     <input type="image" src="1.jpg">     图片按钮可实现信息提交功能

  重置按钮      <input type="reset">  将信息重置到默认状态

11、表单信息分组

  <form action="1.css" method="post">
<fieldset>
<legend>分组信息</legend>
</fieldset>

  </form>

  属性：<fieldset></fieldset>    对表单信息分组

      <legend></legend>      表单信息分组名称

四、h5补充控件

   网址控件
   <input type="url">
   日期控件
   <input type="date">
   时间控件
   <input type="time">
   邮件控件
   <input type="email">
   数字控件
   <input type="number" step="5">
   滑块控件
   <input type="range">

五、标签语义化

  好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

  标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

  标签语义化意义： 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）；