具体HTML基础标签请看这里:
链接：https://pan.baidu.com/s/1d-pcJRpEriqGvdtpwWucQQ
提取码：mtx6
复制这段内容后打开百度网盘手机App，操作更方便哦;
或扫码:
HTML --> 超文本标记语言（保存代码）
水平线，
换行 双标签: 斜体 加粗 同源政策：网络资源安全保护 HTML元素介绍 (精细原则)元素选择器(优先级):id选择器(#)、类选择器(class)、hmtl标签 span 行内标签(无任何样式的标签) 转义字符: (空格) / ©(版权符号@)
列表:
无序列表:
应用:横向导航栏、底部信息展示
属性:实心圆、空心圆、实心方块list-style-type:none、float:left
有序列表:<ol><li></li></ol>
应用:管理系统、左侧菜单栏
UI元件库：element-ui
列表嵌套:<ul><li>1<ol><li>2</li></ol></li></ul>
自定义列表: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 -----根标签 一个完整的网页 ----- 浏览器的头部分 ---网页的信息设置<body>
---- 浏览器的主体部分
第一个HTML文档
----- ！！！
</body>
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.图片补充部分
<img src="" width="" height="" alt="图片加载失败的提示" title="鼠标指到图片的提示内容"/>
2.超链接 点击 显示新的页面 （图片放大）
<a href="要跳转到的页面路径" target="新的页面在哪打开"></a>
默认情况：在当前窗口打开
3.src href之别
src引入 把他完整的拿过来 作为我页面的一部分 img
href引用 借用了一下 并没有真正的 拿过来 作为我页面的一部分显示 a
4.锚记链接
步骤
1.点击跳转
2.定位置
5.内联框架：在一个页面之中 去显示其他页面
<iframe name="内联框架的名字"></iframe>
使用过程之中 需要配合a标签实现
效果：
点击一行字打开一个新的页面 超链接
新的页面在内联框架之中打开 内联框架解决、
真正将超链接与内联框架链接在一起的是name的值
<a href="##" target="内联框架的名">xxx</a>
<iframe name="内联框架的名" src="页面一打开时，显示的页面路径" frameborder="no-0/yes-1"></iframe>
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
表格：
五个基础标签：
表：
行：
列：
表头： | 标题： |
|---|
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 / 阿里巴巴矢量图标库
扫一扫
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
