一、HTML
1.1 html实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2.1常用标签
-
<br/>换行标签 -
<p> <p/>段落标签 -
<h1></h1>标题标签，用于展示效果中划分标题
其中
<h1>最大，<h6>最小 -
<!--HTML注释内容 -->用于注释HTML源码，不在HTML效果中展示
-
<img/>用于在页面效果中展示一张图片
<img src="图片位置＋文件名+扩展名" alt="替换文字"> -
列表标签
<ul></ul>无序列表标签，用于在效果中定义一个无序列表
<li></li>列表条目项标签，用于在效果中定义一个列表的条目
<ol></ol>有序列表标签，用于在效果中定义一个有序列表
-
<a></a>超链接标签
例如：
<a herf="http://www.baidu.com/">百度</a> 打开网址 <a herf="../img/c_1.jpg" />链接到一张图片</a> 打开图片 -
表格标签
<table></table>表格标签，用于在效果中定义一个表格
border：设置表格的边框粗细
width：设置表格的宽度
<tr></tr>表格的行标签，用于在效果中定义一个表格行
<td></td>表格的单元格标签，用于在效果中定义一个表格行中的单元格
<thead>表格中的表头内容
<tbody>表格中的主体内容
<tfoot>表格中的标注内容
-
<th></th>表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
<th>和<td>唯一区别：<th>内容 居中加粗 -
`<span></span>用于在效果中 一行上定义一个块，进行内容显示
-
<pre>文本通常按照原文件中的编排，以等宽字体的形式展现出来
-
<audio>插入声音内容
-
<video>插入视频
-
创作一个表单效果图如下
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>数据表单页面</h1> 姓名： <input type="text"><br><br> 性别： 男<input type="radio" name="gender"/> 女<input type="radio" name="gender"/><br><br> 邮箱： <input type="text"><br><br> <input type="submit" value="提交"><br><br> <input type="reset" value="重置"><br><br> <button><a href="../html/index.html">首页</a></button> </body> </html> 
二、CSS基础
1.1css的介绍：
1.css：层叠样式表，它是用来美化页面的一种语言。
2.css的作用：(1)、美化界面，比如：设置标签文字大小、颜色、字体加粗等样式 ；(2)、控制页面布局，比如：设置浮动、定位样式。
3.css的基本语法：选择器{样式规则}，其中选择器是用来选择标签的，选出来后给标签添加样式；样式规则为：属性名：属性值。
1.2css的引入方式：
-
内联样式（行内样式）
在指定标签中书写样式，仅在当前标签中生效。
<div style="width:60px;font-size:20;">内联css</div>
2.嵌入式（内部样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
div {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>3.外联式（外部样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/path/to/your/css/file">
<style>
@import url(path/to/your/file);
@import "path/to/your/file";
</style>
</head>
<body>
<div></div>
</body>
</html>1.3路径：
1.相对路径
通过"."开头则为相对路径，即从当前文件出发,"./a"为当前目录下a文件,"../a"为上一级目录a文件,依次类推。
2.绝对路径 绝对路径则是完整的路径，比如: "[百度安全验证.........]或"D:\web\img\logo.gif"
1.4 CSS三大特性
一、CSS层叠性 层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
二、CSS继承性 简单的理解为—“子承父业“，是指子标签会继承父标签的==某些==样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
三、CSS优先级
在复杂CSS样式表，往往并不是相同样式不同值的堆叠这么简单，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。
处理优先级问题，就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况：
-
继承样式的权重为0也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
-
行内样式优先应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
-
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
-
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
1.5 常用选择器的主要类型及说明
-
标签选择器：针对一类标签
-
ID选择器：针对某一个特定的标签使用
-
类选择器：针对你想要的所有标签使用
-
通用选择器（通配符）：针对所有的标签都适用
1.6常用标签
1.设置颜色
-
文本的颜色
color:red -
元素的背景色
background-color:red（包含各类渐变） -
元素的边框
border-color:red -
元素的盒阴影或文字阴影
box-shadow:0 0 0 1px r属性 描述 -
ed|text-shadow:5px 5px 5px red -
运用在一些滤镜当中
filter: drop-shadow(16px 16px 20px red) -
<hr />水平线的颜色
2.文本样式
-
color 设置文本颜色
-
direction 设置文本方向。
-
letter-spacing 设置字符间距
-
line-height 设置行高
-
text-align 对齐元素中的文本
-
text-decoration 向文本添加修饰
-
text-indent 缩进元素中文本的首行
3.字体样式
-
font 在一个声明中设置所有的字体属性
-
font-family 指定文本的字体系列
-
font-size 指定文本的字体大小
-
font-style 指定文本的字体样式
-
font-variant 以小型大写字体或者正常字体显示文本
-
font-weight 指定字体的粗细。
4.背景样式
-
background 简写属性，作用是将背景属性设置在一个声明中
-
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
-
background-color 设置元素的背景颜色
-
background-image 把图像设置为背景
-
background-position 设置背景图像的起始位置
-
background-repeat 设置背景图像是否及如何重复
5.四个链接状态
-
a:link - 正常，未访问过的链接
-
a:visited - 用户已访问过的链接
-
a:hover - 当用户鼠标放在链接上时
-
a:active - 链接被点击的那一刻
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
