学习分享html {2}
发布日期:2024-02-05 23:45:42 浏览次数:108 分类:技术文章

本文共 3241 字,大约阅读时间需要 10 分钟。

学习目标:

1:常用的语义标签,明白语义是什么?至少记忆6-8个

2:熟悉有序列表,无序列表,定义列表的用法

3:行内元素与块元素的基本区别,并各举三个常用的块,行内元素

4:a标签的属性有哪些, 其中target属性,有哪些属性值,能达到什么效果

   a标签的路径问题,./和../

5:img标签的常用属性有哪些

6:常用的图片格式,简单知道各自的优势在哪里

7:音视频标签及常用属性

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>Document</title>

  </head>

  <body>

    <!-- html 搭建网页的结构

     大部分的网站  头部 主体  底部  导航  文章等等

    -->

<!-- html5  新增的标签,语义化更强 网站的性能也会更好-->

    <!-- 布局标签(结构化标签) 用来布局的标签都是块元素

    header  网页的头部

    main  网页的主体部分(一般就一个)

    footer 网页的底部

    nav  网页的导航

    aside  和主体相关的内容,侧边栏

    article  文章之类的

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

        用来代替div

-->

  <header></header>

  <main></main>

  <footer></footer>

  <nav></nav>

  <aside></aside>

  <article></article>

  <section></section>

 

  <div></div>

  <div></div>

  <div></div>

  </body>

</html>

      元素分类

        块元素(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创建列表,li表示列表项

            2:无序列表   用ul创建列表,li表示列表项

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

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

    注意:1、 列表之间是可以互相嵌套的,ul,ol,li是块元素

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

              ol 它的项目符号:1、a、A、I 等,默认项目符号是‘1’

              ul  它的项目符号:

                    disc,默认值,实心的圆点

                    square,实心的方块

                    circle,空心的圆

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

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

         5、ol,li

            ul,li

            dl,dt,dd

            都是配套使用,就像cp

    -->

    <!--

    不要混合使用  

    <div>

      <div></div>

      <li></li>

    </div>

    <ol>

      <p></p>

      <p></p>

    </ol> -->

    <!-- html  超文本语言 -->

    <!--超链接: 2个功能,2个属性,1个补充-->

    <!--

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

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

          默认样式:字体有一定颜色,有下划线

     功能: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>

有关的代码实现如下

示例:

    
Document

歌曲推荐


光字片

周深
去第二张照片

当阳光亮堂堂

照在院子里

照在旧瓦片上

照在旧屋脊

总有一些小麻雀

在院子里蹦跳又逃去

炒菜的香味 在脑海里

当冬天第一场雪花又飘起

自行车的铃声和嘴角的哈气

在这下雪的胡同里

曾经一串串脚印

人世间1

那是红围巾和你

冷风吹过 早晨雾起昨夜想到你

那是一起走过街道 树林和田野

还剩下多少

没有忘掉 不变的风景

人世间里 找到你

当微风吹过后墙上的野花

吹过木栅栏和头上的发夹

远处孩子放学回家

叽叽又喳喳

处处是炊烟

想起妈妈

冷风吹过 早晨雾起昨夜想到你

那是一起走过森林 土地和田野

还剩下多少

没有忘掉

人世间2

不变的风景

人世间里找到你

冷风吹过 早晨雾起昨夜想到你

那是一起走过街道 树林和田野

还剩下多少

没有忘掉

不变的风景

人世间里找到你

还剩下多少没忘掉


友情链接 A网站|B网站|C网站

回到顶部|联系我们

 

今天就学了这么多谢谢大家 

 

转载地址:https://blog.csdn.net/qq_18219159/article/details/127910332 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:学习分享之旅启程!
下一篇:学习分享:STM32F103开发板按键控制LED灯

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年07月18日 01时53分20秒