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）；