HTML学习笔记（2）

1 head标签中的结构

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

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

关键字keywords
<meta name="keywords" content="Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训">
网页描述description
<meta name="description" content="传智播客专注Java培训,Android培训,安卓培训,PHP培训,C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训,游戏开发培训,移动开发培训,网络营销培训,web前端培训。">
网页重定向refresh
<meta http-equiv="refresh" content="5; http:/www.itcast.cn">
链接外部样式表文件
<link type="stylesheet" rel="1.css">
icon图标
<link rel="icon" href="favicon.ico">
其他属性：
<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>

属性

border="1" 边框
width="200" 宽度
height="300" 高度
cellspacing="20" 单元格与单元格的距离
cellpadding="20" 内容距边框的距离
align="left | right | center" 如果直接给表格用align="center" 表格居中；如果给tr或者td使用align="center" ，tr或者td内容居中；
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. 表单：搜集信息

表单的组成：

提示信息
- 昵称
- 密码
- 确认密码
- ...
表单控件
表单域
- from action="1.php" method="get"
- 属性：action
- method="get|post"
- get:通过地址栏提供（传输）信息，安全性差
- post:通过1.php来处理信息，安全性高
文本输入框
- input type="text" name="username"
- maxlengt="6" 限制输入字符长度
- readonly="readonly" 将输入框设置只读状态
- disabled="disabled" 输入框未激活状态
- name="username" 输入框的名字
- value="前端" 将输入框的内容传给处理文件
密码输入框
- input type="passward" name="pwd"
- 文本输入框中的所有属性对密码输入框都有效
单选框
- <input type="radio" name="gender" checked="checked">男
- 只有将name的值设置相同的时候，才能实现单选的效果
- checked="checked" 设置默认选中项
下拉列表
- select
  - option下拉列表的选项/option
  - option下拉列表的选项/option
- /select
- multiple="multiple" 下拉列表设为
- selected="selected"
多选框
- input type="checkbox" checked="checked"
- checked="checked" 设置默认选中项
多行文本框
- textarea cols="30" rows="10"
- cols="30" 控制字符输入长度
- rows="10" 控制输入行数
文件上传控件
- input type="file"
文件提交按钮
- input type="submit" ---可以实现提交功能
普通按钮
- input type="button" value="普通按钮" --- 不能实现提交功能，配合js使用
图片按钮
- input type="image" src="按钮.jpg" ---图片按钮可实现提交功能
重置按钮
- input type="reset" ---将信息重置到默认状态
表单信息分组
- fieldset legend分组信息/legend /fieldset
- fieldset /fieldset ---对表单信息进行分组
- legend /legend ---表单信息分组名称
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. 标签语义化

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

网页结构合理
有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护

好的语义化的网站就是去掉样式表文件之后，结构依然很清晰。
注意事项：

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

HTML基础学习笔记（2）

HTML学习笔记（2）

1 head标签中的结构

3 表格

1. 表格的标准结构

2. 表头和单元格合并

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

4. 表单：搜集信息

5. 标签语义化

更多相关文章

随机推荐