一.注释
代码中进行补充说明，不参与页面解析，可提高代码可读性
格式： </--注释内容-->
快捷方法：选中注释内容---crtl+/ [想去掉注释的话还是选中后crtl+/]
---苹果系统：CMD+/
由于HBiilder里自带Emmet插件（可自动生成html,css标签），
eg:打标签时可以直接打h2+tab键，系统自动补齐标签代码
代码缩进更美观---crtl+K
二.列表标签
有序列表更强调列表项之间的顺序关系
1.无序列表
(1.)格式
<ul> <li> 内容</li> </ul>
[ul（unordered lists）--无序列表的外边界]
[ li (list item) --列表项]
（2.)emmet方法简便操作：
h3+ul中:“+”表示兄弟（并列）关系
>:表示包含关系
*3：表示有3个li标签
输完之后按tab键就出来了下图的代码格式
（3.）3种无序列表项类型
<ul type="disc">
（默认类型）
<ul type="circle">
<ul type="square">
注：html5中不再支持<ul>type属性，建议使用css代替
2.有序列表
（1.）只需把无序列表的<ul>换为有序列表的<ol>
【ol(order lists)--有序列表的外边界】
按tab后出现所要的代码形式，往里填内容后如下图：
（2）5种有序列表类型
如果想从特定的数字开始排序,使用start标签定义序列起始值 <ol type=" " start=" ">
<ol type=" " start=" ">
有序列表和无序列表同样可以相互嵌套使用，形成多级列表效果
3.自定义列表 -- <dl>标签
起到名词解释或问答效果，即每个列表项都是有标题，内容默认缩进的形式
【dl(definition lists)---自定义列表的外边界】
【dt(definition term)--列表项中的标题】
【dd(definition description)--列表项中的内容】
格式：
<dl> <dt>名词或问题</dt> <dd>解释或答案</dd> </dl>
三.表格标签
1.输入table--tab键，自动生成代码
<table boder="" cellspacing="' cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
【table---表的外边界】
【tr(table row)---表格的一行】
【td(table data cell)---一个单元格】
【th(table head)---表头】
一行三个单元格
两行，每行三个单元格
2.emmet语法快速生成多行多列
1）代码
(tr>td*7)*9
以上代码输完之后按tab键直接生成（9行7列）
2）表格相关设置：
（1）border(表格边框宽度）--- px像素值
（2）cellspacing(单元格之间的距离) ---px像素值
(3) cellpadding(文字到她外边单元格之间的距离） ---默认1px
eg:
（4）width(表格宽度) ---px/百分比
500px
80%
(5)height(表格高度）---px/百分比
(6)bgcolor(背景颜色）---white/red/green
(7)align(表格在网页中的对齐方式）---left/right/center
注：以上属性在html5中被废弃，可以用css替代
3)合并单元格
1.colspan（column）:内容贯穿几列单元格------横向合并
<td colspan=""> 内容 </td>
2.rowspan(row):内容贯穿几行单元格------纵向合并
把对应单元格注释掉，表格显示才会正常
3.举例（做一个课程表）
源代码：
<title>课程表</title> <table border="4" cellspacing="10px" cellpadding="10px" width="80%"> <!-- <tr><th>Header</th></tr> --> <tr> <td colspan="2"></td> <!-- <td></td> --> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> </tr> <tr> <td rowspan="5">上午</td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>3</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>4</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>5</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="7" align="center">中 午</td> </tr> <tr> <td rowspan="3">下午</td> <td>6</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>7</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td>8</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>
网页效果：
补充：
th ---表头，表格第一行默认加粗【想要加粗文字处理用b标签，还可将td改为th】
caption ---表格的标题
四.表单标签
1.form,action,method
<form action="网址" method="get">
<!-- form:定义表单，收集内部控件的信息发送给指定页面 -->
<!-- action:定义表单发送的目标地址>
<!-- method:定义表单发送方式 -->
<input type="submit" value="按钮上的文字"/>
<!-- input:定义文本框及提交按钮 -->
</form>
input
<form action="https://www.baidu.com/" method="get"> <input type="text" name="wd" /> <input type="submit" value="按钮"/> </form>
2.method：get，post
1）
#用于表示当前网页
get方式提交：以“明文”方式发送，网址长度不超过2048个字符，用于发送非安全数据
post方式提交：表单信息包含在http1请求正文中，不在网址上显示，无大小限制，可发送大量数据，用于发送敏感信息，个人信息或者文件上传
2）键值对:"名称/值”的形式，通常用等号或冒号来连接
键：值的名字或编号 值：要存放的数据
（1）get 方式提交多个数据时形成的网址格式为：
目标网址 ？键1=值1 & 键2=值2
eg：
网址栏： .html?username=女神&password=520#
3.属性type，name, value, placeholder
1).type
控制 input 控件的交互形式
2).name
name是控件向服务器提交信息时的“键名”，是自定义的，可使用字母、数字、下划线、中划线，不能包含其他特殊字符和空格
3).value
控制默认填充的数字，用来设置默认值供用户参考
点击提交按钮时，name和value会以键值对形式发送给服务器
4).placeholder
占位文字，光标聚焦输入文字时消失，即用鼠标定义文本框时可让文字自动消失
4.常见文本框设置
| type="text" | 文本输入框 |
| type="password" | 密码输入框 |
| type="checkbox" | 复选框 |
| type="radio" | 单选框 |
| type="file" | 文件上传 |
| type="button" | 普通按钮 |
| type="reset" | 重置按钮 |
|
type="submit" |
表格提交按钮 |
备注：checked="checked"选项默认选中的状态
1）：单选框
性别：<input type="radio" name="gender" value="1" checked="checked" />男
<!-- name值只有设置得相同才会出现互斥，从而起到单选的效果 -->
<!-- checked="checked"设置默认选项 -->
<input type="radio" name="gender" value="0" />女
2）：复选框
<p> 爱好：
<input type="checkbox" name="hobby" value="read" />看书
<input type="checkbox" name="hobby" value="piano" />弹琴
<input type="checkbox" name="hobby" value="music" />听音乐
<input type="checkbox" name="hobby" value="sports" />运动
</p>
3）：文件上传按钮
【配合post形式上传文件】
4）：图片形式的按钮
4）：图片形式的按钮<input type="image" src=" " title="按钮"/>
5）：html5中新定义的date格式------定义日期输入框
6）：hidden----定义隐藏的输入字段
6）：hidden----定义隐藏的输入字段<p> <input type="hidden" name="token" value="i336677d" /> </p>
7）： select------下拉列表框
所在地： <select name="province"> <option value="bj">北京市</option> <option value="zj">浙江省</option> </select>
所在地： <select name="province" multiple="multiple" size=“3”> <!--multiple="multiple" 可以选多个选项 <!--size：表示选中的个数设置--> <option value="bj" selected="selected" >北京市</option> <!--selected="selected" 用于select里被默认选中的状态--> <option value="zj">浙江省</option> </select>
8）textarea------文本区
<textarea name="profile" id="" cols="30" rows="10" placeholder="我的志愿经历">默认文本内容</textarea> <!--cols=列数，rows=行数-->
9)fieldset------表单分组
<fieldset id="" style="width:26%"><!--fieldset:为表单分组-->
<legend>调查小问卷</legend><!--legend:为fieldset标签定义标题-->
<form> </form>
</fieldset>