HTML5的结构标签(html5的结构标签sidebar)
大家好!今天让创意岭的小编来大家介绍下关于HTML5的结构标签的问题,以下是小编对此问题的归纳整理,让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具,一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词,就能返回你想要的内容,越精准,写出的就越详细,有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业,服务客户遍布全球各地,如需了解SEO相关业务请拨打电话175-8598-2043,或添加微信:1454722008
本文目录:
一、介绍几个常用的HTML5标签
一、Html的基本结构:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
网页的文本、图片等信息;
</body>
</html>
二、Head部分:用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有:
1、title标签:浏览器标签页显示的标题
2、meta标签:其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8">
常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。
3、link标签:链接网页图标(title前的小logo),其常用属性有:
①rel属性:声明链接文件的类型,此处选icon
②type属性:可以省略
③href属性:表示图片的路径地址
三、body部分:网页的文本、图片等信息
标签的分类:
块级标签:显示为块,前后隔一行(自动换行)
行级标签:按行从左往右逐一显示。
1、 常见的块级标签:
①<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。
②<hr/>:水平线标签,添加一条水平线。
③<p></p>:段落标签,
④<br/>:换行标签,
⑤<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示:
2、 基于布局的块级标签
列表:无序列表、有序列表、定义列表
①有序列表:<ol></ol> 列表项:<li></li>
②无序列表:<ul></ul> 列表项:<li></li>
③定义列表(实现图文混排):<dl></dl>
列表标题:<dt>一般只有一项</dt>
列表描述项:<dd>可以有很多项</dd>
3、组合标签:<figure></figure>用于显示图片及图片标题
他有两个子标签:<img />图片
<figcaption></figcaption>图片的标题
例如:<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/>
<figcaption>探险家 伊泽瑞尔</figcaption>
</figure>
4、分区标签:<div></div>
5、常见的行级标签
<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:
这是<span style="color: red;font-size: 36px;">span</span>中的文字
img(图片):其常用属性:①src:表示引用图片的地址。
路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址
a、与文件处于同一层的图片,直接写图片名
b、图片在当前文件下一层:文件名/图片名
c、图片在当前文件上一层:../图片名
绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用
图片网址:网络上的图片链接,但是一般不用
②height和width:图片的高度和宽度。可以用CSS样式代替
③title:图片标。当鼠标指上之后显示的文字
④alt:当图片无法显示的时候,显示的文字
<2>em(倾斜强调)
<3>strong(加粗强调)
<4>b(加粗)
<5>i(倾斜)
Strong、em、b、i的区别
1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高
2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
<6>q(短引用)
<7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限
<8>a(超链接)
1、href:超链接的路径,可以是网络链接,也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面,_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:
rel="prev"被链接文档是当前文档的前一篇文 档,
rel="next"被链接文档是当前文档的后一篇文档,
rel="icon"被链接文档是当前文档的图标
rel="stylesheet"被链接文档是当前文档的样式表
5、Rev(当前是被链接的前/后一篇)
锚链接:
①本页面锚链接:a、设置锚点:<a name="top"></a>
b、跳转锚点:#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点:页面地址.html#name名
<a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>
功能性链接: mailto用于给指定邮箱发送邮件
file:///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
<9>s标签,有误文本:删除线
<s>这是S标签中的文字</s><br />
<10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用
<cite>这是cite中的文本</cite><br />
<11>code:计算机代码,不保留代码格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体
请输入“<kbd>Esc</kbd>”推迟系统<br />
<13>sup:上标文本,sub:下标文本
x<sub>6</sub><br />
© © 空格
© © 空格 <br />
<14>u:下划线
<u>这是下划线</u><br />
mark:高亮或标记文本,浏览器显示为黄色背景
<mark>mark</mark><br />
二、html5常用标记及用法?
HTML5 新增结构元素分为主体结构元素和非主体结构元素
1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。
代码如下:
<article>
<header>
<h1>是我标签</h1>
</header>
<p>我是段落</p>
<article>
<div>我的内容</div>
</article>
</article>
section
section 标签,从语义化上看为部分,其用法如下:
用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。
注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。
代码如下:
<section>
<h1>水果</h1>
<article>
<h4>苹果</h4>
<div>苹果是撒?</div>
</article>
<article>
<h4>桔子</h4>
<div>桔子是撒?</div>
</article>
</section>
<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->
<article>
<h1>中国人物</h1>
<p>三国、两晋、南北朝</p>
<section>
<h4>三国</h4>
<p>猛将猛将猛将猛将</p>
</section>
<section>
<h4>两晋</h4>
<p>猛将猛将猛将猛将</p>
</section>
</article>
nav
nav 标签,从语义化上看为导航,其用法如下:
通常作为页面导航的链接组
侧边栏导航
使用频率高。
代码如下:
<nav>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</nav>
aside
aside 标签,从语义化上看为在旁边、侧边,其用法如下:
在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
代码如下:
<!-- 在article标签外使用时 -->
<article>
<h1>马云是谁</h1>
<p>马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人..........</p>
<aside>
<h1>参考资料</h1>
<p>百度网、维基百科...</p>
</aside>
</article></p> <p><!-- 在article标签内使用时 -->
<aside>
<nav>
<ul>
<li><a href="">老赵的博客</a></li>
<li><a href="">鬼哥的博客</a></li>
<li><a href="">彪叔的博客</a></li>
</ul>
</nav>
</aside>
time
time 标签,从语义化上看为时间,其用法如下:
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
代码如下:
<time datetime="2013-3-6">2014年3月6日</time>
<!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>
二、非主体结构元素
header
header 标签,从语义化上看为文档的页眉,其用法如下:
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。
代码如下:
<header>
<h1>我是大头</h1>
</header>
<article>
<header>
<h1>我是脖子</h1>
</header>
<p>我是身体</p>
</article>
hgroup
hgroup 标签,从语义化上看为标题组,其用法如下:
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
代码如下:
<article>
<header>
<hgrounp>
<h1>我是刘备</h1>
<h4>我是关羽</h4>
<h4>我是张飞</h4>
</hgrounp>
</header>
<p>吕布惊呆了</p>
</article>
footer
footer 标签,从语义化上看为文档的脚注,其用法如下:
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。
代码如下:
<article>
<p>吕布惊呆了</p>
<footer>
<ul>
<li>关于三国</li>
<li>地图信息</li>
<li>游戏攻略</li>
</ul>
</footer>
</article>
address
address 标签,从语义化上看为地址,其用法如下:
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
代码如下:
<address>
<a href="">作者:张三丰</a>
<a href="">地址:武当山</a>
<a href="">联系方式:1247</a>
</address>
三、isindex是html5中新增的标签吗
不是。
经博客园网查询isindex不是html5中新增的标签,HTML5为了SEO将div语义化了,新增加结构标签如下:section元素、article元素、aside元素等,新增标签中没有isindex。
HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
四、html5的语义化标签有哪些及其作用?
<header>
<header>元素描述了文档的头部区域
<nav>
标签定义导航链接的部分。
<section>
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<article>
<article> 标签定义独立的内容。
<aside>
<aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。
<figcaption>
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
<footer>
<footer> 元素描述了文档的底部区域.以上就是关于HTML5的结构标签相关问题的回答。希望能帮到你,如有更多相关问题,您也可以联系我们的客服进行咨询,客服也会为您讲解更多精彩的知识和内容。
推荐阅读: