本文详细介绍了HTML的基础知识，包括标签的使用、属性设置、文档结构等内容，并深入探讨了块元素、行内元素的区别及列表、超链接等常见元素的应用。
一、HTML的简介
HTML（Hypertext Markup Language）：超文本标记语言
负责网页的结构
Hmtl使用标签的形式来标识网页中的不同组成部分。
超文本指的是超链接使用超链接可以让我们从一个网页跳转到另一个页面。
二、标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>文本内容</p>
<html>
<head>
<title></title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p> </p>
</body>
</html>
三、自结束标签和注释
1.自结束标签
只有一个开始标签没有结束标签，开始标签后面加一个/
2.注释
HTML的注释不同于C，C++，Java。HTML的注释由表示，注释中的内容会被浏览器所忽略，不会在网
页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明。
开发中一定要养成良好的编写注释的习惯，注释要求简单明了。
注释还可以将一些不希望显示的内容隐藏。
注释不能嵌套 既是单行注释，又是多行注释。html中没有分别。
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>文本内容</p>
<html>
<head>
<title></title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p> </p>
</body>
</html>
<img>
<img />
<input>
<input />
<!--HTML的注释-->快捷键：ctrl+？
四、标签中的属性
在标签（开始标签或自结束标签）中还可以设置属性
属性是一个"名值对"结构
属性和标签名或其他属性应该使用空格隔开
属性名不能瞎写， 需要根据文档中的规定来编写
有些属性有属性值，有些没有属性值
五、网页的基本结构
HTML中不区分
1.文档声明（doctype）
文档声明用来告诉浏览器当前网页的版本
doctype不区分大小写。
2.进制
十进制 0-9
二进制 0-1
八进制 0-7
十六进制0-ABCDE
8bit = 1 byte（字节) 1024b = 1kb（千字节） 1024kb = 1mb(兆字节) 1024mb = 1gb（吉字节）
1024gb =1tb（特字节） 1024tb =1pb
3.字符编码
所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
一段文字在存储到内存中时，都需要转换为二进制编码。
当我们读取这段文字的时候，计算机会将编码转换为字符，供我们阅读。
字符—>数字—>字符
（1）编码
将字符转换为二进制编码的过程称为编码。
<!--HTML5的文档说明 -->
<!DOCTYPE html>
（2）解码
将二进制编码转换为字符的过程称为解码。
（3）字符集
编码和解码所采用的规则称为字符集。
（4）乱码问题
如果编码和解码所采用的字符集不同就会出现乱码问题。
（5）常见的字符集
ASCII 7位 美国
ISO88591 8位 欧洲
GB2312 中国
GBK 中国 GB2312的扩充版
UTF-8 万国码 包含了世界上所有的语言，符号
4.文档的使用
（1）html的根标签 网页中所有的内容都要写在根目录的里边。
（2）head是网页的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或者搜索引擎解
析网页。
（3）meta标签用来设置网页的元数据。
（4）title中的额内容会显示在浏览器的标题栏，搜索引擎会根据title中的内容来判断网页的主要内容。
<head>
<meta charset="UTF-8">
</head>
<html>`
<head>
<!--这里meta用来设置网页的字符集，避免乱码问题-->
<meta charset = "UTF-8">
<titile> </titile>
</head>
<body>
</body>
</html>
<html>
</html>
（5）body是html的子元素，表示网页的主体，网页中所有可见内容都应该在body里面。
六、实体
在网页中编写的多个代码默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊的符号。
比如：多个连续的空格，字母两侧的大于（＞）和小于（＜）
当我们需要在网页中书写这些特殊的符号的时候，则需要使用html的中的实体（转义字符）
实体的语法：
&实体的名字；
； =======空格
> =========大于＞
< ==========小于<
七、语义化标签
在使用html标签的时候，应该关注的是标签的语义，而不是他的样式。
1、标题标签
标题标签都是块元素
h1~h6 一共6级标题
重要性主机递减
h1在网页中的重要性仅次于title标签
h1~h3比较常用 h4~h6很少用
块元素（block element）：在页面中独占一行的元素
2、p标签
p标签表示页面中的一个段落
P标签里面的内容也是一个块元素
3、hgroup标签
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中
<h1></h1> <h4></h4>
<h2></h2> <h5></h5>
<h3></h3> <h6></h6>这句话我是从来没说过的
4、em标签
用于表示语音语调的加重
5、strong标签
strong标签表示强调，重要内容。
6、blockquote和q标签
blockquote是块元素，需要独占一行，用来表示一个长引用
q标签是行内元素，不会独占一行，用于短引用
子曰："学而时习之在，不亦乐乎"
7、br标签
br标签表示页面中的换行
8、header标签
一个网页可以有多个header
9、main标签
一个网页只有一个mian
10、footer标签
<p>
今天天气<em>真</em>不错
</p>
<p>今天<strong>很重要</strong></p>
子曰：<q>学而时习之，不亦乐乎</q>
<header></header>
<main></main>
<footer></footer>
11、nav标签
nav表示网页中的导航
12、aside标签
侧边栏
表示和主体相关的内容，不属于主题
13、article标签
article标签表示一个独立的文章
14、section标签
表示一个独立的区块，上边的标签都不能表示时使用section
15、div标签
没有语义，就用来表示一个区块，目前来讲div还是我们的主要布局元素
16、span标签
span 行内元素，没有任何语义，一般用于在网页中选中文字
div是常用的块元素的主要布局元素，span是常用的行内元素的主要布局元素。
八、块元素和行内元素
（1）块元素（block element）
在网页中一般通过块元素来对页面进行布局
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div>
</div>
（2）行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，但是不会在行内元素中放块元素
p标签中不能放任何块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
九、列表（list）
1.无序列表
常用
使用 ul 标签来创建无序列表
使用li来表示列表项
2.有序列表
使用ol标签来创建有序列表
3.定义列表
使用dl标签来创建定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套。
<ul>
<li>表现</li>
<li>结构</li>
</ul>
<ul>
<li>表现</li>
<li>结构</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
十、超链接
超链接可以让我们从一个页面跳转到其他页面，或者是跳转到当前页面的其他位置。
使用a标签来定义超链接
超链接也是一个行内元素，在超链接中可以嵌套除它自身以外的其他元素
链接的默认外观：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
属性：
href
指定跳转到的目标路径
值可以是一个外部的网站的地址，也可以是一个内部网页的地址
当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径。
想对路径都会使用 . 或 .. 开头
可以省略不写，如果不写，则默认为以此开头
./ 表示当前文件所在的路径
设此文件为01.相对路径.html
./ 就等于01.相对路径.html的目录 相当于path
<!--example：-->
<ul>
<li>
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
<a>超链接</a>
<a href="www.baidu.com">超链接</a>
../ 表示在当前文件所在目录的上一级目录中去找 ..//表示在当前文件的目录的上一级目录下去寻找文件夹，然后超链接该文件夹下的文件。
./ /表示在当前目录下寻找文件夹，然后超链接文件夹中的一个文件
target属性 用来指定超链接打开的位置
可选值：
_self 默认值，在当前页面打开超链接
_blank 在一个新的页面中打开超链接
当我们超链接不输入target属性的时候，默认为_self
<a href = "www.baidu.com"></a> == <a href="www.baidu.com" target="_self">
</a>
<a href ="www.baidu.com" target="_blank"></a>
_self google 常用
_blank 国内常用
可以直接将超链接的href属性设置为#，这样点击超链接之后，页面不会发生跳转，而是转到当前页面的
顶部的位置。
<a href = "#"></a>
id属性（唯一不重复）
每一个标签都可以添加一个id属性
id属性是元素的唯一标识，同一个页面中不能出现重复的id属性
id属性区分大小写，都是字母开头
当我们需要跳转到页面的指定位置的时候，我们只需将href的属性设置为“# 目标元素的id属性值”
在开发中，可以将#作为超链接的路径占位符使用在使用#作为占位符的的时候，可能会跳转到网页的顶部
当需要写一个没有任何功能的超链接
十一、图片标签
图片标签用于向当前页面中引入一个外部图片
（1）img标签
使用img标签来引入外部图片，img标签是一个自结束标签。
img元素属于替换元素，（块元素和行内元素之间，具有两种元素的特点）
（2）src属性
src属性指定的是外部图片的路径，可以是相对路径也可以是绝对路径
路径规则和超链接是一样的
我们可以引用其他网页的图片
复制图片的地址链接，然后放入src属性内
（3）alt属性
alt属性内为图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载的时候显示。
（4）width属性和height属性
width属性是图片的宽度，height属性是图片的高度 二者的单位都是像素 px
当我们只修改width或height时，另一个会等比例缩放。
在PC端的一般情况下，一般不建议修改图片的大小
当我们需要图片的时候，需要多大的图片就裁取多大的图片
在移动端，经常需要对图片进行缩放。（主要是大图缩小）
<a href ="#">这是一个新的超链接</a>
<a href ="javascript:;">这是一个新的超链接</a>
<img>
<img src ="">
<img src="" alt="">图片的格式：
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图
一般用来显示照片
gif：
支持的颜色较少，支持简单透明，支持动图
一般用于颜色单一的图片，动图
png（常用）：
支持的颜色丰富，支持复杂透明，不支持动图
一般用于颜色丰富，复杂透明的图片（专为网页而生）
webp：
谷歌新推出的一中专门用来表示网页中的图片的格式
具备其他图片格式的所有优点
缺点：兼容性不好
base64：
不是一个标准的图片格式，是将一个图片用base64进行编码，
这样可以将图片转换为字符，通过字符的形式来引入图片。
一般都是一些需要和网页一起加载的图片才会使用base64。
效果一样用小的；效果不一样，用效果好的
十二、内联框架
iframe 用于向当前页面引入一个其他的页面。
src 指定要引入的网页路径
frameborder 指定内联框架的边框 少用
十三、音视频播放
音视频文件引入时，默认情况下不允许用户自己控制播放或停止
（
1）音频（audio）
兼容好的音频格式为MP3
标签：audio
用来向网页中引入一个外部的音频文件
audio也是属于替换元素
controls属性 是否允许用户控制播放
autoplay属性 音频文件是否自动播放如果设置了autoplay属性，则音乐在打开页面的时候会自动播放。
但是目前来讲，大部分浏览器都不会自动对音乐播放
loop属性 音频文件是否循环播放
除了可以通过src来指定文件的路径外，还可以通过source来指定文件的路径
当运行的时候，如果mp3格式不能运行，会运行ogg格式的音频文件，当都不可以的时候会显示对不
起。
embed标签 自动播放
这个标签基本上所有标签都支持
（
2）视频video
使用video标签来向网页中引入一个视频
使用方法和audio基本上是一样的
<!--不允许用户控制播放或停止-->
<audio src =" "></audio>
<!--允许用户控制播放或停止-->
<audio src =" " controls></audio>
<!--音频文件是否自动播放-->
<audio src =" " autoplay></audio>
<!--音频文件是否循环播放-->
<audio src =" " ></audio>
<audio>
对不起，您的浏览器不支持播放音频，请升级浏览器！
<source src =" .mp3">
<source src =" .ogg">
</audio>
<audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器！
<source src =" .mp3">
<source src =" .ogg">
<source src =" .mp3" type="audio.mp3" width=" " height=" ">
</audio>
<video controls>
对不起，您的浏览器不支持播放音频，请升级浏览器！
<source src =" .webm">
<source src =" .mp4">
<source src =" .mp4" type="video.mp4" width=" " height=" ">
</video>
十四、表格
1.简介
在现实生活中，我们经常需要使用表格来表示一些格式化的数据
格式化数据：
课程表，人名单，成绩单······
在网页中也需要使用表格
通过table标签来创建一个表格
table标签是一个特殊的块元素,宽度会被默认撑开 
2.长表格
可以将一个表格分为三部分:
头部 thead
主体 tbody
底部 tfoot
th表示头部的单元格 可以替换thead中的td
十五、表单
1.简介
在现实生活中表单用于提交数据。
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器。
表单是本地和远程服务器进行交互的方式之一。
ex：
百度网页的搜索框
通过使用form标签创建表单
<form action="">
<input type="text" name="">
<input type="submit" value="">
</form>
2. form的属性
action 用于放置表单要提交的服务器的地址
3.表单项（行内块）
3.1文本框
<input type="text" name="">
通过设置文本框来放置要输入的元素
数据要提交到服务器中，必须要为元素指定一个name属性值
3.2提交按钮
<input type="submit" value="">
type中为submit，提交按钮中默认为“提交”
value属性：用于设置按钮中的文字
3.3密码框
<input type="password" name="password">
type中为password，当输入密码的时候会用暗码进行保护。
密码也需要设置name属性
3.4单选按钮
<input type="radio" name=" " value=" " checked>
单选按钮的type中为radio。
属性：
name：用于进行多选一，相同name属性的选项只能选择其中一个
value：value属性最终会作为用户填写的值传递给服务器
checked：可以将单选按钮设置为默认选中
<注意>
选择框必须要设置一个value值，value属性最终会作为用户填写的值传递给服务器
3.5多选框
<input type="checkbox" name="" value="">
3.6下拉列表
<select name="">
<option value=""></option>
<option selected value=""></option>
<option value=""></option>
</select>
下拉菜单中可以使用selected来将选项默认选中。默认情况下是选中第一个
3.7 表单补充
3.7.1 input中type的可选值：
button 创建一个普通的按钮
reset 重置按钮
color 选择颜色（兼容性较差，使用较少）
email 检查文本框中的邮件格式
3.7.2 button
button： 提交按钮 成对出现的标签
可以在button中放入图片
<button type="submit">提交</button>
<button type="button">提交</button>
<button type="reset">提交</button>
3.7.3 属性
autocomplete:可以关闭文本框的自动补全
<input type="text" name="" autocomplete>
readonly:将表单项设置为只读
<input type="text" name="" readonly>
disabled：将表单项设置为禁用
<input type="text" name="" disabled>
autofocus：设置表单项自动获取焦点
<input type="text" name="" autofocus>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
