初学网页结构 第二天

一、结构标签

布局标签（结构化标签） 用来布局的都是块元素

        header 网页的头部

        main 网页的主体部分

        footer 网页的低部

        nav 网页的导航

        aside 和主题相关的内容，侧边栏

        article 文章之类的

        section 独立的区块，上面的标签都不合适，就用这个

        用来代替div

二、行内与快元素

元素分类

        块元素（block element）用来布局

        特点：

        1.会独占一行

        2.默认情况下，块元素的宽度是视口的100%

        3.默认情况下，块元素的高度是被内容撑开的

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

       

        行内元素（inline element） 用来包裹文字

        特点：

        1.不会独一行

        2.宽高是被内容撑开的，内容有多宽它就有多宽

        常用行内元素 span、strong、em、del等

       

        行内块元素

        特点：

            兼具块元素和行内元素的特点

        常用行内块元素 img

        注意:

        1.块元素主要用来布局，里面可以放任何元素、块元素、行内元素、行内块元素

        2.行内元素主要用来包裹文字的，一般情况下不能放块元素

        3.p标签是个特殊的块元素，它里面不能放快元素

        4.a标签是个特殊的行内元素，它里面什么都能放

 三、列表

列表：如果页面中，出现结构、样式、功能等都比较雷同的部分就可以用列表

   

    列表（list）一组一组

        1.有序列表   用ol创建列表

        2.无序列表   用ul创建列表

              disc，默认值，实心的圆点

              square，实心的方块

              circle，空心的圆

        3.定义列表    用dl创建列表，dl表示定义，dt表示下定义，dd表示对定义的解释

        类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释

        注意：1.列表之间可以互相嵌套的，ul、ol、li都是快元素

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

               ol 它的项目符号：1、a、A、I等

               ul 它的项目符号：

                      disc，默认值，实心的圆

                      square，实心方块

                      circle，空心的圆

             3.默认样式，li前有项目符号，上下左右有间距

             4.最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序的区分

             5.ol、li

               ul、li

               dl、dt，dd

               都是配套使用的

 

 

四、超链接

 

超链接：可以是一个字，可以是一个块元素，可以是图片，可以是任何内容

        特殊的行内元素，可以包裹任何元素，除了它自己

        默认样式：字体有一定颜色，有下划线

        功能：1.从一个页面跳到另一个页面

              2.在当前页面跳转（楼梯导航/锚点功能）

              3.下载

        属性:

             href属性 指向跳转的地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对路径

             相对地址：它的地址值跟超链接的html文件位置相关

                      ./ 当前目录下跳转 ./可省略  默认是./

                      ../跳出当前目录，返回上一级目录

             target属性 指定超链接页面打开的方式

             可选值

                 _self   在当前页面打开超链接   一般情况下，默认值

                 _blank  新开页面打开超链接  一般情况下，国内常用具体用那种方式，根据项目需求来的

锚点功能实现

             去顶部    href属性值设置为#

             去任意的位置   先给要去的位置打个标记  id属性='id属性值'

                           在href里填写标记      href='#id属性值'

                注意：id属性值：你起的名字

                      不易数字开头

                      一般不用汉字

                      一般不能重复使用

补充：空链接的写法

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

          <a href="JavaScript:;">空链接2</a>

 

五、图片标签

 

六、图片格式 

 

七、音频

 

 八、作业展示

作业一

 

 作业二

 

 作业三

 

 作业四

 

 

 

 作业五

 

 明天继续努力！