Html5/css3
-
Html
超文本标记语言,搭建页面骨架
超级文本
.txt 文本,字符
图片,视频,音频,超链接,地图,统计图…
标记语言
hello world
this is a para…
特点:
1. 语法简单
2. 容量小
3. 功能强大
4. 字符 -
计算机网络
报刊
01 => 字符
officehttp协议 (B/S)
超文本传输协议
url
统一资源定位符定位网络中唯一的一个资源 http://ip:port/path http://134.175.154.93:80/sms/start.html ip:134.175.154.93 主机 port:80 服务 apache apache部署目录 /var/www/html/... path:/sms/start.html
-
Html编程
- 编写html代码(客户机)
- 测试html代码 (客户机,浏览器)
- 部署发布
-
Html版本
Html4
XHtml
H5三波人:
1. w3c 标准
html
head
div
body
2. 程序员
hello world
3. 浏览器厂商 -
H5与H4区分
- 结构
- 兼容性
h4兼容性更好一些
h5 主要用于webapp的开发
手机打开网页
uc浏览器
微信分享链接
微信公众号,中国移动
android
google chrome
ios
safari - 新增了很多新特性
语义化标签
表单input新增了type
画布 cavas
本地存储
缓存
定位
…
-
html的主体结构
第一个网页 one
firsthello
html
head
头部,不会显示到浏览器视口中
设置,配置
告诉给浏览器,我当前这个文档是使用utf8编码
标题 浏览器的选项卡
nihao 汉语拼音
hello 英语
编码:编辑器(sublime utf-8)
utf-8 万国码
GBK 国标码
Big5 繁体字 (环球新闻导报社)
解码:浏览器
body
显示(架构,填充物) -
语法
-
注释
- 记录编程思路
- 增加代码量
行
1:1
-
元素
hello world 开始标签
子元素/内容
结束标签 -
属性
-
day02
1. 复习
html 超文本标记语言
c 编译型语言
.c -> .o
.java -> .class
js/php
解释性语言
.js
互联网
广域网、局域网
ip地址 动态
mac地址 静态
url
http://ip:port/path
语法
xml - html
<!--注释-->
元素
开始标签 子元素/内容 结束标签
属性
属性名=属性值 属性名=属性值
核心属性
id,class,title,style
特有属性
a href target
img src alt
拓展属性
data-xxx
块元素
搭建页面框架 box
特性:
独占一行空间
默认宽父元素的100%,默认高由子元素或内容决定
可以指定宽高
元素:
div
h1~h3
margin,font-size,font-weight
p
margin
html
body
margin
ol,ul
margin,padding,list-style
li
dl
margin
dt
dd
margin
h5新增的语义化标签(样式与div类似)
header <div class="header"></div>
nav <div class="nav"></div>
footer <div class="footer"></div>
address
article
section
aside
行内元素
填充,装饰
特性:
多个行内元素共享一行空间
默认宽高都由内容决定
不可以指定宽高
行内元素中不可以嵌套块元素
元素
span 无意义的行内元素
a 超级链接(默认事件) open link
href="" 跳转的路径
锚点
url
http://ip:port/path
相对路径
./1-box.html
绝对路径
d://briup/2htmlcss/day02/1-box.html
mailto
打开邮件系统
...
邮箱账户和密码
邮箱客户端
团队
qq邮箱
网易邮箱
账号密码
qq
img 图片
src
与a标签中href属性类似
url
相对路径
决定路径
地图(自行拓展)
像素信息
中国地图
山西->山西.html
江西->江西.html
alt
图片找不到的时候的文本替换
装饰类型 行内元素(逐步淘汰)
strong
b
em
i
del
sub/sup
...
2. 元素使用策略
总体策略:先使用块元素搭建页面框架,再使用行内元素填充页面。
列表性质用 ul,ol,dl
标题性质用 h1~h3
段落 p
不知道用什么的时候使用div
3. 功能性标签
表格(展示数据列表)
table
属性:width border cellspacing cellspading
caption 标题
thead 表头
属性: align
tr
td/th
tbody 表体
tr
td
属性: rowspan,colspan
tfoot 表底
注意:
表格中每一行的列在计算后列数应该相等
表单(获取用户输入)
注意:
1. 所有的表单元素,都必须添加name属性
input
2. 不可输入但是可以选择的表单元素,一定要添加value值;可输入的表单元素的value为用户输入的值
<form action="http://192.168.0.100:8080/sms/register.action" type="" enctype="">
</form>
form的属性
action 后台接口地址
type http协议请求方式
get 参数拼接在浏览器的地址栏 url?k=v&k=v
请求报文格式:
GET /sms/register.action?name=terry&password=123
Content-size:12
user-agent:mac safari
post 参数放到请求报文请求体中进行传递
请求报文格式:
GET /sms/register.action
Content-size:12
user-agent:mac safari
name=terry&password=123
<input type="text" name="name">
name terry
passwd 123321
---传递后台【约定,协议】--->
查询字符串:
enctype:'application/x-www-form-urlencoded'
username=terry&passwd=123321&gender=1&status=1
js编程
json
'{"username":"terry","password":123321}'
xml
<data>
<username>terry</username>
<passwd>123321</passwd>
</data>
name=国际新闻&comment=国际大事件
表单元素
1. input
单行文本框 <input type="text">
密码框 <input type="password">
单选按钮 <input type="radio">
复选按钮 <input type="checkbox">
附件 <input type="file">
提交按钮 <input type="submit">
h5拓展:搜索框,日期框,数字框,email框...
<input type="search">
<input type="date">
<input type="number">
<input type="email">
input的属性
type
name 参数的key(不能缺省)
value 参数的value(按钮的时候不能缺省)
placeholder 提示语
checked 用在单选按钮和复选按钮中表示默认选中
selected 用在下拉菜单中表示默认选中
【注意】:checked和selected可以为单值属性
2. select
下拉菜单
<select name="shenfen">
<option value="shanxi">山西</option>
<option value="jiangxi">江西</option>
<option value="甘肃">甘肃</option>
</select>
select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候,select的参数值为该value值,option中的value值可以不设置,那么value默认为文本值
3. textarea
多行文本域
<textarea name="" placeholder="" cols="30" rows="10"></textarea>
4. 插件(日期选择,地址选择,富文本)
实体
空格
大于号 >
小于号 <
css
-
介绍
用于修饰HTML结构的,层叠样式表成叠
多个样式修饰一个结构
子元素从父元素那里继承样式
优先级
样式表
相关样式在一起定义(封装) -
语法
-
如何在html中应用css
-
定义style属性中
缺点:样式与结构冗余
优点:优先级较高 -
定义在head标签中的style标签中
缺点:样式的复用率较低
优点:样式与结构分离 -
将样式定义在css文件中
优点:样式的复用率高(框架:例如bs),样式与结构分离
style.cssdiv {
color:#fff;
background:#333
}b.html
-
-
规则
style属性:
属性名:属性值;属性名:属性值;style标签/.css
选择器 {
属性值:属性值;
属性名:属性值;
} -
注释
/注释内容/ -
选择器
-
核心选择器
标签选择器
h2 { }
div {规则 }
id选择器
#two {}
类选择器
.second{}
逗号选择器
h1,h2,h3 {}
组合选择器
div#two {}
选择id为div的元素
div,#two {}
选择div元素和id为two的元素
普遍选择器
* -
层次选择器
</div> <div class="content"> <a href=""></a> <a href 子元素选择器 .header > a 选中class为header的元素的直接孩子元素a标签 <div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul>=""></a> </div>
后代元素选择器
.header a
选中class为header的元素的后代元素a标签下一个兄弟
ul>li.two + li
=>
.two + *<ul> <li>zero</li> <li>one</li> <li class="two">two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
之后所有兄弟
ul>li.two ~ li
=>
.two ~ * -
属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type]
input[type=text]
input[type^=s]
input[type$=t]
input[type*=t] -
伪类选择器【过滤器】
表示结构的
:first-child
:last-child
:nth-child()
number/2n+1/even、odd
表示状态的
:link
:hover
:active
:visited
:focus -
伪元素选择器【添加元素】
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面ul.nav::after { content:"four"; display:block; ... } <ul class="nav"> <li>one</li> <li>two</li> <li>three</li> ::after </ul>
css -> css语法 -> 选择器 {规则}
-> 选择器 -> 规则规则取值:
关键字:
位置 left right center top bottom medium
取消 none
…
颜色:
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度:
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小
html {
font-size:10px;
}ul { font-size:20px; } li { height:2rem; //20px } % 百分比 border-radius:50%
字体样式 (可以被继承)
color
font-family 族
‘微软雅黑’ ,‘Microsoft YaHei’,‘宋体’
字体栈font-family:"微软雅黑","Microsoft YaHei",serif; font-size 大小 网页默认字体为16px 12px 10px font-weight 粗细 bold thin bolder 100~900 font-style 是否打开斜体 line-height font: 速写,简写 font: font-style font-weight font-size/line-height font-family font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei" 网络字体 奇葩字体,(字 -> icon) @font-face { font-family: "iconfont"; src: url('iconfont.eot?t=1564624596715'); /* IE9 */ src: url('iconfont.eot?t=1564624596715#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,=') format('woff2'), url('iconfont.woff?t=1564624596715') format('woff'), url('iconfont.ttf?t=1564624596715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1564624596715#iconfont') format('svg'); /* iOS 4.1- */ } .lishiziti { font-family:'iconfont' } .weixin:before { content:'\e123' } 图标: 1. 将图标从设计图中切割下来,当做图片使用(小程序) 缺点:放大与缩小比较麻烦,失真;无法更换颜色 2. 字体图标库(网页) <div>hello</div> 字体图标库(第三方库) iconfont / fontawesome(拓展) 使用方法: 1) 在iconfont官网中选择要使用的图标,放入到购物车中 2) 下载源码到本地 3) 本地引用iconfont.css文件 4) 应用样式即可 <i class="iconfont icon-xxx"></i>
文本样式 (可以被继承)
text-align 文本在容器中的排列方式
left
right
center
text-indent 文本在容器中的缩进
2em
text-decoration-line 文本装饰线的位置
none
underline
overline
line-through
text-decoration-style 文本装饰线的类型
solid
double
dotted
dashed
wavy
text-decoration-color 文本装饰线的颜色
text-decoration 以上速写形式
text-shadow 文本的阴影
left top c color;列表样式
list-style-type
circle/quare/…
list-style-image
url()
list-style-position
inside/outsidelist-style:none 【*】
盒子样式(块元素)
width
height
margin
盒子上下外边距不会合并,比如,第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20pxmargin-top margin-right margin-bottom margin-left margin:10px; 上右下左都为10px margin:0 10px; 上下为0,左右为10px margin:0 5px 10px;上0,下10px 左右5px margin:5px 10px 15px 20px 上右下左 padding padding-top padding-right padding-bottom padding-left padding:10px; 上右下左都为10px padding:0 10px; 上下为0,左右为10px padding:0 5px 10px;上0,下10px 左右5px padding:5px 10px 15px 20px 上右下左 border border-top-width border-right-width border-bottom-width border-left-width border-width border-top-style border-right-style border-bottom-style border-left-style border-style border-top-color border-right-color border-bottom-color border-left-color border-color border:1px solid #ededed; border-radius box-shadow box-shadow:5px 5px 10px #ccc; box-shadow:inset 0px 0 3px lightblue; background-origin 背景起点 border-box padding-box content-box background-clip 对已经铺好的背景裁切 border-box padding-box content-box background-image url() background-color 颜色 background-position 位置 center left top 100px 50px background-repeat repeat-x repeat-y no-repeat background background:url('') no-repeat center; background:center/cover padding-box url('./image/lianjia_08.png') no-repeat ; 1) 盒子模型 内容盒子 (width = 内容宽)【传统盒子/w3c盒子】 是绝大多数浏览器的默认盒子模型 width : 100px 表示内容区域的宽为100px 边框盒子 (width = 边框以内所有元素宽)【怪异盒子/IE盒子】 width : 100px; 表示边框以内所有的宽的综合 width = border + padding + 内容区域
-
-
-
布局
使用块元素搭建网页结构,改变默认文档流的方式,让其在一行中显示多列。【让块在一行中显示】浮动布局
float
float:left/right
可以使块元素脱离当前的文档流
1) 宽度如果没有手动指定那么就由内容决定
2) 多个浮动元素在一个浮动流中并排显示,如果一排放不下就会自动换行
3) 浮动元素失去了对父元素的支撑clear clear:left/right/both 清理左边/右边/左右两边的浮动元素,一般使用这个特性强制子元素换行,达到支撑父元素的目的 一行多列: 全部浮动 ul>li{ float:left } 一行两列 方法一: 两列都浮动 .left {float:left } .right {float:right; } 方法二: 一列浮动,一列添加margin-left .left {float:left; width:200px} .right {margin-left:220px;} overflow overflow-x overflow-y auto/none/visible/scroll 当父元素的宽/高固定,子元素的宽/高超过了父元素就可以使用这个特性 display block/inline/inline-block/... 块/行内/行内块 行内块 可以与其他行内元素共享一行空间 可以指定宽高
定位布局
position
static 静态(默认) 非定位元素relative 定位元素(相对定位) 参照点:原先所在的位置 特性:不脱离文档流(宽度默认为为100%,原来在文档流的位置不会被抢占),但是可以覆盖在其他元素上 absolute 定位元素(绝对定位) 参照点:距离它最近的父定位元素,如果没有,参照视口 特性:脱离文档流(宽度由内容决定,原来在文档流的位置被其他元素抢占) fixed 定位元素(固定定位) 特性:脱离文档流 参照点:相对于浏览器视口,并且不会随着网页的滚动而滚动 sticky 定位元素(粘滞定位 【CSS3新特性】) 特性:不脱离文档流 是relative与fixed的集合,使用top/left/right/bottom设置过渡点,当超过了这个临界点,就提现fixe固定在网页中的特性 只能定位元素才能使用定位属性 top 、left、bottom、right 改变定位元素在z轴中的位置 z-index 默认为0,值越小越靠下
伸缩盒
作用:主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
应用:
1. 父元素(宽高都需要明确)
display:flex
flex-direction:row/column
flex-wrap:nowrap/wrap
2. 子元素
flex-basic
flex-grow:
flex-shrink:
flex:grow shrin basic;
flex:grow;面试题:
1. 如何使得一个块元素在浏览器中居中
1) margin:0 auto;
2) 相对定位
3) 绝对定位
2. 哪种机制可以使得元素脱离文档流
float:left;
position:absolute/fixed;
3. 脱离文档流后的特性 -
优先级
important
权重
顺序
.content > div.one.two{ 0031
color:teal;
}
.content > div:first-child{ 0021
color:red ;
}
.content > div:nth-child(1){ 0021
color:orange;
}
.content > div.one{ 0021
color:pink;
}
#box { 0100
color:blue;
}<div class="content"> <div class="one first" id="box">box</div> <div></div> </div>
-
svn
-
动画
- 定义动画帧
@keyframes 动画名称 {
from {
left:0;
}
to {
left:1600px;
}
}
=》
@keyframes 动画名称 {
0% {
left:0;
}
…
100% {
left:1600px;
}
}- 引用动画
animation-name:
动画名称
animation-duration:3s;
一次动画持续时间
animation-iteration-count
2/infinite
动画重复的次数
animation-timing-function
linear/steps()
animation-fill-mode
动画最后一帧的填充样式
forwards
backwards
both ?
animation-direction
动画方向
alternate-reverse
reverse
alternate
animation-delay:
延迟
animation-play-state:
动画状态
running; - 第三方css动画库
animate.css
如何应用第三方库css/js【iconfont fontawesome animate.css】:
1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器(cdn)上,我们在线应用
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
- 引用动画
- 定义动画帧
-
变形
transform:变形函数;
变形函数:
scale(2)rotate(45deg); rotateX(45deg); rotateY(45deg); rotateZ(45deg); skew(45deg) skewX(45deg) skewY(45deg) translate(300px) translateX(300px) translateY(300px)
-
过渡
transition
transition-property 属性
transition-duration 持续时间
transition-timing-function 时间曲线函数transition与animation的区别:
1) transition表示某些属性的过渡
width:100px;width:200px; width:100px -> 200px 过渡 transition-property:width; transition-duration:2s; transition-timing-function:linear; 不需要定义关键帧 2) transition用于表示简单的动画,需要触发(:hover)
-
媒体查询
不适用于大型的电商网站
适用于网页html结构相同,但是需要在不同设备上显示不同的布局
@media京东商城 newbalance中国商城
pc index_pc.html index.html
pad index_pad.html index.html
phone index_phone.html index.html
||
针对不同终端显示不同布局you.163.com
过滤:
判断用户设备
-重定向->
pc you.163.com index_pc.html
mobile m.you.163.com index_mobile.htmlnewbalance.com.cn/
样式自适应各种屏幕