1、Html标签结构
！+tab 可以写成html5的结构
2、字符编码
Ascll
Ansi
Unicode
Gbk
Gb2321
Big5
Utf-8 通用编码
3.Meta
关键字
<meta name="keywords" content="苹果,香蕉,西瓜">
keywords:关键字
网页描述
<meta name="description" content="文字内容,文字内容">
description：描述
网页重定向
<meta http-equiv="refresh" content="5;http://www.baidu.com">
refresh:刷新
告诉搜索引擎站点的作者
<meta name="Author" content="你的名字">
Author:作者的名字
文件检测
<meta name="Robots" content="all|none|index|noindex|follow|nofollow">
设定为all： 文件将被检测，且页面上的链接可以被查询；
设定为none: 文件将不被检测，且页面上的链接不可以被查询；
设定为index： 文件将被检测；
设定为follow： 页面上的链接可以被查询；
设定为noindex: 文件将不被检测，但页面上的链接可以被查询：
设定为nofollow: 文件将不被检测，页面上的链接可以被查询：
4link标签
调用外部样式
<link rel="styleshsheet" href="1.css">
调用icon图标
<link rel="icon" href="1.ico">
5、表格
用来存放数据，表格对网页重构（css+div）一个有益补充
<table>
<tr>
<td></td>
</tr>
</table>
表格
<table></table>
行
<tr></tr>
列
<td></td>
5.1属性介绍：
边框
border="1"
宽度
width="500"
高度
height="300"
单元格间距
cellspacing="2" 默认值为2
内容到边框的距离
cellpadding="2"
align left | center | right
如果align放到tr或td里，内容的对齐方式，如果放到table里，表格的对齐方式。
5.2背景颜色
bgcolor="red"
表格标题
<th></th> 用法和td一样
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>性别</th>
</tr>
5.3表头
<caption>表头文字</caption>
6、表格的标准结构
<table>
<thead></thead> 头部
<tbody></tbody> 主体
<tfoot></tfoot> 底部
</table>
7、单元格合并
colspan="2" 同一行单元格合并
rowspan="3" 同一列单元格合并
7.1像素表格
主要是利用一个像素的单元格间距来实现，将表格背景和行背景设置为不一样的背景颜色，显示的是颜色为表格背景的一个像素的边框。
8表单
<form action="1.php" method="post">
action:处理信息（把文件交给那个文件处理）
method:get | post 传递信息的方法
get: 通过浏览器地址栏传递信息，安全性低
post: 通过action文件来处理文件，安全性高
表单的作用就是用来收集信息的
9、单行文本输入框
<input type="text" name="username" value="123456" maxlength="6" readonly="readonly" disabled="disabled">
name="文本框的名字"
value="文本呢框的值"
maxlength="最多字符的长度"
readonly="readonly"输入框为只读状态
disabled="disabled"输入框未激活状态
10、密码输入框
<input type="password" name="pwd" maxlength="10">
注意单行文本输入框的所有属性对于密码输入框都适用。
11、单选框
<input type="radio" name="xb" checked="checked">男
当将单选框name值设置相同的时候，才能实现单选效果
Checked="checked"
12、下拉列表
<select>
<option>下拉列表选项</option>
<option selected="selected">下拉列表选项</option>
</select>
Selected="selected"设置下拉列表默认选中项
multiple="multiple"设置下拉列表多选项
<optgroup label="北京市">
<option>朝阳区</option>
<option>昌平区</option>
<option>海淀区</option>
</optgroup>
<optgroup></optgroup>对下拉列表进行分组
label="" 分组名称
18、多选框
<input type="checkbox">
checked="checkbox"设置默认选择项
19、多行文本框
<textarea></textarea>
cols="50"输入字符的长度
rows="10"输入字符的行数
20、上传文件控件
<input type="file">
21.提交按钮
< input type="submit">
实现表单提交效果
22.普通按钮
<input type="button" value="按钮">
注意普通按钮不能实现表单信息提交，常配合JS使用
23、重置按钮
<input type="reset" value="重置信息">
将表单信息初始化
24、图片按钮
<input type="image" src="图片地址">
注意：图片阿牛也可以实现表单信息提交
25、表单信息分组
<fieldest></fieldeset> 对表单信息进行分组
<legend></legend> 分组名称
26、Html5表单控件
26.1判断网址控件
<input type="url"/>
26.2判断邮件控件
< input type="email"/>
26.3日期控件
<input type="date"/>
26.4时间控件
<input type="time"/>
26.5数字控件
<input type="number"/>
26.6滑块控件
<input type="range" max="100" step="5">
27、标签语义化
好的标签语义化网站：
去掉CSS，结构依然很清晰
优势：
注意：
语义化案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h2>忆江南</h2>
唐.白居易
<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>
<h4>作者介绍</h4>
<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<h4>注释</h4>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<h4>品评</h4>
<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
</p>
</body>
</html>
28、表单案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<fieldset>
<legend>信息注册</legend>
用户名: <input type="text" /><br />
<br />
密 码: <input type="password" />
<br />
<br />
籍贯： <select name="" id="">
<option value="">北京</option>
<option value="">河北</option>
<option value="">山东</option>
<option value="">河南</option>
</select>
<select name="" id="">
<option value="">张家口</option>
<option value="">洛阳</option>
<option value="">西城区</option>
<option value="">济南</option>
</select>
<select name="" id="">
<option value="">中关村</option>
<option value="">上地</option>
<option value="">西二旗</option>
<option value="">西三期</option>
</select>
<br />
<br />
性别: <input type="radio" name="xb" checked="checked" />男 <input type="radio" name="xb"/>女
<br />
<br />
爱好: <input type="checkbox" /> 打篮球
<input type="checkbox" /> 打游戏
<input type="checkbox" /> 逛街
<input type="checkbox" /> 抽烟，喝酒，烫头
<br />
<br />
请上传帅气的头像: <input type="file" />
<br />
<br />
介绍自己: <textarea name="" id="" cols="30" rows="10"></textarea>
<br />
<br />
<input type="submit" value="提交表单"/>
<input type="reset" value="重新填写"/><br />
<br />
<input type="image" src="im.jpg" />
</fieldset>
</body>
</html>
29、细线表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <h1>人员信息表</h1> -->
<!-- <table width="300" height="200" border="1" cellpadding="0" cellspacing="0" align="center">
<caption>人员信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>挖掘机</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>厨师</td>
</tr>
</table> -->
<!--
<table width="300" height="200" border="1" cellspacing="0">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>专业</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>前端与移动</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>php</td>
</tr>
<tr>
<td>狗蛋</td>
<td>23</td>
<td>阿斯顿发斯蒂芬</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table> -->
<!--
<table width="300" height="200" border="0" cellspacing="1" bgcolor="grean" >
<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> -->
<table width="800" height="400" border="0" bgcolor="green" cellspacing="1">
<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>
网友评论