目录
一、HTML常用标签
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标题</title>
</head>
<body>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
<i>i:斜体标签</i><br/>
<em>em:强调斜体标签</em><br/>
<b>b:加粗标签</b><br/><br/>
<del>del:删除线</del><br/>
<u>u:下划线</u>
<sub>sub:下标</sub><br/>
<sup>sup:上标</sup><br/>
</body>
</html> 
格式化标签
- <br/>段内换行
- <p>...</p> 段落
- <hr />水平线
- <span>...</span> 行内组合，组合行内元素，以便通过CSS样式来格式化
- <pre>...</pre>预留格式，很适合显示计算机代码
- <!--注释内容-->
- <div>..</div>区域
列表
- <ul>...</ul>无序列表
- <ol>...</ol>有序列表 其中type类型值：A a l i 1 start属性表示起始值
- <li>...</li>列表项
- <dl>...</dl>自定义列表
- <dt>...</dt>自定义列表头
- <dd>...</dd>自定义列表内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> 无序列表: <ul> <li>ABCD</li> <li>EFGH</li> </ul> <ol type="a"> <li>ABCD</li> <li>EFGH</li> </ol> <dl> <dt>列表头</dt> <dd>列表内容</dd> </dl> </body>
表格
- <table>...</table>表格
- <caption>表格的标题
- <th>...</th>表头
- <tr>...</tr>行
- <td>...</td>单元格
表单
- <form>...</form>表单
<!DOCTYPE html>
<html>
<form>
账户：<input type="text" name="userName"/>
<br/>
密码：<input type="password" name="userPsd"/>
<input type="submit" value="提交" name="submitBtn"/>
<input type="reset" value="重置"/>
</form>
<form>
<input type="button" onclick="alert('hi!')" value="点击">
</form>
<form>
<br/>
爱好:
音乐 <input type="checkbox" value="1” name="like" checked="checked"/>
体育<input type="checkbox" value="2” name="like" />
阅读<input type="checkbox" value="3” name="like" />
</form>
<form>
年龄：
<select>
<option>18岁</option>
<option selected="selected">19岁</option>
</select>
</form>
<form>
个人简介:<br />
<textarea cols="50" rows="10">
</textarea>
<br />
<input type="submit" value="确定” />
</form>超链接标签a
<a href = "网址“ >文字或图片</a>
a标签的属性：
- href: 必须，指的是链接跳转地址
- target: 表示链接的打开⽅式：
- _blank 新窗⼝
- _parent ⽗窗⼝
- _self 本窗⼝（默认）
- _top 顶级窗⼝
- framename 窗⼝名
- title：⽂字提示属性（详情）
锚点链接：
定义⼀个锚点:<a id="a1"></a>
使⽤锚点:<a href="#a1">跳到a1处</a>
图像标签img
img标签中常用属性：
- src： 图⽚名及url地址
- alt: 图⽚加载失败时的提示信息
- title：文字提示属性
- width：图片宽度
- height：图片⾼高度
- border：边框线粗细
绝对路径与相对路径
绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
例如：
C:\xyz\test.txt 代表了test.txt文件的绝对路径。
http://www.sun.com/index.htm也代表了一个URL绝对路径。
相对路路径：相对与某个基准⽬目录的路路径。包含Web的相对路径（HTML中的相对目录），
例如：
在Web开发中，"/"代表Web应用的根目录。
物理路径的相对表示，
“./” 代表当前目录,
"…/"代表上级目录。这种类似的表示，也是属于相对路径。
二、CSS基础
CSS发展历史
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。
1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
————摘自《百度百科》
CSS作用
CSS灵活多变，能够指定的样式类型除了通用的颜色、字体、背景等等，还可以控制字符间距、填充距、大小等等，显示出了强大的定义能力。
用户想要看到的是网站的内容，为了让用户更好的看到这些信息，就需要通过格式控制来帮忙。以前两者在页面上的分布是交错结合的，查看和修改很不方便，而现在把二者分开也会方便网站的设计人员。内容结构和格式控制相分离，可以只由内容构成，而将所有页面的格式控制指向某CSS样式文件。这样做的好处有以下两点。
1、简化了页面的格式代码，外部的样式表还会被浏览器保存在缓存中，加快了加载速度，也减少了需要上传的代码数量。
2、只要修改保存着网站格式的CSS样式表文件，就可以更改整个网站的风格和特色，这对于大型网站，多页面网站有着重要作用。避免了逐个页面的修改，缩短了修改页面的时间。
————摘自《知乎》
CSS引用方式
行内样式
<p style="color:red;"></p>内嵌样式
<style>
p{
color:red;
}
</style>外部样式表文件
<link rel="stylesheet" href="style.css" />四种引用方式的优先级
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高（页面多种方式使用css样式引入）
CSS三大特性
层叠性
层叠性主要解决样式冲突的问题。样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
优先性
当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行（没看太懂)
继承样式权重为0.无论父元素样式权重多大，子元素继承来时，应用在子元素上的权重为0
行内样式优先应用style样式的元素，行内样式权重非常大，有比所有选择器都大的优先级
权重相同时，遵循就近原则
！important命令被赋予最高的优先级，无论任何情况都具有最大优先级。
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器
常用属性
文字属性
- font-style：取值 作用：规定文字样式
- font-weigh：取值 作用：规定文字粗细
- font-size：取值 作用：规定文字大小
- font-family：取值 作用：规定文字字体
文体属性
- text-decorate：取值 作用：给文本添加装饰
- text-align：取值 作用：设置文本水平对齐方式
- text-indent：取值 作用：设置文本缩进
颜色属性
- color：取值
盒子阴影和文字阴影
- 盒子阴影box-shadow：水平偏移 垂直偏移 模糊度 阴影拓展 阴影颜色 内外阴影；
- 文字阴影text-shadow：水平偏移 垂直偏移 模糊度 阴影颜色；
背景相关属性
-
背景颜色属性 background-color：取值
-
背景图片属性 background-image：url()；
-
背景平铺属性 background-repeat
-
背景定位属性 background-position：水平方向 垂直方向；
边框属性
- border：边框宽度 边框样式 边框颜色；
- border-style：上 右 下 左；
- border-width：上 右 下 左；
- border-color：上 右 下 左；
内外边距属性
- 内边距 padding：上 右 下 左；
- 外边距 margin：上 右 下 左；
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
