html+css笔记1
HTML超文本标记语言
定义
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
网页的基本组成
- HTML 结构
- css 样式
- js 交互，动态
网页的特点
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
网页的兼容问题
对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
网页的结构
1 <!DOCTYPE html><!--文档申明--> 2 <html> <!--由开始标签和结束标签加内容组成的，这句话告知浏览器它是一个HTML文件--> 3 <head> <!--头部标签，自带css属性——display:none 隐藏--> 4 <meta charset="UTF-8"> <!--meta 元素--> 5 <title>Title</title><!--网页中的标题，在页面中的页卡（页眉）位置--> 6 </head> 7 <body><!--body是放置网页中的主体部分，所有的标签（元素）都放在body中--> 8 9 </body> 10 </html>
文档声明
- 声明必须是 HTML 文档的第一行，位于 标签之前
- 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
HTML5
<!DOCTYPE html>
HTML4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
meta元素
charset=""编码格式
gb2312国标UTF-8常用
name='keywords' content="关键字"name='description' content="描述网站的一段话"
关键字、描述的作用：利于SEO优化，引擎搜索
常用标签
块级元素
| 标签 | 描述 |
| h1-h6 | 标题标签 |
| div | 无意义标签，区分大模块 |
| ul>li | 无序列表 |
| ol>li | 有序列表 |
| dl>dt>dd | 自定义列表 |
| table>tr>td | 表格 |
块级元素的特点
- 独占一行，从上到下显示
- 可以设置盒子模型的所有属性（width/heiht/border/margin/padding）
- 在不设置宽高时，宽度是继承父级元素的宽，高度是由本身内容决定的
- 块级元素可以嵌套其它元素
- p元素不能嵌套块级元素，也不能嵌套 p元素
- dt,dd元素一般不会嵌套块级元素
行内元素
- 行内元素
| 标签 | 描述 |
| span | 无意义标签，区分行内小模块 |
| a | 超链接 |
| em | 斜体（强调作用） |
| i | 斜体 |
| strong | 粗体（强调作用） |
| b | 粗体 |
| sup | 上标 |
| sub | 下标 |
| lable | 无意义标签，用来描述表单功能 |
行内元素的特点
- 在一行显示，从左到右显示
- 不可以设置宽高
- 不可以嵌套块级元素
- 在编辑代码时，行内元素与行内元素之间如果出现空格或者换行时，会出现间隙（解决方法，给父元素设置font-size：0）
-
基线对齐问题
-
vertical-align:middle
- 行内块元素
-
| 标签 | 描述 |
| input | 表单标签 |
| img | 图片标签 |
| select | 下拉框 |
| textarea | 文本域 |
行内块级元素的特点
- 在一行显示，从左到右排布
- 可以设置宽高
- 不可以嵌套块级元素
- 在编辑代码时，行内元素与行内元素之间如果出现空格或者换行时，会出现间隙（解决方法，给父元素设置font-size：0）
- 基线对齐问题
- 不设置宽高时，行内块元素的高度由内容决定
块级元素与行内元素的转换
css属性之display
- block 块，显示
-inline 行内 - inline-block 行内块
- none 隐藏、消失
- display:none ;这个属性是让元素在页面中消失、隐藏，若要元素显示则设置display:block;
li转换为行内元素时会自动取消默认小圆点和序号
基线对齐问题
vertical-align改变行内元素和行内块元素的对齐方式
| 值 | 描述 |
| top | 所有的平级元素，去找最高（高度最高）的顶部进行对齐 |
| middle | 所有的平级元素，去找最高（高度最高）的中部进行对齐——最常用 |
| bottom | 所有的平级元素，去找最高（高度最高）的底部进行对齐 |
| px/% |
一般最常用的是vertical-align:middle
CSS样式
css的引入方式
- 行内式：直接在标签后面，添加一个标签属性style来进行引入
- 内嵌式：把css代码放到style元素内，通过css选择器来选择HTML元素，并将这个样式添加给HTML元素
- style 元素一般放在head元素内
- 外链式：将css代码单独放在css文件中，用link标签来进行引入
- 导入式：将css代码单独放在一个文件中，用style元素进行引入
@import "css样式表的地址"
import既不是标签也不是css样式，是一条声明语句
外链式和导入式的区别？面试题
- 外链式是通过link标签，导入式是一条声明语句
- 加载顺序不一样，外链式是和HTML元素同时加载的，而导入式是先加载HTML元素，等HTML元素加载完成后再加载样式表
- 当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为@import是不能被DOM控制的
css选择器语法
语法：选择器{css属性名:css属性值}
css常用选择器的分类
标签选择器
直接拿标签名当做选择器
权重：1
类选择器
获取标签的class属性值，加”.”
权重：10
- 类名（标签属性值）可以重复使用
- 类名可以有多个，类名之间用空格隔开
- 类名不能以数字开头，可以字母与数字组合
<style> .p1 { color: blue; } </style> <p clacc="p1">类选择器</p>
ID选择器
获取标签的ID属性值，加”#”
权重：100
ID名不能重复，具有唯一性
ID选择器常用来配合js使用，在静态页面中除了锚点外，不会用到ID选择器
#p2 { color: blue; } <p id="p2">id选择器</p>
通配符选择器
获取所有的HTML元素
语法：*{css属性名 : css属性值}
权重：0-1
通配符选择器匹配所有的HTML元素，比较消耗性能，在项目中不会使用
分组选择器
将同一份css样式分别添加给不同的HTML元素
语法：选择器1,选择器2,选择器3{css样式}
权重：分组选择器的权重是独立计算，不会叠加
后代选择器（派生选择器）
在根元素内找后代元素
语法：祖辈选择器 后代选择器{css样式}
权重：所有选择器组合之和
子级选择器
存在包含关系的元素选择，通过父级查找子级
语法：父级选择器>子级选择器
权重：所有选择器组合之和
使用子级选择器，元素之间必须是紧邻的父子关系
标签属性选择器
用标签属性名与标签属性值当做选择器来用
语法:
- [标签属性名]{css样式}
- [标签属性名=标签属性值]{css样式}
权重：10
当HTML元素中有标签属性为class（类选择器）时，就不会使用标签属性选择器
交集选择器
一个HTML元素中有两种选择器时（两种选择器同属于一个元素时）可以使用交集选择器来选择HTML元素
语法：选择器1选择器2{css样式}
权重：组合选择器相加之和
交集选择器：标签器和类选择器、标签选择器和标签属性选择器、类选择器和类选择器
标签器和类选择器相结合时形成交集选择器，标签选择器要放在类选择器前面
伪类选择器
给HTML元素添加某种状态
cursor: pointer;/*光标指针*/ 给标签添加指针，用在除了a标签外的其它标签
伪元素
用css代码向指定的元素内添加假的（HTML中不存在的内容）
:before在指定元素的所有内容之前
:after在指定元素的所有内容之后在使用伪元素时，必须保证两个前提：
- 必须带有display:block
- 必须带有content:”“，content的内容可以为空
在以后项目中常用的伪元素时:after，常用来清除浮动带来的影响
css常用属性
text（文本）
大小写text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) | overline;(上划线) | line-through;(删除线) | blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow: x轴偏移量 y轴偏移量 阴影面积 颜色;
font（字体）
颜色 color: #fff | rgb | rgba | 英文单词;
大小font-size: 数值;
字体风格 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique; (偏斜体) | italic;(斜体) | normal;(正常)
粗细font-weight: bold;(粗体) | lighter;(细体) | normal;(正常)
变体font-variant: small-caps;(小型大写字母) | normal;(正常)
background（背景）
背景background: transparent; /透明背景*/
颜色 background-color: #fff | rgb | rgba | 英文单词;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat| repeat | repeat-x | repeat-y;
滚动条 background-attachment: fixed | scroll;
背景图的位置 background-position:数值 | top | bottom | left | right | center;
简写方式： background:背景颜色 | 背景图象 | 背景重复 | 背景位置 ;
border（边框）
边框样式 border-style: dotted;(点线)| dashed;(虚线) |solid;| double;(双线)| groove;(槽线) |ridge;(脊状) |inset;(凹陷) |outset;
边框宽度 border-width: 数值;
边框颜色 border-color: #fff | rgb | rgba | 英文单词;
简写方式：border: width style color;
boder有四个边，四个边的样式可以分别设置top值 right值 bottom值 left值;
list-style（列表样式）
类型 list-style-type: disc(实心圆形符号) | circle(空心圆形符号) | square(实心方形符号) | decimal(阿拉伯数字) | lower-roman(小写罗马数字) | upper-roman(大写罗马数字) | lower-alpha(小写英文字母) | upper-alpha(大写英文字母) | none;
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写list-style:目录样式类型 | 目录样式位置 | url;
常用 list-style：none；
vertical（垂直）
vertical-align: sub(下标字)|super(上标字)|top(垂直向上对齐)|bottom(垂直向下对齐)|middle(垂直居中对齐)|text-top(文字垂直向上对齐)|text-bottom(文字垂直向下对齐)
cursor（光标）
光标形状 cursor:hand(链接手指) | crosshair(十字体) | text(文字型) | wait(漏斗) | move(十字箭头, 朝右) | help(加一问号)| |ne-resize(箭头朝右上) | nw-resize(箭头朝左上) | w-resize箭头朝左() | s-resize(箭头朝下) | n-resize(箭头朝上)| se-resize(箭头斜右下) | sw-resize(箭头斜左下)|也可以自定义
