HTML之基础标签_思维导图版

具体HTML基础标签请看这里:
链接：https://pan.baidu.com/s/1d-pcJRpEriqGvdtpwWucQQ
提取码：mtx6
复制这段内容后打开百度网盘手机App，操作更方便哦;
或扫码:

HTML --> 超文本标记语言（保存代码）

--> html代码版本声明 --> charset=""字符编码 / keywords 关键词搜索 单标签：

---

水平线，
换行 双标签: 斜体 加粗 同源政策：网络资源安全保护 HTML元素介绍 (精细原则)元素选择器(优先级):id选择器(#)、类选择器(class)、hmtl标签 span 行内标签(无任何样式的标签) 转义字符: (空格) / ©(版权符号@) 锚机链接： 我 点击"我"跳转到百度页面id(#)为1的地方; 作用:跳转到网页的指定位置; 图片链接: 内联框架:

列表:
无序列表:

应用:横向导航栏、底部信息展示
属性:实心圆、空心圆、实心方块list-style-type:none、float:left

有序列表:

应用:管理系统、左侧菜单栏
UI元件库：element-ui

列表嵌套:
1
2

自定义列表:dd dt dl

表格:

table–>表格 tr–>行 td–>列 th–>表头 caption–>标题
rowspan–>跨行合并 colspan–>跨列合并
页面布局:width可用百分比表示,height不能用百分比表示
定位position:
属性:left,right,top,bottom
绝对定位:absolute,相对于套着他的元素的位置;
固定定位:fixed,属性同上;
相对定位:relative;相对于自己原来的位置(移动后会保留原来的位置);
css样式:内嵌样式
行内样式style=""
外部样式
伪类选择器:鼠标正常时/鼠标移入时/鼠标按住时/超链接被点过时
a:link{} a:hover{} a:active{} a:visited{}
有顺序要求:l v h a

Axure 拖拽的方式 去形成页面结构
页面逻辑

代码的形式 网页开发 PC端
下周：移动端的页面开发
前端人员：
空白页面 完整的 能用网页
1.所有页面上 放的东西放上 HTML
2.样式和布局 CSS
3.数据的沟通交换 JS
HTML
CSS
-------------只能看 事件（静态页面）------
JS
第一天：基本标签页面基础样式
第二天：其他标签
第三天：CSS高级部分
第四天：布局
第五天：上午 开发之中页面技巧 下午 整体页面开发（自选）

HTML:超 文本 标记语言
CSS：层叠样式表
组成基本单位：标记
汉 语言
汉字组成
HTML语言是通过各种标记来标识文档的结构
文档结构？
页面之中的内容 文字 图片 输入框 视频 音频… 都是不同的标记
JAVA
浏览器 开源 公开源码
IE
谷歌
火狐

扩展名
xx.jpg
xx.gif
xx.exe
xx.doc
.php

标签：
<标签名 属性=“属性值”>

页面基础结构

---- html代码版本声明 html5 -----根标签 一个完整的网页 ----- 浏览器的头部分 ---网页的信息设置 HTML文档 ---- 页面的标题

                   ---- 浏览器的主体部分  
	第一个HTML文档
  -----   ！！！

charset="utf-8" 字符集 utf-8 中文 keywords 关键词

Hbuilder
HbuilderX
DW
VScode

网站 百度
网页 一个单独的页面 百度文库 百度图片百度贴吧…
网址 www.baidu.com

网站为根
一个网站 包含多个网页（每一个页面 都是一个html文件）
一个项目 就是一个网站

http://www.百度.com
标签分类
a.按数量分
双标签 范围
单标签

---

效果
同源政策（安全保护机制）
文件结构：
–项目名
— css文件夹
— img文件夹 专门用于存放 图片的文件夹
— js文件夹
— index.html文件
快捷键
自动规整代码格式
1.全选 ctrl+a
2.格式化 ctrl+shift+f
条件：没有输入法
win10 不太行
HTML5:语义化
标签们：
1.标题 一定会加粗 不一定放大
1-6
2.水平线

---

3.图片
4.换行

5.段落

6.加粗
7.斜体
8.span 特殊的 没有任何效果的 标签 专门用来加样式
html5
9. 下角标
10. 上角标
11.转义字符 转变意思的一个字符
空格  
版权 ©；
强调strong em

三种：基本选择器（html+css+id）
能写css部分的方式 三种
1.通过标签名 来找到要加样式的元素
标签选择器
2.通过类名来找到要加样式的元素
类选择器 class .
3.通过ID名来找到要加样式的元素
ID选择器 id #

优先级：
精细原则：ID>类>html(标签)
HTML 超文本标记语言 把东西 放在页面上
CSS 层叠样式表 放在页面上的东西长什么样
--------------任何一个网页的静态版--------------

HTML标记语言
通过各种各样的标记来标识文档结构
文档结构：一个页面从上倒下 从左 到右 依次有什么
页面之中的所有内容都是一种特殊的标记
标记=标签

标签分类
a.按数量分
单标签：<标签名 /> 一种效果
双标签：<标签名> 一种范围
b.********

标签
1.

段落
2.标题标签 n=1-6
字体一定会加粗，不一定会放大
3.
换行
4.

---

水平线 默认情况：从头到尾的灰色线
5. 斜体 html5特性的语义化标签
6. 加粗 html5特性的语义化标签
7. 图片
属性：src=“图片路径”
width=“图片的宽”
height=“图片的高”
8. 上脚标
9. 下角标
10. 没有任何含义，专门为了去加样式准备的
11. 专门用于写css代码
12. 页面的主体部分
13. 页面的头部分
14. 整个页面
15. 网页的名称 写在之中
16. 页面之中的相关信息
属性：charset=“字符集，网页的编码信息” utf-8 中文
keywords=“网页的关键词”

CSS样式部分
1.三种基本选择器
选择器：根据什么东西 决定 这套样式 给谁加
ID选择器 起名id="" 表示#
类选择器 起名class=""表示.
标签选择器 不起名 表示标签名
精细原则:ID最大>类>标签=标签之中的属性

2.样式
字体颜色  color="颜色"
字体大小  font-size="15px"

同源政策：一个爹一个妈 亲生 网页以及资源 在同一个目录下

今天的新内容

1.图片补充部分

2.超链接 点击 显示新的页面 （图片放大）

默认情况：在当前窗口打开
3.src href之别
src引入   把他完整的拿过来 作为我页面的一部分     img
href引用  借用了一下 并没有真正的 拿过来 作为我页面的一部分显示   a
4.锚记链接
步骤
	1.点击跳转
	2.定位置
5.内联框架：在一个页面之中 去显示其他页面

使用过程之中 需要配合a标签实现
效果：
点击一行字打开一个新的页面   超链接
新的页面在内联框架之中打开   内联框架解决、	
真正将超链接与内联框架链接在一起的是name的值
xxx

6.地址路径
2大类
1.网址 URL 统一资源定位符    在网上 所有人都能访问的 公开的网站
2.自己写的 还没有真正发布的  都应该在项目之中  先找到项目 在找项目里的东西
	平级之间相互调用可以直接写文件名
	.返回上一级
7.标签分类
a.按数量分
	单标签：<标签名 />              一种效果
	双标签：<标签名>       一种范围
b.按效果分
	块级元素：会独占一行       hn  p  .....                      div(没有任何效果的 块级元素标签)
	行级元素：不会独占一行     a  img  strong  em....            span(没有任何效果的 行级元素标签)
8.div 专门用于做网页布局的标签   盒子




页面布局思想：DIV+CSS布局（HTML5之后 才有的）

！！！！！！！！原则先定位 在加内容

HTML：超文本标记（标签）语言 怎么把东西放在页面上
标记语言：通过各种各样的标记 来表示页面之中不同的内容
段落

图片
超链接
html+css+js

css：层叠样式表 页面之中的东西 长什么样 放在哪（样式 布局）
js用于与服务端链接

div
标签的分类
a.按数量份
b.按效果分
块级元素：独占一行 div p hn…
行级元素:不会独占一行 a img span
span与div
没有任何效果的标签 html5专门为了给页面元素加样式准备
span 行级元素的样式
div 页面的整体布局 盒子

一个大盒子 里面有内容
页面布局的思想：div+css布局

任何一个页面的根是

css部分

定位方式 ：绝对定位（直接规定元素  距离页面的左上角的一个位置/距离）

.html5之前 1-4 用啥布局？表格

今日内容：
上午html
表格
列表
下午css
整体页面分析盒设计
常见的 开发效果

一、列表
无序列表
有序列表

二、表格
html1-4 表格做布局
html5 不用表格 div
html5开始 表格 只用于展示数据
基础标签
table 表格的框 border=“表格边框线的粗细”
tr 表格的行
td 表格的列
th 表头
caption 名标题

表格属性 colspan
rowspan
跨列合并 colspan 删除的自己行里的格
跨行合并 rowspan 删除的是被合并行的格

二CSS部分
1.单位 px（分辨率/像素点）
百分比 %
2.css写法
有三种
方法一：内嵌样式
css代码 嵌在HTML之中 但是又没有混在一起
方法二：行内样式
问题：不方便修改
方法三：外部样式
优先级：就近原则
行内>内嵌和外部 不好判定 谁近 听谁的
开发之中用哪个？ 外部样式

1.把点去掉
2.每一个Li 横过来

HTML第二章
三个内容
列表
表格
内联框架
列表：
无序列表
表示：ul,li
应用： 横向的到导航栏 ，页面底部信息展示
三大种：实心圆，空心圆，实心方块
css属性：list-style-type:none
float:left(！！漂浮！！)
有序列表:
表示：ol，li
应用：管理系统，左侧的菜单栏
自定义列表:使用很少 dd dt dl
UI元件库：element-ui

表格：
五个基础标签：
表：

行：
列：

属性：
背景颜色:bgcolor
跨行合并：rowspan 删除的是被合并行的格 合并几个删几个
跨列合并：colspan 删除的是自己行的格子 合并几个删几个
宽width=""
高height=""

表头：	标题：

内联框架：配合超链接

CSS:
DIV+CSS布局（思想）
手段一：position定位(1)
position属性配合left,top,right,bottom
position:absolute-----绝对定位
相对/固定/静态
手段二：float属性+盒子模型

今日内容
一：盒子模型
二:position其他属性
三：整体页面的划分和代码编写

position定位：
1.绝对定位
position:absolute
相对于套着他的元素的一个位置
2.固定定位
position:fixed
固定在页面的某个位置
3.静态定位
position:static
默认的
4.相对定位
position:relative
相对的是自己原来的位置怎么动
绝对定位：相对于套着他的元素 不保留原来位置
相对定位：相对的是自己 会保留原来位置

盒子模型
增大的都是距离 套着他的元素的距离
1.外边距margin
！margin:上下左右距离
！margin:上下 左右
margin:上 左右 下
margin:上 右 下 做 （顺时针）
2.边框线border
颜色 宽度 线型
！！！solid实线
dashed虚线
dotted 点线
double 双
groove 立体线

两种
标准盒子模型 元素的宽高 就是本身的宽高 ！！！
怪异盒子模型 元素的宽高 加上内边距和边框线的 IE5.6

margin特殊技巧：永远居中
margin+position：让一个元素 永远都在屏幕的正中间

高级选择器-----伪类选择器
鼠标正常 link
超链接被点过时 vistied
鼠标指向时 hover
鼠标按住 active

L-V-H-A
如果顺序错乱 A和H就不好使了
如果V生效了 L 就看不见了 除非清除浏览器缓存

六个必会的选择器
3个基本选择器：标签，类，ID
1个伪类：鼠标指向 ：hover
1个高级：后代 .xxx div 一定要有空格

float漂浮遗漏：clear: both;清除浮动 文本塌陷
两节课常见效果
HTML
视频
音频
要求：
1.纯静态
2.鼠标指向
20处
3.不能出现截图
4.输入框部分 有 就行 大小 尺寸得对

盒子模型
3个重要属性
外边距 margin
内边距 padding
边框线 border
xxx-left/right/top/bottom
float漂浮

一种布局思想：
DIV+CSS布局
难点：多个div之间的嵌套
方法一：盒子模型+float
方法二：position逐步实现（fixed 固定定位）

伪类选择器：—高级选择器
！选择器:hover 鼠标指向时
选择器:active 鼠标按住时
选择器:link 正常状态
选择器:visited 被点击过时
后代选择武器

选择器:
.a div{  }

1.margin 永远居中
2.margin+position 管理后台的登录页面

css属性之中 计算方法
calc()
使用过程之中 要求每个数字和符号之间 都必须有空格

html+css+js
事件两大类
1.自己对自己干什么 交互 css LVHA
2.自己对别人干什么 事件 js
按钮：
两大种
1.表单之中 自带功能的
提交按钮 重置
submit reset
2.自己定义的 没用功能的 功能需要自己通过Js写

按钮上的字
iconpark / 阿里巴巴矢量图标库