HTML+CSS
html
超文本标记语言 hyper text markup language
俗称网页
<html>
<head>
子标签
head>
<body>
子标签
body>
html>
1. head 中的常见标签
文件名字后缀必须是 *.html 或者 *.htm
```html
网页标题
标签表示是网页的标题
<meta charset="字符编码">
告诉浏览器请用这个字符串编码显示网页内容
用来包含网页的脚本
<script>script>
用来包含外部样式表
<link>
2. body 中的标签
1) 标题标签
<h1> <h2> ... <h6>
2) 正文标签
段落标签
<p>
换行
<br>
分割线
<hr>
特殊文字需要转义显示
例如：
< <
> >
© ©
正文中常见标签
| 标签 | 含义 |
|---|---|
| p | 段落文本 |
| q | 引用文本 简短行内引用 浏览器会添加引号 |
| blockquote | 块引用 |
| em | 强调斜体 |
| strong | 强调粗体 |
| i | 斜体 |
| big | 粗体 |
| small | 表示细则一类旁注 |
| sup | 下标 |
| sub | 上标 |
| abbr | 缩写 缩写 |
| ins | 插入样式（下划线） |
| del | 删除样式 属性 cite 指向另一个文档的URl删除原因 datatime删除时间 |
| mark | 标记文本（阴影） 引起用户注意 搜索引擎搜索 |
| progress | 进度信息 |
| time | 时间信息 |
| footer | 脚注信息 |
| address | 作者信息 |
| wbr | 断点换行 在一行显示不够的情况下才有用 |
3) 超链接标签
<a href="链接地址">链接文字a>
图片标签
<img src="图片地址" width="宽度" height="高度">
宽度和高度的单位都是像素
让图片有链接的功能
<a href="链接地址"> <img src="图片地址"> a>
页面内的链接（锚）
首先在目的地标签添加 id=“唯一编号”, 然后在超链接的 href="#唯一编号"
4) 列表标签
有序列表
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
ol>
无序列表
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
ul>
5) 表格标签(重点)
<table>
<thead>thead>
<tbody>
<tr>
<td>td>
<td>td>
tr>
tbody>
<tfoot>tfoot>
table>
table>(thead>tr>td2)+(tbody>tr5>td*2)
表格合并单元格，可以使用td 的属性 colspan（合并列）rowspan（合并行）
6) 表单标签(重点)
接收用户的输入
<form action="http://www.baidu.com">
文本框 <input type="text" name="username">
<br>
密码框 <input type="password" name="password">
<br>
按钮 <input type="button" value="点我">
<br>
单选框
男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
<br>
多选框
唱歌 <input type="checkbox" name="hobby" checked value="1">
跳舞 <input type="checkbox" name="hobby" value="2">
游戏 <input type="checkbox" name="hobby" value="3">
睡觉 <input type="checkbox" name="hobby" value="4">
<br>
<input type="file">
<br>
<input type="date" value="2018-12-30">
<br>
<input type="submit" value="提交">
<input type="reset" vlaue="重置">
form>
7. iframe
内嵌另一个页面
<iframe src="http://www.baidu.com" width="100%" height="500">iframe>
CSS
层叠(级联)式样式表
cascade style sheet
美化html 网页的
颜色相关的样式
前景色
color: 单词
rgb(红色, 绿色, 蓝色) 范围从 0~255
16进制值 格式 `#红绿蓝` 范围从 0~FF
rgba(红色, 绿色, 蓝色, 0.0~1.0)
特殊取值
白色 rgb(255,255,255)
黑色 rgb(0,0,0)
背景色
background-color:颜色
背景图
background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复
盒子模型
margin 外间距
margin-left
…
border 边框
border-left 边框宽度 边框线类型 边框颜色
border-style 边框样式
| dotted | 点线 |
| dashed | 虚线 |
| solid | 实线 |
| double | 双线 |
| groove | 立体凹槽 |
| ridge | 立体凸槽 |
| inset | 立体凹边 |
| outset | 立体凸边 |
…
padding 内间距
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
CSS完善盒模型
box-sizing 定义盒模型尺寸解析方式
| 取值 | 解析方式 |
|---|---|
| content-box | width/height=border+padding+content |
| border-box | wigth/height=content |
resize 定义用户以拖动方式改变元素尺寸
| 取值 | 含义 |
|---|---|
| none | 用户不能调节元素尺寸 |
| both | 可以改变长宽 max-height max-width |
| horizontal | 仅宽度 |
| vertical | 仅高度 |
| inherit | 默认继承 |
overflow-x/y 溢出处理
| 取值 | 含义 |
|---|---|
| visible | 不剪切内容 也不添加滚动条 |
| auto | 在需要时剪切内容 并增加滚动条 |
| hidden | 不显示超出元素尺寸的内容 |
| scroll | 当超出时 overflow-x显示为横向滚动条 overflow-y显示为纵向滚动条 |
| no-display | 超出尺寸不显示元素内容 类似添加display：none |
| no-centent | 超出尺寸不显示内容 类似添加visibilty:hidden |
outline outline-color outline-width outline-style
outline-color 设置颜色
outline-width 设置宽度
thin | medium | thick | | inher
outline-style 设置样式
auto |
outline-offset 设置偏移
定义轮廓距离容器的值
border-image
| border-image-source | 边框背景图像源 |
| border-image-slice | 如何裁切背景图像 |
| border-image-repeat | 定义背景图像重复性 |
| border-image-width | |
| border-image-outser | 显示大小 |
定位方式
position 定位方式
| static | 不定位遵循HTML默认的流动模型 |
| absolute | 绝对定位 使用left、right、top、bottom属性(在段落文字中 left 即第一行的开始位置 bottom为第一行最后一个字右下角) |
| fixed | 固定定位不随浏览器窗口滚动条滚动而变化(在浏览器中位置永远不发生变化) |
| relative | 相对定位 通过left、right、top、bottom属性确定元素在正常文档流中偏移位置(即在本应该存在的位置的偏移) |
position: absolute; /绝对定位/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标 取值越大，越靠上
width: 宽度
height: 高度
字体相关
font-size : 字体大小
取值：xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller |length
font-weight 字体粗细
取值：normal(400)| bold(700)| bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-family: 字体种类 （电脑上事先需要有这个字体）
| serif | 衬线字体 变宽 笔画粗细明显 字体头部尾部有装饰线 |
| sans-serif | 无衬线字体 变宽 笔画粗细不明显 |
| cursive | 草体 斜体字型 |
| fantsy | 奇异字体 装饰性 艺术字体 |
| monospace | 等宽字体 |
font-style:字体样式
取值：normal | italic(斜体） | oblique(倾斜）
text-align: 文本对齐
取值： left | right | center | justify(两端对齐）
text-decoration： 下划线
none | underline(下划线) | blink(闪烁) | overline(上划线) | line-through(贯穿)
vertical-align 垂直对齐
auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
letter-spacing 定义字距
Word-spacing 定义词距
line-height 行高
normal | length(最佳1.2em~1.8em)
text-indent 首行缩进 2em
text-shadow 文本阴影 水平偏移 垂直偏移 阴影模糊度 阴影颜色，
text-overflow 定义溢出文本
| clip | 表示不省略标记（…） 简单裁剪 |
| ellipsis | 表示显示省略标记（…） |
| ellipsis 表示显示省略标记（…） | 插入位置是最后一个词 |
要加上 white-space：nowrap //文本一行内显示
overflow:hidden 溢出内容隐藏
美化图像
border-style 边框样式
border-top-style
border-right-style
border-bottom-style
border-left-style
| dotted | 点线 |
| dashed | 虚线 |
| solid | 实线 |
| double | 双线 |
| groove | 立体凹槽 |
| ridge | 立体凸槽 |
| inset | 立体凹边 |
| outset | 立体凸边 |
border-color 边框颜色
border-width 边框宽度
border-top-color\width
border-right-color\width
border-bottom-color\width
border-left-color\width
opacity:0~1 定义图像不透明度
border-radius 定义圆角图像 12px\50%
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
box-shadow 定义阴影图像
水平偏移 垂直偏移 模糊半径 颜色
美化背景图像
定义背景图像：background-image：url( );
background 设置渐变背景
| linear-gradient | 线性渐变创建背景图像 |
| radial-gradient | 径向(放射性)渐变创建背景图像 |
| repeating-linear-gradient | 重复线性渐变 |
| repeating-radial-gradient | 重复径向渐变 |
background: linear-gradient(to bottom, #00adee,#0078a5);
background-repeat 定义显示方式
| repeat-x | 图像在横向上平铺 |
| repeat-y | 图像在纵向上平铺 |
| repeat | 图像在横向和纵向上平铺 |
| no-repeat | 图像不平铺 |
| round | 背景图像自动缩放直到适应且填充整个容器 |
| space | 背景图像以相同的间距来平铺且填充满整个容器或某个方向 |
background-position 定义显示位置
left | center | right | bottom | left center | top right | 0% 0% | 50% 0% |
**+background-attachment **定义固定背景图像
| fixed | 背景图像相对于浏览器窗口固定 |
| scroll | 背景图像相对于元素固定 |
| local | 背景图像相对于元素内容固定 |
background-origin: 图像定位方式
| border-box | 从边框开始 |
| padding-box | 从补白开始 |
| content-box | 从内容开始 |
background-clip 图像裁剪区域
| border-box | 从边框开始向外裁剪 |
| padding-box | 从补白开始向外裁剪 |
| content-box | 从内容开始向外裁剪 |
| text | 从前景内容(如文字）开始向外裁剪 |
**background-size ** 背景图像大小
| 像素 ， 像素 | |
| 百分比 ， 百分比 | （以容器大小为基础 0%~100%） |
| cover | 保持本身比例，将图像缩放到正好覆盖(可能图片不完整) |
| contain | 保持本身比例，将图片缩放到宽或高刚好覆盖 |
linear-gradient(angle,color1,color2 ,…,) 定义线性渐变
angle: to left | to right | to top | to bottom
color: 颜色 角度
repeating-linear-gradient() 重复线性渐变
eg: repeating-linear-gradient(red,blue 20% ,red 40%)
**radial-gradient(shape size at position,color1,color2,…,) **径向渐变
shape :circle | ellipse
size : 若circle 则半径 若 ellipse 则x轴半径和y轴半径
closest-side 指向径向渐变的半径长度为从中心点到最近的边
closets-corner 指向径向半径的半径长度从中心点到最近的角
farthest-side 指向径向渐变的半径长度为从中心点到最远的边
farthest-corner 指向径向半径的半径长度从中心点到最远的角
position :中心点坐标
left | center | bottom | right | top
repeating-radial-gradient() 重复径向渐变
eg; repeating-radial-gradient(circle at center bottom,#00a340,#00a340 20px,#d8ffe7 20px,#d8ffe7 40px)
美化超链接
target=’_blank" 在新窗口打开
target="_top" 跳出框架
超链接样式
| a:link {color: } | 默认样式 |
| a:visited {color: } | 访问后 |
| a:hover {color: } | 鼠标经过 |
| a:active {color: } | 激活时 |
清除下划线样式 a{ text-decoration:none；｝
鼠标经过时加上 a:hover{ text-decoration:underline;}
border-bottom 显示下划线效果
立体效果：通过边框和颜色
动态效果：通过缩放字体大小 改变背景图像
美化列表
有序列表属性：
reversed.降序
**start=“number” **起始值
**type="1 | A | a | I | i " **标记类型
list-style-type 列表项目符号类型
list-style-image 自定义项目符号 允许指定一个外部图标文件
list-style-position 列表项目符号显示位置
取值：outside | inside
美化表格
colspan* 定义可横跨的列数
rowspac 定义可横跨的行数
border-collapse 定义表格的行和单元格的边是合并还是分开
初始-sepaeate(分开) collapse(合并)
border-spacing 定义行和单元格边在横向和纵向上的距离
caption-side 定义表格的caption对象位于表格的底部还是顶部
取值：top | bottom
empty-cells 定义单元格无内容时是否显示边框
取值 show | hide
*table-layout 定义布局算法
fixed 一次一行显示
auto 全部读取完之后显示
技巧
隔行换色：
tr:nth-of-type(odd){ } 奇数行
tr:nth-od-type(evev){ } 偶数行
鼠标经过时：
tr:hover{ ｝
##美化表单
| 属性 | 含义 |
|---|---|
| alt | |
| max | 输入字段最大值 |
| maxkength | 输入字段中字符的最大长度 |
| min | 输入字段的最小值 |
| height | input字段高度 |
| width | input字段的宽度 |
| name | |
| pattern | 输入字段的格式 pattern="[0~9]" 输入值必须是数字 |
| readonly | 字段为只读 |
| disabled | 不可用状态 |
| required | 字段值是必须的 |
| size | 字段的宽度 |
| src | 以提交按钮形式显示的图像URl |
| value | 设置Input元素的值 输入框中显示 |
| hidden | |
| type | 表单类型 |
textarea
文本区域 大容量输入
属性 cols | rows
点击提示文字获得焦点的两个办法
1.
CSS隐藏属性：
visibility:hidden 设置元素不可见 占据空间
display:none 设置元素不可见 不占据空间
display: block; 显示
样式表
1. 类选择器
.名字 之后使用标签的 class=“名字引用”
2. ID选择器
根据标签的id属性来进行匹配
#id值 之后使用标签的 id=“id值”
3. 元素选择器
根据标签的名字进行匹配
优先级: 如果不同的选择器匹配到了同一个元素，
- style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低,
- 同级选择器，后定义的优先
- 可以用 !important 改变优先级，可以把优先级提升到最高
4. 父子选择器
/* 找到一个p标签，并且它的父标签必须是div */
div>p {color:red;}
格式
父标签>子标签
5. 祖先后代选择器
格式
祖先标签 后代标签
6. 伪类选择器
按钮 鼠标移入改变样式，鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时