htmlcss
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/
样式自适应各种屏幕第三方响应式布局框架：
bootstrap3
布局(float)
bootstrap4
布局(flex)
使用：
1) 获取bs(了解)
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.csshttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
## 梳理
html5
1. 行内元素
2. 块元素
4. 功能元素
表格
表单
css3
1. 语法
2. 选择器
3. css规则
文本
字体
列表
盒子
表格
4. 布局
浮动
定位
伸缩盒
5. 动画 animation、过渡
6. 媒体查询（响应式布局）
index.html
====================
1. html/css
pc端网页开发 浮动，定位
前台 网易严选首页，列表页，校官网首页
*后台 网易严选管理员，商家页面，后台管理员页面
手机端网页开发 伸缩盒布局（响应式）
2. 面试题
https://github.com/qiu-deqing/FE-interview
svn://134.175.154.93/web1902/group0
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
