02html基础

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 创建表格的基本语法

20180125151687885129373.png

2.2 表格中的属性

20180125151687895941585.png

利用表格制作细线表格，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
实例：实现下面的表格

2018012515168802005179.png

<!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控件

20180125151688082941812.png

3.3 textarea控件

<textarea cols="每行中的字符数" rows="显示的行数">
       文本内容
</textarea>

3.4 selection控件

20180125151688097646279.png

实例：

<!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：和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
  • 便于团队开发和维护
posted @ 2018-01-25 20:25  烟云123  阅读(159)  评论(0)  编辑  收藏  举报