HTML5的常用标签

前端候莫·辛普森

于 2022-08-19 10:52:49 发布

阅读量527

点赞数 1

文章标签： html5 servlet html

本文链接：https://blog.csdn.net/qq_47622441/article/details/126420350

版权

常用标签:

<h1>内容标题，分6个等级，均独占一行</h1>

<br />换行

<div>无语义，划分区域，独占一整行,表示一个大区域</div>

<span>无语义，划分区域，可一行被多块分占，表示一个小盒子</span>

特殊字符

空格： 

小于号<：<

大于号>：>

图片标签
<img src = "图片路径" alt = "图片显示失败时显示的文字" title = "鼠标放在图片上时显示的文字" width = 500 hight = 500 border = 15/> //border为图片边框宽度

超链接
<a herf = "http://网址" target = "网址打开方式">超链接描述，文本或者图像</a>

//外部链接中herf必须以http://开头

//herf可以为内部链接，即网站内部页面之间的相互跳转，如herf = “内部新页面.html”

//空链接：herf = "#",表示不跳转，跳转的链接页面还未做好

//下载链接：herf = "文件路径"，通常存放一个文件或者压缩包，如.exe和.zip，点击后会开始下载

//网页元素链接：超链接描述可以是一张图片，文本，音频，表格，视频

//锚点链接：点击标签，可以快速定位到页面中某个位置

锚点链接格式为：herf = "#标题名字"，如<a herf = "#two">第二集</a>

目标位置处设置一个id = 标题名字，如<h3 id = "two">第二集</h3>

//target = "_self"表示在当前标签打开网址， target = "_blank"为在新标签页打开网址

表格标签
<table>
<tr>
<td></td>
</tr>
</table>
1
2
3
4
5
<tabel></table>定义表格，为最外层

<tr></tr>定义表格中的行，必须嵌套在<table></table>标签中

<td></td>定义表格中的单元格，必须嵌套在<tr></tr>标签中

<th></th>表头单元格，表头单元格中的文字会加粗居中，可代替<td></td>

table中添加表格属性，属性均添加在<table>中，如<table align = center border = 1></table>

align表示表格相对周围元素的对齐方式，有left，center，right

border表示是否有边框，1表示有，默认没有，即为""

cellpadding表示单元格边缘与其内容之间的像素空白值，默认为1

cellspacing表示单元格之间的空白，默认为2

width表示表格宽度

height表示表格高度

表格结构标签

当表格很长时，可以划分表格区域。

<thead></thead>表格头部标签，用来包括表格第一行的

<tbody></tbody>表格主体标签，用来包括表格表头以外部分

合并单元格

将多个单元格合并为一个，分为跨行合并与跨列合并

跨列合并：<td colspan = "合并的单元格数量"></td>，该单元格为合并的最左边那个

跨列合并：<td rowspan = "合并的单元格数量"></td>，该单元格为合并的最上面那个

合并之后的后面的单元格要删除

列表标签
无序列表

<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
1
2
3
4
<ul>标签表示无序列表，<li>标签表示列表项。

每个列表项无顺序，并列。<ul>之间只能放置<li>，<li>之间可以嵌套所有元素。

有序列表

<ol>
<li>列表项1</li>
<li>列表项2</li>
</Ol>
1
2
3
4
<ol>标签表签有序列表，<li>标签表示列表项。

每个列表项按照顺序，并列。<ol>之间只能放置<li>，<li>之间可以嵌套所有元素。

自定义列表

<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>
1
2
3
4
5
<dl>为定义描述列表标签，<dt>定义专题名字，<dd>定义专题解释或子模块。

<dl>之间只能放置<dt>和<dd>，<dt>和<dd>数量没有限制，通常是一个<dt>对应多个<dd>

<dt>和<dd>之中可以放置任何元素。

表单标签

表单域

<form action = "url地址" method = "提交方式" name = "表单域名称">
各种表单控件
</form>
1
2
3
表单域是包含表单元素的区域，用<form>标签定义。

action是接收表单数据的服务器url地址

method为表单数据的提交方式，属性有GET（默认）与POST。

采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制

采用post方法提交的数据保密性好，并且无数据量的限制

name为指定表单的名称，区分同一页面的多块区域。

表单控件

<input>标签

<input type = "控件类型" />输入控件标签，根据type属性的不同得到不同的控件效果。

type属性值有：

button : 定义可点击按钮，一般采用Javascript启动脚本
checkbox : 定义复选框，为多选框，多个采用name属性绑定在一起
text : 一个可输入的文本框
passward ：一个供密码输入的文本框
submit : 一个提交按钮，点击就提交表单信息到服务器
reset ：重置按钮，清除表单数据
radio : 单选按钮，用作多个选项选一个，多个radio用name属性自定义名称绑定一起。
其它属性有：

maxlength：设置控件中最多能输入字符的个数
readonly：设置控件为只读模式(不能输入)
disabled：设置控件为未激活(不能输入，显示为灰色)
name：设置控件的名称，自定义
id: 设置控件的唯一标识（如每个人的身份证号），自定义
value：设置控件的默认值
placeholder：设置控件的提示信息(也称为占位符)
checked: 该控件首次被加载时应被选中，主要用于单选按钮和复选框
<label>标签

用作绑定一个表单元素，点击label文本后，能够自动选中绑定的表单元素，增大点击范围，提高体验。

<label for = "绑定元素的id值">文本</label>
<input type = "radio" name = "sex" id = "sex" />
1
2
label的for属性应与绑定元素的id属性值相同。

<select>标签

如果有多个选项供用户选择，并想节约页面空间，可采用<select>标签定义下拉列表。

<select>
   <option>选项1</option>
   <option>选项2</option>
   ....
</select>
1
2
3
4
5
<select>中至少有一个<option>选项。

<option>中属性selected = "selected"时，表示为默认选中项。

<textarea>标签

当输入内容比较多时，采用<textarea>标签定义文本域。
————————————————
版权声明：本文为CSDN博主「良风抚旧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Arcofcosmos/article/details/122560992