HTML&CSS 简单总结

HTML&CSS

一.开发环境配置

1.安装vsCode

 vscode安装插件：  
    Auto Close Tag
    Live Server
    css peek
    open in browser
    view in browser
    Path Autocomplete
    HTML CSS Support
    Auto Rename Tag
    Color Highlight
  
 在设置中添加：
	"editor.parameterHints": true,
	"editor.quickSuggestions": {
	"other": true,
	"comments": true,
	"strings": true
	}

2.vscode快捷键配置

文件-->首选项-->键盘快捷方式-->keybindings.json

[
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+w",
        "command": "extension.openInDefaultBrowser"
    },
    {
        "key": "alt+b",
        "command": "-extension.openInDefaultBrowser"
    }
]

3.,注册google账号安装插件

蓝灯（Lantern）；注册谷歌号；在谷歌上安装以下插件
	Momentum,Fireshot,pageRuler,colorZilla
	，草料,adblock,JSONView 

二.HTML语言

1.所有标签

	定义注释。
	定义文档类型。
< a>	定义超链接。
< audio>	定义声音内容。
< b>	定义粗体文本。
< body>	定义 body 元素。
< br>	插入换行符。
< button>	定义按钮。
< caption>	定义表格标题。
< col>	定义表格列的属性。
< command>	定义命令按钮。
< datalist>	定义下拉列表。
< dd>	定义定义的描述。
< del>	定义删除文本。
< div>	定义文档中的一个部分。
< em>	定义强调文本。
< form>	定义表单。
< frame>	HTML 5 中不支持。定义子窗口（框架）。
< frameset>	HTML 5 中不支持。定义框架的集。
< h1> to < h6>	定义标题 1 到标题 6。
< head>	定义关于文档的信息。
< header>	定义 section 或 page 的页眉。
< hr>	定义水平线。
< html>	定义 html 文档。
< i>	定义斜体文本。
< iframe>	定义行内的子窗口（框架）。
< img>	定义图像。
< input>	定义输入域。
< ins>	定义插入文本。
< label>	定义表单控件的标注。
< li>	定义列表的项目。
< link>	定义资源引用。
< map>	定义图像映射。
< mark>	定义有记号的文本。
< menu>	定义菜单列表。
< meta>	定义元信息。
< ol>	定义有序列表。
< option>	定义下拉列表中的选项。
< output>	定义输出的一些类型。
< p>	定义段落。
< param>	为对象定义参数。
< script>	定义脚本。
< select>	定义可选列表。
< span>	定义文档中的 section。
< strong>	定义强调文本。
< style>	定义样式定义。
< table>	定义表格。
< tbody>	定义表格的主体。
< td>	定义表格单元。
< textarea>	定义 textarea。
< tfoot>	定义表格的脚注。
< th>	定义表头。
< thead>	定义表头。
< time>	定义日期/时间。
< title>	定义文档的标题。
< tr>	定义表格行。
< ul>	定义无序列表。
< var>	定义变量。
< video>	定义视频。

< label > 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

< label > 标签的 for 属性应当与相关元素的 id 属性相同。

2.主要标签介绍

表格标签（重要）： <table> <th> <tr> <td>
超链接标签： <a> href target(取值_blank新窗口打开  _self本窗口)
图片标签：<img/>src路径 alt无法显示时的字 width  height
框架标签：<frameset> <frame>
排版标签：<h1>~<h6> <p>段落 <br/>换行 <hr/> <b>粗体 <i>斜体
列表标签： <ul>无序列表 <ol>有序列表 <li>列表项
字体标签： <font>size color属性

2.1表格标签（重要）

<table  属性.... >
	<tr  >
		<td  属性.... > 内容 td>
			。。。若干个单元格。。。
	tr>
	。。。若干个行。。。
table>

<caption>标题 <thead>表头 <tbody>表体 <tfoot>注脚

(1)table标签的常用属性

border-collapse： collapse  （重要）
			//设置表格的边框被折叠成一个单一的边框
border  设置表格的边框宽度（粗细）
cellspacing  设置单元格与单元格边框之间的空白间距宽度
cellpadding  设置单元格内容与边框线之间的空白间距宽度
width  设置表格的宽度
height  设置表格的高度
align  设置表格在网页中的水平对齐方式left、center、right
background  设定表格的背景图
bgcolor  设定表格背景颜色
bordercolor  设定表格边框线的颜色

tr标签没有特殊属性，在此不做介绍！

(2)td标签的常用属性

//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行

width  设置单元格的宽度
height  设置单元格的高度
align  设置单元格中的内容的水平对齐方式  left、center、right
valign  设置单元格中的内容的垂直对齐方式  top、middle、bottom  
rowspan  设置要跨行（纵向）合并的单元格数  
colspan  设置要跨列（横向）合并的单元格数
background  设定单元格的背景图
bgcolor  设定单元格背景颜色

(3)th标签

用在表头中，td标签可以使用th进行替换，表示“标题单元格”，其本质也是单元格。但th标签有特殊效果：自动加粗并居中

2.2表单标签（重要）

//input输入框type不同
   1.代表输入框 text password
   2.代表选择 redio（单选） checkbox （复合选框）
   3.代表按钮 button（普通）submit（提交） reset（重置） image
   4.特殊的 hidden（隐藏） file（文件）
   
例：下拉选框（不需要input）
	<select>
        <option>洪山区</option>
         <option selected>青山区</option> （预选）
        <option>汉阳区</option>
	</select>

	单选： checked（默认）
     <label for="male" >男</label>
     <input id="male" type="radio" name="sex" value="男">
     <label for="female">女</label>
     <input id="female" type="radio" name="sex" value="女">
     
    复选：
   <label>爱好</label>
      <input type="checkbox" name="爱好" value="游泳">游泳
      <input type="checkbox" name="爱好" value="开车">开车
	</div>

2.3框架标签(内联标签)

  
    <frameset rows="20%,*">
        <frame src="top.html" />
        <frameset cols="20%,*">
            <frame src="left.html" />
            
            <frame name="right" />
        frameset>
    frameset>

三.CSS

1.css

1.1 样式重置

因为早些时候css没被使用时，浏览器厂商为了页面美观，会主动给加样式，但我们做开发时，首先就要清除其他的样式。

 <style>
      *{margin: 0;padding: 0}
    style>

1.2 css简介

（css是定义选定你所要改变的元素的一种方式）

selector {property: value}
selector选择器通常是您需要改变样式的 HTML 元素
属性（property）是您希望设置的样式属性（style attribute）

eg:
//HTML
<h1>hello worldh1>
//css
h1 {color:red; font-size:14px;}

1.3引入css样式

<link rel="stylesheet" href="xxx">

2.css选择器种类（面试）

<p class="test" id="first">hello worldp>
<h4>标题h4>

(1)css元素选择器
p{color:pink}

(2)class类选择器
.test{color:yellow}

(3)id选择器
#first{color:blue}

(4)分组选择器
p,h4{background:gray}

(5)后代选择器
div>span{} //选取div所有子元素为span的标签
div span{} //选中div之后的所有span元素

(6)兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素

(7)伪类选择器
div:hover{}   
input:focus{}	

例：     p:hover{ (鼠标滑过变色)
            color:red
        }
        input:focus{  （聚焦变色）
            background: pink;
        }

(8).属性选择
div[class='test']{}

选择器的优先级，越深优先级和权重越大

3.css基本样式

简单合并：	
	color:设置文字的颜色
    width:设置一个元素的宽度
    height:设置一个元素的高度
    background-color:设置背景颜色
    background-image:设置一个元素的背景图片
    line-height:设置文字的行高
    text-align:设置文字对其的方式
    border-width:边框的宽度
    border-style:边框的样式
    border-color:边框的颜色
    p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式

具体分类：

3.1 背景相关

背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景位置:background-position: x y 
//第一个参数表示离x轴的距离,y表示离y轴的距离
//简写
background: color image repeat  position

background-size	//指定背景图片大小。

background-size: x y;	//x表示宽度，y表示高度

background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;

3.2 文本相关

text-align  文本对齐方式：  right|left|center 

text-decoration  
	文本修饰: underline|overline|line-through|none
	
text-indent 文本缩进
text-transform 文本转换(了解)uppercase|lowercase|capitalize

3.3 字体相关

color:设置字体的颜色

例： body {color:red;}
	h1 {color:#00ff00;}
	h2 {color:rgb(255,0,0);}

font-size 
font-style:normal | italic
font-weight:normal | bold | lighter

行高  line-height 会向上下扩张，让文本居中显示
font-family:字体集
body{
    font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,
    WenQuanYi Micro Hei,sans-serif;
}

3.4 链接相关

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

//*若单独设置几个链接，必须遵守如下规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

3.5 列表相关（针对ul）

border-width  边框的宽度
border-style   边框的样式
border-color 边框的颜色

//可以简写成
border： width style color
p{border:1px solid #333}

//边框-单独设置各边
p
{
    border-top:1px solid #ccc;
 }

3.6 表格相关

其他表格相关的在  二-->2.1  中

//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

3.7 其他

透明度： opacity
visibility:hidden|visible区别

边框相关：
边框圆角 ： border-radius：15px 0 15px 0;
border-bomtm-style:solid  下边框实线

向 div 元素添加方框阴影：
box-shadow: 10px 10px 5px #888888;

zIndex 属性设置元素的堆叠顺序。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
auto		默认。堆叠顺序与父元素相等。
number		设置元素的堆叠顺序。
inherit		规定应该从父元素继承 z-index 属性的值。

display属性 ：
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。

4.盒子模型(重要)

1.简介

div{
     width: 100px; 		内容（content）的宽
     height: 100px;		内容（content）的高
     border: 1px solid #333;	框边（border）边1px，实线，颜色
     padding: 50px;		填充（padding），框和内容中间，占的像素
     margin: 100px;		边界（margin）占像素
        }
        
border中：dotted solid double dashed; 点，实线，双线，虚线

当设置 box-sizing:border-box; 后， 不会改变box整个的高和宽； 如果设置填充，边界，其他的，都向内挤；

2.盒子模型的传参：

一个参数 margin:0;  //四个方向都改变
两个 margin:0 10px; //top,bottom为0px;left,right为10px
三个 margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;
四个  就是  上右下左顺序 ；
margin 同上一样

5.标签分类与居中显示（重要）

5.1标签分类

块标签:  
  (特点:1.独占一行2.能够设置width,height  原因display:block;)
//常用的块标签
div,h1~h6,p,ul,li,dl,dt,dd

内联标签:
(特点:1.并排显示2.不能设置width,height 3.不能设置margin-top,margin-bottom   原因：display:inline-block)
//常用的内联标签
a,span,em,strong

内联块:
(特点: 1.并排显示 2.可以设置宽高  原因：display:inline-block)
//常用的内联块标签
button,img,input

5.2居中显示

普通居中显示： （  /* 元素居中只对块元素有效 */）
  div{
           width: 100px;
           height: 100px;
           /* 让这个元素实现水平居中 */
           margin-left: auto;
           margin-right: auto;
       }

​ 那 如何让内联元素和内联块元素水平居中：

（1）变性：
	display:block;然后
	margin-left:auto;
	margin-right:auto;
（2）//给父级加
	text-align:center

6.浮动float和定位（重要）

1.简介

（1）目的：为了让元素并排显示
（2）当父类未设置高度，会继承子类高度，但是当子类浮动后，父类的高会坍塌

当需要浮动，则设置，
float：		
	1.none more值，不浮动
	2.left/right  向左/由浮动
	3.inherit  继承父类元素float属性

2.如何清除浮动

(1)给下面的兄弟元素给clear:both;

(2)给浮动的元素套一个父级，然后加  overflow:hidden; 后面就不会影响

3.position（定位）

position: relative
	相对定位:元素在页面上正常的位置。从页面的原点算
	
position: absolute
绝对定位的元素相对于 static 定位以外的第一个父元素进行定位，如果没有已定位的父元素，那么它的位置相对于<html>,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed	
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

static	
默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit	规定应该从父元素继承 position 属性的值。

4.布局方式的总结

常用的布局方法
1.table表格布局 07年之前使用广泛,可以说是唯一的布局方式
2.float浮动+margin(经典)
3.inline-block布局 —— (有小问题设置父元素的font-size:0)
4.flex box布局(正统的布局方式)

5.响应式布局  @media媒体布局

5.实现元素的垂直水平居中（了解）

第一种
父元素设置parent{position:relative;}
子元素设置
child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

第二种
parent{
    position:relative;
}
child{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

四.ali矢量图形

http://www.iconfont.cn 加入购物车–>创建工程–>复制css链接 在html中引入，头加https:–>在Unicode复制图形代码–>到页面粘贴使用

五.flex布局

总结：

display:flex;

项目排列的方向：
flex-direction: row(默认)|row-reverse|column|column-reverse
	 row:主轴为水平方向，项目沿主轴从左至右排列
　　　column：主轴为竖直方向，项目沿主轴从上至下排列
　　　row-reverse：主轴水平，项目从右至左排列，与row反向
　　　column-reverse：主轴竖直，项目从下至上排列，与column反向

子元素是否换行：
flex-wrap: nowrap(默认)|wrap|wrap-reverse; 
	 nowrap：自动缩小项目，不换行
　　　wrap：换行，且第一行在上方
　　　wrap-reverse：换行，第一行在下面

控制子元素水平对齐的方法：
justify-content: flex-start（默认），flex-end，center，space-between，space-around;
		flex-start：左对齐
　　　　　flex-end：右对齐
　　　　　center：居中对齐
　　　　　space- between：两端对齐
　　　　　space-around：沿轴线均匀分布


控制子元素垂直对齐的方法：
align-items: flex-start|flex-end|center|baseline|stretch;
	  flex-start：顶端对齐
　　　　flex-end：底部对齐
　　　　center：竖直方向上居中对齐
　　　　baseline：item第一行文字的底部对齐
　　　　stretch：当item未设置高度时，item将和容器等高对齐