meta用法（写在head里）
①<meta charset=”utf-8”> 防止页面乱码
charset 字符集
utf-8 编码格式
②<meta name=”keywords”content=”男装，女装”> 设置网页关键字
注意：该标签中的关键字不是给用户看的，给搜索引擎提供的
③<meta name=”description” content=”描述信息”> 设置网页描述信息
注意：该标签中的描述信息不是给用户看的，是给搜索引擎看的
④网页重定向
<meta http-equiv=”refresh”content=”3 ;http://www.baidu.com”>
（3代表3秒 ; 跳转的网页或者路径）
2.2 link标签
①设置网页图标
<link rel="icon" href="图标的路径">
注意：最好将图标放在网页根目录下
②设置引用外部样式表
<link rel="stylesheet" href="1.css">
2.3 列表
①无序列表
<ul type="circle/square/…"> //任选一种形式即可 <li></li> ……. <li></li> </ul>
注意：1，无序列表中的列表项（li）可以包括任何标签
2，在网页中用来展示信息的无序列表
②有序列表
<ol type="A/一/①/…"> //任选一种形式即可 <li></li> ……. <li></li> </ol>
③自定义列表
<dl> <dt>标题</dt> <dd>列表项</dd> <dd></dd> </dl>
注意：1，dt标签中只能包含行内元素
2，dd标签中可以包含所有的标签
3，一般网页结尾处的列表使用自定义列表
2.4 表格
1，组成
表格 table
行 tr
列 td
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
2, 作用
显示数据
网页布局
3, 属性（写在table中）
border 设置边框
width 设置宽度
height 设置高度
cellspacing 设置td与td与table之间的距离，默认值为2
cellpadding 设置内容与td左侧之间的距离
align : left / right / center 设置对齐方式
注：如果给table标签设置align属性，只能让整个标签居中，内容不会居中
如果给tr或者td设置align属性，可以让其内容居中
bgcolor ： 设置背景颜色
2.5 单元格合并
设置表头 th （将td换成th）用法与td一样
设置表格标题
<caption></caption>
表格结构
<thead></thead> <tbody></tbody> <tfoot></tfoot>
合并单元格 : 横向合并 colspan=”2” 注释掉多余的
纵向合并 rowspan=”2” 跨几行就写几，删掉多余的
2.6 表格高级
表格标签除了基本的table，tr，td（或th）标签之外，还可以有如下标签：
caption：用于表示一个表格的“标题文字”（看起来在表格线的外面），写在table标签中。
thead：用于表示一个表格“头部区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。写在table标签中，tr外，即这样的层次：table->thead->tr
tbody：用于表示一个表格“主体区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。写在table标签中，tr外，即这样的层次：table->tbody->tr
tfoot：用于表示一个表格“底部区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。写在table标签中，tr外，即这样的层次：table->tfoot->tr
注意：
1，thead，tbody，tfoot用于对表格的行（tr）进行分组，此时thead组在表格头部，tfoot组在底部。
2，这3个标签出现的推荐顺序是：thead, tfoot, tbody，在他们内部再写tr。
3，thead，tfoot应该只出现一次，tbody可以出现多次。
4，所有没有明确归属到上述3个标签的行（tr），都默认归属到tbody。
2.7 表单
作用 : 收集用户信息。
组成 : ①提示信息 ②表单控件 ③表单域
表单域 : <form> </form>
属性:
action: 设置后台处理的后台程序
method: 提交数据给后台程序的提交方式 ,默认是get
get 提交数据 : 会将数据显示在地址栏中
post 提交数据 : 会通过后台提交数据
2.8 表单控件
文本输入框
<input type="text" maxlength="6" disabled value="请输入姓名" name="username" id=""> 属性: maxlength 输入的最大长度 readonly 设置控件为只读 disabled 禁止用户输入 value 设置默认值 name 设置控件名称(后台可通过name的值获取该控件的值) id 控件的编号 autofocus 自动获取焦点 placeholder 占位符 required 必须填写项(不填写没有办法提交) contenteditable 设定一个元素内部的文本内容是“可编辑的”。 autocomplete 自动完成(当你刷新页面后再双击文本框会提示你之前输入过的值) 有两个属性:on和off 默认的是on
密码输入框
<input type="password"> 属性: 与文本输入框的属性一样
单选框
<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女 注意: 该控件实现单选效果需要给控件设置相同的name名称. 属性: checked 设置控件默认选中项
多选框
<input type="checkbox">看书 <input type="checkbox" checked>学习 <input type="checkbox" checked>听音乐 <input type="checkbox">旅游 属性: checked 设置控件默认选中项
下拉列表
<select name="" id="" multiple="multiple"> <option value="sx" selected>陕西</option> <option value="hn">河南</option> <option value="hb">河北</option> <option value="sd">山东</option> </select> 属性: selected 设置默认选中项 multiple 设置多选
//在下拉列表中显示它的所属省 <select> <optgroup label="陕西省"> <option>西安</option> <option>咸阳</option> <option>宝鸡</option> <option>铜川</option> </optgroup> </select>
上传文件控件
<input type="file" name="" value="1">
文本域
<textarea></textarea>
邮箱控件
<input type="email"> //会严格控制你输入的邮箱格式
数字控件
<input type="number" step="5"> //只能输入数字
网址
<input type="url" placeholder="请输入网址">
事件日期控件
<input type="time"> //显示时间格式 <input type="date"> //显示日期格式 <input type="datetime"> //显示时间日期格式 (只在手机端响应) <input type="month"> //显示年/月 <input type="week"> //显示年/周
取色器
<input type="color"> //可以选择颜色
滑块(范围)
<input type="range" value="20">
隐藏控件
<input type="hidden" >
按钮
提交按钮: <input type="submit"> //提交表单数据 普通按钮: <input type="button"> //不能提交表单数据 重置按钮: <input type="reset"> //将数据恢复到默认值 图片提交按钮: <input type="image" src="1.jpg"> //提交表单数据
表单控件补充
可以在整个form表单外加一层fieldset
<fieldset> <legend>标题</legeng> <form>....</form> </fieldset>
2.9 标签语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
注意：
尽量少的使用无语义的标签div和span
在语义不明显时，即可以使用div或p时，尽量使用p。要使用有语义的标签
不要使用纯样式标签，如：b、font、u等，改用css样式。
3.0 内嵌框架标签iframe（了解）
内嵌框架标签iframe，主要用于在一个网页中（的某个区域），“嵌入”另一个网页
其实现方式就是使用iframe标签。
基本上，可以把iframe标签看做类似textarea标签，只要把它放在想放的位置就可以。
使用形式：
<iframe src=”要嵌入进来的网页地址” name=”框架名称” width=”宽度” height=”高度”
frameborder=”1或0” scrolling=”yes或no”></iframe>1， iframe是双标签，但标签中通常不放任何内容。
2， frameborder：用于设定框架窗口是否显示“边框线”，1表示显示，0表示不显示。
3， scrolling：用于设定框架窗口是否显示滚动条（类似浏览器的滚动条）。
3.1 文档类型（了解）
所谓文档类型，基本就是指html的标准规范。
因为html技术在发展过程中，经历并使用过不同的（但其实差异较小的）几个成熟稳定版本。
这就形成了几个不同的标准。
一个html文档，其中的html代码遵循哪个版本的标准，就被称为是某个文档类型。
html文档的第一行代码（由 ”<!doctype” 开头），就是用来指定(声明)当前网页代码所使用的文档类型的。
虽然有如下5种文档类型，但其实近年以来，基本上大家都遵循html5标准了（即该标准基本普及了）。
5种文档型如下：
html5型：
<!doctype html>
html4宽松性：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html4严格型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
xhtml4过渡性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
xhtml4严格型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
其中，在后4中文档类型的设定下，设定网页编码的代码需要这样来写（因为这4种都属于html4）：
<meta http-equiv=”content-type” content=”text/html; charset=字符编码名” >
扫一扫
4212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
