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:手机号”
超文本的真正含义
懒得打字了,反正也没用