前言
这篇文章主要总结一下html相关的基础知识
提示：以下是本篇文章正文内容
1.实体
在页面中编写的多个空格会被浏览器解析为一个空格。
html中不能直接书写一些特殊符号，如：字母两侧的大于号和小于号，如果我们需要在页面中书写这些特殊符号，需要使用HTML中的实体，也就是转义字符。
实体的语法： &实体的名字
以下是一些常用的特殊符号：(空格) ； （大于） >；（小于）<；（版权号）©；
2.meta标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的数据集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间用,隔开
description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="HTML5,前端,CSS3">
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
将页面重定向到另一个网站 3;3秒后跳转
-->
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
<title>Document</title>
</head>
<body>
</body>
</html>
3.语义化标签
在网页中HTML专门用来负责网站的结构，所以在使用html标签时，应该关注的是标签的语义，而不是他的样式。
块元素：
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序列表
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
* li
行内元素：
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体（不推荐）
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码（在引用源码的时候需要）
* dfn - 定义字段
* em - 强调
* font - 字体设定（不推荐）
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线（不推荐）
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
<!--
块元素（block element）
-在网页中一般通过块元素对网页进行布局
总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
行内元素（inline element）也叫内联元素
-行内元素主要用来包裹文字
和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
注意：
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
通过display属性对行内元素和块级元素进行切换(主要看第2.3.4个值)：
-一般情况下会在块内放行内元素，而不会在行内元素中放块元素
-块元素中基本什么都能放
-p元素不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body意外的子元素
... ...
-->
<!--
布局标签（结构化语义标签）
-->
<!--
header 表示网页的头部
main 表示网页的主体部分（一个页面中只有一个main）
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用来在网页中选中文字
-->
<!--标题标签：h1~h6，一共有六级标题。标题标签是块元素(独占一行的元素)-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--标题组
hgroup标签用来为标题分组，可以将一组相关的标签同时放入到hgroup
-->
<hgroup>
<h1>静夜思</h1>
<h2>李白</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签表示语音语调的加重
在页面中不会独占一行的元素称为行内元素(inline element)
-->
<p>今天天气<em>真<em>不错</p>
<!--
strong表示强调，重要内容
-->
<p>你今天必须<strong>完成作业!</strong></p>
鲁迅说：
<!--
blockquote 表示一个长引用
-->
<blockquote>
balabala
</blockquote>
<!-- q表示一个短引用 -->
子曰<q>吾日三省吾身！</q>
<!--
br表示换行
-->
<br>
天冷了
4.列表
在html中一共有三种列表：①有序列表、②无序列表、③定义列表
有序列表：使用ol标签来创建有序列表，使用li表示列表项
无序列表：使用ul标签来创建无序列表，使用li表示列表项
定义列表：使用dl标签类创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明
列表之间可以相互嵌套
5.超链接
超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置。
使用标签a类定义：
href指定跳转的目标路径，值可以是一个外部网站的地址，也可以是一个内部网页的地址。
<a href="https://www.baidu.com">超链接</a>
target属性：用来指定超链接打开的位置
可选值：
-self 默认值，在当前网页打开超链接
-blank 在一个新的网页打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
<br></br>
<a href="#bottom">去底部</a>
<br></br>
<a href="#p3">去第三自然段</a>
<br></br>
可以直接将超链接的href设置为#，这样点击超链接后，页面不会发生跳转，而是转到当前页面的顶部位置。
可以跳到压面的指定位置，只需将href属性设置#目标元素的id属性值。
id属性唯一不重复：每一个标签都可以添加一个id属性，id属性是元素的唯一标识，同一个页面不可以出现重复的id属性。
<a id="p3" href="#">回到顶部</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p id="p3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
6.图片标签
图片标签用于向当前页面引入一个外部图片
使用img标签来引入外部的图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎识别
width 图片的宽度（单位是像素）
heigth 图片的高度
-如果高度和宽度只修改一个，另一个会等比例缩放
注意：
一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg（jpg）
-支持的颜色比较丰富，不支持透明的效果，不支持动图
-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明动图（专为网页而生）
webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有优点，而且文件还特别小
-缺点：兼容性不好
base64
-将图片使用base64进行编码，这样可以将图片转换为字符。通过字符的形式引入图片
-一般都是一些和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
<img src="./img/1.gif" alt="松鼠">
<img width="200" height="250" src="http://img.uuwtq.com/uploads/i_1_2639112736x779368623_27.jpg" alt="钢铁侠">
7.内联框架
内联框架：用于向当前页面引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
内联框架不会被搜索引擎检索
<iframe src="https:www.qq.com" width="800" height="600" frameborder="0"></iframe>
8.音视频
audio 标签用来向页面中引入一个外部的音频文件 （替换元素）
-音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
-如果设置了autoplay，则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频，请升级浏览器版本！ -->
<source src="source/audio.mp3">
<source src="source/audio.ogg">
<embed src="./source/audio.mp3" type="" width="500" height="300">
</audio>
video 标签用来向页面中引入一个外部的视频文件 （替换元素）
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" width="600" height="600" allowFullScreen="true"></iframe>
总结
以上是关于HTML的基础知识总结，如果有错误的地方，欢迎各位的指正！
8454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
