2020-11-27

artificial_smile

于 2020-11-28 00:27:35 发布

阅读量90

点赞数

分类专栏：前端html5

本文链接：https://blog.csdn.net/artificial_smile/article/details/110250489

版权

前端html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html5的学习

在网页中html是负责网页的结构的

1、语义化标签的学习：

a.标题标签有六级h1-h6，重要程度最高的是h1依次降低，重要性仅次于title标签，一般情况下一个网页只有一个h1标签

b.在页面中，独占一行的元素叫块元素（block element）如：p ,h 等

c.在页面中不会独占一行的元素叫行内元素（inline element）

d. em标签表示语音语调的加重（读音，语气），行内元素

e.strong标签表示强调重要的内容，行内元素

f. q 标签表示短句的引用，是行内元素

g.blockquote表示长句的引用，是个块元素

h.块元素：一般在网页中通过块元素来进行布局，行内元素：主要用来包裹文字，一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，块元素基本上什么都能放，p元素中不能放任何块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
<body>
   <p>布局标签（结构化语义标签）</p>
   <p>header:表示网页的头部</p>
   <p>main:表示网页的主体部分（一个网页中只会有一个main）</p>
   <p>footer:表示网页的底部</p>
   <p>nav:表示网页中的导航</p>
   <p>aside：表示和主体相关的其他内容（侧边栏）</p>
   <p>article:表示一个独立的文章</p>
   <p>section：表示一个独立的区块，上边的标签都不能使用时使用section</p>
   <p>div:没有任何的语义，就表示一个区块，目前来讲div还是我们主要的布局元素</p>
   <p>span:行内元素，没有任何语义，一般用于在网页中选中文字</p>


   <div style='color:red'> 
   <p>试试咯 </p>
   </div>

   <div class="news">
    <h2>News headline 1</h2>
    <p>some text. some text. some text...</p>
    ...
   </div>
  
   <div class="news">
    <h2>News headline 2</h2>
    <p>some text. some text. some text...</p>
    ...
   </div
</body>
</html>

2、列表的学习

有序列表ol li标签表示列表里的项
无序列表ul
自定义列表dl：dt定义，dd用来说明；

列表之间是可以相互嵌套的

3、超链接的学习

a标签的使用；target属性 _blank在另外的网页中打开

<a href="https:www.baidu.com" target="_blank">绝对路径，跳转到相应的网页</a>
<a href="../文件名/xxx.html" target="_self">相对路径，链接到本地的网页</a>

如果想在网页中跳到指定位置，用到 id，id 的命名一般都是以字母开头的，不要以数字开头

<a href="#bottom">回到底部</a>

<!--下面这个是可以直接回到顶部的，也是占位的一种表示 -->
<a href="#">这是个新的超链接</a>
<a href="#javascript:;">在开发中经常这样写，点击它是没有任何反应的，只是占个位</a>

<a id=bottom href="#">回到顶部</a>

4、图片标签的学习 img

<img src="./img/草莓.jpg" alt="草莓">
    <br>
<!-- 
    scr指定路径（和超链接规则一样）
    alt表示描述，有的浏览器网页无法加载图片时显示，搜索引擎也会根据alt的内容识别图片

-->
   <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606475778017&di=6e5086a17ceaec7a81cc10df2473bfa8&imgtype=0&src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0405%2Fdd45cd61g00q8b1nl005pd200dw005zg00dw005z.gif" >
   <br>

图片的的格式：
       jpeg(jpg)
            -支持的颜色比较丰富，不支持透明效果，不支持动图
            -一般用来显示照片
        git
            -支持的颜色较少，支持简单透明，支持动图
            -颜色单一的图片，动图
        png
            -支持的颜色丰富，支持复杂透明，不支持动图
            -颜色丰富，复杂透明图片（专为网页而生）
        webp
            -这种格式是谷歌推出的专门用来表示网页中图片的一种格式
            -它具备其他格式的所有优点，而且文件还特别小
            -缺点：兼容性不好
        base64
            -将图片使用base64编码，这样可将图片转换成字符，通过字符的形式来引入图片
            -一般都是一些需要和网页一起加载的图片才会使用base64
            -可以百度搜索base64图片在线转换，就可以得到代码了
        效果一样，用小的
        效果不一样，用效果好的

5、内联框架 iframe

<!-- 
        内联框架，用于在一个页面中引入一个其他页面
        scr 指定引入页面的路径
        frameborder指定内联框架的边框
     -->
    <iframe src="https://www.baidu.com" width="600" height="1000" frameborder="0"></iframe>

6、音频视频的引入

audio标签以及video标签，用到controls属性控制播放，用到autoplay属性自动播放，不过现在一般没用，用到loop属性来控制循环播放。

不过会存在兼容性的问题，不同版本的浏览器会出现不同的情况

<audio src="./source/11.mp3" controls autoplay loop></audio>

<video src="./source/12.mp4" controls></video>

<!-- 考虑到兼容性的问题，可以用source来，embed元素可以用来针对IE不兼容的-->
  <audio controls loop>
        对不起你的浏览器版本太低了，不支持播放音频
        <source src="./source/11.mp3">
        <embed src="./source/11.mp3" type="audio/mp3" width="100" height="200">

    </audio>

<video controls>
        <source src="./source/12.mp4">
        <embed src="./source/12.mp4" type="video/mp4">

    </video><br>
    <!-- 使用外部网站的视频，直接复制通用代码粘贴过来就可以了 -->
    <iframe  width="500" height="300" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t32073k0nis" allowFullScreen="true"></iframe>