下载文档原格式
html标签大全HTML标签大全。
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。
在HTML中，标签是用来定义网页结构和内容的。
本文将介绍一些常用的HTML 标签，以及它们的用法和示例。
1. 文本标签。
`<h1>`~`<h6>`，定义标题，数字表示标题的级别，从大到小依次递减。
`<p>`，定义段落。
`<strong>`，定义加粗文本。
`<em>`，定义斜体文本。
`<u>`，定义下划线文本。
`<br>`，定义换行。
2. 链接标签。
`<a>`，定义超链接，href属性指定链接的地址。
`<img>`，定义图像，src属性指定图片的地址。
3. 列表标签。
`<ul>`，定义无序列表。
`<ol>`，定义有序列表。
`<li>`，定义列表项。
4. 表格标签。
`<table>`，定义表格。
`<tr>`，定义表格行。
`<td>`，定义表格数据单元格。
5. 表单标签。
`<form>`，定义表单，action属性指定表单提交的地址。
`<input>`，定义输入框，type属性指定输入框的类型（文本框、密码框、复选框等）。
`<select>`，定义下拉框。
`<textarea>`，定义多行文本输入框。
`<button>`，定义按钮。
6. 多媒体标签。
`<audio>`，定义音频播放器。
`<video>`，定义视频播放器。
`<iframe>`，定义内联框架，用于嵌入其他网页。
7. 其他标签。
`<div>`，定义文档中的块级元素。
`<span>`，定义文档中的行内元素。
`<meta>`，定义网页的元数据，如字符集、关键词等。
HTML标记总结<html> //文件开始标记<head> //文件的头部开始标记<title> HTML总体结构</title>//头部</head> //头部结束标记<body> //文件的主体开始标记hello!</body> //主体结束标记</html>//文件结束标记编写时的注意事项（1）元素的标记都要用尖括号< >括起来，成对使用的标记的结束标记是在开始标记之前加一反斜杠，如<html>与</html>。
（2）代码不分大小写，如<boDY>与<BODy>都是正确的，但是所有符号如< > 、“”都必须是英文输入法。
（3）标记<!--……-->表示其中的内容是注释语句，在浏览器中不会显示出来。
4、页面的头部标记和主体标记（1）页面的头部标记<head>HTML文档的头部内容</head>一般来说位于头部的内容都不会在网页上显示，而是通过别的方式体现。
常用的头部标记有以下几个：<base>当前文档的URL全称（基底网址）<basefont> 设定基准的文字字体，字号和颜色<title> 设定显示在浏览器左上方的标题内容<isindex> 表示该文档是一个可用于检索的网关脚本，由服务器自动建立。
<meta> 是有关文档本身的元信息，如用于查询的关键词，用于获取该文档的有效期等。
<style>设定CSS层叠样式表的内容<link> 设定外部文件的链接<script>设定页面中程序脚本的内容（1）<title>标题标记<title>W eb页面的标题</title>在HTML 里<title>和</title>是位于html文档头部的，即<head>和</head>之间。
HTML标记的组成HTML语言规范标记符：1、单标记：< 标记名称／>2、双标记：<标记名称>内容<／标记名称>3、属性 < 标记属性1="属性值" 属性2="属性值" 属性3="属性值" … ><元素属性='属性值'...>内容</元素>如果没有内容，可以这样写：<元素属性='属性值'.../>--注：<>中的都是标记，标记是要成对出现如:<html>内容</html>；元素也叫标记HTML文档的结构主要包括：1、HTML部分2、HEAD部分3、BODY部分DOCTYPE声明部分：DOCTYPE声明部分是网页中重要的一部分，但不在HTML文档范围内。
Html的基本结构<html><head><元素属性1=”值” …./></head><body><元素属性1=”属性值”属性2=“属性值”…>内容</元素><元素属性=”属性值”/></body></html>说明1. 标记通常是成对出现 <head></head>2. 单标记 <br/>案例:Demo1.htm<html><head></head><body><b>横看成林</b><br/><br/><font color="red">远近高低各不同</font><br/><!--size 值可以取 1..7 --><font style="font-size:30px;">不知庐山真面目</font><br/></body></html>请问后缀 html 和 htm 有什么区别?如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html；htm 后缀是为了兼容以前的dos 系统 8.3的命名规范。
html标签及属性⼤全（⽹页制作必备）总类（所有html⽂件都有的）--------------------------------------------------------------------------------⽂件类型 <html></html> （放在档案的开头与结尾）⽂件主题 <title></title> （必须放在「⽂头」区块内）⽂头 <head></head> （描述性资料，像是「主题」）⽂体 <body></body> （⽂件本体）结构性定义（由浏览器控制的显⽰风格）--------------------------------------------------------------------------------标题 <h?></h?> （？表⽰从1到6，有六层选择）数值越⾼字越⼩标题对齐 <h? align=left|center|right></h?> 左对齐、居中对齐、右对齐区分 <div></div>区分对齐 <div align=left|right|center|justify></div> 左对齐、右对齐、居中对齐、两端对齐引⽂区块 <blockquote></blockquote> （通常会内缩）斜体 <em></em>加粗 <strong></strong>引⽂ <cite></cite> （通常会以斜体显⽰）码 <code></code> （显⽰原始码之⽤）样本 </samp>表⽰⼀段⽤户应该对其没有什么其他解释的⽂本。
一、html基础知识二、html结构<html><head><title>网络0801</title></head><body></body></html>基本标记.<p></p> 段落<br> 换行三、head内的标记1、title 标题标记功能：标题控制使用：设置标题格式：<title>标题内容</title>实例：添加一个标题2、base 基底网址标记功能：文档的基本网址，其他为与其相对的网址使用：插入栏/html/文件头/基础格式：<base href="" target="父(_P)" />实例：设置后，在文章中添加一个相对路径和绝对路径4、media 原信息标记功能：提高被搜索引擎搜索到的可能性使用：插入栏/html/文件头/meta【name-搜索引擎http-equiv-设置浏览器检查信息，控制网页精确显示】格式：<meta name="author" content="宋赟中" />（作者）<meta name="keywords" content="网络，计算机学校" />（关键字）<meta name="description" content="忙忙忙忙忙忙忙忙忙忙" />（说明）<meta name="build" content="建设时间"/><meta name="reply-to" content="联系人邮箱"/><meta name="copyright" content="版权说明"/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />（字符集）<meta name=<meta http-equiv="refresh" content="22" />（刷新）<meta http-equiv="windows-target" content="_top" />（强制独立窗口打开）<meta http-equiv="pragma" content="No-cach />（页面不允许缓存）实例：设置后，会提高搜索引擎的命中率四、body标记1、bgcolor 背景色2、background 背景图像3、text 文字颜色4、bgproperties 背景滚动方式fixed 代表固定5、link 默认链接颜色6、alink 鼠标点击时的颜色7、vlink 点击后的颜色8、topmargin 页面上边距9、leftmargin 页面左边距五、注释语句1、 <comment></ comment >2、<!-- -->3、<plaintext> 将原代码显示在浏览器中4、<ruby> ssssssssssss<rt>ddddd</rt></ruby> rt的注释内容出现在ruby上方5、、/* */ css注释六、文本标记1、<h数字></h数字> 标题字标记包含对齐（align）属性2、<strong> </strong> 加粗标记3、<em></em>倾斜4、<s></s> 删除线5、<u></u> 下划线6、< sup ></ sup > 上标7、< sub ></ sub > 下标8、< big ></ big > 大字号7、< small ></ small > 小字号8、<font face="字体" size="字号" color="颜色"> </font> 文字标记9、<p></p> 段落标记具备align属性10、<pre> </pre> 预格式化（使得代码与页面的显示一致）11、<center></center> 居中12、<hr align="对齐" width="宽" size="高" noshade="阴影" color/> 水平线13、<kbd> </kbd> 在浏览器中（如标签后）显示的信息14、<address> </address>在文档中显示作者的信息15、<tt> </tt> 打字字体16、<ul> 项目列表<li type="circle">fdfsdfs</li> 空心圆<li type="disc">fsfsfs </li> 圆<li type="square">kjkjhkhj</li> 方</ul>17、<ol type="1" start="2"> 编号列表，type代表显示什么，start代表从那开始<li>fdfsdfs</li><li>fsfsfs </li></ol></body>18、<dl> 定义列表（产生类似文字说明的效果）<dt>fdfsdfs</dt> 内容<dd>fsfsfs </dd> 说明<dt>kjkjhkhj</dt><dd>hfhfhfhfh</dd></dl>19、<ol> 列表嵌套（选中内容，缩进）<li>dadasd</li><li>adsasdsa<ol><li>dasda</li><li>sdaad</li></ol></li></ol>七、图片标记1、<img src="banner资料.jpg" alt="aaa" width="100" height="200" hspace="2" vspace="1" border="2" align="middle" lowsrc="../images/cpfl_04.gif" longdesc="" />Src 图片文件的路径alt 说明文字width 宽度height 高度hspace 水平边距vspace 垂直边距border 边框宽度align 文字环绕lowsrc 低解析度源文件2、<br clear="left" />代码加到对应前边可以取消环绕3、<img src="../images/未标题-1_03.gif" usemap="#Map" /> 应用区域<map name="Map" id="Map"> 使用热点<area shape="circle" coords="81,54,16" href="#" /> 定义热点区</map>Cords 区域边界href 链接shape（热点类型）circle圆rect 矩形poly 多边形主要用于电子地图和导航条八、链接1、<a href="" target="_parent" name="链接名" title="链接提示文字">fhgfhf</a> href 链接target 打开方式name 连接名title 链接提示文本链接（）2、<a name="mm" id="mm"></a> 锚点链接3、<a href="maileto:**********?subject=意见&cc=***********&bcc=**********">hkhjk</a>Subject 标题cc 抄送bcc 秘抄送九、表格1、基本标记<table width="56%" height="56" border="1" align="center" cellpadding="2" cellspacing="3" bordercolor="#FF00FF" background="file:///C|/Documents and Settings/Administrator/桌面/html/banner资料.jpg" bgcolor="#00FFFF" summary="这是内部资料" > 表格标记<caption align="top"> 标题中华网</caption><tr align="center" valign="middle" bordercolordark="#9900FF" bordercolorlight="#FF0000" > 行标记<th width="50%" height="25"> </th> 单元格表头<td width="50%" nowrap="nowrap" bordercolor="#00FFFF" background="html/banner资料.jpg" bgcolor="#FF00FF" > </td> 单元格标记width 宽height 高nowrap 不换行</tr><tr><td height="26"> </td><td> </td></tr></table><table width="56%" height="84" border="1" cellpadding="2" cellspacing="3" summary="这是中华网的内部资料"> 表格标记<caption align="top"> 说明中华网</caption><tr> 行标记<th width="36%" height="22">dsds</th> 标题单元格标记<td colspan="2">dsddsd</td> 单元格标记（跨列合并）</tr><tr><td height="22">ds</td> height高<td width="19%">sd</td> width 宽<td width="45%" rowspan="2">dsddsd</td> 单元格标记（跨行合并）</tr><tr><td height="22">ds</td><td>sd</td></tr></table>Width 表格宽度border 边宽cellspacing 间距cellpadding 填充bordercolor 边框颜色background 背景图片bgcolor 背景色bordercolorlight 表格左上单元格右下bordercolordark 表格右下单元格左上frame 外部边框显示样式above（上）below（下）border（全显示）hisdes（上下）lhs（左）rhs（右）void（不显示）vsides（左右）rules 内部边框显示样式all（所有）cols（行）groups（行列间）none（不显示）rows（列）十、表单1、<form action="" method="get">具体表单</form> 表单标记2、<label>aa 标签/单行文本<input name="textfield" type="text" value="" size="2" maxlength="4" /> 文本</label><textarea name="textfield2" cols="2" rows="4" wrap="virtual">mmmmmmmmmm</textarea><input name="textfield3" type="password" value="123" size="2" maxlength="3" />Input（单行）：size 字符个数maxlength 最大长度value 初始值type ：text（单行文本）password（密码文本）file（文件域）radio（单选）checkbox（多选）submit（按钮）image（图像域）hidden（隐藏域）button（无）reset（重设）submit（提交）当选组：其实就是把多个当选按钮放在一个表单内标签：<label></label>对表单内容的说明3、textarea（多行）：cols 个数rows 行数wrap 超过处理多行文本4、<select name="menu1" size="1" multiple="multiple" 菜单名size(列表）multiple(允许多选) onchange="MM_jumpMenu('parent',this,0)"> 如果出现代表跳转<option value="">1</option> 菜单项目value如果是跳转代表超链<option selected="selected">2</option> selected（已选中）<option>3</option></select>跳转和列表的区别：都是菜单，不同的是跳转多了一个超级链接的功能十一、框架1、<frameset rows="400,200" cols="*" framespacing="2" frameborder="yes" border="2" bordercolor="#9900FF"> 框架集<frame src="UntitledFrame-2.html" name="topFrame" frameborder="yes" scrolling="No" noresize="NORESIZE" marginwidth="2" marginheight="2" bordercolor="#FF00FF" id="topFrame" /> 框架<frame src="UntitledFrame-3.html" name="bottomFrame" frameborder="no" scrolling="yes" noresize="noresize" id="bottomFrame" />Frameset：rows（第一行框架的高度，第二行的高度）framespacing 边框高度frameborder 是否有边框border 边框大小bordercolor 边框色Frame：src（文件）scrolling（滚动方式）noresize（不能调整大小）marginwidth （边界宽度）marginheight（边界高度）2、<iframe src="file:///C|/Documents and Settings/Administrator/桌面/Untitled-1.html" width="200" height="200" name="22" align="left" frameborder="1" scrolling="yes" marginheight="2" marginwidth="2"></iframe>Src 原文件width 宽height 高name 名称align 对齐frameborder 边框是否显示scrolling 滚动方式marginheight 边缘宽度marginwidth 边缘高度在做框架时，如果想在框架中显示输入target十二、层<div id="Layer1"></div><style type="text/css"><!--#Layer1 {position:absolute（绝对）/fixed/inherit/relative（相对与其他元素）/static; 定位left:153px; 左坐标top:41px; 顶坐标width:90px; 宽height:82px; 高z-index:1; 层数background-image:url(file:///C|/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/html/ba nner%E8%B5%84%E6%96%99.jpg); 背景图片background-color: #FF00FF; 背景色overflow: scroll; 溢出处理}--></style>十二、CSS（一次套用，多次使用；语法简单；丰富效果）1、定义（外部）.bb（选择符）{ 类font-size（属性）: larger（值）; 声明font-weight: lighter;}Body，h1,h2 { 标签声明内容}#aa { ID声明内容}a:link { 伪标签组声明内容}2、使用（外部）1、附加：<link href="文件路径el="stylesheet" type="text/css" /> 标签类自动生效2、使用：<p class="bb"> hfhfh </p> 类3、套用：<p id="aa">fhfhfhf</p> ID3、定义（内部）<style type="text/css">定义内容</style>或标签中直接使用style属性多个；隔开4、使用（内部）同上如果出现多个定义相同属性，用，隔开5、值时间：1m=1000ms长度：px（像素），pt（点1/72英寸），cm，mm，in（英寸），%颜色：#rrggbb，#rgb，rgb（a，a，a）rgb（a%，a%，a%）url：url（“域名”）6、类型font-family: "宋体"; 字体------类型font-size: 36px; 字号font-style: oblique; 字类型line-height: 20px; 行高font-weight: bolder; 字宽font-variant: normal; 变体text-transform: capitalize; 文本样式color: #000000; 颜色text-decoration: underline overline line-through blink; 大写样式background-attachment: scroll; 附件--------背景background-color: #FF00FF; 背景色background-image: url(html/banner%E8%B5%84%E6%96%99.jpg); 背景文件background-repeat: repeat; 水平位置background-position: left bottom; 垂直位置letter-spacing: 20em; 字母间距------区块text-align: center; 文本对齐text-indent: 2px; 文字缩进vertical-align: baseline; 垂直对齐word-spacing: 10em; 单词间距white-space: nowrap; 空格display: table-row-group; 显示border: 10px 10 10; --------方框margin: 10px; 边界padding: 10px; 填充clear: both; 清楚float: right; 浮动height: 100px; 高width: 100px; 宽border: 20px solid #FF0000 边框（宽度/样式/颜色）-边框list-style-position: outside; 位置----------列表list-style-image: url(html/banner%E8%B5%84%E6%96%99.jpg); 图片list-style-type: square; 类型overflow: scroll; 溢出处理--------定位position: absolute; 类型visibility: visible; 显示z-index: auto; 层数height: 20px; 高width: 20px; 宽left: 10px;top: 10px;right: 10px;bottom: 10px;clip: rect(10px,10px,10px,10px); 裁剪十三、Javascript1、行为原理：先定义一个Javascript函数，在具体对象上应用A、定义<script type="text/JavaScript"> 使用脚本，类型为Javascriptfunction MM_popupMsg(msg) { //v1.0 定义函数，函数名为MM_popupMsg(msg) alert(msg);}</script><a href="#"><img src="html/banner资料.jpg" onclick="MM_popupMsg('本图片禁止下载！')" /></a> 使用函数，时间=“函数名（参数）”。
【前端HTML 】常⽤标签及属性路径r相对路径绝对路径标签ⅡⅢⅢⅡ<small>small⼩号字<strong>strong加重语⽓<sub>SUBscript下标<sup>SUPerscript上标<u>Underline下划线列表标签<ul>Unorder List⽆序列表块标签<ol>Order List有序列表块标签<li>LIst列表项⽬块标签<dl>Define List定义列表块标签<dt>Define Title定义标题块标签<dd>Define Describtion定义描述块标签表格相关<table>表格块标签<tr>Table Row表⾏块标签<td>Table Data cell单元格<th>Table Head表头<caption>caption标题<thead>Table head表头部分<tbody>Table body主体部分<tfoot>Table foot底部业脚部分表单相关<form>form表单<input>input表单元素(输⼊框)空标签<select>select选择(下拉框)<option>option选项(下拉列表项)<textarea>text area⽂本域框架相关<frameset>frame set框架集<frame>frame框架空标签<iframe>iframe内嵌框架容器<div>division 分隔(容器标签(块))<span>span跨度(容器标签(⾏内))标签分类标签名英⽂英⽂含义标签类型备注属性属性名英⽂英⽂含义取值应⽤场景备注src SouRCe资源位置资源的路径border border边框数字(像素) size size尺⼨数字(像素) width width宽度数字(像素) height height⾼度数字(像素)bgcolor BackGroundCOLOR背景颜⾊颜⾊值：red或#ffffffbackground background背景图⽚图⽚路径list-style list-style设置列表的所有属性列表list-style-image list-style-image将图像设置为列表项标记Noneurl列表list-style-type list-style-type设置列表项标记的类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)列表line-height line-height⾏⾼(⾏间距)数字(像素)布局多⾏⽂本text-align text-align对齐⽅式Left、right、center各种元素对齐letter-spacing letter-spacing字符间距数字(像素)加⼤字符间间隔text-decoration text-decoration⽂本修饰Underline、none加下划线、中划线等margin-top(right、bottom、left)margin外边距数字(像素)padding-top(right、bottom、left)padding内边距数字(像素)Ⅱbottom 、left)displaydisplay改变块级元素与⾏内元素的默认显⽰⽅式block(⾏变块)inline(块变⾏)none(该元素不显⽰在⽹页中)position position 定位static(静态定位)relative(相对定位)absolute(绝对定位)fixed(固定定位)⽤于定位float float 浮动None 、left 、right clearclear处理浮动塌陷left(清除左边浮动)right(清除右边浮动)both(清除两边浮动)none(不清除浮动)type type 列表类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)⽤于列表alignalign对齐Left 、right 、center top 、middle 、bottom 段落内容⽔平对齐⽂字与图⽚垂直对齐type type 表单元素类型text(⽂本)checkbox(复选)radio(单选)password(密码)file(⽂件)submit(提交)reset(重置)button(按钮)image(图⽚按钮)hidden(隐藏)表单元素method method 表单数据的提交⽅式get postalt alter 改变、替换(图⽚不显⽰时提⽰信息)图⽚cellpadding cell padding 单元格内边距数字表格cellspacing cell spacing 单元格之间距离数字表格href Hypertext REFerence 超⽂本引⽤(跳转到⽂件位置)relRELationship关系(⽤于定义链接的⽂件和HTML ⽂档之间的关系)StyleSheet 样式表link 链接⼀个⽂件时target target ⽬标(⽹页打开的位置)_blank(新窗⼝打开)_self(⾃⾝窗⼝打开)_top(以整个浏览器作业作为窗⼝显⽰新页⾯)_parent(在⽗窗⼝中打开新的页⾯)colspan COLumn span 单元格跨列数字(跨的列数)表格rowspan row span 单元格跨⾏数字(跨的⾏数)表格readonly read only 只读value value 输⼊框的初始值maxlength max length 最⼤长度scrolldelay scroll delay 滚动延时<m arquee>directiondirection⽅向(滚动⽅向)<m arquee属性名英⽂英⽂含义取值应⽤场景备注块级标签<div>、<h1>~<h6>、<p>、<hr>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<table>⾏级标签<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>ⅡⅡ选择器简单选择器属性选择器复合选择器关系选择器伪类选择器ⅡⅢⅢⅢⅢⅢ伪类：（不存在的类，特殊的类）⼀般是使⽤:开头，⽤来描述⼀个标签元素的特殊状态（很像是类）。
一、HTML标记注释：红色字体为标记和其必不可少的属性；绿色字体为标记中的属性，可任意选取所需要的属性；天蓝色字体为自由填充的属性值；黑色字体为补充内容及对标识和描述内容的注解1、HTML标记语法：<标记名称属性1名=属性1值属性2名=属性2值…>标记在表示HTML文档内容结构和含义的时候，通常有两种方式，我们分别称单标记和双标记。
表1：2、<BODY>的属性BGCOLOR="颜色" (设置背景颜色)BACKGROUND="图片名" (设置背景图片)BGPROPERTIES="FIXED" (设置背景图片固定不变)TEXT="颜色" (设置文本颜色)LINK="颜色" (默认链接)VLINK="颜色" (当鼠标按下时的链接)ALINK="链接按钮" (当鼠标松开后的链接)TOPMARGIN=距离(文本距顶部的距离)LEFTMARGIN=距离(文本距左边的距离)3、设置播放器，必须在BODY的双标记中存在设置背景音乐：<BGSOUND SRC="地址"(歌名或视频名) LOOP=“循环次数”>插入视频音频文件：（FLASH等）<EMBED SRC="地址"(歌名或视频名)WIDTH=宽度HEIGHT=高度(调整播放器的宽度和高度)HIDDEN="TRUE"(隐藏播放器) LOOP=”循环次数”>4、如何使网页在网站的排名靠前，其必须在HEAD中存在<META NAME="K EYWORD"CONTENT="描述网站内容">(用于标记搜索引擎在搜索该页面时所取出的关键词)<META NAME="DESCRIPTION" COUNT="描述网页内容" >（用来标记描述内容）<META NAME="AUTHOR" CONTENT="作者名称" >（用来标记文档的作者）<META HTTP-EQUIV="CONTENT-TYPE" CONTENT= "TEXT/HTML;CHARSET =GB2312">（用来标记你的页面的解码方式）<META HTTP-EQUIV="REFRESH" CONTENT="5;URL= Http:// .com">(用来自动刷新网页)5、标题字体表2：6、文章字体表3：7、物理字体表4：8、字符实体在往HTML文档中写入特殊字符，如“〈”、“〉”、“&”、“ ”等要使用特殊的代码，浏览器会用HTML命令对这些特殊代码进行翻译。
⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素 单双标签其实就是HTML⽂档中标签书写的格式，页⾯中最常见的是双标签； 单标签就是只有⼀个标签，也就是⼀个空元素：meta、img、hr、br 双标签有开始标签和结束标签 块级元素：独占⼀⾏，对宽⾼的属性值⽣效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽） 例如：div p ul h1~h6 ..... ⾏内元素：对宽⾼属性值不⽣效，完全靠内容撑开宽⾼，可以跟其他标签存在⼀⾏ 例如：span b strong em a img input ...... ⾏内块元素：结合⾏内和块级元素的特点，不仅对宽⾼的属性值⽣效，还可以跟多个标签存在⼀⾏ 例如：input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><!-- 申明，这⾏以下的⽂档都是html⽂档 --><html lang="en"><head><!-- 设置字符集编码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义⽹页头部 --><title>Document</title><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 shortcut icon:链接图⽚ type规定链接⽂档的类型 image/x-icon 图⽚类型 --><link rel="shortcut icon" type="image/x-icon" href=""><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 stylesheet:层叠样式表 type规定链接⽂档的类型 text/css CSS样式表 --><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 块级元素，段落标签 text-indent:段落缩进 1个em就是1个字体的长度; --><!-- font-size:字体⼤⼩设置 1px⼀个像素点⼤⼩;color:字体颜⾊;font-weight:bold 字体加粗;font-family:字体类型 --><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><!-- ************ --><!-- ⾏内元素标签 --><!-- 斜体标签1 --><em></em><!-- 斜体标签2 --><i></i><!-- 删除线标签 --><del></del><span></span><!-- ************ --><!-- 换⾏标签，单标签，内部没有属性，上⾯的段落、⾏内标签可以通过br换⾏ --><br><!-- 预格式标签，保留⽂本中的换⾏或者空格 --><pre></pre><!-- 标题标签，h1~h6，块级元素，从⼤到⼩，h1最⼤ --><!-- text-align:设置⽂本位置 left:靠左 center:居中 right:靠右 --><h1 style="text-align: center;"></h1><!-- background:背景颜⾊ height:标签⾼度 line-height:设置⾏⾼ --><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性，⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><!-- 链接标签 href:链接地址，"#"本页⾯跳转，默认⾃带下划线 --><a href="#">我是⼀个链接</a><!-- 图⽚链接 --><a href=""><img src="" alt=""></a><!-- 设置锚点定位 --><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式；⽂化素质宽⾼；设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚，但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><!-- 有序列表 --><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><!-- ⽆序列表 --><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><!-- method在后端传输数据⽤到,传值⽅式get/post --><!-- action传值url地址 --><form method="" action=""><!-- type类型，输⼊域的类型：text⽂本型，password密码类型 --><!-- placeholder⽂本框内部的提⽰信息 --><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格（table）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><!-- 表头定义⽤th --><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><!-- 定义⾏⽤tr --><tr><!-- 定义列⽤td --><!-- colspan="5"合并5列 --><td colspan="5"></td></tr><tr><!-- 定义列⽤td --><!-- rowspan="2"合并两⾏，同时删除合并⾏的列 --><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。
HTML常用标签属性汇总1.全局属性：- class: 为当前HTML元素指定一个或多个类名- id: 为当前HTML元素指定唯一的标识符- style: 为当前HTML元素指定样式属性，如颜色、字体、大小等- title: 为当前HTML元素指定鼠标悬停时显示的文字提示2.文本相关属性：- align: 用于指定文本在元素中的对齐方式，如left、right、center等- dir: 用于指定文本的方向，如ltr、rtl等- lang: 用于指定文本的语言，如en、zh等- translate: 用于指定是否需要对文本进行翻译处理3.超链接相关属性：- href: 用于指定链接地址，可以是相对路径或绝对路径- target: 用于指定链接在何处打开，如_blank、_self、_parent、_top等- rel: 用于指定链接与当前页面之间的关系，如nofollow、noopener等4.图像相关属性：- src: 用于指定图像的路径- alt: 用于指定图像显示失败时的替代文本- width: 用于指定图像的宽度- height: 用于指定图像的高度5.表格相关属性：- border: 用于指定表格边框的宽度- cellpadding: 用于指定表格的内边距- cellspacing: 用于指定表格的间距- rowspan: 用于指定单元格的行合并- colspan: 用于指定单元格的列合并6.表单相关属性：- action: 用于指定表单提交的URL地址- method: 用于指定表单提交的方式，如GET、POST等- name: 用于指定表单的名称- value: 用于指定表单元素的默认值7.多媒体相关属性：- autoplay: 用于指定音频或视频自动播放- controls: 用于指定音频或视频是否显示控制条- loop: 用于指定音频或视频是否循环播放- poster: 用于指定音频或视频的封面图像8.其他常用属性：- disabled: 用于指定元素是否禁用- readonly: 用于指定元素是否只读- required: 用于指定元素是否为必填项- maxlength: 用于指定元素输入的最大长度。
