HTML总结

最新推荐文章于 2022-10-08 22:53:40 发布

Loery1314

最新推荐文章于 2022-10-08 22:53:40 发布

阅读量77

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/Loery1314/article/details/121375408

版权

tips

使用的编译器是VSCode

注释的快捷键是Ctrl+/

英文下打出!,再按下Tab键就会直接显示html完整的格式

转义字符

转义字符：

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符)。

        实体的语法：
                &实体的名字;

eg：
                  -----空格
                > -----大于号
                < -----小于号
                © -----版权符号

meta标签

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

- charset 指定网页的字符集
- name 指定的数据的名称
- content 指定的数据的内容
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
- description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中
- title标签的内容会作为搜索结果的超链接上的文字显示

meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞;

 <!--将页面重定向到另一个网站-->
 <meta http-equiv="refresh" content="3;url=https://www.baidu.com">

<!--
    说明：
        Refresh(刷新) ：自动刷新并指向新页面。
           其中的3是指停留3秒钟后自动刷新到URL网址。
-->

块元素

块元素：在页面中独占一行的元素称为块元素（block element）。
- 在网页中一般通过块元素来对页面进行布局

行内元素：在页面中不会独占一行的元素称为行内元素（inline element）。
- 行内元素主要用来包裹文字

注意：

        - 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
        - 块元素中基本上什么都能放
        - p元素中不能放任何的块元素

语义化标签

1.标题标签

h1~h6 一共有六级标题 --------------> 从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素

2.hgroup标签

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

<hgroup>
    <h1>回乡偶书（二首）</h1>
    <h2>其一</h2>
</hgroup>

3.p标签

p标签标示页面中的一个段落
p标签也是一个块元素

4.em标签

em标签用于表示语音语调的一个加重

<p>今天天气<em>真</em>不错！</p>

<!-- 结果就是真字加斜体 -->

5.strong标签

strong表示强调，重要内容！

<p>你今天必须要<strong>完成作业</strong>!</p>

<!-- 完成作业会加粗 -->

6.blockquote标签和q标签

blockquote 表示一个长引用
q表示一个短引用

7.br标签

br标签表示页面中的换行

布局标签（结构化语义标签）

header表示网页的头部
main表示网页的主体部分（一个页面中只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span行内元素，没有任何语义，一般用于在网页中选中文字

列表

在html中也可以创建列表，html列表一共有三种：
        1.有序列表
        2.无序列表
        3.定义列表

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

无序列表，使用ul标签来创建无序列表，使用li表示列表项；

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

注意：列表之间可以互相嵌套。

超链接

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

使用a标签来定义超链接
        属性：
                href 指定跳转的目标路径
                        - 值可以是一个外部网页的地址
                        - 也可以写一个内部网页的地址（也就是在同一目录下的网页）
                target属性，用来指定超链接打开的位置
                        可选值：
                                _self 默认值在当前页面中打开超链接
                                _blank 在一个新的页面中打开超链接
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

图片标签

图片标签用于向当前页面中引入一个外部图片。

使用img标签来引入外部图片，img标签是一个自结束标签。
img元素属于替换元素（块和行内元素之间，具有两种元素的特点）。
属性：
- src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

图片的格式：

jpeg（jpg）
         - 支持的颜色比较丰富，不支持透明效果，不支持动图
         - 一般用来显示照片

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

png
        - 支持的颜色丰富，支持复杂透明，不支持动图
        - 颜色丰富，复杂透明图片（专为网页而生）

webp
        - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
        - 它具备其他图片格式的所有优点，而且文件还特别小
        - 缺点：兼容性不好

base64
        - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
        - 一般都是一些需要和网页一起加载的图片才会使用base64

width 图片的宽度（单位是像素）
height 图片的高度
        - 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
        一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
        但是在移动端，经常需要对图片进行缩放（大图缩小）

内联框架

iframe标签
内联框架，用于向当前页面中引入一个其他页面
- src 指定要引入的网页的路径
- frameborder指定内敛框架的边框

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

音视频标签

audio标签用来向页面中引入一个外部的音频文件
        音视频文件引入时，默认情况下不允许用户自己控制播放停止

属性：
        controls是否允许用户控制播放（不用给值）
        autoplay音频文件是否自动播放
                - 如果设置了autoplay，则音乐在打开页面时会自动播放
                        但是目前来讲大部分浏览器都不会自动对音乐进行播放
        loop音乐是否循环播放

video标签用来向网页中引入一个视频
        - 使用方式和audio基本上是一样的

<!-- 引入音频 -->
<audio src="./source/Bloom of Youth.mp3" controls loop></audio>

<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径-->
<audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/Bloom of Youth.mp3">
</audio>

<!-- 引入视频 -->
<video src="./source/正片.mp4"></video>


<!-- <embed src="" type="">可以引入音视频 -->
<embed src="./source/Bloom of Youth.mp3" type="audio/mp3" width="800" height="100">
<embed src="./source/正片.mp4" type="video/mp4">

相对路径

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用.或..开头。如：./、../
./可以省略不写，如果不写./也不写../则就相当于写了./
./表示当前文件所在的目录
../表示当前文件所在目录的上一级目录

HTML整体框架解读

<!-- 文档声明：声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写在根元素的里面 -->
<html>
    <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
	<head>
	
		<!--- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>

	</head>

	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
	<body>

		<!-- h1网页的一级标题 -->
		<h1>网页的大标题</h1>

	</body>

</html>