HTML常用标签--整理篇

2023-11-18

HTML常用标签

文章目录

HTML常用标签

文本标签

常⽤文本标签如下：

<hn>...</hn>标题标签，其中n为1–6的值。
<i>...</i>斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引⽤用）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>⽂文本标题示例例</title>
</head>
<body>
    <h3>HTML标签实例例--⽂文本标签</h3>
    
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>
    
    <i>i: 斜体标签</i> <br/>
    <em>em: 强调斜体标签</em> <br/>
    <b>b: 加粗标签</b><br/><br/>
    
    <strong>strong: 强调加粗标签</strong><br/>
    <del>del: 删除线</del><br/>
    <u>u: 下划线</u> <br/><br/>
    
    水分子：H<sub>2</sub>O <br/>
    4<sup>2</sup>=16
</body>
</html>

效果如下：
在这里插入图片描述

注意：

HTML 中有⽤用的字符实体
实体名称对⼤大⼩小写敏敏感

HTML格式化标签

常⻅见格式化标签如下：

<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 对它进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标签实例例--格式化标签</title>
</head>
<body>
    <h3>HTML介绍</h3>
    <p>超⽂文本标记语⾔言(Hyper Text Markup Language)，标准通⽤用标记语⾔言下的⼀一个应⽤用。HTML 不不
    是⼀一种编程语⾔言，⽽而是⼀一种标记语言 (markup language)，是⽹网⻚页制作所必备的。</p>
    <p>“超⽂文本”就是指⻚页⾯面内可以包含图片、链接，甚⾄至⾳音乐、程序等⾮非⽂文字元素。<br/>
超⽂文本标记语⾔言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提
供关于⽹网⻚页的信息，“主体”部分提供⽹网⻚页的具体内容。</p>

<hr/>

<!-- 列列表标签 -->
你的爱好：
<ul>
    <li>看书</li>
    <li>上⽹网</li>
    <li>爬⼭山</li>
    <li>唱歌</li>
</ul>

<ol type="a">
    <li>看书</li>
    <li>上⽹网</li>
    <li>爬⼭山</li>
    <li>唱歌</li>
</ol>

<dl>
    <dt>问：HTML?</dt>
    <dd>答：超⽂文本标记语言</dd>
    <dt>问：HTML?</dt>
    <dd>答：超⽂文本标记语言</dd>
    <dt>问：HTML?</dt>
    <dd>答：超⽂文本标记语言</dd>
</dl>

<div>aaa</div>
<div>bbb</div>
<span>aaaa</span><span>bbbb</span>

</body>
</html>

效果
在这里插入图片描述

HTML图像标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签：
其中img标签中常用属性如下：

src：图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片⾼高度
border：边框线粗细

绝对路径和相对路径：

绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
- 例如：
  C:\xyz\test.txt 代表了test.txt文件的绝对路径。
  http://www.sun.com/index.htm也代表了一个URL绝对路径。
相对路路径：相对与某个基准⽬目录的路路径。包含Web的相对路径（HTML中的相对目录），
- 例如：
  在Web开发中，"/"代表Web应用的根目录。
  物理路径的相对表示，
  “./” 代表当前目录,
  "…/"代表上级目录。这种类似的表示，也是属于相对路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>HTML标签实例例--图⽚标签</h3>
    
    <img src="./images/a.jpg" title="图⽚" width="300" />
    <img src="./images/add.jpg" alt="⼆⽉兰花图⽚" width="300" />
    <img src="./images/a.jpg" width="280" border="2" />
</body>
</html>

6 HTML超链接标签
超级链接标签a：
格式：<a href="链接⽬标url地址">显示⽂字</a>
a标签的属性：

href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
- _blank 新窗⼝
- _parent ⽗窗⼝
- _self 本窗⼝（默认）
- _top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）

锚点链接：
定义⼀个锚点：<a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使⽤锚点：<a href="#a1">跳到a1处</a>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>HTML标签实例--超级链接标签</h1>
    <a href="http://www.baidu.com" title="百度链接" target="_blank">百度</a>
    本地链接：<a href="3.html">3.html</a>
    锚点：<a href="#myimg">我的⼥友</a>
    <br/>
    <hr/>
    
    <img src="./images/11.jpg" title="图⽚" width="700" />
    <img src="./images/22.jpg" alt="美⼥图⽚" width="700" />
    
    <a id="myimg"></a>
    <img src="./images/33.jpg" width="700" />
    <img src="./images/44.jpg" width="700" />
</body>
</html>

HTML表格标签

表格中的标签：
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h3>HTML标签实例--表格标签</h3>
        <table border="1" width="700" cellspacing="0" cellpadding="4">
        <caption><h3>学⽣信息表</h3></caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>张三</td>
            <td>22</td>
            <td>python04</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>李四</td>
            <td>22</td>
            <td rowspan="2">python04</td>
        </tr>
        <tr>
            <td>1003</td>
            <td colspan="2">王五</td>
            <!--<td>22</td>-->
            <!--<td>python04</td>-->
        </tr>
        </table>
    </body>
</html>

结果
在这里插入图片描述

HTML表单标签

8.1<form>...</form> 表单标签
form标签常⽤属性：

action属性:提交的⽬标地址(URL)
method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。

8.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图⽚按钮，默认具有提交表单功能。

8.3 <select>...</select>
创建下拉列表。

name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
<option>... </option>下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
value属性:下拉项的值
selected属性:默认下拉指定项.

8.4<textarea>...</textarea>
多⾏的⽂本输⼊区域，有以下常用指令

name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled：是否禁⽤
readonly：只读
默认值是在两个标签之间

8.5 <button>...</button>
标签定义按钮。
您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

8.6 <fieldset>
fifieldset 元素可将表单内的相关元素分组。

disabled属性：定义 fieldset是否可⻅。
form属性：定义该 fieldset 所属的⼀个或多个表单。

8.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.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>

8.9 <datalist>
html5标签-- <datalist> 标签定义可选数据的列表。与input元素配合使⽤，就可以制作出输⼊值的下拉列表。

搜索：

<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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

面试题

html

html5