HTML基础之知识总结

it2026-04-24 3

HTML

文章目录

HTML前言一、HTML是什么？1.1 Hyper Text Markup Language 超文本标记语言1.1.1 超文本1.1.2 标记语言二、语法规范2.1 html文档后缀名2.2 标签分类2.2.1 双标签2.2.2 单标签 2.3 标签关系2.3.1 包含关系（标签嵌套）2.3.2 并列关系 2.4 在开始标签中可以定义属性2.5 html的标签不区分大小写，建议用小写三、常用标签3.1 结构标签：构成html最基本的标签3.1.1 根标签 <`html`>3.1.2 头标签 <`head`>3.1.3 网页标题标签 <`title`>3.1.4 体标签 <`body` >3.1.5 <！DOCTYPE html>3.1.6 辅助信息标签<`meta`> 3.2 标题标签 <`h1`> - <`h6`>3.2.1 语法<`hn`>内容<`/hn` >3.2.2 特点 : 文字加粗独占一行显示 3.3 排版标签3.3.2 段落标签 <`p`>3.3.3 强制换行标签<`br/`>3.3.4 软换行标签< `wbr`>3.3.5 水平线标签<`hr`> 3.4 文本格式化标签3.4.1 文字加粗标签<`b`> <`strong`>3.4.2 文字倾斜标签<`i`> <`em`>3.4.3 文字删除线标签<`s`><`del`>3.4.4 文字下划线标签<`u`><`ins`>3.4.5 文字大小标签<`big`><`small`>3.4.6 文字上下标标签<`sup`><`sub`> 3.5 容器标签<`span`><`div`>3.5.1 span3.5.2 div 3.6 图片标签<`img`>3.6.1 目录文件夹和根目录3.6.2 路径相对路径绝对路径 3.7 超链接标签<`a`>3.7.1 链接分类外部链接连接外部网站的页面内部链接网站内部页面之间的相互链接空链接没有跳转到其他页面下载链接下载路径指定的文件或压缩包网页元素链接在网页中的各种网页元素添加超链接锚点链接点击链接可以快速定位到页面的某个位置 3.8 注释标签和特殊字符3.8.1 注释标签 <`!-- content --`>3.8.2 特殊字符 3.9 表格标签3.9.1 最外层表格标签 <`table`>表格结构头标签 <`thead`>表格结构体标签 <`tbody`>表格标题标签 <`caption`>表格行标签 <`tr`>表格头标签 <`th`>表格单元格 <`td`> 表格结构脚标签 <`tfoot`> 3.9.2 合并单元格（属性作用在td标签上）合并方式属性跨行合并 rowspan跨列合并 colspan 目标单元格（属性写在目标单元格的标签上）跨行：最上侧单元格为目标单元格跨列：最左侧单元格为目标单元格合并单元格三步曲1.先确定是跨行还是跨列合并。2. 找到目标单元格. 写上合并方式 = 合并的单元格数量3. 删除多余的单元格。 3.10 列表标签3.10.1 无序列表标签 <`ul`>列表项标签 <`li`> 3.10.2 有序列表标签 <`ol`>列表项标签 <`li`> 3.10.3 自定义列表标签 <`dl`>定义项目标签 <`dt`>描述项目标签 <`dd`> 3.11 表单标签使用表单目的是为了收集用户信息。用于和服务器进行交互一个完整的表单通常由`表单域、表单控件(元素)和提示信息3个部分构成。` 3.11.1 表单域标签<`form`>可以定义一个范围，把它范围内的表单元素信息提交给服务器 3.11.2 输入表单标签<`input`>标注标签 <`label`>for属性的值和控件id值相同 3.11.3 下拉表单标签<`select`>使用场景选项标签 <`option`> 3.11.4 文本域标签<`textarea`>使用场景 3.12 格式化标签3.13 引用标签3.14 框架标签四、标签分类4.1 按类别分类4.1.1 块级元素`block`独占一行高度，宽度、外边距以及内边距都可以控制，支持所有样式宽度默认继承父元素的宽，也就是100%是一个容器及盒子，里面可以放行内或者块级元素。文字类的元素内不能使用块级元素 4.1.2 行内元素`inline`相邻行内元素在一行上，一行可以显示多个高、宽、内外边距直接设置是无效的。默认宽度就是它本身内容的宽度内联标签之间会有间隙，原因：书写代码换行产生的行内元素只能容纳文本或其他行内元素。链接里面不能再放链接。特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全 4.1.3 行内块元素`inline-block`和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个默认宽度就是它本身内容的宽度高度，行高、外边距以及内边距都可以控制 4.2 按显示4.2.1 替换元素浏览器根据元素的标签和属性，来决定元素的具体内容 4.2.2 非替换元素将内容直接告诉浏览器，将其显示出来总结

前言

该文总结了html的主要知识。html是标签语言。即使是小白也很容易上手。最常用的标签也就那几个，以后会补充HTML5的新标签

一、HTML是什么？

1.1 Hyper Text Markup Language 超文本标记语言

1.1.1 超文本

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

1.1.2 标记语言

由标签构成的语言。如html，xml 标记语言不是编程语言，HTML而是一种标记语言，HTML使用标记标签来描述网页.

二、语法规范

2.1 html文档后缀名

.html 或者 .htm

2.2 标签分类

2.2.1 双标签

标签对中的第一个标签是开始标签，第二个标签是结束标签。如<html></html>

2.2.2 单标签

有些特殊的标签必须是单个标签（极少情况）。如<br/>

2.3 标签关系

2.3.1 包含关系（标签嵌套）

父子标签 <head> <title>Document</title> </head>

2.3.2 并列关系

兄弟标签 <head> </head> <body> </body>

2.4 在开始标签中可以定义属性

属性是由键值对构成，值需要用引号引起来

2.5 html的标签不区分大小写，建议用小写

三、常用标签

3.1 结构标签：构成html最基本的标签

3.1.1 根标签 <html>

html文档的根标签，定义了整个HTML文档

3.1.2 头标签 <head>

用于指定html文档的一些属性。引入外部的资源

3.1.3 网页标题标签 <title>

网页标题标签

3.1.4 体标签 <body >

体标签，定义了HTML文档的主体,存放网页所有内容

3.1.5 <！DOCTYPE html>

声明文档是html类型，当前页面采取的是 HTML5 版本来显示网页.

3.1.6 辅助信息标签<meta>

辅助信息属性： name（提供了名称/值对中的名称） description：网页内容描述 keywords：网页内容关键词 renderer：浏览器内核选择（webkit：极速核/ie-comp：ie兼容内核/ie-stand：ie标准内核） http-equiv（为名称/值对提供了名称） charset：字符编码 expires：日期 X-UA-Compatible：针对ie浏览器 refresh：刷新 content（为名称/值对提供了内容，一定要有的属性）例： <meta name="description" content="…."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

3.2 标题标签 <h1> - <h6>

3.2.1 语法<hn>内容</hn >

3.2.2 特点 : 文字加粗独占一行显示

<h1>标题标签</h1> <h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减，</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后，</h5> <h6>具体效果刷新见。</h6>

3.3 排版标签

3.3.2 段落标签 <p>

<p>内容</p> 段与段之间有垂直间距

3.3.3 强制换行标签<br/>

需要换行的位置<br/> 完整单词在空间不够时会整体换行

3.3.4 软换行标签< wbr>

需要换行的位置<wbr> 完整单词在空间不够时不会整体换行，会进行拆分

3.3.5 水平线标签<hr>

hr的属性html5不支持使用 <h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1> <h4>数据统计：水花兄弟合砍61分</h4> <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p> <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p> <h4>兄弟对决升级：小库里给哥哥造成压力</h4> <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p> <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p> <p>作者:chx<br/> 2020-12-2 </p>

3.4 文本格式化标签

3.4.1 文字加粗标签<b> <strong>

<b> 内容 </b> <strong> 内容 </strong> 更语义化，推荐使用

3.4.2 文字倾斜标签<i> <em>

<i> 内容 </i> <em> 内容 </em> 更语义化，推荐使用

3.4.3 文字删除线标签<s><del>

<s> 内容 </s> <del> 内容 </del> 更语义化，推荐使用

3.4.4 文字下划线标签<u><ins>

<u> 内容 </u> <ins> 内容 </ins> 更语义化，推荐使用

3.4.5 文字大小标签<big><small>

<big> 内容 </big> 大号字 <small> 内容 </small> 小号字

3.4.6 文字上下标标签<sup><sub>

<sup> 内容 </sup> 上标字 <sub> 内容 </sub> 下标字我是<strong>加粗</strong>的文字<br/> 我是<b>加粗</b>的文字<br/> 我是<em>倾斜</em>的文字<br/> 我是<i>倾斜</i>的文字<br/> 我是<del>删除线</del><br/> 我是<s>删除线</s><br/> 我是<ins>下划线</ins><br/> 我是<u>下划线</u><br/> 我是<big>大号字</big><br/> 我是<small>小号字</small><br/> 我是H<sub>2</sub>O<br/> S = PI * R <sup>2</sup>

3.5 容器标签<span><div>

3.5.1 span

<span> 内容 </span> 行级标签，内联标签，一行可以有多个span标签

3.5.2 div

<div> 内容 </div> 块级标签，独占一行，自带换行。

3.6 图片标签<img>

<img src = “..." alt = "..." title = "..." /> 属性值备注src图片url图片路径alt文本图片无法加载的时候才会显示的替换文本title文本鼠标停在图片时显示的提示文本

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。根目录：打开目录文件夹的第一层就是根目录

3.6.2 路径

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径 ./ 代表当前目录，不写就默认为当前目录 ../ 代表上一级目录 / 下一级路径

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

3.7 超链接标签<a>

定义一个超链接 <a href=..." target="...">载体内容</a> 属性值备注href指定访问资源的URL\target_self / _blank在当前页面打开，默认值 / 新建一个空白页面打开

3.7.1 链接分类

外部链接连接外部网站的页面

< a href="http:// www.baidu.com "> 百度</a >。

内部链接网站内部页面之间的相互链接

直接链接内部页面名称即可 < a href="index.html"> 首页 </a >。

空链接没有跳转到其他页面

如果当时没有确定链接目标就使用空链接 < a href="#"> 首页 </a >

下载链接下载路径指定的文件或压缩包

如果 href 里面地址是一个文件.exe或者压缩包.zip，会下载这个文件。 <a href="img.zip">下载文件</a>

网页元素链接在网页中的各种网页元素添加超链接

如文本、图像、表格、音频、视频等都可以内容是用来承载超链接的载体，点击一下就跳转到url的资源 <a href="http://www.baidu.com"><img src="img.jpg"/></a>

锚点链接点击链接可以快速定位到页面的某个位置

外部页面的某个位置

在链接文本的 href 属性中，设置属性值为 #名字的形式

当前页面的某个位置

在链接文本的 href 属性中，设置属性值为要跳转的页面名称.html#名字的形式

目标位置

找到目标位置标签，里面添加一个 id 属性 = 刚才的名字（html5支持id，旧版本才支持name） <a href="#two"> 第2集 </a> <h3 id="two">第2集介绍</h3>

3.8 注释标签和特殊字符

3.8.1 注释标签

快捷键: ctrl + /

3.8.2 特殊字符

特殊字符描述字符的代码空格符&nbsp；<小于号&lt；>大于号&gt；

3.9 表格标签

表格不是用来布局页面的,而是用来要用于显示、展示数据的.

3.9.1 最外层表格标签 <table>

<table> </table> 用于定义表格属性值备注alignleft center right规定表格相对周围元素的对齐方式border数值或“”边框宽度cellpadding数值单元格内容与其边框之间的空白cellspacing数值单元格与单元格之间的距离width数值或百分比宽height数值或百分比高bgcolor三种表示方法背景色backgroundurl背景图片

表格结构头标签 <thead>

<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。

表格结构体标签 <tbody>

主要用于放数据本体

表格标题标签 <caption>

表格行标签 <tr>

必须嵌套在 <table> </table>标签中。属性值备注bgcolor三种表示方法背景色alignleft center right规定行内内容相对单元格的对齐方式

表格头标签 <th>

表示 HTML 表格的表头部分(table head 的缩写) 必须嵌套在<tr></tr>标签中。

表格单元格 <td>

指表格数据（table data），即数据单元格的内容

表格结构脚标签 <tfoot>

该标签用于组合 HTML 表格中的表注内容 <table align="center" width="500" height="249" border="1" cellspacing="0"> <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td><img src="up.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </tbody> </table>

3.9.2 合并单元格（属性作用在td标签上）

合并方式属性

跨行合并 rowspan

rowspan = "合并单元格的个数"

跨列合并 colspan

colspan = "合并单元格的个数"

目标单元格（属性写在目标单元格的标签上）

跨行：最上侧单元格为目标单元格

在改td标签里写合并代码

跨列：最左侧单元格为目标单元格

在改td标签里写合并代码

合并单元格三步曲

1.先确定是跨行还是跨列合并。

2. 找到目标单元格. 写上合并方式 = 合并的单元格数量

比如：<td colspan=“2”></td>。

3. 删除多余的单元格。

<colgroup>:列分组属性： span：列数 algin style：样式例： <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000FF;"></colgroup>

3.10 列表标签

3.10.1 无序列表标签 <ul>

<ul></ul> 中只能嵌套 <li></li> 直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> 属性值备注list-stylenone或“”消除/保持排列样式

列表项标签 <li>

<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

3.10.2 有序列表标签 <ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。 <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>

列表项标签 <li>

属性值备注list-stylenone或“”消除/保持排列样式typea / A / I / i / 1排序样式

3.10.3 自定义列表标签 <dl>

<dl></dl> 里面只能包含 <dt> 和 <dd>。常常用于网页页脚的导航链接在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表）该标签会与 <dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl>

定义项目标签 <dt>

描述项目标签 <dd>

<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

3.11 表单标签

使用表单目的是为了收集用户信息。用于和服务器进行交互

一个完整的表单通常由表单域、表单控件(元素)和提示信息3个部分构成。

3.11.1 表单域标签<form>

可以定义一个范围，把它范围内的表单元素信息提交给服务器

属性值值解释备注actionurl接收并处理表单数据的服务器程序的url地址默认值为当前页面的 URL 地址。methodget(默认) post指定提交方式. get：一般用于查询数据post：一般用于插入修改等操作get请求参数会在地址栏中显示；post请不会，封装在请求体中 get提交少量简单数据, post大量复杂、或包含文件数据get不太安全，效率高,post安全，效率低enctype(1) application/x-www-form-urlencoded (2) multipart/form-data (3)text/plain(1) 普通表单(默认,在发送前编码所有字符) (2)多部份表单（不对字符编码,一般用于文件上传）(3)空格转换为 “+” 加号，但不对特殊字符编码。（很少用）指定表单提交的类型target_blank_self_parent_topframename在新窗口中打开。默认。在相同的框架中打开。在父框架集中打开。（很少用）在整个窗口中打开。（很少用）在指定的框架中打开。（很少用）规定在何处打开 action URL <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form> enctype：表示是表单提交的类型类型分类 application/x-www-form-urlencoded 普通表单(默认), multipart/form-data 多部份表单（一般用于文件上传）

3.11.2 输入表单标签<input>

属性值备注type看下表设置不同的属性值用来指定不同的控件类型name自定义表单元素提交给服务器的唯一名称，所有控件都要设置value自定义input元素的值。输入框的值是输入内容，其他type需要设置该属性checkedchecked针对单选和复选框，页面加载完毕默认选中该元素maxlength数值输入框内容最大长度,较少使用 type值备注text单行输入框，默认宽度为20个任意字符password单行密码输入框radio单选框,单选按钮要有相同的name值.hidden隐藏的输入框checkbox复选框,复选框要有相同的name值.file文件上传域image图片上传域button普通按钮、结合js使用reset重置按钮、还原到初始页面submit提交按钮，提交到action的url <input type="属性值" name="名称" [id=“id值” value="值" checked maxlength="数值"] >

标注标签 <label>

label为 input 元素定义标注（标签）用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

for属性的值和控件id值相同

3.11.3 下拉表单标签<select>

使用场景

在页面中，如果有多个确定选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表.

选项标签 <option>

属性值备注selectedselected网页加载完毕后默认选该选项 <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>

3.11.4 文本域标签<textarea>

使用场景

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。用于定义多行文本输入的控件常见于留言板，评论。属性值备注cols数值每行的字符数，开发不用rows数值显示的行数，开发不用 <fieldset>：表单内元素分组，会出现边框，分组在边框内 <legend>：为fieldset元素定义标题，标题会在边框上例： <fieldset> <legend>登录</legend> 用户名:<inputtype="text"> 密码:<inputtype="password"> </fieldset>

<optgroup>:定义选项组例： <select name="" id=""> <optgrouplabel="蔬菜"> <option>黄瓜</option> <option>白菜</option> <option>茄子</option> </optgroup> <optgrouplabel="水果"> <option>苹果</option> <option>梨子</option> <option>香蕉</option> </optgroup> </select>

3.12 格式化标签

<pre>:预格式标签，适合放计算机代码，保留了空格（开头结尾各空一行）和换行例： <pre> System.out.println(1+1); for(intindex=0;index<5;index++){ System.out.println(index); } </pre> <code>:计算机代码标签，不保留多余的空格和折行，可以用外加pre标签解决问题 <kbd>:键盘输入标签 <tt>:电传文字标签 <samp>：实例文本标签 <var>:计算机变量标签例： <code>Computercode</code> <br/> <kbd>Keyboardinput</kbd> <br/> <tt>Teletypetext</tt> <br/> <samp>Sampletext</samp> <br/> <var>Computervariable</var> <br/> <bdo>:排列顺序标签属性： dir： ltr（默认左到右） rtl（从右到左）例： <bdo dir="rtl"> Here is some Hebrewtext </bdo> <ruby>:文字注释标签 <rt>:字符解释或发音标签例： <ruby> 春<rt>chun</rt>晓 </ruby> <map>:图像映射标签，点击图像会跳转到指定url 属性： name：与img联系的属性名注：img内要有usemap属性，且值的前面要有# <area>:映射区域标签属性： shape 区域图形 rect 矩形 circ 圆形 poly 多边形 coords 热区坐标矩形坐标4个值：分别是左上角和右下角的xy坐标圆形坐标3个值：圆心坐标和半径多边形多个值：每个顶点的坐标 href：点击后的超链接注：area永远嵌套在map里面例： <img src="images/1.png" alt="" usemap="#phone"> <map name="phone"> <area shape="rect" coords="32096126" href="https://www.apple.com.cn/iphone/" alt=""> </map>

3.13 引用标签

<blockquote>:长引用，含有换行和外边距 <q>:短引用，内容用“”阔起 <address>:邮件地址标签例： <address> Written by<a href="mailto:webmaster@example.com">DonaldDuck</a>.<br> Visitusat:<br> Example.com<br> Box564,Disneyland<br> USA </address>

<abbr>:首字母缩写标签,鼠标移入显示全部内容例： <abbr title="etcetera">etc.</abbr> <acronym>:缩写标签，鼠标移入到内容上会显示全称，该标签已被淘汰例： <acronym title="WorldWideWeb">WWW</acronym> <cite>:著作名字标签，使字体样式符合著作名字形式例： <p><cite>TheScream</cite>byEdwardMunch.Paintedin1893.</p> <audio>:引入音频文件标签属性： controls：控制播放 loop：循环播放 autoplay：自动播放语法：<audio src=" " controls loop autoplay></audio> <video>:引入视频文件标签语法： <video style:"width: ; height:;"> <source src=""> </video>

3.14 框架标签

<fremeset>:框架结构标签，不可与body共存属性： src：每个部分放的内容 noresize：防止用户改变边框大小 <ifreme>:内联框架标签属性： frameborder:规定显示框周围是否显示边框 width height scrolling：是否显示滚动条 src:引入url srcdoc:规定在iframe显示的页面内容例： <iframe src="../../注册页面案例（优化版）.html"width="200"height="200"frameborder="0"scrolling="no"></iframe>

四、标签分类

4.1 按类别分类

布局一般用块标签，修饰文本一般用内联标签

4.1.1 块级元素block

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等其中 <div> 标签是最典型的块元素。

独占一行

高度，宽度、外边距以及内边距都可以控制，支持所有样式

宽度默认继承父元素的宽，也就是100%

是一个容器及盒子，里面可以放行内或者块级元素。

文字类的元素内不能使用块级元素

4.1.2 行内元素inline

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

相邻行内元素在一行上，一行可以显示多个

高、宽、内外边距直接设置是无效的。默认宽度就是它本身内容的宽度

内联标签之间会有间隙，原因：书写代码换行产生的

行内元素只能容纳文本或其他行内元素。

链接里面不能再放链接。特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

4.1.3 行内块元素inline-block

它们同时具有块元素和行内元素的特点。在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个

默认宽度就是它本身内容的宽度

高度，行高、外边距以及内边距都可以控制

元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个可以设置宽高父级容器的100%可以是任何标签行内元素一行能放多个不可以直接设置宽高本身内容的宽度文本或其他行内标签行内块元素一行放多个可以设置宽度和高度它本身内容的宽度

4.2 按显示

4.2.1 替换元素

浏览器根据元素的标签和属性，来决定元素的具体内容

img、input…

4.2.2 非替换元素

将内容直接告诉浏览器，将其显示出来

div、h1、p

总结

原创文章，部分例子引用了菜鸟教程的例子。本文适合小白或者有基础的人看。水平有限，不喜勿喷

最新回复(0)