HTML
发布于2021-06-17 20:26 阅读(431) 评论(0) 点赞(18) 收藏(4)
1|0参考学习视频
https://www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44
2|0W3C
- 1994年 伯纳斯李创建了w3c
- w3c为了制定网页开发的标准。使用同一个网页在不同的浏览器中有相同的效果
- 结构、表现、行为三个部分构成一个网页
2|1网页的结构
- 结构html：用来描述页面的结构
- 表现Css：控制页面中元素的样式
- 行为js：用来响应用户的操作
3|0标签中的属性
- 属性：在标签中（开始标签或者自结束标签）设置属性
- 属性： 是一个键值对：x=y ；用来设置标签中的内容如何显示
- 属性和标签之间用空格隔开
font color = "red" - 属性名是w3c中规定好了的，如果有属性值，那么通过单引号或者双引号来包裹
4|0网页的基本结构
4|1网页的迭代
- html4.0
- xhtml2.0
- html5
4|2文档声明（doctype）
- 用来告诉浏览器是啥版本
- html5的文档声明：
<!doctype html>不区分大小写哦 放在html首行 - 严格来说 doctype不属于html中的标签
5|0关于进制
数数的方式
啥进制，满啥 就进1 进1后从0开始，啥进制，就几位算满了
- 二进制：满2进1 ； 0 1 10 11 100
- 十进制：满10进1 从0到9 （单位数字）到了10 这里进了1位，从0又开始
- 十六进制
- 八进制
6|0关于编码
- 编码：将字符转成二进制的过程
- 解码：将二进制码转字符
- 规则：字符集（charset) 例如：ASCII码表
6|1乱码问题
如果编码和解码采用的字符集不同，则会出现乱码，常见的就是ASCII、ISO8591、 GB2312、UTF- 8(万国码)
6|2设置字符集
<meta charset='utf-8'>
7|0html文档规范
8|0VScode插件推荐
名称: Chinese (Simplified) Language Pack for Visual Studio Code
名称: Ayu
名称: Live Server
9|0实体
-
在网页中，编写多个空格，浏览器会自动解析成一个空格
-
在htm中，我们不能直接书写一些特殊符号，比如大于小于号
-
如果我们需要在网页中，不想要浏览器将这些特殊符号进行转义了 则需要使用转义字符
-
实体的语法： &实体的名字;
-
参考https://www.w3school.com.cn/html/html_entities.asp
10|0Meta
- mete主要用来设置网页中的 元数据
- charset ：指定网页的字符集
- name：指定的是数据的名称
- content 指定的数据内容
- keywords 表示网站的关键字 多个关键字，使用英文逗号分割
10|1重定向
- 使用http-equiv :refresh
- content第一个参数是等待时间，单位是秒
- 后面是定向地址
11|0语义化标签
- html主要就是学习语义化标签，也就是对整体网页架构的搭建。网页的用途是干啥，来规范的使用相关的标签
- 使用html标签的时候，只关注标签的语义，而不是样式
例如H1标签
h1 在网页中重要性仅次于titile，一般情况一个页面只有一个h1
11|1块元素
- 在页面中占一行的元素
- 标题标签都是快级元素
11|2标题组hgroup
将相关的标题放在hgroup中来分组管理
11|3em语调加重
11|4强调Strong
强调默认有加粗效果
11|5blockquote长引用
11|6q短引用
12|0相对路径
- 当我们要跳转到服务器内部页面的时候
- 使用相对路径，都使用
./../开头 ./可以省略，如果不写./和../默认就是./
./ 表示当前文件所在的目录
../ 表示当前目录的上一级目录下的文件
13|0超链接
- 从一个页面跳转到其他的页面，或者是当前页面的某个位置
- a标签
- 链接也是一个行内元素，在a标签中可以嵌套（除a）任何的元素
vscode的快捷键 alt+shift+下或者上 复制
href属性：指定跳转的目录
href的值：
-
可以是一个外部网站的地址
-
可以是内部的页面地址 这里需要区分相对路径和觉对路径
trage属性：用来指定超链接打开的位置
trage的值：
- _self 默认值：在当前页面中打开超链接
- _blank 在一个新的窗口打开超链接
id 属性： 唯一不重复
- 在开发中，可以用#作为href的占位符
- 也可以javascripot:; 占位符
- 可以直接将超链接的href属性设置#，点击超链接后页面不会跳转，而是转到当前页面的顶部位置
14|0图片标签
- 图片标签用来向当前页面引入一个外部图片
- 使用img标签来引入外部图片，img是一个自结束标签
- src: 外部图片的路径（ 规则和超链接一样）
- alt：图片的描述，默认情况是不显示的，图片在无法加载，或者是无法找到图片
- width：指定图片的宽度（单位是像素）
- height：指定图片的高度
- 如果只修改了高度，或者只修改了宽度，默认另一个等比例缩放（正方形）
- 搜索引擎也会通过alt的内容来识别图片，如果不写alt，搜索引擎收录
- 在pc端，不建议修改图片的大小，需要多大，就直接用原生多大的图片，移动端就需要对图片进行缩放（大图缩小，非原生图片）
14|1图片格式
- jpeg（jpg）：支持颜色比较丰富，不支持动图，一般照片
- gif：支持的颜色比较少，支持动图，支持简单透明，一般颜色单一的动图
- png：颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（网页最多）
- webp：谷歌新推的专门用来网页中的图片的一种格式，具备上面的三种功能，缺点：老浏览器无法识别
- base64：将图片使用base64编码，将图片转成字符，通过字符来引入图片（我认为在持久化数据库很方便啊，一起请求就完事了，提高网站的响应速度），一般和网页一起加载
效果一样用小的，效果不同用效果好的
推荐base64：base64图片在线转换工具 - 站长工具 (chinaz.com)
15|0内联框架（iframe）
- src 指定引入的网页的路径
- frameborder：指定的内联框架的边框
- 内联框架中的网页不会被爬虫
16|0音视频
- audio：用来向页面中引入一个外部的音频文件，也是一个替换标签
- 音视频文件引入的时候，默认情况下是不能让用户自己控制播放的
- controls：是否用户控制播放（控制器），是判断这个属性是否存在。
- autoplay：音频自动播放，如果设置了autoplay ，则音乐在打开页面后就自动播放，大部分浏览器都不会自动播放
- loop：循环播放
除了通过src指定外部文件，可以通过source标签的src来指定
16|1source
- 使用soruce可以控制版本问题
- source可以解决引入多个资源的问题
- 在第一个source标签中的资源无法使用时候，那么就可以执行下一个source标签资源
- 使用source标签，可以在之前只使用src的基础上使用多个src（例如一个音频，多个格式，mp3,ogg，mp3不支持 ，就使用source其他的音频 格式）
- 适合在浏览器版本的适配或者资源格式适配
- source也是一种替换标签
- 使用source标签引入资源的时候，如果有同种资源，同种格式，只要浏览已经识别了，那么其他相同的source引入的资源就不会被识别了。embed也是类似，例如下面的mp3格式，有两个相同格式的资源，但是只会解析一个资源
其实现在使用src直接引入或者source标签引入，不兼容的时候都会有友好的提示的
16|2embed
-
兼容老版本ie
-
需要指定type的文件类型: audio/mp3 这里的audio 代表的是音频资源格式是mp3
-
一般和source搭配使用
例如下面的代码。在某个ie版本或其他浏览器版本无法识别到ogg格式的时候，则会读取embed中的资源
16|3video
引入视频文件
__EOF__
本文链接：https://www.cnblogs.com/yxqz/p/14872822.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
所属网站分类: 技术文章 > 博客
作者：麻辣小龙虾
链接：http://www.qianduanheidong.com/blog/article/131606/6b16bc180fba1caf3d43/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力