<!-- 链接标签 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 /> -->
???<!-- 字符实体 ?系统中有些显示有冲突
???????空格:
???????>:>
???????<:<
???-->
???<!-- 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{
??????????? width: 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{
??????????? width: 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{
??????????? width: 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{
??????????? width: 200px;
??????????? height: 200px;
??????????? background-color: red;
??????? }
???????p{
??????????? color: gold;
???????} */
???????/* 2.类选择器 */
???????/* 点 类名称{属性:值} */
???????/* .first{
??????????? width: 200px;
??????????? height: 200px;
??????????? background-color: red;
???????}
???????.second{
??????????? width: 200px;
??????????? height: 200px;
??????????? background-color: green;
???????} */
???????/* 3.层级选择器 ?后代选择器 */
???????/* 选择器space选择器{属性:值} */ 选择所有的后代，包括孙子
???????.box p{ 或div p{ }
??????????? color: red;
???????}
33-01html和css
原文地址：http://www.cnblogs.com/lvhonglei-python/p/7469482.html