HTML的标签,列表及超链接

一.常用标签

二.结构标签

1.header标签

header标签内主要写网页的头部代码

2.main标签

main标签内主要写网页的主体部分（一般一个页面就只有一个main标签）代码

3.footer标签

footer标签主要写网页的底部代码

4.nav标签

nav标签内些网页的导航栏代码

5.aside标签

aside标签主体相关的内容和侧边栏的代码

6.article标签

文章之类的信息

7.section标签

独立的区块，上面的标签都不合适，就用这个  ,也是没有任何语义， 一般用来代替div.

8.div标签

div 块元素

三.行内元素与块元素

元素会区分

块元素（block element） 常用来布局

特点：1、块元素会独占一行,而且从上往下依次排列

           2、块元素的宽度默认是父元素的100%

           3、块元素的高度默认是被内容撑开的

          常用块元素：div h1-h6  p  header  footer  nav  ·····

行内元素（inline element）

特点：1、行内元素不会独占一行,它是自左向右排列，一行排满，再另起一行，继续从左向右

           2、行内元素的宽和高都是被内容撑开的

          常用行内元素：span  em  strong  a  i  ·····

        行内块元素

特点：1.兼具块元素和行内元素的特点

           2. 不会独占一行、可自定义宽高

          常用行内块元素：img

四.列表 

 1列表的分类

①有序列表  用ol创建，li表示列表项

②无序列表   用ul创建  li表示列表项              

③定义列表   用dl创建，dt下定义  dd解释定义

2.列表的样式

有序列表、无序列表

默认样式：左边有间距，有项目符号

3.列表符号修改

使用type属性可以更改项目符号

有序列表 1,a,A,i,I

无序列表：disc，默认值，实心的圆点

                  square，实心的方块

                  circle，空心的圆

五.超链接

超链接特点

1.它是行内元素，特殊行内元素，

2.它里面什么都能放可以是一个字，可以是一段文字，可以是一张图片，可以是表格等等

超链接的功能:

1、从一个页面跳到另一个页面

2、当前页面进行跳转(锚点功能)

 3、下载

超链接的属性

1、href属性填写超链接跳转的地址

<a herf="#">

 2、target属性   控制超链接打开的方式

① _self    在当前页面打开跳转的超链接,未设置时默认为_self

② _blank   新开页面打开超链接

3.锚点功能

①回到顶部

将href的属性值设置 # 即可

2、去任意的位置

①在想去的位置打一个标记,即给一个ID属性

<p id="center">

②在herf属性中herf="#+id"

 <a href="#center"></a>  

注意:

id的属性值不能是数字开头,最好不要是汉字，是独一无二的存在

   空链接

          <a href="#">空链接</a>

          <a href="javascript:;">空链接2</a>  推荐使用

六.图片标签

代码:<img src="" alt="" width="" height="">

语义：使用img标签来向网页中引入外部图片

4个属性

       src属性:图片路径

      alt属性:描述图片信息,在图片无法显示时显示文字信息

      width属性:设置图片的宽度

      height属性:设置图片的高度