妈妈再也不用担心你入不了HTML门
Posted 星际迷航‖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了妈妈再也不用担心你入不了HTML门相关的知识，希望对你有一定的参考价值。
如果文章内容有什么错误，希望各位大佬提出来，我第一时间更改。
这里学习html、CSS可以使用的编辑器------> IDEA、VScode。这两个是比较好。当然还有几个比较好的编辑器因人而异。
这里分享一个中文的HTML文档不会的都可以查文档HTML中文文档
1.第一个页面
head表示网页的头部
title表示网页的标题
body表示网页的主体所有可见的数据都放在此处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个HTML页面</title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--注释内容-->
<!--自闭合标签-->
<input/>
</body>
</html>
p标签换行，它可以是自标签。也可以进行换行
h表示标题，数字是几就是几级标题，一般情况到6级标题
title 表示网页的标题就是标签栏的文字
input类型有很多，与他的type类型有关，text输入框，button是按钮。这里有很多类型。
2.属性
2.1.网页结构
属性，在标签中（开始标签或者自结束标签）还可以设置属性
属性是一个名值对(x=y)
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些是没有的，如果有属性的话需要引号引起来。
<!--文档注释-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二个网页</title>
</head>
<body style="background-color: antiquewhite">
<h1>第二个页</h1>
</body>
</html>
2.2.进制
进制就是满多少进位。
二进制满二进1 eg: 0 1 10 （计算机底层就是二进制的实现）
八进制满八进1 eg: 0 1 2 3 4 5 6 7 10(不常用)
十进制满十进1 （我们日常中用到的）
十六进制满十六进1
2.3.编码
所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
所以一段文字存在计算机中，都需要将这段文字转换为二进制码，所以同理当你读取的时候将二进制码转换为字符。
编码和解码的规则称之为字符集
常见的字符集编码：
ASCII
ISO88591
GBK
UTF-8
GB2312
乱码问题
如果编码和解码所采用的字符集不同就会出现乱码问题。
注意在浏览器中多个连续的空格会被解析为一个空格。
2.4.实体
实体的语法
&实体的语法;
表示是一个空格
> 大于号
<小于号
©版权符合
2.5.meta
charset设置字符集
name指定的数据名称
keywords表示的是网站的关键字多个关键字用空格隔开
description表示对网站的描述
title表示搜索出来的主题
content指定的数据内容
3.标签
3.1标题标签
一般情况下只有一个h1
从h1-h6的重要性递减，h1最重要，h6不重要，每一个标题都独占一行
在页面中独占一行的元素称之为块元素
<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.2文字
q表示的是行内元素
blockquote表示块元素 独占一行
em、strong都是行内元素
<strong>加粗</strong>
<em>语调加重</em>
鲁迅说：<blockquote>引用：我从来没有说过</blockquote>
子曰：<q>学而时习之</q>
<br/>换行
3.3.语义化标签
header可能有多个
main只能有一个
div 没有语义 表示的是一个区块，目前主要还是div为布局
span行内元素，没有任何的语义，一般用于在网页中选择文字
<header>网页的头部</header>
<main>网页的主体</main>
<footer>网页的底部</footer>
<nav>导航</nav>
<aside>和主体相关的其他内容，一般用来侧边栏</aside>
<article>文章</article>
<div>表示的是一个区块<div/>
4.块元素、行元素
4.1.块元素
块元素在网页中一般通过元素来对页面进行布局
4.2.行元素
行内元素用来包裹文字
4.3.注意
一般情况下在块元素下放行内元素，而不会在行内元素中放块元素
p标签下不能放块元素标签
浏览器在解析网页的时候，会自动的对网页中不符合规范的内容进行修正
5.列表
html中的列表一共有三种，
有序列表，使用ol创建有序列表，可以使用li创建列表项
无序列表，使用ul创建无序列表
定义列表，使用dl创建定义列表，使用dt表示定义的内容，使用dd对文章内容进行解释说明
列表之中可以互相的嵌套。
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构用来规定网页的结构</dd>
</dl>
6.超链接
超链接可以让一个界面跳转到另外一个页面，或者当前页面的其他位置。超链接是一个行内元素，可以a标签中嵌套除他以为的所有元素。他的href可以是外部的一个网站，也可以是自己的页面。
可以使用javascript:;作为href中的占位符
<a href="/hello.html">点击进入hello界面</a>
<a href="#">回到顶部</a>
<a href="#bottom">点击跳转到指定标签下必须指定id</a>
target属性：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
6.1.相对路径
当我们需要跳转一个服务器的内部页面时，一般我们都会使用相对路径，相对路径都会使用…或.开头
./表示当前文件所在的目录，默认的情况下就是./
…/表示当前文件父目录
7.图片标签
用来引入一个外部图片，使用img标签来引入图片img标签是一个自结束标签，img这种标签属于替换元素。
src表示引入的是一个外部的照片
alt属性是对图片的描述，默认的情况是不显示的，有的图片无法加载的时候显示。方便搜索引擎对其进行搜素，要是没有alt属性就不会被搜索引擎搜索到。
height 设置图片的高度
weight 设置图片的宽度 当宽度或者高度随意设置一个的时候，其他的高度和宽度都会等比例缩放。
<img src="../img/night.jpg" alt="对图片的描述">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs7.sinaimg.cn%2Forignal%2F45118b4d33596d7253ce6&refer=http%3A%2F%2Fs7.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623919518&t=036df79ac855528f721a310276538f2a" alt="">
如上可以是你的本地路径下的资源，相对路径、还有别的网站上获取图片的地址即可。
8.内联框架
src 表示引入网页的路径
frameborder = 0 表示去掉边框
内联框架不会被搜索引擎所爬取
<iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132017433&page=25" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="./image.html" width="800" height="800" frameborder="0" ></iframe>
<audio controls>
对不起浏览器不兼容当前播放器
<source src="./audio.mp3">
<source src="./audio.mp3">
</audio>
9.音频
音视频文件引入时，默认的情况下不允许用户自己控制播放停止。
9.1 音频文件
通过audio标签引入
src表示路径，也可以用source指定路径
controllers是否允许用户控制播放，当不写它的时候用户不能控制。
autoplay 用来设置自动播放，打开或者刷新页面会自动播放，很多网站不支持当前的标签。
loop表示循环播放
<AUDio src="./audio.mp3" controls style="background-color: aquamarine;" autoplay loop>点击播放</AUDio>
<audio controls>
对不起浏览器不兼容当前播放器
<source src="./audio.mp3">
<source src="./audio.mp3">
</audio>
9.2.视频文件
使用video标签引入一个视频
controllers是否允许用户控制播放
<video src="./datetime模块.mp4" controls></video>
== 如果看完觉得得到帮助就留下你的一键三连，谢谢 注意如果有错误的地方评论区提出来我立即更正谢谢大佬的指正。==
以上是关于妈妈再也不用担心你入不了HTML门的主要内容，如果未能解决你的问题，请参考以下文章
利用CH341A编程器刷新BIOS，恢复BIOS，妈妈再也不用担心BIOS刷坏了
直击网事Firefox插件：有了它，妈妈再也不用担心我的信息会泄露啦