02_html
1、几个标签
1.1 meta标签
meta标签的属性有name和http-equiv，其中name属性用于描述网页，对应于content(网页内容)。
<meta name="kaywords" contect="">向搜索引擎说明你的网页的关键词
<meta name="description" contect="">告诉搜索引擎你的站点的主要内容
http-equip属性用于重定向，如：
<meta http-equiv="refresh content="5;http://www.baidu.com"
1.2 link标签
link标签可以用于引用外部的css，还可以引用title图片(icon)如：
<link rel="icon" href="1.icon">
2、HTML表格
2.1 创建表格的基本语法
2.2 表格中的属性
利用表格制作细线表格，HTML如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线表格</title>
</head>
<body>
<table width="500px" height="300px" bgcolor="grenn" cellspacing="1px">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2.3 单元格合并
表标题标签 <caption> </caption>
表头标签 <th> </th>和上面td、tr标签类似
单元格合并 colspan/rowspan
实例：实现下面的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单元格合并</title>
</head>
<body>
<table width="300px" height="200px" border="1px" valign="center" cellspacing="0">
<caption align="center">学科</caption>
<tr>
<td>目录</td>
<td colspan="2" align="center">课程</td>
</tr>
<tr>
<td rowspan="2">Web</td>
<td>html基础教程</td>
<td>css基础教程</td>
</tr>
<tr>
<td>javascript基础教程</td>
<td>PHP基础教程</td>
</tr>
</table>
</body>
</html>
3、表单
表单的作用主要是用于数据信息的采集。
表单的组成：
- 提示信息
- 表单控件
- 表单域
3.1 表单语法
<form name="form_name" action="url" method="get|post">…</form>
- name:定义表单的名称
- method：定义表单结果从浏览器传送到服务器的方式，默认为：get
- action:用来指定表单处理程序的位置(服务器端脚本处理程序)
组合表单：
<fieldset>标签没有必需的或唯一的属性
<legend>标签为fieldset元素定义标题
3.2 input控件
3.3 textarea控件
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
3.4 selection控件
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息注册</title>
</head>
<body>
<form action="1.php" method="get">
<fieldset>
<legend>信息注册</legend>
用户名：<input type="text" name="username"><br>
密 码：<input type="password" name="password"><br>
籍贯：<select name="address" id="">
<optgroup label="上海">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
<optgroup label="北京">
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</optgroup>
<optgroup label="广州">
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
</optgroup>
</select><br>
性别：<input type="radio" checked="checked" name="sex"> 男<input type="radio" name="sex"> 女 <br>
爱好：<input type="checkbox" name="hobby">打篮球
<input type="checkbox" name="hobby">打游戏
<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">逛街
<br>
请上传你帅气的头像：<input type="file">
<br>
介绍自己：<textarea name="introduction" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<br>
<input type="image" src="im.jpg">
</fieldset>
</form>
</body>
</html>
4、标签语义化
4.1 标签语义化的概念
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
4.2 标签语义化的意义
- 网页结构合理
- 有利于SEO：和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
- 便于团队开发和维护