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:手机号”
超文本的真正含义
懒得打字了,反正也没用
补充常用标签
<br>//换行标签
<hr>//分割线
<pre>//中间的文档按全文显示pre>
框架标签
<iframe src="" width="" height="">
//嵌入一个网页
//可以和target配合使用令target的目标链接指向iframe
(iframe的name属性值与target属性值一致)
字符实体
//空格
<
//小于号
>
//大于号
&
//and符号
©
//版权符号
×
//乘号
全局属性
id
给标签指定唯一标识
class
给标签指定类名
style
给标签指定样式
dir
内容方向
title
鼠标悬浮时的文字提示
lang
设置语言
meta元信息
网页的基本信息
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE兼容
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端设备兼容
<meta name="keywords" content=".....">
配置网页关键字,方便浏览引擎检索
<meta name="description" content="">
网站描述
<meta name="robots" content="">
针对搜索引擎爬虫的一些设置
<meta http-equiv="refresh" content="3;url=""">
3秒后进行重定向到url
<title>Documenttitle>
head>