·html知识点复习笔记day4

最新推荐文章于 2024-07-25 11:52:08 发布

涛008

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量96

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128140058

版权

1.网页的基本结构：

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
    
    </body>
</html>

2.HTML5的文档申明

<!doctype html>或<!DOCTYPE HTML>
<html>
    ···
</html>

3.学习手册

zeal.exe离线手册安装。或者W3school。

4.网页结构

<!--文档申明，申明网页版本-->
<!doctype html>

<!--<html>是网页的根元素，网页的内容都在其内部-->
<html>
    
    <!--head是网页的头部，内容用于辅助搜索引擎解析网页-->
    <head>
        
        <!--meta标签用来设置网页的元数据，例如设置字符集，避免乱码>
        <meta charset="utf-8">

        <!--title里额内容显示在浏览器的标题栏，浏览器会因此判断网页的主要内容-->
        <title>我是网页的标题</title>
    </head>

    <!--body是网页的子元素，是网页的主体，网页内所有的内容都写在body里-->
    <body>
        
        <!--h1~h6分别表示一到六级标题-->
        <h1>网页的大标题</h1>
    </body>
</html>

5.实体。

网页里需要书写特殊符号，需要使用html里的实体。

例：&实体的名字

&nbsp：空格；&gt：大于号；&lt：小于号；&copy：版权符号···

6.meta标签

charset指定网页的字符集

name指定的数据的名称

content指定的数据的内容

keywords表示网站的关键字，可以同时指定多个关键字，关键字使用,隔开

description用于指定网站的描述；网站的描述会显示在搜索引擎的搜索结果中。

http-equiv:将网页重新定向到另一个网页；

例：<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

7.语义化标签

标题标签h1~h6

·在页面中独占一行的元素称为块元素（block element）

· 行内元素：（inline element）在页面中不会独占一行的元素

`hgroup标签：为标题分组。

p标签：页面的一个段落（块元素）

em标签：表示加重语音语调（文字变斜体）

strong标签：表示强调。（字体加粗）

blockquote 表示一个长引用，块元素

q元素表示一个短引用，行内元素。

br标签表示页面中的换行

·块元素（block element）：在网页中一般通过块元素来对页面进行布局。

·行内元素（inline element）：行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，p元素中不能放任何块元素

8布局标签

header表示网页的头部

main表示网页的主体部分（一个页面中只有一个main）

footer表示网页的底部

nav表示网页中的导航

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

article表示一个独立的文章

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

div没有语义，表示一个区块，目前div 还是主要的布局元素。

span行内元素，没有任何的语义，一般用于网页中选中文字。

9列表

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

无序列表，使用ul标签来创建无序列表（常用）

定义列表，使用dl标签来创建定义列表

使用de来表示定义的内容

使用dd来对内容进行解释说明

列表之间可以互相嵌套

10超链接

<a href="http://www.baidu.com">超链接</a>
a标签来定义超链接， href指定跳转的目标路径。

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

target：用来指定超链接打开的位置

可选值：

_self 默认值，在当前页面中打开超链接

_blank 在一个新的页面中打开超链接

·可以直接将超链接的herf属性设置为#，这样点击超链接

以后页面不会发生跳转，而是转到当前页面的顶部位置

·跳转到页面指定位置：将herf属性设置#目标元素的id属性值

·id属性（唯一不重复的）

每一个标签都可以添加一个id属性

·id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

·开发中可以将#作为超链接的路径的占位符使用

·可以使用JavaScript:;来做herf的属性，此时点击这个超链接不会发生变

11图片标签

使用img标签来引入外部图片，自结束标签

·img属于替换元素（块和行内元素之间，具有两种元素的特点）

·src属性指定的是外部图片的路径（路径规则与超链接一样）

·width图片的宽度（单位是像素） ·height图片的高度

宽度和高度如果只修改一个，则另一个会等比例缩放

12内联框架

src指定要引入的网页的路径

frameborder的值为0或1.

0：引入页面无边框

1：引入页面有边框

音视频引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- audio标签用来向页面中引入一个外部的音频文件
            音视频文件引入时，默认情况下不允许用户控制播放停止
        属性：
            controls是否允许用户控制播放
            autoplay音频文件是否自动播放
                如果设置了autoplay，音乐再打开页面时会自动播放
                但大部分浏览器都不会自动播放
            loop音乐循环播放
        除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径
    -->
     <audio src="./source/See You Again-Soundtrack.mp3" controls autopla loop></audio>
     <!-- edge8不支持播放音乐可以文字提示升级 -->
     <audio controls>
        对不起！你的浏览器不支持播放音乐，请升级浏览器
        <source src="./source/See You Again-Soundtrack.mp3">
        <source src="./source/See You Again-Soundtrack.ogg">
    </audio>
    <!-- 也可以使用embad ，type使播放器稳定-->
    <audio controls>
        <source src="./source/See You Again-Soundtrack.mp3">
        <source src="./source/See You Again-Soundtrack.ogg">
        <embed src="./source/See You Again-Soundtrack.mp3" type="audio/MP3" width="300" height="100">
    </audio>
    <!-- 使用video标签来向网页中引入一个视屏，使用方式和audio基本一样-->
    <video controls>
        <source src="./source/a.webm">
        <source src="./source/a.mp4">
        <source src="./source/a.mp4"type="video/mp4">
    </video>
    <iframe src="https://www.bilibili.com/video/BV1fM411z7JG/?spm_id_from=333.1007.tianma.3-1-5.click" 
    frameborder="0" allowfullscreen="true" width="500" height="400"></iframe>
</body>
</html>