html-01
认识网页
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
一：编辑器
vscode
自己在D或者E 盘下新建一个文件夹 名字自己起 在vscode中FIle里 找open Folder 打开新建文件夹
1:new Folder 新建一个文件夹 day01
2：右键 new File 新建一个文件 后缀.html 名字 自己起
3：打开html文件 ! 回车 就会生成文档说明
二：浏览器
? F12 开发者工具 调试代码 —》界面
ctrl+shift +i
内核：解释运行html文档 js文档 渲染引擎（HTML+CSS）+ js引擎(js)
外壳: 淘宝风
5大常用浏览器
IE 内核: Trident
Chrome 谷歌 内核: webkit Blink
FirFox Mozila 内核: Gecko
Opera 挪威 欧朋 内核 Presto
Safari 内核 webkit
三：web标准
结构html+样式 css +行为 js 相分离
四:HTML
Hyper 超 Text 文本 Markup 标记 language 语言 ——————》超文本标记语言 (并不是编程语言 静态语言)
.txt 只能有字符
超文本 : 不仅仅只有文字 视频 音频 图片 超链接
后缀: .代码l —>.html —>运行在浏览器 —》网页
1:标记语言
规范: 标签 一个标签实现一个特定功能
<关键字>内容 封闭标签 双标签
非闭合标签 单标签
#
#UTF-8 编码规则 万国码 全世界的所有字符 目的;无论哪种语言都能正常解释运行
GB2312 4000多个汉字 GB18030 台湾 繁体字 GBK
Unicode 编码 26个英文字母+ 符号 128个字符
ctrl+/注释 注释不被运行的代码 只为了阅读
文字排版标签
1: 标题标签
一级标题 加粗加大
标题内容
我是清华毕业的
2:段落标签
放一段文字
3：文本修饰标签
我是加粗后的字体
我是加粗后的字体
我是斜体标签
我是斜体标签
¥1200
¥2200
¥2200
下划线
下划线
标签属性（修饰标签的作用）
小女孩 身高=170cm 眼睛=大大的 学校= 中山大学
标签html 宽= 300px 高 = 400px 边框 = 3px 颜色 = ‘red’
hr结构 主题 三个属性
（1）一个标签身上可以有多个属性
（2）属性以空格隔开 属性名="属性值"
align 调整元素的对齐方式 left 左对齐 center 居中对齐 right 右对齐
width 宽度 每个元素都有宽高属性 没有设置的时候是默认宽高
color: 字体颜色 red ,yellow ，green ，blue ,brown ，grey ,skyblue,pink ,deeppink,purple
列表系列
无序列表
- 我是无序列表第一项
- 我是无序列表第二项
- 我是无序列表第三项
有序列表
- 我是有序列表第一项
- 我是有序列表第2项
- 我是有序列表第3项
- 我是有序列表第4项
- 我是有序列表第5项
自定义列表
- 购物指南
- 会员介绍
- 会员介绍
- 会员介绍
- 会员介绍
- 会员介绍
- 会员介绍
图片标签 img
src:图片的地址
alt:当图片路径错误时 的文字提示
title:鼠标悬停显示的图片标题
边框: border:2 2px图片边框 默认黑色
绝对路径:引用网络上的图片 以及本地C:/Users/Public/Pictures/Sample Pictures/Desert.jpg （不建议采用这种绝对路径）
相对路径 相对你当前文档而言的路径
同级路径 ./
不同级路径（上一级和下一级） 跳出一个文件夹 …/
跳出两个 …/…/ 以此类推
标签的分类
块级标签: div p ul li ol dl hn
（1）独成一行 (霸道)
（2）宽默认100%，设置宽高起作用
行内标签 span em i b strong
(1) 并排
（2）宽高取决于内容,设置宽高不起作用
行内块标签 img
?(1)并排
(2)设置宽高起作用
特殊字符
¥¥
空格&nsp;
©©
>>
<<