HTML5学习笔记

never_.

已于 2023-09-24 15:54:31 修改

阅读量259

点赞数

文章标签： html 前端

于 2023-09-24 15:47:22 首次发布

本文链接：https://blog.csdn.net/m0_75168728/article/details/133240815

版权

一、概念

超文本标记语言，负责网页的三个要素之中的结构，超文本超链接

二、结构

<!--文档声明，声明当前网页的版本-->

<!doctype html>

<!---html的根标签-->

<html>

      <!--网页的头部，用来帮助浏览或搜索引擎解析网页-->

<head>

      <!--meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题-->

      <meta charset=”utf-8”>

      <!--title中的内容会显示在浏览器的标题栏，搜索引擎主要根据其内容来判断网页的主要内容-->

     <title>网页标题</title>

</head>

<!--网页主体，网页所有可见部分均写在body-->

  <body>

         <!--一级标题-->

         <h1>大标题</h1>

         <h2></h2>

          <p></p>

  </body>

</html>

<img>,<input>均为自结束标签

注释：，注释不可嵌套

三、标签

1.front

表示字体，设置属性，在开始标签或自结束标签中设置，属性是一个名值对，标签与属性之间、属性与属性之间用空格隔开，属性值应该用引号引起来

eg.将xxx设置成红色，并设置字体大小

<font color=”red” size=’5’>xxx</font>

2.meta

主要用于设置网页中的一些元数据，元数据不是给用户看

属性：

（1）charset

指定网页的字符集

（2）name

指定数据的名称

（3）content

指定数据的内容

（4）keywords

表示网站的关键字，可以同时指定多个关键字，关键字之间用逗号隔开

eg.

<meta name=”keywords” content=”购物”,”网上商城”>

这里表示京东的关键字有购物和网上商城，搜索购物或网上商城会出现京东

（5）decription

指定网站的描述，会出现在搜索引擎的搜索结果中

eg.

（6）http-equip

将页面重新定向到另一个网页

格式：

表示n秒后跳转至指定网站

3.title

标签的内容会作为搜索结果的超链接上的文字显示

eg.

四、文档声明

<!doctype html>，在<html>之上，声明当前网页的版本

五、语义化标签

在使用html标签时，应该关注的是标签的语义，而不是样式

1.标题标签

h1~h6一共有六级标题，从h1到h6重要性主键递减，h1在网页的重要性仅次于title标签，一般情况下，一个页面只会有一个h1标签,一般情况下只会用到h1~h3

2.hgoup标签

用来为标题分组，可以将一组相关的标题同时放入到hgroup

3.p标签

表示页面的一个段落

4.em标签

用于表示语音的一个加重

5.strong标签

表示强调，重要内容

6.blockquote标签

表示一个常引用，属于块元素

7.quote标签

表示一个短引用，属于行内元素

8.br标签

表示换行，没有结束标签

9.header标签

网页的头部

10.main标签

表示网页的主体，一个页面中只会有一个main

11.footer标签

网页的底部

12.nav标签

表示网页的导航

13.aside标签

表示和主体相关的其他内容（侧边栏）

14.article标签

表示独立的文章

15.section标签

表示一个独立的区块，上边的标签都不能表示时，使用section

16.div标签

没有语义，用来表示一个区块，主要的布局元素

17.span标签

行内元素，无语义，一般用于在网页中选中文字

六、元素分类

1.行内元素

在页面中不会独占一行元素称为行内元素，在网页中一般通过块元素对页面进行布局，如em标签，strong标签

2.块元素

在页面中独占一行的元素称为块元素，主要用来包裹文字，如标题标签h1~h6，p标签

注意：

一般会在块元素内放行内元素，而不会在行内元素中放块元素

块元素中基本什么都能放，但p标签中，不能放任何块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

比如:p元素中嵌套了块元素，标签写在了根元素的外部等

七、实体

在网页中编写多个空格，默认情况会指定被浏览器解析为一个空格

<b>表示加粗

如果要在网页中写一些特殊符号，则需要使用html中的实体（转义字符）

实体语法：

&实体名字;（可查询W3School网站）

eg.   代表一个空格

> 代表大于号

< 代表小于号

© 版权符号

八、列表

1.有序列表

使用ol标签来创建有序列表，使用li表示列表项

eg.

<body>
    <ol>
        <li> 结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
</body>

结果如图：

2.无序列表

使用ul标签来创建无序列表

eg.

<body>
    <ul>
        <li> 结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>
</body>

结果如下：

3.定义列表

使用dl标签来创建定义列表，用dt来表示定义的内容，用dd对内容进行解释说明

eg.

<body>
    <dl>
        <dt>结构</dt>

        <dd>结构表示网页的结构，用来规定哪里是标题，哪里是段落</dd>
    </dl>

</body>

结果如下：

列表之间可以相互嵌套

eg.

<body>
<ul>
    <li>
        aa
        <ul>
            <li>bb</li>
        <li>
            cc
        </li>
        </ul>
    </li>
</ul>
</body>

结果如下：

九、超链接

1.概念

超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置

使用a标签来定义超链接，a标签是一个行内元素，可以嵌套除它自身外的任何元素，可以使用br换行

2.属性

（1）href

指定跳转的目标路径，它的值可以是一个外部网站的地址（例子中的百度），它使用绝对路径

也可以是内部页面的地址（例子中的01.html），一般使用相对路径，相对路径都会使用.或..开头，即./或../

./表示当前文件所在的目录，如下示例中，./表示code目录，即名为01.html所在的目录

../表示当前文件所在的上一级目录

../../当前所在文件的上两级目录，以此类推

若没写，默认为写了./，即例子中01.html与./01.html等效，因为他们在同一目录

eg.
<body>
    <a href="https://www.baidu.com">百度</a>
    <br><br><br>
    <a href="01.html">跳转页面</a>
</body>
注：紫颜色的链接默认为访问过的地址

蓝色为未访问过的地址

（2）target

指定超链接打开的位置，有两个值：

_self：默认值，表示在当前标签打开超链接

_blank：在一个新标签中打开超链接

eg.

<a href="https://www.baidu.com" target="_blank">百度</a>

（3）跳转至当前页面的顶部

将href属性设置成#，这样页面不会发生跳转，而是转到当前页面的顶部

eg.<a href=”#”>回到顶部</a>

（4）跳转至页面的底部

要跳转至页面底部，跳转至最后一个标签即可，为此添加id属性（唯一不重复，以字母开头，且区分大小写），作为元素的唯一标识，这样，可以跳转到页面的任意指定位置，语法为：

eg.<body>

<a href=”#bottem”>去底部</a>

.

.

.

<a id=”bottem” href=”#”>回到顶部</a>

</body>

（5）设置无效超链接

当我们还没想好超链接的地址时，可以设置无效超链接先占个位置，但点击超链接，什么也不会发生

语法：

<a href=”javascript:;”>无效超链接</a>

十、图片标签

图片标签相当于向当前页面引入一个外部图片，使用<img>标签来引入外部图片，img标签是一个自结束标签，属于替换元素（基于块元素与行内元素之间）

1.src属性

指定图片的路径

eg.引入内部图片

<img src="./前端\图片/img1.jpg" >

2.alt属性

图片的描述，默认情况下不显示，有些浏览器会在图片无法加出来时显示

搜索引擎会根据alt来识别图片,如果不写alt属性，图片不会被搜索引擎搜索出来

<img src="./前端\图片/img1.jpg" alt="风景">

3.尺寸

单位是像素

（1）width

图片的宽度

（2）heigth

图片的高度

若只对其中一个属性进行修改，则另一个会成比例缩放

eg.

<img width="200" src="./前端\图片/img1.jpg" alt="风景">

注：一般在PC端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）

4.格式

jpeg(jpg)：支持的颜色比较丰富，不支持透明效果和动图

一般用来显示照片

gif：支持的颜色比较少，支持简单透明，支持动图

颜色单一的图片，动图

png：支持的颜色丰富，支持复杂透明，不支持动图

颜色丰富，复杂透明度图片（专为网页而生）

webp：谷歌新推出的专门用来表示网页中的图片的一种格式

它具备其他图片的所有优点，而且文件大小特别小

但是兼容性不好

·图片使用原则:

效果一样，用小的（大小）

效果不一样，用好的

5.base64

将图片使用base64进行编码，这样可以将图片转换成字符，通过字符的形式来导入图片

一般是一些需要和网页一起加载的图片才会使用base64

（一般情况是，网页先加载好，再加载图片，而base64是与网页一起加载，即网页加载完毕，图片也加载完毕）

十一、内联框架

用于向当前页面中引入一个其他网站页面

使用标签<ifram></ifram>

1.属性

（1）src

指定要引入网页的路径

（2）frameborder

指定内联框架的边框，为0时没有边框，为1时有边框

<iframe src="https://www.bilibili.com" width="800" height="600" frameborder="0"></iframe>

十二、音视频

1.音频

（1）使用audio标签向页面引入外部的音频文件

1）属性：

①src属性

指定音频的路径

②controls属性

是否允许用户控制播放，有该属性就可以控制，没有该属性则不能控制

引入音频文件时，默认情况下不允许用户自己控制播放停止，如eg2

        eg1.有controls属性

        <audio src="./source/音频.MP3" controls></audio>

eg2.没有controls属性

<audio src="./source/音频.MP3" ></audio>

此情况下，页面什么也没有

③autoplay属性

音频文件是否自动播放，有该属性则在打开页面时自动播放音乐。但是目前大多数浏览器不会自动对音乐进行播放

<audio src="./source/音频.MP3" controls autoplay></audio>

④loop属性

音频文件是否循环播放

<audio src="./source/音频.MP3" controls autoplay loop></audio>

⑤source属性

除了src可以指定外部文件的路径外，source也可以指定文件路径

由于有些低版本浏览器对audio无法接兼容，导致音频无法播放，页面没有音频信息，为了给用户进行提示，可以采用以下的格式对音频进行播放：

对不起，您的浏览器不支持播放音频，请升级浏览器

</audio>

若浏览器支持播放，则只会出现音频，若不支持，则只会出现文字提示

此外，对于极少数浏览器，它们不支持mp3格式的音频，只支持ogg格式，所以可以进行如下改进：

对不起，您的浏览器不支持播放音频，请升级浏览器

</audio>

这两个音频不会同时使用，一般情况会优先使用第一种格式，如果第一种可以使用，则使用第一种；不能使用第一种，则使用第二种；如果都不能使用，则会出现上述文字提示

（2）使用embed标签导入外部音频

该标签为自动播放音频文件

属性：

type:指定类型

前面是指定大方向的类型，即文件为音频、视频还是图片

后面是具体格式

2.视频

（1）使用video标签向网页中引入视频

其他与音频是格式基本一样

</video>

（2）使用iframe引入外部视频

在视频的分享处，直接复制视频的通用代码即可

never_.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫