1.什么是HTML
2.HTML如何使用
3.HTML常用标签
4.CSS
一、什么是HTML
1.HTML的概念
HTML（Hyper Text Markup Language） 超文本标记语言。
“超文本”：比普通文本强大，超出普通文本的功能，比如可以在超文本中加入视频，图片，音频等.....。
“标记语言”：通过一套标签来描述页面的语言，这些标签是可以直接被浏览器解析的。
浏览器的一种标记语言，包含一系列的标签，用于显示网页的基础信息。通俗的讲，网页就是用HTML语言来编写的。浏览器识别HTML标签，显示对应的网页。
2.HTML的后缀名
html文件的扩展名：.html或.htm。
html不是一门编程语言，只是一个文档标记。
html文件的传输基于http协议。
3.HTML版本
现在网页中最常用版本：XHTML1.0 和 HTML4.01。
2008年1月推出HTML5草案，2013年正式成型。
HTML的标准由 W3C组织制定。
4.HTML作用
在开发中，主要使用html技术制作静态页面
二、HTML如何使用
1.HTML组成部分
<html> 根标签：声明当前是一个html文件
<head></head> 头标签：定义当前html文档的重要信息，比如标题，编码等
<body> 体标签：用于在浏览器展示的内容
Hello world
</body>
</html>2.编写HTML的注意事项
html标签有属性：格式为 key="值" 多个属性之间用空格分割
html只支持正确的嵌套关系
围堵标签：标签有开始有结束 <html>标签体</html>
空标签：没有标签体的
html不区分大小写
3.HTML编辑工具
链接：https://pan.baidu.com/s/1iZOs9bd4_cFAXMAp0FiSVw
提取码：xl0m
使用Hbuilder创建HTML
1、创建web项目
2、创建HTML文件
3、模板
三、HTML常用标签
1.head中常用的标签
title 文件的标题
meta 用来描述html文档的属性
script 编写或者导入js代码或文件
style 编写或者导入css代码或文件
（1）title标签
<title>html页面的标题</title>
（2）meta标签
<!--设置浏览器用utf-8字符集查看当前网页-->
<meta charset="UTF-8" /><!--自动刷新，3秒后自动跳转到www.baidu.com-->
<meta http-equiv="refresh" content="3;url=http://baidu.com" /><!--设置搜索关键字（搜索引擎优化）-->
<meta name="keywords" content="京东，电商购物" /><!--网页描述-->
<meta name="description" content="京东是国内最大的...." />（3）script标签
作用：在页面中编写javascript代码或引入javacript文件 后续更新
（4）style标签
作用：在页面中编写css代码 后续更新
（5）link标签
作用：引入其他文件(例如css文件) 后续更新
2.body中的标签
块级标签： 一个标签独占一行
行级标签：一个标签不会独占一行
（1）标题标签 h1...h6
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
注：hx x数字 当前标题的大小 x的取值范围是：1-6
特点：从1到6 字体变小。若超出最大范围使用默认字体大小。标题标签独占一行
（2）段落标签 p
<p>第一个段落</p>
<p>第二个段落</p>
属性：
align 对其方式
left（默认） 左对齐
center 居中
right 右对齐
特点：独占一行、上下留白
（3）换行标签 br
<p>
给你我平平淡淡的等待和守候<br />
给你我轰轰烈烈的渴望和温柔<br />
给你我百转千回的喜乐和忧愁<br />
给你我微不足道所有的所有<br />
</p>
<p>
给我你带着微笑的嘴角和眼眸<br />
给我你灿烂无比的初春和深秋<br />
给我你未经雕琢的天真和自由<br />
给我你最最真珍贵的所有的所有<br />
</p>
<p>
给你我义无反顾的长长和久久<br />
给你我多年以后仍握紧的手<br />
给你成熟你给我迁就<br />
会不会就这样白了头<br />
</p>
（4）水平线br
<hr size="1" width="200px" />
<hr size="2" width="50%" />
<hr size="3" color="aqua" />
<hr size="4" color="blue" />
<hr size="5" color="bisque" />
<hr size="6" color="chartreuse" />
<hr size="7" color="coral" />
常用属性：
size：水平线的粗细 1~7 特点：逐渐变粗
width：水平线的长短
px：像素
%：百分比
color：水平线的颜色
red：英文单词
十六进制：#ff00ff
（5）加粗和斜体 strong、b、i
<strong>我多想能多陪你一场</strong><br />
<b>把前半生的风景对你讲</b><br />
<i>在每个寂静的夜里我会想</i><br />
<i>那些关于你的爱恨情长</i><br />
属性：
strong和b：粗体
i：斜体
（6）div标签
作用：独占一行的效果，div+css做页面布局
注意：style不是必须加的，style是后续更新内容，只为看到当前div效果
<div style="background-color: red;">你在南方的艳阳里大雪纷飞</div>
<div style="background-color: blue;">我在北方的寒夜里四季如春</div>
（7）注释和特殊字符
<!--HTML注释-->
（8）span标签 font标签
<span style="background-color:red;">第一个span</span>
<span style="background-color: blueviolet;">第二个span</span>
<font color="aqua" size="1">想给你一次旅行</font>
<font color="black" size="2">到今天都没实现</font>
<font color="blue" size="3">想给你一个拥抱</font>
<font color="blueviolet" size="4">可是你不在我身边</font>
<font color="burlywood" size="5">想给你一丝温暖</font>
<font color="chartreuse" size="6">不奢求多少时间</font>
<font color="cornflowerblue" size="7"> 我一直在你身边</font>
font常用属性：
color：字体的颜色
取值：十六进制 #ff00ff
英文字母 red
size:字体大小 取值：1~7 特点：字体变大
（9）超链接 a
<!--作用一：跳转到外网-->
<a href="http://baidu.com" target="_self">百度</a><br /> <!--在原有页面打开-->
<a href="http://www.sina.com.cn" target="_blank">新浪</a><br /> <!--打开一个新的页面，点一次链接打开一个新的页面-->
<a href="http://www.taobao.com" target="_search">淘宝</a><br /> <!--打开一个新的页面，只会打开一个-->
<!--作用二：跳转到自己项目的其他页面-->
<a href="01-head中的标签.html">跳转到01-head中的标签</a><br />
<a href="./01-head中的标签.html">跳转到01-head中的标签</a><br />
<a href="html/超链接测试.html">跳转到html文件夹下的超链接测试页面</a><br />
<a href="../上级目录的页面.html">上级目录的页面</a><br /> <!--直接用浏览器打开这个html页面文件，然后点链接跳转，如果用Hbuilder打开，会提示找不到页面-->
<!--作用三：发邮件（打开邮件客户端）-->
<a href="mailto:zhangsan@sina.com">发邮件</a><br />
<!--作用四:--跳转到锚点-->
<a name="top"></a>
<div>
<a href="#c1">第一章</a>
<a href="#c2">第二章</a>
<a href="#c3">第三章</a>
</div>
<a name="c1"></a>
<p>第一章内容<a href="#top">返回顶部</a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</p>
<a name="c2"></a>
<p>第二章内容<a href="#top">返回顶部</a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</p>
<a name="c3"></a>
<p>第三章内容<a href="#top">返回顶部</a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</p>
<!--跳转到其他页面的锚点-->
<a href="01-head中的标签.html#c4">跳转到01-head中的标签的锚点</a>
属性
href：跳转路径
相对路径
./本页面同级别的路径
../本文件上一级别的路径
绝对路径
带有http和主机名结合在一起的路径
target:跳转的方式
_self 自身打开
_blank 其他标签页打开，点一次打开一个
_search 其他标签页打开，只会打开一个打开
（10）图片标签 img
<!--border图片的边框，title是鼠标放在图片上时显示的文字-->
<img src="img/小可爱.jpg" width="300px" height="300px" border="30px" title="小可爱"/>
<!--alt是图片路径不对或加载不出来的时候显示的文字-->
<img src="img/xxxx小可爱.jpg" width="300px" height="300px" border="50px" title="小可爱" alt="你的小可爱不在"/>
属性：
src：连接图片的地址
相对路径：
./ 获取同级别目录的资源文件
../ 获取上一级别目录的资源文件
绝对路径：
以http和主机名结合在一起使用的路径
width:宽度
height:高度
border:边框
title="鼠标停在图片上时提示的文字内容"
alt:图片路径不存在时显示提示信息
（11）列表标签
列表的种类：
无序列表
有序列表
定义列表
1）无序列表
<ul>
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ul>
<ul type="disc">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ul>
<ul type="circle">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ul>
<ul type="square">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ul>
2）有序列表
<ol type="1">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ol>
<ol type="a">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ol>
<ol type="A">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ol>
<ol type="i">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ol>
<ol type="I">
<li>李白</li>
<li>韩信</li>
<li>曹操</li>
<li>周瑜</li>
</ol>
共同的子标签：
li列表项
共有的属性：
type:标识的类型
ul：实心圆 disc、空心圆 circle、实心方块 square
ol：1、a、A、i、I
3）定义列表
<dl>
<dt>所属院校</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
（12）表格
<!--cellspacing="50px"-->
<table border="1px" align="center" width="500px" height="300px" bgcolor="aqua" cellspacing="50px">
<tr bgcolor="blueviolet" align="center">
<th bgcolor="cadetblue">id</th>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>
<tr>
<td>1</td>
<td>貂蝉</td>
<td>18</td>
<td>王者峡谷</td>
</tr>
<tr>
<td>2</td>
<td>吕布</td>
<td>20</td>
<td>王者峡谷</td>
</tr>
</table>
<!--cellspacing="0px"-->
<table border="1px" align="center" width="500px" height="300px" bgcolor="aqua" cellspacing="0px">
<tr bgcolor="blueviolet" align="center">
<th bgcolor="cadetblue">id</th>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>
<tr>
<td>1</td>
<td>貂蝉</td>
<td>18</td>
<td>王者峡谷</td>
</tr>
<tr>
<td>2</td>
<td>吕布</td>
<td>20</td>
<td>王者峡谷</td>
</tr>
</table>
<!--cellpadding=50px-->
<table border="1px" align="center" width="500px" height="300px" bgcolor="aqua" cellspacing="0px" cellpadding="50px">
<tr bgcolor="blueviolet" align="center">
<th bgcolor="cadetblue">id</th>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>
<tr>
<td>1</td>
<td>貂蝉</td>
<td>18</td>
<td>王者峡谷</td>
</tr>
<tr>
<td>2</td>
<td>吕布</td>
<td>20</td>
<td>王者峡谷</td>
</tr>
</table>
<th>定义表头
<tr> 定义行
<td> 定义列
属性：
border：边框
width：宽度
height：高度
align:对其方式
bgcolor：背景颜色
Cellpadding 单元格中包含数据距离单元格边框的距离
Cellspacing 单元格边框之间或单元格边框和表格边框之间的距离
<!--跨列-->
<table border="1px" align="center" width="300px">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
<!--跨行-->
<table border="1px" align="center" width="300px">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>50</td>
</tr>
<tr>
<td>数学</td>
<td>60</td>
</tr>
</table>
属性：
跨行合并：rowspan 列不动 行动
跨列合并：colspan 行不动 列动
（15）表单标签
作用：收集数据。例如：注册、登录等操作时需要收集用户填写的数据。
1）子标签：输入框 （input）
<!--单行文本框 在输入框内的数据可见-->
单行文本框：<input type="text" size="30" maxlength="5"/><br />
<!--文本框长度为30，最多输入5个字符-->
<!--密码框 在输入框内的数据以密文展示-->
密码框：<input type="password" /><br />
<!--单选按钮 多个单选框只能点选其中之一-->
单选按钮：<input type="radio" />男
<input type="radio" />女<br />
<!--复选框 可以点选多个选项-->
复选框： <input type="checkbox" />语文
<input type="checkbox" />数学
<input type="checkbox" />英语<br />
<!--文件框 选择本地文件-->
文件框：<input type="file" /><br />
<!--隐藏域 隐藏域不会显示在页面上-->
隐藏域：<input type="hidden" /><br />
<!--普通按钮 普通按钮不会提交整个表单数据，需要结合js使用-->
普通按钮：<input type="button" /><br />
<!--提交按钮 可以提交整个表单的数据到指定服务器-->
提交按钮：<input type="submit" /><br />
<!--重置按钮 具有重置表单功能-->
重置按钮：<input type="reset" /><br />
<!--图片提交按钮 和<img src=””/>标签功能相同，可以在页面中引入图片。不同是，和 submit一样，具有提交表单的能力-->
图片提交按钮：<input type="image" src="img/小可爱.jpg" width="50px" height="50px"/><br />
2）子标签：文本域（textarea）
文本域：<textarea cols="6" rows="6">默认内容</textarea><br /> 
常用属性：取值为数字
cols：可见列宽
rows：可见行数
3）子标签：下拉列表框（select）
下拉列表框:<select multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
multiple=”multiple“ 把列表框设置为可以多选（按住ctrl或shift）
4）注意：两个问题
第一个问题：除了sex和hobby之外其他所有数据都没有拼接到url地址栏后面 (只有sex和hobby传递到服务器了）
第二个问题：多选选中数据后，在提交整个表单的时候会出现hobby=on
解决方案：
共有的属性：
name：可以把单选输入框和复选输入框设置为一组可以把相应数据拼接到url地址栏后 面传递到后台服务器
value:可以为按钮设置一个名字，若按钮有名字则覆盖可以把具体的值拼接到url地址栏 后面(单选和复选)
注意：url格式：在url位置后加上一个？，？后每个字段以键值对方式进行拼接多个键 值对用&进行拼接
5）form表单属性说明：表单标签
说明：以上所有收集数据的标签都要放在<form></form> 标签中才能提交给后台代码。
<form action="" method=""></form>属性说明：
action 表单提交路径
method 表单提交方式，get和post
get:会把参数拼接到url地址栏后面显示，并且对传递的参数大小有限制
post:参数不会显示在url地址栏后面，而是存放在http请求体中，并且 对传递参数大小无限制
6）属性 readonly属性 disabled属性
id属性： html页面中的所有标签都有id属性。
建议：同一页面中的所有标签的id属性值都要唯一
readonly 属性： 用来将标签设置为只读（不能修改内容）
disabled 属性： 将标签设置为不可用 （不能修改内容）
区别：disabled ：提交表单时不会把数据传递到后台，并且表单置灰，而readonly 不会置灰可以把数据提交到后台
7）form表单默认值设置
若为文本输入框和密码输入框 设置value属性即可
若为单选输入框或复选输入框 设置checked="checked" 或者简写为checked
若为下拉选 设置selected="selected" 或者简写为 selected
若为文本域 直接在标签体中设置默认值即可
<form action="" method="get">
姓名:<input type="text" name="username" value="xx"/><br />
密码:<input type="password" name="password" value="123456"/><br />
性别:<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女<br />
爱好：<input type="checkbox" name="hobby" value="smoking"/>抽烟
<input type="checkbox" name="hobby" value="drink" checked/>喝酒
<input type="checkbox" name="hobby" value="tHead" checked/>烫头<br />
头像:<input type="file" name="fileName"/><br />
生日：<input type="date" name="birthday"/><br />
省份：<select name="pro">
<option>黑龙江</option>
<option selected>吉林</option>
<option>辽宁</option>
</select>
城市：<select name="city">
<option>齐齐哈尔</option>
<option>哈尔滨</option>
<option>漠河</option>
<option>吉林市</option>
<option>铁力</option>
<option selected="selected">松原</option>
<option>大连</option>
<option>沈阳</option>
<option>丹东</option>
</select><br />
介绍：<textarea cols="100" name="jj" rows="5">我是默认值</textarea><br />
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="img/小可爱.jpg" whidth="30px" height="30px" />
<input type="hidden" value="张三" />
</form>
四、CSS
1.什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
“层叠”：可以把多个样式叠加在一个html元素上面。
“样式表”：把样式抽取到一个文件中也可以单独存在。
2.CSS有什么用
可以修饰html元素（渲染html）
可以提高工作效率
3.CSS的特点
语言特别简单
开发的样式可以重复使用
依赖于HTML
4.CSS和HTML的整合方式
内联样式表：每个标签都有style属性 通过style属性整合即可
内部样式表：使用head标签的style子标签完成整合
外部样式表：在外部定义一个后缀名为.css的文件 然后使用head标签的link子标签完成整合
<!--内联样式表-->
<body>
<div style="color: red; background-color: aqua;">内联样式表</div>
</body>
<!--内部样式表-->
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
color: blueviolet;
background-color: chartreuse;
}
</style>
</head>
<body>
<div>内部样式表</div>
</body>
<!--外部样式表-->
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式表导入-->
<link rel="stylesheet" href="css/外部样式表.css " />
</head>
<body>
<div>外部样式表</div>
</body> div{
color: brown;
background-color: yellow;
}
5.CSS的语法
<style>
/*选择器{样式属性:样式值;样式属性1:样式值1.......}*/
/*
选择器：用于定位需要改变元素的html
样式属性：css具体样式 格式为 属性：值多个之间使用[;]连接
*/
#div1{
/*背景颜色*/
background-color: red;
/*元素宽度*/
width: 50%;
}
</style>6.CSS常用的核心选择器
（1）标签选择器：通过标签名称定位html元素
<style>
/*
* 标签选择器直接通过标签选择html元素 无特殊标识
* 标签在一个页面可以重复
* 定位到元素至少为一个，所以会更改至少一个html元素的样式
* */
li{
color: red;
font-size: 20px;
}
</style>
<body>
<ul>
<li>关羽</li>
<li>张飞</li>
<li>韩信</li>
</ul>
</body>
（2）Class选择器：要求有class属性且有值 class可以为多个
<style>
/*
* class选择器特殊标识为[.]
* class在当前页面可以重复
* 定位到元素至少为一个，所以会更改至少一个html元素的样式
* */
.divClass{
background-color: blue;
}
.aaa{
color: red;
}
.bbb{
color: blue;
}
.ccc{
color: yellow;
}
.ddd{
background-color: darkorange;
}
li{
font-size: 30px;
}
</style>
<body>
<ul>
<li class="aaa">关羽</li>
<li class="bbb">张飞</li>
<li class="ccc ddd">韩信</li>
</ul>
</body>
（3）id选择器：要求HTML元素有id属性且有值id唯一
<style>
/*
* id选择器特殊标识为[#]
* id在当前页面不会重复
* 定位到元素为一个，所以只更改一个html元素的样式
* */
#L1{
color: red;
font-size: 50px;
}
#L2{
color: blue;
font-size: 40px;
}
#L3{
color: brown;
font-size: 30px;
}
</style>
<body>
<ul>
<li id="L1">关羽</li>
<li id="L2">张飞</li>
<li id="L3">韩信</li>
</ul>
</body>
（4）派生选择器
1）a,b：选择器a和选择器b共用一套样式
<style>
/*
*派生选择器：a,b
*选择器a和选择器b共用一套样式
*注意：a和b可以为id，class，标签等选择器
* */
div,span{
color: red;
}
p,#hh1{
color: blue;
}
</style>
<body>
<div>div1</div>
<p>ppp</p>
<span>span</span>
<h1 id="hh1">hh1</h1>
<h1 id="hh2">hh2</h1>
</body>
2）a b：改变选择器a里面为选择器b的所有后代元素的样式
<style>
/*
*派生选择器：a b
*改变选择器a里面为选择器b的所有后代元素的样式
*注意：a和b可以为id，class，标签等选择器
* */
div span{
color: red;
}
</style>
<body>
<span>span4</span>
<div>
<span>span1</span>
<h1>
<span>span2</span>
</h1>
<span>span3</span>
</div>
<h1>h1</h1>
<span>span5</span>
</body>
3）兄弟选择器
<style>
/*+直接后兄弟 div和span必须是连着的 改变的只有一个*/
div+span{
color: red;
}
</style>
<body>
<span>span4</span>
<div>
<span>span1</span>
<h1>
<span>span2</span>
</h1>
<span>span3</span>
</div>
<span>span5</span>
<span>span6</span>
</body>
<style>
/*~一般后兄弟 改变的为多个 */
div~span{
color: red;
}
</style>
<body>
<span>span4</span>
<div>
<span>span1</span>
<h1>
<span>span2</span>
</h1>
<span>span3</span>
</div>
<span>span5</span>
<span>span6</span>
</body>
（5）属性选择器
<style>
/*所有有href属性的标签都会变*/
a[href]{
color: aqua;
}
</style>
<body>
<a>淘宝</a><br />
<a href="http://www.taobao.com">淘宝</a><br />
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sina.com.cn">新浪</a><br />
<a href="1.html">1.html</a>
</body>
<style>
/*href="http://www.baidu.com" 的会变*/
a[href="http://www.baidu.com"]{
color: aqua;
}
</style>
<body>
<a>淘宝</a><br />
<a href="http://www.taobao.com">淘宝</a><br />
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sina.com.cn">新浪</a><br />
<a href="1.html">1.html</a>
</body>
<style>
/*以href开始的会变*/
a[href^="http"]{
color: aqua;
}
</style>
<body>
<a>淘宝</a><br />
<a href="http://www.taobao.com">淘宝</a><br />
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sina.com.cn">新浪</a><br />
<a href="1.html">1.html</a>
</body>
<style>
/*以cn结尾的会变*/
a[href$="cn"]{
color: aqua;
}
</style>
<body>
<a>淘宝</a><br />
<a href="http://www.taobao.com">淘宝</a><br />
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sina.com.cn">新浪</a><br />
<a href="1.html">1.html</a>
</body>
<style>
/* 包含给定值的会变*/
a[href*="h"]{
color: aqua;
}
</style>
<body>
<a>淘宝</a><br />
<a href="http://www.taobao.com">淘宝</a><br />
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sina.com.cn">新浪</a><br />
<a href="1.html">1.html</a>
</body>
7.CSS常用属性
（1）基本属性
文字属性：改变字体的大小,粗细等
<style>
#div1{
/*字体的大小.可以取任何单位*/
font-size: 2cm;
/*字体的粗细*/
font-weight: bolder;
}
</style>
<body>
<div id="div1">文字属性</div>
</body>
文本属性：改变字体的颜色，对其方式,修饰文本等
<style>
#div1{
/*改变字体的颜色,取值可以为16进制和英文单词*/
color: blue;
/*对其方式,取值为:left(默认靠左),center(居中),right(靠右);*/
text-align: center;
}
</style>
<body>
<div id="div1">文本属性</div>
</body>
背景属性：给html元素加入背景颜色，背景图片等
<style>
#div1{
/*改变背景颜色:取值16进制或者英文单词*/
background-color: yellow;
}
/*
* 加入背景图片
* 背景图片需要url函数把图片链接进来
* background-image: url(../img/xx.jpg)
* background-repeat：
* repeat 默认。背景图像将在垂直方向和水平方向重复。
* repeat-x 背景图像将在水平方向重复。
* repeat-y 背景图像将在垂直方向重复。
* no-repeat 背景图像将仅显示一次。
* */
#div2{
/*加入背景图片*/
background-image: url(img/小可爱.jpg);
/*no-repeat 背景图片将仅显示一次*/
background-repeat: no-repeat;
/*宽度*/
width: 1000px;
/*高度*/
height: 1000px;
}
</style>
<body>
<div id="div1">背景颜色</div>
<hr />
<div id="div2">背景图片</div>
</body>
边框属性：border="边框的粗细 边框的类型 边框的颜色"
width:宽度
height:高度
<style>
div{
/*宽度*/
width: 200px;
/*高度*/
height: 100px;
/*边框，注意格式*/
/*border="边框的粗细 边框的类型 边框的颜色"*/
border: 1px solid red;
}
</style>
<body>
<div></div>
</body>
<style>
#a{
width: 200px;
height: 200px;
/*border-left-color: red;
border-left-width: 5px;
border-left-style: solid;*/
border-left:5px red solid;
border-top:5px blue dashed;
border-right: 5px yellow dotted;
border-bottom: 5px green double;
}
</style>
<body>
<div id="a" ></div>
</body>
（2）高级属性
float：浮动 可以使html元素向哪个方向浮动
使用浮动使多个div在一行
<style>
/*
*解决的问题：div是块元素独占一行，以后我们需要使用div进行布局
* 所以我们需要让多个div占一行
*float:可以指定html向哪个方向移动 ,取值：left 左 right
* */
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: yellow;
float: left;
}
</style>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
</body> 
使用浮动后后续在加入带样式的div时，会发生效果遮挡
<style>
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: yellow;
float: left;
}
#div3{
width: 40%;
height: 80px;
background-color: blue;
}
</style>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
使用清除浮动
clear：清除浮动 在最后的一个浮动后面加上一个空的div，然后给div加上clear的css属性即可
<style>
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: yellow;
float: left;
}
#div3{
width: 40%;
height: 80px;
background-color: blue;
clear: left;
/*clear: both;*/ /*清除左右两边*/
}
</style>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3"></div>
</body>
display：是否显示
none 不显示
block 显示
让第二个div隐藏
<style >
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: yellow;
float: left;
display: none;
}
#div3{
width: 40%;
height: 80px;
background-color: blue;
clear: left;
/*clear: both;*/ /*清除左右两边*/
}
</style>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3"></div>
</body>
（3）其他常见属性
<!--清除下换线-->
<style>
a{
text-decoration: none;
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
<!--模仿超链接-->
<style>
a{
/*颜色*/
color: blue;
/*下划线*/
text-decoration: underline;
/*鼠标放上去显示的小手手*/
cursor: pointer;
}
</style>
<body>
<a >模仿超链接</a>
</body><!--文字在中间显示-->
<style>
#a{
width: 100px;
line-height: 100px;
background-color: yellow;
}
</style>
<body>
<div id="a" >啦啦</div>
</body>
8.盒模型
Html的任何块元素都可以看成一个盒子模型
（1）margin:外边距，围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
注：增加外边距会增加两个元素之间的距离，不会改变元素的大小
<!--上下两个元素之间举例为50px-->
<style>
#dd1{
width: 50px;
height: 50px;
border: 1px red solid;
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
#dd2{
width: 50px;
height: 50px;
border: 1px blue solid;
margin-top: 50px;
}
</style>
<body>
<div id="dd1"></div>
<div id="dd2"></div>
</body>
<!--上下两个元素之间举例为100px-->
<style>
#dd1{
width: 50px;
height: 50px;
border: 1px red solid;
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
#dd2{
width: 50px;
height: 50px;
border: 1px blue solid;
margin-top: 100px;
}
</style>
<body>
<div id="dd1"></div>
<div id="dd2"></div>
</body>
（2）padding：内边距，元素的内边距在边框和内容区之间。
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
注：增大内边距会撑大两个div元素，但是不会增加两个元素之间的距离
<style>
#dd1{
width: 200px;
height: 200px;
border: 1px red solid;
/*文字距离左边框的距离 上下右同理*/
padding-left: 100px;
</style>
<body>
<div id="dd1">div1</div>
</body>
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
