免责声明:本文仅做分享~
详情请参考以下:
--本文是光秃秃的空壳.
标题标签

段落标签

换行和水平线

文本格式化标签
(一般用左边的,强调作用)


图像标签

超链接标签

音频
视频
列表

无序列表
ul
有序列表
ol
定义列表
dl dt dd
表格
table

在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。
表格结构标签
用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。
---让浏览器看的更清晰,人看不会有差距。
(实际都省略了)

html
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<td>80</td>
<td>90</td>
<td>85</td>
<td>265</td>
</tr>
<tr>
<td>李四</td>
<td>80</td>
<td>75</td>
<td>85</td>
<td>230</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>85</td>
<td>95</td>
<td>330</td>
</tr>
<tfoot>
<tr>
<td>总结</td>
<td>第一</td>
<td>第二</td>
<td>第三</td>
<td>全班第一</td>
</tr>
</tfoot>
</tbody>
</table>
合并单元格
将多个单元格合并成一个单元格,以合并同类信息。
(保留最左侧和最上侧的那个单元格再进行合并)
跨行合并,保留最上单元格,添加属性 rowspan (属性值的取值为数字)
跨列合并,保留最左单元格,添加属性 colspan
<td rowspan="2">100</td>
<td colspan="2">100</td>

表单
input标签
input 标签 type 属性值不同,则功能不同。


input 标签占位文本
placeholder
占位文本:提示信息,文本框和密码框都可以使用。

下拉菜单
select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。
默认显示第一项,selected属性实现默认选中功能。

文本域
作用:多行输入文本的表单控件。

label标签
网页中,某个标签的说明文本。
用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
写法一:
label 标签只包裹内容,不包裹表单控件
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同。
写法二:label标签里直接嵌套其他标签。

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
button
按钮需配合 form 标签(表单区域)才能实现对应的功能!!!

无语义的布局标签
div
span

有语义的布局标签

字符实体
空格
换行<br>
小于号<
大于号>
斜线⁄
