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

最新推荐文章于 2024-07-18 15:09:01 发布

星际迷航‖

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量146

点赞数 2

分类专栏：前端学习文章标签： html 列表 html5 css javascript

本文链接：https://blog.csdn.net/weixin_44048140/article/details/117068075

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如果文章内容有什么错误，希望各位大佬提出来，我第一时间更改。

这里学习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>

== 如果看完觉得得到帮助就留下你的一键三连，谢谢注意如果有错误的地方评论区提出来我立即更正谢谢大佬的指正。==

星际迷航‖

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
妈妈再也不用担心你入不了HTML门

如果文章内容有什么错误，希望各位大佬提出来，我第一时间更改。这里学习HTML、CSS可以使用的编辑器------> IDEA、VScode。这两个是比较好。当然还有几个比较好的编辑器因人而异。这里分享一个中文的HTML文档不会的都可以查文档HTML中文文档1.第一个页面head表示网页的头部title表示网页的标题body表示网页的主体所有可见的数据都放在此处<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫