01html和css

<!-- 链接标签 a anchor
　　href 网址.本地路径

　　target: 目标 新开一个_blank 默认就是_self

　　 <a href="http://www.baidu.com">链接的标签</a>
<!-- <a href="03-标题标签.html" target="_blank">更多</a> -->

<!-- 1.相对路径 参照当前的文件 ./或者不写
上级 ../
上上级../../
-->
<!-- 2.绝对路径 从根盘 -->

<!-- div标签 没有实际的语言含义 语义 -->
<!-- span 标签 一般放在 行内的; 没有语义 -->

<!-- 图片标签 image

src  source 图片的地址路径
alt  alternate 替换, 图片不存在提示,爬虫 :爬数据识别
-->

<img src="images/banner1.jpg" alt="计算机图片">

<!-- 段落标签 p paragraph-->
<!-- 换行标签 <br /> -->

<!-- 字符实体 系统中有些显示有冲突
空格:&nbsp;
>:&gt;
<:&lt;
-->

<!-- CSS书写方式 -->
<p style="color:green">
这是一大段话!
</p>

内嵌式
<style>
　　　　/* 选择器 */
　　p{
　　　　color: red;
　　　　}
</style>

外链式
<link rel="stylesheet" href="css/main.css">

文字属性
p{
/* 字体大小 */
　　font-size: 20px;
/* 字体
汉字在匹配的时候有问题,建议英文
*/
　　font-family: "Microsoft Yahei";

/* 字体颜色 */
　　color: red;

/* 行高 */
　　line-height: 30px;

a{
/* 去掉下划线 a */
　　text-decoration: none;
　　color: green;

}
</style>

边框
div{
　　 300px;
　　height: 300px;

/* 背景色 */
　　background-color: red;
/* 边框的粗细 实体线(最常用) 边框颜色 */
/* border-top: 20px solid green; */
/* border-bottom: 10px dashed gold;虚线 */
/* border-left: 5px dotted blue;点线 */
/* border-right: 1px solid purple; */

/* border属性连写 */
　　border:10px solid gold;
}

div{
　　 200px;
　　height: 200px;
border: 1px solid green;

/* margin外边距 */
/* margin-top: 20px;
margin-left: 50px;
margin-bottom: 100px;
margin-right: 200px; */

/* margin的属性连写 */
/* margin: 30px; 设置四个边 */
/* margin:10px 30px 50px; */
/* 上 右 下 左 顺时针 */
/* margin:10px 20px 30px 40px; */

/* 设置元素水平居中 */
/* margin-left: 600px; */
　　margin: 0 auto;

}

内边距：内容到边框的距离
div{

　　 300px;
　　height: 300px;
background-color: green;
　　border: 1px solid red;

/* 内边距 */
/* padding-top: 5px;
padding-left: 10px;
padding-right: 30px;
padding-bottom: 50px; */

/* 属性连写 */

padding: 10px 20px 30px 40px;
}

选择器，1标签，类选择器，后代选择器

/* 1.标签选择器 */
/* div{
　　 200px;
　　height: 200px;
　　background-color: red;
　　}

p{

　　color: gold;
} */

/* 2.类选择器 */
/* 点 类名称{属性:值} */
/* .first{
　　 200px;
　　height: 200px;
　　background-color: red;
}

.second{
　　 200px;
　　height: 200px;
　　background-color: green;
} */

/* 3.层级选择器 后代选择器 */
/* 选择器space选择器{属性:值} */ 选择所有的后代，包括孙子
.box p{               或div p{  }

　　color: red;
}