本文主要是介绍HTML学习:语义化标签,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
语义化标签:
<!--
在网页中HTML专门用来负责网页的结构
所以在使用HTML标签时,应该关注的是标签的语义,而不是样式
标题标签;
h1~h6 一共有六级标题
从h1~和h6重要性递减,h1最重要,h6最不重要
h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
一般只会用到h1~h3,h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素
-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- hgroup :标题组 -->
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<!--
p标签表示页面中的一个段落
-->
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素(inline element)
-->
<p>今天天气<em>真</em>不错</p>
<!--
strong表示强调,重要内容!
-->
<p>你今天必须要<strong>完成作业</strong></p>
鲁迅说:
<!-- blockquote 表示一个长引用 -->
<blockquote>
这句话我从来没有说过的!
</blockquote>
<!-- q 表示一个短引用 -->
子曰<q>学而时习之,乐呵乐呵!</q>
<!-- br 表示换行标签 -->
<br>
<br>
今天天气真不错
块元素与行内元素:
块元素( black element)
-在网页中一般通过块元素来对页面进行布局
行内元素(inline element)
-行内元素主要用来包裹文字
-一般情况下会在块元素中放行内元素
而不会在行内元素中放块元素
-p元素中不能方任何的块元素
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如:
标签写在根元素的外部
p元素中嵌套了块元素
根元素出现了除head和body以外的子元素
... ...
图示:
自己写的:
网页显示的:
布局标签:结构语义化标签
<!--
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
-->
<header>我是你爸爸</header>
<main>你爸爸是我</main>
<footer>我还是你爸爸</footer>
<nav>我是你爸爸</ nav>
<aside>我是你爸爸</aside>
<article>我还是你爸爸</article>
<section></section>
<div>我是你爷爷</div>
<span>我还是你爷爷</span>
列表:
<!--
列表(list)
1,铅笔
2,尺子
3,橡皮
在html中也可以创建列表,html列表一共有三种;
1.有序列表
2.无序列表
3.定义列表
无序列表,使用u1标签来创建有序列表
使用li表示列表项
有序列表,使用o1标签来创建有序列表
使用li表示列表项
定义列表,使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以嵌互相套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中那里是标题,那里是段落</dd>
</dl>
超链接:
<!--
超链接可以让我呢吧从一个页面跳转到其他页面,
或者是当前页面的其他位置
使用 a 标签来定义超链接
属性:
href 指定跳转的目标路径
-可以是一个外部的网站的地址
-也可以写一个内部页面的地址
超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
-->
<a href="http://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="http://www.baidu123.com">超链接</a> -->
<a href="">超链接2</a>
相对路径:
<!--
当我们需要跳转到一个服务器内部的页面时,一般我们都会使用相对路径
相对路径都会使用.或..开头
./
../
./可以省略不写,如果不写./也不写../则就相当于写了./
./ 表示当前文件所在的目录
-在我们这里当前页面就是 超链接
-./就等于 超链接所在目录 柯南的HTML
../表示当前文件所在目录的上一级目录
-->
这篇关于HTML学习:语义化标签的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!