妈妈再也不用担心你入不了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.实体

实体的语法

&实体的语法;
&nbsp;表示是一个空格
&gt; 大于号
&lt;小于号
&copy;版权符合

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门的主要内容，如果未能解决你的问题，请参考以下文章

妈妈再也不用担心你入不了HTML门

利用CH341A编程器刷新BIOS，恢复BIOS，妈妈再也不用担心BIOS刷坏了

建站小白从零搭建自己的网站-妈妈再也不用担心我的网站了

Python 在线免费批量美颜，妈妈再也不用担心我 P 图两小时啦

Python 在线免费批量美颜，妈妈再也不用担心我 P 图两小时啦

二分查找大集合（妈妈再也不用担心我的二分查找了）