HTML基础学习笔记（2）

HTML学习笔记（2）

1 head标签中的结构

1. 编码结构：<meta charset="UTF-8">

• charset---编码
• ascll
• ansi
• Unicode
• guk --- 中文
• gb2312 ---中文
• big5 --- 繁体中文
• UTF-8 --- 全世界180多个国家语言（通用字符集）

1. 关键字keywords
   <meta name="keywords" content="Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训">

2. 网页描述description
   <meta name="description" content="传智播客专一Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训。">

3. 网页重定向refresh
   <meta http-equiv="refresh" content="5; http:/www.itcast.cn">

4. 连接外部样式表文件
   <link type="stylesheet" rel="1.css">

5. icon图标
   <link rel="icon" href="favicon.ico">

6. 其余属性：
   <meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制做的做者

• contect= "all|none|index|noindex|follow|nofollow"
• 其中的属性说明以下：
  • 设定为all：文件将被检索，且页面上的连接能够被查询；
  • 设定为none：文件将不被检索，且页面上的连接不能够被查询；
  • 设定为index：文件将被检索；
  • 设定为follow：页面上的连接能够被查询；
  • 设定为noindex：文件将不被检索，但页面上的连接能够被查询；
  • 设定为nofollow：文件将不被检索，页面上的连接能够被查询。

3 表格

展现数据，是对网页重构的一个有益补充。

<!-- 定义表格 -->
<table border="1" width="200" height="300" cellspacing="20" cellpadding="20" align="center">
    <!-- 定义行 -->
    <tr align="center">  
        <!-- 定义列 -->
        <td align="center">张三</td>
        <td>12</td>
        <td>哈哈哈</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>09</td>
        <td>呵呵呵</td>
    </tr>
</table>

• 属性
  1. border="1" 边框
  2. width="200" 宽度
  3. height="300" 高度
  4. cellspacing="20" 单元格与单元格的距离
  5. cellpadding="20" 内容距边框的距离
  6. align="left | right | center" 若是直接给表格用align="center" 表格居中；若是给tr或者td使用align="center" ，tr或者td内容居中；
  7. bgcolor=”red” 背景颜色。

1. 表格的标准结构

<table border="1" width="300" height="200">
    <thead>
        <tr height="200">
            <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>

2. 表头和单元格合并

<table border="1" width="500" height="300" align="center">
     <caption>表头</caption>
     <tr align="center">
        <td colspan="2">张三</td>
        <!-- <td>21</td> -->
        <td rowspan="3">前端工程师</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>21</td>
        <!-- <td rowspan="2">前端工程师</td> -->
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>21</td>
    <!-- <td>前端工程师</td> -->
    </tr>
</table>

3. 表格标题、边框颜色、内容垂直对齐

• 表格标题：th 与td用法同样：对标题文字自动加粗并水平居中对齐

<tr>
    <th>张三</th>
    <th>21</th>
    <th>前端工程师</th>
</tr>

• 边框颜色：bordercolor="red"

• 内容的垂直对齐方式：valign="top | middle | bottom" 靠上|中|下

4. 表单：搜集信息

• 表单的组成：

1. 提示信息
   • 昵称
   • 密码
   • 确认密码
   • ...

2. 表单控件

3. 表单域
   • from action="1.php" method="get"
   • 属性：action
   • method="get|post"
   • get:经过地址栏提供（传输）信息，安全性差
   • post:经过1.php来处理信息，安全性高
4. 文本输入框
   • input type="text" name="username"
   • maxlengt="6" 限制输入字符长度
   • readonly="readonly" 将输入框设置只读状态
   • disabled="disabled" 输入框未激活状态
   • name="username" 输入框的名字
   • value="前端" 将输入框的内容传给处理文件
5. 密码输入框
   • input type="passward" name="pwd"
   • 文本输入框中的全部属性对密码输入框都有效
6. 单选框
   • <input type="radio" name="gender" checked="checked">男
   • 只有将name的值设置相同的时候，才能实现单选的效果
   • checked="checked" 设置默认选中项
7. 下拉列表
   • select
     • option下拉列表的选项/option
     • option下拉列表的选项/option
   • /select
   • multiple="multiple" 下拉列表设为
   • selected="selected"
8. 多选框
   • input type="checkbox" checked="checked"
   • checked="checked" 设置默认选中项
9. 多行文本框
   • textarea cols="30" rows="10"
   • cols="30" 控制字符输入长度
   • rows="10" 控制输入行数
10. 文件上传控件
    • input type="file"
11. 文件提交按钮
    • input type="submit" ---能够实现提交功能
12. 普通按钮
    • input type="button" value="普通按钮" --- 不能实现提交功能，配合js使用
13. 图片按钮
    • input type="image" src="按钮.jpg" ---图片按钮可实现提交功能
14. 重置按钮
    • input type="reset" ---将信息重置到默认状态
15. 表单信息分组
    • fieldset legend分组信息/legend /fieldset
    • fieldset /fieldset ---对表单信息进行分组
    • legend /legend ---表单信息分组名称
16. HTML5新特性
    • input type="url" 网址控件
    • input type="date" 日期控件
    • input type="time" 时间控件
    • input type="email" 邮件控件
    • input type="number" step="2" 数字控件 step---步长
    • input type="range" step="10" 滑块控件 step---步长

5. 标签语义化

• 标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
• 标签语义化意义：
  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）；