1.3 HTML常用标签介绍
优质
小牛编辑
130浏览
2023-12-01
1.3.1 文本标签:
<hn>...</hn>
其中n为1--6的值。 标题标签(加粗、独立行)<i>...</i>
斜体<em>...</em>
强调斜体<b>...</b>
加粗<strong>...</strong>
强调加粗<cite></cite>
作品的标题(引用)<sub>...</sub>
下标<sup>...</sup>
上标<del>...</del>
删除线
1.3.2 格式化标签:
<br/>
换行<p>...</p>
换段<hr />
水平分割线- 列表:
<ul>...</ul>
无序列表<ol>...</ol>
有序列表 其中type类型值:A a I i 1 start属性表示起始值<li>...</li>
列表项<dl>...</dl>
自定义列表<dt>...</dt>
自定义列表头<dd>...</dd>
自定义列表内容
<div>...</div>
常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化<span>...</span>
常用于包含的文本,您可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。
1.3.3 图片标签img*
<img /> 在网页中插入一张图片
属性:
src: 图片名及url地址
alt: 图片加载失败时的提示信息
title:文字提示属性
width:图片宽度
height:图片高度
border:边框线粗细
1.3.4 HTML中的超级链接*
<a href=" ">...</a> 超级链接标签
属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开方式:
_blank 新窗口
_parent 父窗口
_self 本窗口(默认)
_top 顶级窗口
framename 窗口名
title:文字提示属性(详情)
锚点链接:
定义一个锚点:<a id="a1"></a> 以前使用的是 <a name="a1"></a>
使用锚点: <a href="#a1">跳到a1处</a>
1.3.5 表格标签
<table>...</table> 表格标签: 属性:border width cellspacing cellpadding
<caption>...</caption> 表格标题
<tr>...</tr> 行标签
<th>...</th> 列头标签
<td>...</td> 列标签: 跨行属性rowspan 跨列属性:colspan
<thead>...</thead> 表头
<tbody>...</tbody> 表体
<tfoot>...</tfoot> 表尾
1.3.6 form表单标签 (其中1~5重点,其他了解)
(1) <form>...</form>
表单标签
form标签常用属性:
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.在HTML5中使用 id 代替。
(2) <input>
表单项标签input定义输入字段,用户可在其中输入数据。在 HTML 5 中,type 属性有很多新的值。
具体在下面有详解:
如:<input type="text" name="username">
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
range 用于应该包含一定范围内数字值的输入域,显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search 用于搜索域,比如站点搜索或 Google 搜索
color 颜色选择
*name属性: 表单项名,用于存储内容值的
*value属性: 输入的值(默认指定值)
*placeholder: 预期值的简短的提示信息
size属性: 输入框的宽度值
maxlength属性: 输入框的输入内容的最大长度
readonly属性: 对输入框只读属性
*disabled属性: 禁用属性
*checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常用)
src和alt是为图片按钮设置的
注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空
image图片按钮,默认具有提交表单功能。
(3) <select>...</select>
标签创建下拉列表。
name属性:定义名称,用于存储下拉值的
size:定义菜单中可见项目的数目,html5不支持
disabled 当该属性为 true 时,会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
(4) <textarea>...</textarea>
多行的文本输入区域
name :定义名称,用于存储文本区域中的值。
cols :规定文本区内可见的列数。
rows :规定文本区内可见的行数。
disabled: 是否禁用
readonly: 只读
...
默认值是在两个标签之间
(5) <button>...</button>
标签定义按钮。
您可以在 button 元素中放置内容,比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
(6) <fieldset>
--fieldset 元素可将表单内的相关元素分组。
disabled属性:定义 fieldset 是否可见。
form属性: 定义该 fieldset 所属的一个或多个表单。
(7) <legend></legend>
-- 标签为 <fieldset>
、<figure>
以及 <details>
元素定义标题。
<form>
<fieldset>
<legend>个人信息:</legend>
姓名:<input type="text" /><br/>
年龄:<input type="text" /><br/>
</fieldset>
<br/><br/>
<fieldset>
<legend>健康信息:</legend>
身高:<input type="text" /><br/>
体重:<input type="text" /><br/>
</fieldset>
</form>
(8) <optgroup>
html5标签--<optgroup>
标签定义选项组。此元素允许您组合选项
城市:
<select name="city">
<optgroup label="河北省">
<option>石家庄</option>
<option>保定</option>
<option>廊坊</option>
</optgroup>
<optgroup label="河南省">
<option>郑州</option>
<option>安阳</option>
<option>周口</option>
</optgroup>
</select>
(9) <datalist>
html5标签--<datalist>
标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
<form action="demo_form.php" method="get">
搜索:
<input type="search" list="namelist" name="keywords"/>
<datalist id="namelist">
<option value="zhangsan">
<option value="zhangsanfeng">
<option value="zhangwuji">
<option value="lisi">
<option value="lixiaolong">
</datalist>
</form>
1.3.7 <iframe>
...</iframe>
行内框架
属性:src:规定在 iframe 中显示的文档的 URL
name:规定 iframe 的名称
height:规定 iframe 的高度。
width:定义 iframe 的宽度。
frameborder:规定是否显示框架周围的边框。
例如:<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
1.3.8 多媒体标签(了解)
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不支持播放
</audio>
<br/>
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不支持播放
</audio>
<br/><br/>
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放
</video>
<video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了,不支持视频标签
</video>
<br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />