网页结构内容
Posted anixo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页结构内容相关的知识，希望对你有一定的参考价值。
<div>标签：
是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种html元素。
<span>标签：
没有实际意义，为了应用样式。
----------------------------------------------------------
块级标签：占据一行，换行
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>......
行内标签：在一行，不换行
<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>......
是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种html元素。
<span>标签：
没有实际意义，为了应用样式。
----------------------------------------------------------
块级标签：占据一行，换行
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>......
行内标签：在一行，不换行
<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>......
详细一些的东西
1. 块元素：独占一行，可以设置宽高，如果不设置宽高则默认宽默认为父级标签宽度，高度由内容撑开，若没有内容，则高度为空
h1~h6:标题标签，用于标记网页中的大标题，依次从大到小
p：用于标记网页中的段落性文字，默认占满横向区域
div：划分，分隔，作用是就是将页面划分为不同的区域，不设置宽高时，高度有内容撑开，宽度和父级元素一样宽
section：区段，是用来定义文档的某个区域，章节
nav：标签定义导航链接的部分，提示：如果文档中有“前后”按钮，则应该把它放到nav元素中。
header：标签定义文档的页眉
footer：标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等
pre：格式标签，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
address： 标签定义文档或文章的作者/拥有者的联系信息，元素中的文本通常呈现为斜体，大多数浏览器会在 address 元素前后添加折行
audio：音频使用，背景音乐播放，属性autoplay自动播放，loop循环播放，src要播放的音频，controls为音频提供播放控件，比如播放按钮。preload规定是否在页面加载后载入音频，如果设置了 autoplay 属性，则忽略该属性。
/ 表格标签 /
table：用于显示一个表格，不能设置宽高，宽高被内容撑开，设置宽度而内部的td没有宽度时，td会按照内容长度的比例拉伸
thead：表头，用于显示一列的名称，一般省略不写，浏览器在解析时会自动添加
tbody：表主体，一般省略不写，浏览器在解析时会自动添加
tr：表示一行
th：表头中的第一个单元格
td：表示主体中的单元格，有属性rowspan合并单元格，合并行。colspan合并列
/ 有序列表，无序列表 /
ul：无序列表
ol：有序列表
li：列表项
dl：定义列表，用于描述类表中的项目（dt（dd））
2. 行元素：不能设置宽高，宽高取决于自身内容，不独占一行，多个行内元素左右排列，一行显示不下时会自动换行
span：是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素，span没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化
a：标记网页中的超链接，点击可以打开或者跳转到另一个网页，也可以链接到一个要下载的文件
有属性：href：要链接到的资源地址，target:打开的链接方式，值_blank:表示新打开一个窗口打开目标地址
strong：标记页面中的粗体文本，语义化标签，除了文本加粗之外，还有强调的预期，表示标签中的内容是页面中需要重点关注的内容
b：标记网页中的粗体文本，仅仅将文本加粗，标签中的内容不再强调
s：删除线，仅仅是删除的效果
del：具有删除语义，delete删除
em：强调文本，斜体展示
sup：上标
sub：下标
3. 行内块元素：可以设置宽高，不独占一行，多个行内块元素左右排列，一行显示不下会自动换行*
img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示
button：按钮
input：输入框，有属性type输入框类型，有属性值（text表示文本输入框，file文件选择器，password密码输入框，email邮箱输入框，number数字输入框，button按钮）。placeholder占位字符，用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时，必须携带name属性，发送请求时的参数名。
h1~h6:标题标签，用于标记网页中的大标题，依次从大到小
p：用于标记网页中的段落性文字，默认占满横向区域
div：划分，分隔，作用是就是将页面划分为不同的区域，不设置宽高时，高度有内容撑开，宽度和父级元素一样宽
section：区段，是用来定义文档的某个区域，章节
nav：标签定义导航链接的部分，提示：如果文档中有“前后”按钮，则应该把它放到nav元素中。
header：标签定义文档的页眉
footer：标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等
pre：格式标签，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
address： 标签定义文档或文章的作者/拥有者的联系信息，元素中的文本通常呈现为斜体，大多数浏览器会在 address 元素前后添加折行
audio：音频使用，背景音乐播放，属性autoplay自动播放，loop循环播放，src要播放的音频，controls为音频提供播放控件，比如播放按钮。preload规定是否在页面加载后载入音频，如果设置了 autoplay 属性，则忽略该属性。
/ 表格标签 /
table：用于显示一个表格，不能设置宽高，宽高被内容撑开，设置宽度而内部的td没有宽度时，td会按照内容长度的比例拉伸
thead：表头，用于显示一列的名称，一般省略不写，浏览器在解析时会自动添加
tbody：表主体，一般省略不写，浏览器在解析时会自动添加
tr：表示一行
th：表头中的第一个单元格
td：表示主体中的单元格，有属性rowspan合并单元格，合并行。colspan合并列
/ 有序列表，无序列表 /
ul：无序列表
ol：有序列表
li：列表项
dl：定义列表，用于描述类表中的项目（dt（dd））
2. 行元素：不能设置宽高，宽高取决于自身内容，不独占一行，多个行内元素左右排列，一行显示不下时会自动换行
span：是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素，span没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化
a：标记网页中的超链接，点击可以打开或者跳转到另一个网页，也可以链接到一个要下载的文件
有属性：href：要链接到的资源地址，target:打开的链接方式，值_blank:表示新打开一个窗口打开目标地址
strong：标记页面中的粗体文本，语义化标签，除了文本加粗之外，还有强调的预期，表示标签中的内容是页面中需要重点关注的内容
b：标记网页中的粗体文本，仅仅将文本加粗，标签中的内容不再强调
s：删除线，仅仅是删除的效果
del：具有删除语义，delete删除
em：强调文本，斜体展示
sup：上标
sub：下标
3. 行内块元素：可以设置宽高，不独占一行，多个行内块元素左右排列，一行显示不下会自动换行*
img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示
button：按钮
input：输入框，有属性type输入框类型，有属性值（text表示文本输入框，file文件选择器，password密码输入框，email邮箱输入框，number数字输入框，button按钮）。placeholder占位字符，用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时，必须携带name属性，发送请求时的参数名。
单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值，将多个radio的name属性值设置为相同的值
type="checkbox"复选框
type="checkbox"复选框
label:和input标签绑定到一块使用，有属性for，属性值就是input输入框的id值。checked属性为标签选中状态
select:下拉列表
option:下拉选项
select:下拉列表
option:下拉选项
行元素和块元素不是绝对不变的，任何元素都可以通过display样式来改变布局方式类型，块元素block，行元素inline，行内块元素inline-block
————————————————
标签嵌套规则————————————————
块级元素可包含行内元素和某些块级元素
<div><h1></h1>< a href=""></ a></div>
行内元素不可包含块元素，只能包含其他行内元素
错误：< a href=""><h1></h1><div></div></ a>
正确：<span><em></em></span>
错误：< a href=""><h1></h1><div></div></ a>
正确：<span><em></em></span>
块级元素不能放在<p>标签内
错误：<p><div></div><h1></h1></p >
错误：<p><div></div><h1></h1></p >
特殊块级元素只能包含行内元素，丶再包含块级元素
如：h1、h2、h3、h4、h5、h6、p、dt
如：h1、h2、h3、h4、h5、h6、p、dt
块级元素与块元素并列，行内元素和行内元素并列
正确：<div><h1></h1><p></p ></div>
正确：<div><span></span>< a href=""></ a></div>
错误：<div><h1></h1><span></span></div>
—————————————————————————————————————————
<html>
<head>
<title><title>
</head>
<body>
...
</body>
</html>
正确：<div><h1></h1><p></p ></div>
正确：<div><span></span>< a href=""></ a></div>
错误：<div><h1></h1><span></span></div>
—————————————————————————————————————————
<html>
<head>
<title><title>
</head>
<body>
...
</body>
</html>
以上是关于网页结构内容的主要内容，如果未能解决你的问题，请参考以下文章