2021-03-19

HTML5及CSS学习01

结构 网页元素整理分类HTML
表现 版式，颜色 大小CSS
行为 网页交互的编写后端 JS

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入 html 代码，发现 标签内有一个 标签引用外部 CSS 文件；
浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件；
浏览器继续载入 html 中 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的

双标签
单标签 1 2 3 有包含关系和并列关系 HTML基本结构 网页的内容部分 vscode使用小技巧： 输入!并回车，输出基本模板 alt+B 打开浏览器预览 安装插件 open in browser，auto remane tag 各种标签的讲解 告诉浏览器使用的HTML5版本 lang="当前文档的显示的语言" 中文"zh-CN"，英语"en" charset规定文档的字符编码 移动端开发的代码 HTML常用的标签 标题标签

-

一级标题到6级标题 =md中的#

段落标签和换行标签

段落标签

换行标签 单标签
强制换行(也可以这么写
)

小知识：html里多个空格只会显示一个空格(回车算一个空格)
段落和换行的区别，段落两行之间会有空隙，换行不会有空隙

文本格式化标签
加粗 加粗标签 加粗标签2
优先考虑strong
斜体 倾斜标签 倾斜标签2
优先考虑em
删除线 删除标签 删除标签2
优先del标签
下划线 下划线标签 下划线标签2
优先使用ins
特殊的标签 div 和 span
div 用来布局的 但是他是单独占一整行
span 在一行上显示多个span
图像标签和路径
图片标签
图像标签　单标签　同一目录下可以直接用图片名做url
图像标签的参数 (参数之间用空格分开)
alt 如果图片不能显示用来替换的文字
height 图片高度
width 图片宽度
title 鼠标放到图片上显示的文字
border 边框宽度 css设定的情况比较多
路径
相对路径 相对于html文件的路径

同一级的相对路径 直接写文件名就可以
下一级路径 下一级文件夹名/文件名
上一级路径 …/文件名
绝对路径 从盘符开始的路径

如果找不到的话需要file协议(file:文件路径)
使用时经常用图片网址作为绝对路径
小知识 相对路径使用的是/ 绝对路径使用的是\

超链接标签 a
超链接语法格式

herf 用于链接目标的地址(必须)

外部链接 两个标签中间作为超链接开关
内部链接 herf直接写文件名称就可以(盲猜也是使用相对路径)
空链接 herf可以用空链接 用#代替
下载链接 如果herf里是一个zip或文件则默认下载
各种元素都可以做为超链接
锚点链接 跳到本页中的某处的链接
herf属性里为’#名字’的形式
然后在目标标签里

targrt 链接页面的打开方式 _self为默认值在当前页打开 _blank为在新窗口打开

注释标签和特殊字符
注释标签 <!–这就是注释–>

快捷键ctrl+/

常用特殊字符

符号名 字符代码
大于号 >
小于号 <
空格