HTML 超文本标记语言
标记语言 .html .htm 由一个个标签组成
HTML5标准（在头部写明）
<!doctype html>
- anchor 超链接或锚->是否描述了href属性
<meta name="viewport" content="width=device-width, initial-scale=1.0">屏幕设定- 标题 h1~h6
- 下划线u 加粗b 斜体i 强调加粗strong 强调斜体em（强调针对搜索引擎）
- 引用cite 下标sub 删除线del
- 换行
换段水平分割线
列表
<ul type="1"(编号)><li>
- ul 无序列表
- ol 有序列表
- li 列表的项
- dl 自定义列表
- dt 自定义列表头
- dd 自定义列表内容
利用css样式来设置属性
div和span
- span无法指定宽高
- 不同div自动换行
图像标签
常用属性
- src 资源
<img src="./images/1.jpg" alt="xx" width=""/>或者互联网图片直接复制地址 - alt 名称 如果加载失败就会出现这个图片名称
- title 文字提示属性
超链接标签
<a href="地址">显示文字</a>地址必须把协议写全。
- target="_blank"在新窗口中打开
- title 鼠标提示信息
- 锚点连接
<a id="m1"></a>- 写一个锚点连接`xx
表格快速生成
table>tr>th*10按回车
- 合并单元格 rowspan="2"跨两行
表单标签
<form>...</form>
- action属性 提交的目标地址url
- method属性 提交方式 get和post
<form action="a.html" method="get"> 方法是get获取
姓名：<input type="text" name="uname"/><br/><br/>
密码：<input type="password" name="upass"/>
</form>
- enctype 提交类型
- target 在何处打开目标url
- name 表单的名字 用id代替
表单项
<input>
- type 是什么类型 文本框/密码输入/多选/提交按钮/重置按钮等
- name value名称和后面单选的值 type是radio
- checked 默认选中
- select下拉项目
- textarea 文本输入区域
音频
<audio>
- controls展示控件
- 下级标签
视频
<video>
- poster 指定图片
框架标签
嵌入一个子页面 <iframe> 如果想指定锚点连接到子页面，可以给子页面起名name= 然后让href的target指向iframe
CSS 层叠样式表
格式：选择器{属性：值；属性：值；属性：值;…}
h1 {color:blue;font-size:12px;}
在html里加入
<style>
h1{color:blue;font-size:20px}
</style>
注释：/*...*/
插入样式表
外部样式表
在html中head引入：<link rel="stylesheet" href="./css/my.css">
内联样式表
在行内li style="color:pink"> 尽量别写
内部样式
<style> li{}</style>直接把style写在head里
关系选择器
-
子元素
ul > li{color:blue;}这个是直接子标签采用此样式 -
- 紧邻的兄弟标签
- ~ 后面所有兄弟标签
title和class
在style中写上title=xx，然后在标签中写对应的class=xx可以指定某个标签应用该样式；如果是class~=aa则是以空格分隔开含a的都可以
li[class~="aa"]{color:red;}
- ~= 以空格分隔，以…开头
- |= 以-分隔 以…开头
- ^= 以…开头
- $= 以…结尾
-
- 只要含有…就可以
伪类选择器
- p标签class cc的首字下沉效果
p.cc::first-letter{} - 在前面加载内容
h1::before{content:"hello"} - first-child 第一个子标签
- first-of-type 第一个同级兄弟元素
- nth-child（4）第四个
- not(.cc) 取反 没有.cc的class
- hover 鼠标放上去的时候发生变化
举例
<style>
div.cc{
width:400px;
height:400px;
background-color:rgb(255,0,0)
}
</style>
边框
- 指定宽度
div.c1{
border:4px solid red;
}
对应的是线条的width style color
- 圆角处理 border-radius 50%的圆角处理就是圆形
- 阴影效果 2px solid #0000ff 一般是用div.c1:hover{}让鼠标移动到上面变阴影
补白（间距）
- padding 内补白 向内填充?px像素 参数：上下左右｜上下 左右｜上 左右 下｜上 右 下 左｜使用padding-top等设置
- margin 外补白 框距离其他元素的距离
margin:100px auto;上下100px 左右居中 常用 - 设置盒模型组成模式，border-box表示盒子宽度包含边框厚度和内补白。注意 默认指定宽度是内容，不包括边框和内补白，可以用border-box指定，
box-sizing:border-box这样就可以压缩回去
工具 calipers
找到px
margin折叠常规
- 只发生在块级元素上
- 浮动元素不重叠{float:left;} （块级标签独占一行）
- 设置overflow且值为非visible的块级元素不会与它的子元素发生margin重叠
- 根元素的margin不重叠
盒子模型举例
- 列表自动会有一定的格式，可以让
ul{list-style:none;}废除自动样式 - 让超链接也没有下划线这个自动格式
a{text-decoration:none;}再加一个鼠标晃上去的效果a:hover{} - 如果是body的下一级就是box 那么直接.box就可以设置，其头部为.box .header
- 设置头部导航条的背景图片：
.box .header{background-image: url(./images/spph_bg.gif) no-repeat;}
层次：
-
.box
- .box .header
- .box .header h4
- .box .content 内容
- .box .header
-
backgroud-position 设定背景图片定位
position定位属性
- position 指定定位类型 fixed固定定位（最上方导航条不动）
- z-index 指定图层顺序 值越大越在上方
#outer{} 对应<div id="outer">
#inner{}
- 过渡 比如隐藏在右边，鼠标晃上去会显示全
transition:right 0.5（秒完成） ease(平滑过渡)再写一个#mm:hover{right:50px}（由原来的right负值变为正值就能显示出来了）
layout
- 如果想让div在同一行，则需要float，让这个层腾空。批量处理：
div.d1,div.d2,div.d3{float:left}靠左浮动 - float可以自适应页面
- 可以清除浮动效果
clear:left - 让span标签块化，
display:block一般指定为行内块元素display:line-block，不会独占一行，会自动排列。超链接也可以这么做。 h1{display:none;}隐藏- overflow 内容超出隐藏
导航
*(指所有标签){margin:0px;padding:0px;}
ul{list-style:none;}
#nav{
height:50px
background:url(./images/repeat.png);
/*让列表浮动
#nav ul li{
width:140px;
float:left;
}
#nav ul li a{
/*超级链接没有宽度设置，块化
display:block;
width:140px;
front-color:white;
text-align:center;/*左右居中
text-decoration:none;
}
/*鼠标放上去的时候的变化
#nav ul li a:hover{
background-color: white;
color:blue;
}
flex 弹性盒子
Flex容器，子元素成为容器成员，即Flex项目。
- 水平的主轴和垂直的交叉轴
- 主轴上的对齐方式 justify-content：flex-start左|flex-end右|center中|space-between两端对齐|space-around项目之间间隔比项目与边框的间隔大一倍
- 项目上有一些属性
- 项目默认按主轴排列，单个项目占据主轴空间main size 交叉轴空间cross size
ul{
display:flex;//使用flex布局
}
ul.b1{
justify-content:space-between;
align-items:flex-start;
}
u1.b2{
justify-content:space-between;
align-items:center;
}
用户界面
- cursor 光标类型
- zoom 缩放比例
- box-sizing 盒模型组成模式，content-box定义width和height中不包含内填充和边框 border-box包含。。
- resize 可以调节框的大小
- outline 外轮廓
表格
- border-collapse:collapse 合并单元格线
过渡
- transition: height 0.5s ease-out,width 0.5s ease-out
2D变换效果
-ms-transform:translate(60px);
-ms-animation:animations 2s ease-out;
@-webkit-keyframes animations{
0%{-webkit-transform}
50%{-webkit-transform:translate(30px);opacity:1}
}
//在2秒中之内完成上述动作
媒体查询
@media 自适应窗口尺寸大小
字体图标
跟图片一样，但本质时是文字，可以随意改变颜色什么的。（一些icon图标）保存为svg格式，然后前端就可以用了。
icomoon
icomoon.io可以查找一些图标
- 拷贝项目下生成的@font-face
@font-face{
src:///
}
- 定义使用iconfont的样式
.iconfont{
-webkit-font-smoothing:antialiased;
}
- 挑选相应图标并获取字体编码，应用
<span class="iconfont">3</span>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
