HTML常用标签--整理篇
HTML常用标签
文章目录
- HTML常用标签
-
- 文本标签
- HTML格式化标签
- HTML图像标签
- HTML表格标签
- 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>2sub>O <br/>
4<sup>2sup>=16
body>
html>
效果如下：
注意：
- HTML 中有⽤用的字符实体
- 实体名称对⼤大⼩小写敏敏感
HTML格式化标签
常⻅见格式化标签如下：
...
- ...
- ...
- ...
- ...
- ...
- ...
...常⽤用于包含的⽂文本，您可以使⽤用 CSS 对它定义样式，或者使⽤JavaScript 对它进行操作。
<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>aaadiv>
<div>bbbdiv>
<span>aaaaspan><span>bbbbspan>
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应用的根目录。
物理路径的相对表示，
“./” 代表当前目录,
"…/"代表上级目录。这种类似的表示，也是属于相对路径。
- 例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
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: 必须，指的是链接跳转地址
- target: 表示链接的打开⽅式：
- _blank 新窗⼝
- _parent ⽗窗⼝
- _self 本窗⼝（默认）
- _top 顶级窗⼝
- framename 窗⼝名
- title：⽂字提示属性（详情）
锚点链接：
定义⼀个锚点： 以前使⽤的是
使⽤锚点：跳到a1处
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<h1>HTML标签实例--超级链接标签h1>
<a href="http://www.baidu.com" title="百度链接" target="_blank">百度a>
本地链接：<a href="3.html">3.htmla>
锚点：<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表格标签
表格中的标签：
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
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>1001td>
<td>张三td>
<td>22td>
<td>python04td>
tr>
<tr>
<td>1002td>
<td>李四td>
<td>22td>
<td rowspan="2">python04td>
tr>
<tr>
<td>1003td>
<td colspan="2">王五td>
tr>
table>
body>
html>
结果
HTML表单标签
8.1 表单标签
form标签常⽤属性：
- action属性:提交的⽬标地址(URL)
- method属性:提交⽅式:get(默认)和post
- get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
- post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
- enctype:提交类型
- target: 在何处打开⽬标 URL。
- name:属性为表单起个名字.在HTML5中使⽤ id 代替。
8.2
表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。具体在下⾯有详解：
- 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
创建下拉列表。
- name属性:定义名称,⽤于存储下拉值的
- size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
- disabled 当该属性为 true 时，会禁⽤该菜单。
- multiple 多选
下拉选择项标签,⽤于嵌⼊到标签中使⽤的; - value属性:下拉项的值
- selected属性:默认下拉指定项.
8.4
多⾏的⽂本输⼊区域，有以下常用指令
- name :定义名称,⽤于存储⽂本区域中的值。
- cols ：规定⽂本区内可⻅的列数。
- rows ：规定⽂本区内可⻅的⾏数。
- disabled： 是否禁⽤
- readonly： 只读
默认值是在两个标签之间
8.5
标签定义按钮。
您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
8.6
fifieldset 元素可将表单内的相关元素分组。
disabled属性：定义 fieldset是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
8.7 标签为 、
<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
html5标签-- 标签定义选项组。此元素允许您组合选项。
城市：
<select name="city">
<optgroup label="河北省">
<option>⽯家庄option>
<option>保定option>
<option>廊坊option>
optgroup>
<optgroup label="河南省">
<option>郑州option>
<option>安阳option>
<option>周⼝option>
optgroup>
select>
8.9
html5标签-- 标签定义可选数据的列表。与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>