HTML

参考学习视频

https://www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44

W3C

1994年 伯纳斯李创建了w3c
w3c为了制定网页开发的标准。使用同一个网页在不同的浏览器中有相同的效果
结构、表现、行为三个部分构成一个网页

网页的结构

结构html：用来描述页面的结构
表现Css：控制页面中元素的样式
行为js：用来响应用户的操作

标签中的属性

属性：在标签中（开始标签或者自结束标签）设置属性
属性：是一个键值对：x=y ；用来设置标签中的内容如何显示
属性和标签之间用空格隔开 font color = "red"
属性名是w3c中规定好了的，如果有属性值，那么通过单引号或者双引号来包裹

网页的基本结构

网页的迭代

html4.0
xhtml2.0
html5

文档声明（doctype）

用来告诉浏览器是啥版本
html5的文档声明：<!doctype html> 不区分大小写哦放在html首行
严格来说 doctype不属于html中的标签

关于进制

数数的方式

啥进制，满啥就进1 进1后从0开始，啥进制，就几位算满了

二进制：满2进1 ； 0 1 10 11 100
十进制：满10进1 从0到9 （单位数字）到了10 这里进了1位，从0又开始
十六进制
八进制

关于编码

编码：将字符转成二进制的过程
解码：将二进制码转字符
规则：字符集（charset) 例如：ASCII码表

乱码问题

如果编码和解码采用的字符集不同，则会出现乱码，常见的就是ASCII、ISO8591、 GB2312、UTF- 8(万国码)

设置字符集

<meta charset='utf-8'>

html文档规范

<!-- 文档声明 声明当前网页的版本 -->
<!doctype html>
<!--- html的根标签（元素） 网页所有都在根元素中 -->
<html>

	<!-- 是网页的头部，head中的内容不会再网页中出现，主要是用来浏览器和搜索引擎计解析（爬虫） -->
	<head>
		<!-- meta 用来设置元数据，这里设置了网页的字符类型，避免乱码 -->
		<meta charset='utf-8'>
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎主要根据titile中的内容来判断网页的主要内容 -->
         <title>我是标题</title>
	</head>
		 <!-- body是html的资源数，表示网页的主题，网页中所有的内容都应该在body里 -->
	<body>
       <!-- h1 是网页的一级标题 -->
        <h1>
            大标题哦
        </h1>
    </body>
</html>

VScode插件推荐

名称: Chinese (Simplified) Language Pack for Visual Studio Code
名称: Ayu
名称: Live Server

实体

在网页中，编写多个空格，浏览器会自动解析成一个空格
在htm中，我们不能直接书写一些特殊符号，比如大于小于号
如果我们需要在网页中，不想要浏览器将这些特殊符号进行转义了则需要使用转义字符
实体的语法： &实体的名字;
```
&nbsp;
```
参考https://www.w3school.com.cn/html/html_entities.asp

语义化标签

html主要就是学习语义化标签，也就是对整体网页架构的搭建。网页的用途是干啥，来规范的使用相关的标签
使用html标签的时候，只关注标签的语义，而不是样式

例如H1标签

h1 在网页中重要性仅次于titile，一般情况一个页面只有一个h1

块元素

在页面中占一行的元素
标题标签都是快级元素

<h2>ｈｅｌｌｏｗｏｒｌｄ</h2>

标题组hgroup

将相关的标题放在hgroup中来分组管理

    <hgroup>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
    </hgroup>

em语调加重

 <p>今天你很<em>好</em></p>

强调Strong

强调默认有加粗效果

       <!-- strong 表示强调，重要内容 -->
    <p>今天你很<strong>好看</strong</p>

blockquote长引用

    <!-- blockquote 表示一个长引用，也是一个块级元素，独占一行 -->
    <p>我爱吃<blockquote>yxqz</blockquote</p>

q短引用

    <!-- q表示一个短引用 行内元素，语言引用 -->
    <p>我要<q>吃一大堆的茄子</q></p>

相对路径

当我们要跳转到服务器内部页面的时候
使用相对路径，都使用./ ../开头
./ 可以省略，如果不写./和../ 默认就是./

./ 表示当前文件所在的目录
../ 表示当前目录的上一级目录下的文件

超链接

从一个页面跳转到其他的页面，或者是当前页面的某个位置
a标签
链接也是一个行内元素，在a标签中可以嵌套（除a）任何的元素

vscode的快捷键 alt+shift+下或者上复制

href属性：指定跳转的目录

href的值：

可以是一个外部网站的地址
可以是内部的页面地址这里需要区分相对路径和觉对路径

trage属性：用来指定超链接打开的位置

trage的值：

_self 默认值：在当前页面中打开超链接
_blank 在一个新的窗口打开超链接

id 属性：唯一不重复

在开发中，可以用#作为href的占位符
也可以javascripot:; 占位符
可以直接将超链接的href属性设置#，点击超链接后页面不会跳转，而是转到当前页面的顶部位置

 <!-- trage属性：
        用来指定超链接打开的位置
            _self 默认值：在当前页面中打开超链接
            _blank 在一个新的窗口打开超链接
     -->
    <a href="./07-列表.html" target="_blank">超链接</a>

    <a href="#dibu" >回到底部 </a>
        <!-- lorem -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    
    <!-- 
        id 属性 唯一不重复
        在开发中，可以用#作为href的占位符
        也可以javascripot:; 占位符
        可以直接将超链接的href属性设置#，点击超链接后页面不会跳转，而是转到当前页面的顶部位置 -->
    
    
    <a id="dibu" href="#" >回到顶部 </a>

图片标签

图片标签用来向当前页面引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
src: 外部图片的路径（规则和超链接一样）
alt：图片的描述，默认情况是不显示的，图片在无法加载，或者是无法找到图片
width：指定图片的宽度（单位是像素）
height：指定图片的高度
如果只修改了高度，或者只修改了宽度，默认另一个等比例缩放（正方形）

搜索引擎也会通过alt的内容来识别图片，如果不写alt，搜索引擎收录

在pc端，不建议修改图片的大小，需要多大，就直接用原生多大的图片，移动端就需要对图片进行缩放（大图缩小，非原生图片）

 <img src="http://p9.qhimg.com/bdr/__85/t0199ac0a6f007265ee.jpg" alt="鱼香茄子">

图片格式

jpeg（jpg）：支持颜色比较丰富，不支持动图，一般照片
gif：支持的颜色比较少，支持动图，支持简单透明，一般颜色单一的动图
png：颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（网页最多）
webp：谷歌新推的专门用来网页中的图片的一种格式，具备上面的三种功能，缺点：老浏览器无法识别
base64：将图片使用base64编码，将图片转成字符，通过字符来引入图片（我认为在持久化数据库很方便啊，一起请求就完事了，提高网站的响应速度），一般和网页一起加载

效果一样用小的，效果不同用效果好的

内联框架（iframe）

src 指定引入的网页的路径
frameborder：指定的内联框架的边框
内联框架中的网页不会被爬虫

    <iframe src="https://blog.yxqz.top/" width="800" height="600" frameborder="0"></iframe>

音视频

audio：用来向页面中引入一个外部的音频文件，也是一个替换标签
音视频文件引入的时候，默认情况下是不能让用户自己控制播放的
controls：是否用户控制播放（控制器），是判断这个属性是否存在。
autoplay：音频自动播放，如果设置了autoplay ，则音乐在打开页面后就自动播放，大部分浏览器都不会自动播放
loop：循环播放

    <audio src="./resource/audio.mp3" controls loop autoplay></audio>

除了通过src指定外部文件，可以通过source标签的src来指定

source

使用soruce可以控制版本问题
source可以解决引入多个资源的问题
在第一个source标签中的资源无法使用时候，那么就可以执行下一个source标签资源
使用source标签，可以在之前只使用src的基础上使用多个src（例如一个音频，多个格式，mp3,ogg，mp3不支持，就使用source其他的音频格式）
适合在浏览器版本的适配或者资源格式适配
source也是一种替换标签
使用source标签引入资源的时候，如果有同种资源，同种格式，只要浏览已经识别了，那么其他相同的source引入的资源就不会被识别了。embed也是类似，例如下面的mp3格式，有两个相同格式的资源，但是只会解析一个资源

    <audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
    </audio>

其实现在使用src直接引入或者source标签引入，不兼容的时候都会有友好的提示的

embed

兼容老版本ie
需要指定type的文件类型: audio/mp3 这里的audio 代表的是音频资源格式是mp3
一般和source搭配使用

例如下面的代码。在某个ie版本或其他浏览器版本无法识别到ogg格式的时候，则会读取embed中的资源

    <audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
        <embed src="./resource/audio.ogg" type="audio/ogg">
    </audio>

video

引入视频文件

欢迎访问小余的个人博客
QQ交流群：704947288

相关阅读:
获取发布的头条的url，避免点击打开新的页面
 下载图片保存至本地返回路径
 线程运行的3个状态
 程序并发执行所需付出的时空开销
 web metrics dashboard 数据分析工具看板从可视化发现问题避免sql重复写调高效率
 Binary safe
simple dynamic string
a
a
从业务角度减少代码执行的时间和因长时间执行的而带来的代码复杂性日志恢复数据
原文地址：https://www.cnblogs.com/yxqz/p/14872822.html