-
html 块标签：
- < div > 标签 块元素，表示一块内容，没有具体的语义
- 标签 行内元素，表示一行中的一小段内容，没有具体的意义
-
含样式和语义的标签：
- 标签 行内元素，表示语气中强调词，使用后字体会倾斜
- 标签 行内元素，表示专业词汇
- 标签 行内元素，表示文档中的关键字或者产品名
- 标签 行内元素，表示非常重要的内容
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录，比如：h1 标签是表示标题，p 标签是表示段落，ul、li 标签是表示列表，a 标签表示链接，dl、dt、dd 表示定义列表等，语义化的标签不多
-
html 图像标签：
-
标签，在网页上插入一张图片，它是独立使用的标签，他的常用属性有：
- src 属性 定义图片的引用地址
- alt 属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片，盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
- 用法：< img src="图片路径 + 图片名及后缀" alt="产品图片" />
-
html 链接标签：
href 属性-->定义跳转的链接
title 属性-->定义鼠标悬停时弹出的提示文字框
-
target 属性-->定义链接窗口打开的位置
- target="_self"缺省值，新页面替换原来的页面，在原来位置打开
- target="_blank"新页面会在新开的一个浏览器窗口打开
html <a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.baidu.com" title="跳转的百度网站">百度官网</a> <a href="./demo01.html" target="_blank">测试页面</a>
列表标签
-
有序列表
- 快速生成多个有序列表
-
ol>li*3生成 3 个有序列表
-
无序列表
- 快速生成多个无序列表
-
ul>li*3生成 3 个无序列表
-
定义列表
- 快速生成多个定义列表
- dl>(dt+dd)* 个数 生成指定个数的定义列表
-
html 表格
- < table >标签：声明一个表格，它的常用属性如下：
- width 属性 定义表格的宽
- height 属性 定义表格的高
- border 属性 定义表格的边框，设置值是数值
- border-radius 为元素添加圆角边框
- cellpadding 属性 定义单元格内容与边框的距离，设置值是数值
- cellspacing 属性 定义单元格与单元格之间的距离，设置值是数值
- align 属性 设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left | center | right
- < tr >标签：定义表格中的一行
- < td >和< th >标签：定义一行中的一个单元格，td 代表普通单元格，th 代表表头单元格，他们的常用属性如下
- align 设置单元格中内容的水平对齐方式，设置值有：left | center | right
- valign 设置单元格中内容的垂直对齐方式 top | middle |bottom
- colspan 设置单元格水平合并，设置值是数值
- rowspan 设置单元格垂直合并，设置值是数值
-
html 表单
- 表单用于搜集不同类型的用户输入，表单由不同的类型标签组成，相关标签及属性用法如下：
1. < form >标签 定义整体的表单区域
* action 属性 定义表单数据提交地址
* method 属性 定义表单提交的方式，一般有"get"和"post"方式
2. < label >标签 为表单元素定义文字标注
* for 属性 点击文字标注也可激活如填写表单框内容，需配合 input 标签中的 id 属性一起使用
* 用法
html
<label fro="user">用户名: </label>
<input type="text" name="username" value="username" id="user" />
3. < input >标签 定义通用的表单元素
* type 属性
* type="text" 定义单行文本输入框
* type="password" 定义密码输入框
* type="radio" 定义单选框
* type="checkbox" 定义复选框
* type="file" 定义上传文件
* type="submit" 定义提交按钮
* type="reset" 定义重置按钮
* type="image" 定义图片作为提交按钮，用 src 属性定义图片地址
* type="hidden" 定义一个隐藏的表单域，用来存储值
* value 属性 定义表单元素的值
* name 属性 定义表单元素的名称，此名称是提交数据时的键名
4. < textarea >标签 定义多行文本输入框
5. < sleect >标签 定义下拉表单元素
* < option >标签 定义下拉表单元素中的选项
-
css 样式
- css 页面引用方法：
1. 外联式：通过 link 标签，链接到外部样式表到页面中
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式 </title>
<link rel="stylesheet" type="text/css" href="[css的文件路径]" />
</head>
</html>
2. 嵌入式：通过 style 标签，在网页上创建嵌入的样式表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入式样式</title>
<style type="text/css">
h1{font-size: 22px;background-color: red;}
div{font-size: 18px;color:orange;}
</style>
</head>
<body>
<h1>页面标题</h1>
<div>这是一个div标签</div>
</body>
</html>
3. 行内样式的方式
html
<a href="http://www.itcast.cn" style="font-size:18px;color=red">传智播客</a>
-
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 设置文字水平对齐方式，如 text-align：center；设置文字水平居中对齐
-
opacity 设置元素的不透明度
- cursor 定义了鼠标指针放在一个元素边界范围内时所用的光标形状
- pointer 光标呈现为指示链接的指针（一只手）
-
css 颜色表示法：
- css 颜色值主要有三种表示方法：
- 颜色名表示，如：red 红色， gold 金色
- rgb 表示， 如：rgb(255，0，0) 表示红色
- 16 进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
css 选择器
"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。
选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2
element+element div+p 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<p>元素的第一个字母 1
:first-line p:first-line 选择每一个<p>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
- 标签选择器
- 标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中
举例
*{margin:0;padding:0}
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> <div class="red mt10 big">......</div> <div class="red">......</div>
- 层级选择器
-
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突，举例：
.box span{color:red;} .box .red{color:red;} .red{color:red;} <div class="box"> <span>......</span> <a href="#" class="blue">超链接111</a> </div> <h3 class="red"> ...... </h3>
- 组选择器
-
多个选择器，如果有同样的样式设置，可以使用组选择器，举例：
- margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的 margin-top 会加到外边的盒子上，导致内部的盒子 margin-top 设置失败，解决方法如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con{
width:300px;
height:300px;
background-color:gold;
/* 第一种解决塌陷的方法 */
/* border:1px solid; */
/* 第二种解决塌陷的方法 */
/* overflow:hidden; */
}
.box{
width:200px;
height:100px;
background-color:green;
margin-top:100px;
margin-left:50px;
}
/* 第三种解决塌的方法 */
/* 使用伪元素类方法解决塌陷： */
.clearfix:before{
content:"";
display:table;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
-
margin 和 padding
- margin
- 在 border 外侧添加空白
- padding
- 在 border 内部添加空白
-
css 元素溢出
- 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置
- overflow 的设置项：
- visible 默认值，内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除 margin-top 塌陷的功能
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
- 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 属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- block 元素以块元素显示
- *inline * 元素以内联元素显示
- inline-block 元素以内联块元素显示
- 浮动布局
- 浮动特性
- 浮动元素有左浮动 (float left) 和右浮动 (float right) 两种
- 浮动的元素会向左或向右浮动，碰到父元素边界，其他元素才停下来
- 相邻浮动的块元素可以并在一起，超出父级宽度就换行
- 浮动让行内元素自动转化为行内块元素 (此时不会有行内块元素间隙问题)
- 浮动元素后面没有浮动的元素会占据浮动元素的设置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果
- 父元素如果没有设置尺寸 (一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
- 浮动元素之间没有垂直 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"></div>