常用标签
标题标签:h1~h6
从样式上看是逐渐变小的,语意的重要性也是逐渐降低的。
注:h1标签非常重要,一般情况,一个html文件,只有一个h1
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
效果如下:
标题分组标签 :hgroup标签
用来将一组相关的标题放在一起。
<hgroup>
<h1>古诗一首</h1>
<h3>其一</h3>
</hgroup>
段落标签:p标签
<p></p>用于表示内容的一个自然段。
<p>我是P标签</p>
<p>我是P标签</p>
<p>我是P标签</p>
p标签里内容默认情况会独占一行,段与段之间有一个间距,它是块元素。
em标签
用来告诉浏览器把其中的文本表示为强调的内容。
<em>我是em标签</em>
strong标签
强调标签,对内容的强调,也会使文本加粗。
<strong>我是strong标签</strong>
br换行标签
可以使文本换行
<p>自畴彷着丰二,定感有太上自打话当揽别龄,不四未普皇许慧程<br>订守的杨自仆能世,松曰和处,骨汪妄夭区,的。</p>
p元素中的文本原来是在一行显示的,中间加入<br>标签后,文本会强制换行
hr标签
在页面中生成一条水平线
<p>在救清百上死,他下。</p>
<hr>
del标签
表示一个删除的内容,会自动添加删除线。
<del>归以招今</del>
结构标签
它是构建一个网页基本结构的主要元素,可分为一下几个部分:
header 网页的头部
main 网页主体内容
footer 网页的底部
nav 网页的导航部分
aside 和主体相关的内容,侧边栏
article 文章,宣传段落之类
section 独立的区块,如果上面的标签都不合适,就可用
div 没有语义 就是表示一个区块
span 行内元素,用于在网页中包裹文字
<header>头部</header>
<main>主体
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>内容</article>
<section>独立区块</section>
</main>
<footer>底部</footer>
列表标签
1.有序列表
ol,li
有序的序号作为项目的符号,type 属性 可以更改序号(默认值:阿拉伯数字,1 2 3;还可改为字母表示)
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
<ol type="A">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
2.无序列表
ul,li
顾名思义就是没有顺序的列表,
type属性
disc 实心圆 默认值
circle 空心圆
square 实心方块
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<ul type="circle">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
超链接标签:a标签
功能:
1:从一个页面跳到另一个页面
2:在当前页面进行跳转
特点:是一个行内元素,但我们可以在超链接中除自身外放任何元素
属性:
href
指向的是链接跳转的目标地址
-属性值可以是一个外部的网站的地址 绝对路径
-属性值还可以是内部的地址 相对路径
target
用来指定打开链接的位置
可选值:
_self ,表示在当前窗口中打开(默认值) 一般情况下在国外网站用的更多
_blank 在一个新的页面中打开链接 一般国内更多
<a href="需要跳转的目标地址" target="_blank"></a>
相对路径跳转规则:
使用./ 或者 ../ 来进行相对路径的选择
./ 当前文件所在的目录 ,浏览器默认的,可以省略
../ 跳出当前文件
<a href="../跳出当前文件后选择你所需要的文件"></a>
块元素和行内元素
块元素
在网页中一般通过块元素对页面进行布局
特点:会独占一行,无论他的内容多少
举例:p h1-h6 div ul li ····
行内元素(内联元素)
一般用来包裹文字
特点:只占自身的大小,不会独占一行
举例:em strong a span·····
注意:
1:一般情况下,会在块元素内放行内元素,不会在行内元素内放块元素
2:块元素里,基本什么都可以放
3:特殊:p元素里不能放块元素