码迷,mamicode.com
首页 > Web开发 > 详细

网页结构内容

时间:2020-07-23 23:21:19      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:描述   str   tle   单选框   splay   ade   图片加载   超文本标记语言   不同   

<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>......
 
详细一些的东西
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属性,发送请求时的参数名。
单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值,将多个radio的name属性值设置为相同的值
type="checkbox"复选框
label:和input标签绑定到一块使用,有属性for,属性值就是input输入框的id值。checked属性为标签选中状态
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>
块级元素不能放在<p>标签内
 错误:<p><div></div><h1></h1></p >
特殊块级元素只能包含行内元素,丶再包含块级元素
 如: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>

网页结构内容

标签:描述   str   tle   单选框   splay   ade   图片加载   超文本标记语言   不同   

原文地址:https://www.cnblogs.com/anixo/p/13368619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!