HTML1:html基础

HTML

冯诺依曼体系结构

运算器

控制器

存储器

输入设备

输出设备

c/s(client客户端) 客户端架构软件

需要安装,更新麻烦,不跨平台

b/s(browser浏览器) 网页架构软件

无需安装,无需更新,可跨平台

浏览器

浏览器内核:

处理浏览器得到的各种资源

网页:

结构 HTML(超文本标记语言)

表现 CSS

行为 JavaScript

冲突的标签属性以先写的为主

127.0.0.1:5500服务器地址

HTML

超文本标记语言

html注释

html文档声明

h5文档声明

编码和解码

ascii编码 128个字符

iso编码 256个编码

GBK 2000+个中文字符

UTF-8(推荐) 万国码

编码声明:

在标签中添加charset属性=“UTF-8”

HTML设置语言

浏览器会自动解读文字判断语言

设置语言

在html标签中添加属性lang=“zh-CN”//设置语言为简体中文

HTML标准结构

略

HTML开发者文档

w3c网站设计标准

w3school国内资料网站

MDN(推荐)

HTML排版

h1-h6标题标签 不能互相嵌套

p段落标签 里面不能有块级元素

div

HTML语义化标签

标签默认的效果不重要,重要的是语义

语义化的好处:

1,代码的可读性强

2,有利于SEO(搜索引擎优化)

独占一行的元素:块级元素

不独占一行的元素:行内元素

规则:

块级元素中几乎可以写所有元素(块级元素,行内元素)

但行内元素中不能写块级元素

文本标签

用于包裹词汇和短语

斜体,代表着重阅读

十分重要的内容

没有语义,用于包裹短语

不常用的文本标签

cite 作品标题

dfn 专属名词

del与ins删除的文本和插入的文本

sub 下标 sup 上标

code 一段代码

samp 提取一部分文本内容

kbd 键盘文本

abbr 缩写

bdo 更改文本的方向

var 标记变量

small 细则

b 摘要中的关键字

i 人物的思想活动

u 反差文本

q 短引用

blockquote 长引用 块元素!!!

address 地址信息 块元素!!!

HTML图片标签

Img 标签 行内块元素

src=“图片链接”

alt=“默认文字”

width,height=""单独调整一个不会影响图片比例

相对路径和绝对路径

相对路径

./…同一个文件夹下

…/…上一个文件夹下

/下一级

绝对路径

1,本地绝对路径:

从盘符出发到文件的路径(不推荐,局限性强)

2,网络绝对路径:

图片对应的网址(有防盗链情况下无法使用)

常见图片格式

jpg:有损压缩格式

支持颜色丰富

占用空间小

不支持透明背景,不支持动态图

除了对图片要求高的地方均可以使用

png:无损压缩格式,比jpg质量更高

支持颜色丰富,占用空间略大,支持透明背景

不支持动态图

bmp:不压缩格式,在最大程度上保留图片更多的细节

支持的颜色丰富,保留的细节更多

占用空间非常大

不支持透明背景

不支持动态图

gif:仅支持256种颜色,色彩呈现不完整

主要特点:支持的颜色少,支持简单透明背景,支持动态图

一般在需要使用动态图时使用

webp:谷歌推出的一种格式,专门用于在网页中呈现图片

支持动态图

主要特点:具备上述格式的优点,但兼容性不好,一旦使用需要先解决兼容性问题

如果在文件的格式后缀有多个,会优先识别最后一个使用,如果无法兼容,再使用前面的格式

eg: abb.jpg.webp

base64转码:

将图片进行base64编码,形成一串文本,可以通过浏览器打开

直接作为img标签的src的值即可

超链接

帮助跳转

a标签

href属性用于放网址

target属性blank为新标签页中打开

​ self为在本标签页中打开,为默认值

超链接中不能放超链接

超链接跳转文件

超链接中放浏览器中可以直接打开的文件,会直接打开,例如图片,视频,pdf等

如果放不能打开的文件会触发下载

如果想强制触发下载,可以使用download属性,

超链接跳转锚点

一个超链接A name属性设置为xxxx

另一个超链接B href属性设置为#xxxx

即可从B跳转到A

或者在P标签中设置id属性为 xxxx

也可以从B跳转到C

跳转到其他页面的锚点xxx.html#xxxx

回到页面顶部,设置href属性为#

刷新页面,设置href属性为空

href中设置js语句可以执行js语句

超链接唤起指定应用

href=“tel:手机号”

href=“mailto:邮箱名”

href=“sms:手机号”

​

超文本的真正含义

懒得打字了,反正也没用