html css 笔记
html概述和基本结构
相关概述
web 万维网
web前端的构成：结构(html实现),样式(css),行为(js)
html 超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
html标题标签
通过h1 h2 h3 h3 h4 h5 h6 ,标签可以在网页上定义6种级别的标题,h1定义最大的标题，h6定义最小的标题。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>p标签
标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
<p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
</p>
<p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>斜体标签和粗体标签
em和i标签为斜体，em有语义。 strong和b标签为粗体，strong有语意。strong可以从字面理解知道它是强调的意思，strong是逻辑标签，强调文档逻辑。对于搜索引擎（SEO）来说，strong比b重要的多。
span标签
span 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
换行标签和分隔线标签
<br>用来换行,<hr>水平线
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
<hr />
</p>
列表
1.有序列表 在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>- 无序列表 在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
<ul>
<li><a href="#">新闻标题一</a></li>
<li><a href="#">新闻标题二</a></li>
<li><a href="#">新闻标题三</a></li>
</ul- 自定义列表 定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
- src属性 定义图片的引用地址
- alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
- title属性 鼠标移入图像时提示的文本
相对路径和绝对路径
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
相对路径的常见表达符号：
- ./ 代表当前目录
- ../ 代表父级目录
- / 代表根目录
表格
1.<table>标签：声明一个表格，它的常用属性如下：
- border属性定义表格的边框，设置值是数值
- cellpadding属性定义单元格内容与边框的距离，设置值是数值
- cellspacing属性定义单元格与单元格之间的距离，设置值是数值
- align属性设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2.<tr>标签：定义表格中的一行
3.<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
- align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
- valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
- colspan 设置单元格可横跨的列数，设置值是数值
- rowspan 设置单元格可纵跨的行数，设置值是数值
表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
- <form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，一般有“get”方式和“post”方式
- <input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type="image" 定义图片作为提交按钮，用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域，用来存储值
- name属性
在一个表单域里，每一个表单元素（除了按钮）必须包含一个name属性，否则该表单元素的数据无法正确提交 - value属性
用户选择的项需要设置value值（单选按钮、复选框、下拉列表项），输入框的value值就是用户输入的内容，
- <select>标签 定义下拉表单元素
- <textarea>标签 定义多行文本输入框
- <option>标签 与<select>标签配合，定义下拉表单元素中的选项
注册表单实例：
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>CSS样式
css简介
CSS层叠样式表，是用来布局和美化网页的
css引入的三种方式
- 行内式
通过标签的style属性，在标签上直接写样式。
<link rel="stylesheet" type="text/css" href="css/main.css">
- 内嵌式
在head里添加一个style标签,把样式写在style标签之间
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
- 外链式
在head标签之间放入link标签，引入外部的.css文件，把样式写在文件里
<link rel="stylesheet" type="text/css" href="css/main.css">
三种引入方式遵守就近原则
CSS常用选择器
- 标签选择器
标签选择器，此种选择器影响范围大，作用于页面上所有的元素。 举例：
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
- id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
- 类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
- 后代和子代选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
.box>span{color:red} <!--子代 -->
.box .red{color:pink}<!--后代 -->
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
- 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
- 通用选择器
作用于所有标签
*{margin:0;padding:0}
css颜色表示法
css颜色值主要有三种表示方法：
1、颜色名表示，比如：red 红色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示红色
3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
CSS盒子模型
盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： 把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
设置一边的边框，比如顶部边框，可以按如下设置：
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线)
dashed(虚线) dotted(点线); */
上面三句可以简写成一句：
border-top:10px solid red;
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
设置内间距padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */ padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
css文本设置
常用的应用文本的css样式：
- color 设置文字的颜色，可继承，如： color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:'微软雅黑';
- font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
- text-indent 设置文字首行缩进，可继承，如：text-indent:24px; 设置文字首行缩进24px
- text-align 设置文字水平对齐方式，可继承。left || right || center || justif.如text-align:center 设置文字水平居中
- vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit 文本的垂直对齐方式。
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
块元素、内联元素、内联块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
浮动
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
定位
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
相对定位
position: relative;
让元素相对于它应该所在的位置进行偏移，也就是说相对定位的参照物是元素本身.
特点
- 相对定位的元素还在文档流内
- 相对定位的元素不会对其他元素产生影响
- 相对定位会覆盖在文档流内元素的上面
绝对定位
position：absolute
生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位(position)属性的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
固定定位
position:fixed
z-index
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级.越往后层级越高，可以设置负值
H5和CSS3新特性
HTML5新增标签
新增语义标签
1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚
- 块级元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等 - 行内元素
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button
多媒体
- 音频
<audio controls="controls">
<source src="./img/DreamItPossible.mp3" type="audio/mpeg">
</audio>
或
<audio controls="controls"src="./img/DreamItPossible.mp3"></audio>
- 视频
<video src="./img/1.mp4" width="320" height="240" controls="controls"></video>
CSS3
选择器
- E[attr]：只使用属性名，但没有确定任何属性值；
- E[attr="value"]：指定属性名，并指定了该属性的属性值；
- E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
- E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
- E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
- E[attr * ="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
- E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值；
- :hover用于当用户把鼠标移动到元素上面时的效果；
- :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
- :focus用于元素成为焦点，这个经常用在表单元素上。
- :first-child选择某个元素的第一个子元素；
- :last-child选择某个元素的最后一个子元素；
- :nth-child()选择某个元素的一个或多个特定的子元素；
- :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type()选择指定的元素；
- :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
- :first-of-type选择一个上级元素下的第一个同类子元素；
- :last-of-type选择一个上级元素的最后一个同类子元素；
- :only-child选择的元素是它的父元素的唯一一个了元素；
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :empty选择的元素里面没有任何内容。 变形
transform:translate(X|Y|Z)//位移 单位px
transform:rotate(X|Y|Z)//旋转 单位deg 若为负值，元素将逆时针旋转。
transform:scale(X|Y|Z)//缩放 缩放
transform:skew(X|Y|Z)//倾斜 单位deg
变形基准点 //默认的基准点是元素中间位置
transform-origin:top center; //中上方也可以用百分比
border-radius
作用:为元素添加圆角边框
border-radius:5px 10px 20px 40px /*左上 右上 右下 左下*/
border-radius:5px 100px /*左上和右下 右上和左下*/
border-radius:5px 100px 60px /*左上 右上和左下 右下*/
box-shadow
作用：给元素设置阴影效果
阴影水平偏移值(正负)
阴影垂直偏移值(正负)
阴影模糊值
阴影颜色
box-shadow: 50px 50px 1px red;
/*阴影 水平方向 垂直方向 模糊值 阴影颜色*/
/* 正数 水平往右 垂直往下
负号 水平往左 垂直往上 */
/*box-shadow: -10px -100px 100px blue;*/
/* 变形 transform
旋转度数 deg 度数单位 */
/*transform: rotate(180deg);*/
/*位移 水平 垂直 */
/*transform: translate(100px,200px);*/
/*缩放 水平方向 垂直方向*/
/*transform: scale(0.5,0.5);*/
/*倾斜 水平方向度数 垂直方向度数*/
/*transform: skew(30deg,30deg);*/
/*水平方向*/
/*transform: skewX(30deg);*/
/*垂直方向*/
/*transform: skewY();*/
动画效果
<style type="text/css">
div{
border: 1px solid red;
width: 200px;
height: 20px;
background-color: #00FFFF;
position: relative;
margin: 5px auto;
animation: mymove 3s ease infinite alternate;
-webkit-animation: mymove 3s infinite alternate;
}
@keyframes mymove{
0% {
width: 200px;
}
100% {
width: 500px;
}
}
@-webkit-keyframes mymove{
0% {
width: 200px;
}
100% {
width: 500px;
}
}
#box1{
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#box2{
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#box3{
animation-delay: 1;
-webkit-animation-delay: 1s;
}
#box4{
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>