HTML知识点大全 + 部分CSS

看到一段觉得比较励志的话：“当年我是个很普通的屌丝，一事无成，同学都很优秀，各种奖学金拿到天上去。终于发现一件可以做得来的事情，于是有了兴趣，然后在”follow your heart”这句话的激励下，披荆斩棘在前端这天路上走了出来。”现在的你，还不算晚，加油吧！

HTML：

1.<hr> 标签在 HTML 页面中创建水平线。希望在不产生一个新段落的情况下进行换行（新行）

2. 所有连续的空格或空行都会被算作一个空格。 <br>换行

3.<b>加粗文本</b> <i>斜体文本</i> 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示

4.<sub> 下标</sub> 和 <sup> 上标</sup>

5.<big>这个文本字体放大</big> <small>这个文本是缩小的</small>

6.<pre>里面内容格式不变包括空格</pre>

7.地址<address> </address>里面默认打出斜体

8.<bdo dir="rtl">该段落文字从右到左显示。</bdo>

9.删除文本和插入文本。<del>blue</del>中间有个横线 <ins>red</ins>下面有个横线

10.target="_blank"链接将在新窗口打开

11.无边框的图片border="0"

12.书签在当前页面链接到指定位置 <h2><a id="C4">章节 4</a></h2> <a href="#C4">查看章节4</a>

13.使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

14.<link> 标签定义了文档与外部资源之间的关系。

15.每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">

16.使用 style 属性制作一个没有下划线的链接 style="text-decoration:none;"

17.当特殊的样式需要应用到个别元素时，就可以使用内联样式。应用到很多页面的时候，

最好的方式是通过外部引用CSS文件.<link rel="stylesheet" type="text/css" href="mystyle.css">

18.font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

19.<h1 style="text-align:center;">居中对齐的标题</h1>

20.定义图像:<img src="url" alt="some_text" width="304" height="228">URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

21.图片设置相同的大小尺寸会是相同的序列。使图片至段落的左边或右边。style="float:left"

22.创映射建图像。具体见http://www.runoob.com/try/try.php?filename=tryhtml_areamap可供点击区域的图像地图。

23.表格 <table> 标签。 <tr>行 <td>列 <th> 表头（在行标签里面可一个）一般粗体居中。无边框border="0" <caption> ...</caption>带标题的表格 <th colspan="2">两列合并 <th rowspan="2">两行合并 <td>表格里面可以嵌套表格、列表。</td> <table border="1" cellpadding="10">内容与边框之间有空白 <table border="1" cellspacing="10">单元格间距 <thead>、<tfoot> 和 <tbody> 也可以用。

24.无序列表<ul><li> 圆圈列表：<ul style="list-style-type:circle"> 圆点列表（黑色实心）：<style="list-style-type:disc"> 正方形列表：<style="list-style-type:square"> 有序列表<ol start="50" /type="A"/"a"/"I"> <li>Coffee</li><li>Tea</li></ol> 50.Coffee51.Tea 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

25.<span> 元素也没有特定的含义。可用于为部分文本设置样式属性。把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

26.<form><input type="text" name="firstname" size="30">表单输入标签文本域长度 <input type="password">密码 <input type="radio" name="sex" value="male" >单选框相同的name属性可以让name相同的单选框位于相同的组内 value提交到后台取的值是 value里的值 <input type="checkbox"> 定义了复选框. checked默认选中 <input type="submit"> 定义了提交按钮.会传送到action指定的位置

27.带有预选值的下拉列表。<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>

28.文本域中写入文本。可写入字符的字数不受限制<textarea rows="10" cols="30">文本框。</textarea>

29.在数据周围绘制一个带标题的框。<fieldset> <legend>标题</legend> <input.....> </fieldset>

30.框架<iframe src="URL" width="200" height="200" frameborder="0"></iframe>URL指向不同的网页。移除边框。使用iframe来显示目标链接页面<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a> 点击后内部的网页跳转

31.0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。

32.<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。<script>document.write("...")命令向页面输出文字</script> 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容<noscript>抱歉，你的浏览器不支持 JavaScrip</noscript>

33. 实体名称对大小写敏感！空格 <小于< ; > 大于>

34.预定义文本。在input(输入)框输入任何东西之前放置在框中。<input type="text" placeholder="this is placeholder text">

35.action表单提交到服务器的地址。 <form action="/url-where-you-want-to-submit-form-data"></form>

36.submit(提交)表单中的数据将会被发送到你通过action属性指定的地址上。<button type="submit">button</button>

37.required把一个文本输入字段设置为必填项

38.多选一radio。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。单选按钮应该使用相同的name属性。<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

多选。checkbox规则同上。

39.按钮默认被选中。Checked。

40.background-color 设置一个元素的背景颜色。.green-background {

background-color: green;}

41.id 属性应该是唯一的。#

42.padding内间距越大越高负越大越低 margin外间距越大越窄负越大越宽

43.集中起来指定它们padding: 10px 20px 10px 20px;这四个值以顺时针方式排列：顶部、右侧、底部、左侧

44.其他元素将继承你的 body 元素的样式。

45.class="class1 class2"第二个声明总是比第一个具有优先权。< 同一行id 属性总是具有更高的优先级。< 行内样式将覆盖style="color: white" < 指定关键字color: pink !important;

46.hex code 表示颜色0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度

前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。

CSS：

1.选择器（h1）一条或多条声明{属性：值；} /*....*/注释

2.外部样式表 <head><link rel="stylesheet" type="text/css"href="mystyle.css"></head> 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

3.背景。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体只在水平方向平铺 background-repeat:repeat-x; 不平铺background-repeat:no-repeat; 改变图像在背景中的位置:background-position:right top; 右边距margin-right:200px不会打扰到文本固定的背景图像 background-attachment: fixed;

4.文本。文本居中text-align:center; 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐删除链接的下划线：text-decoration:none;underline;（带下划线）可用于所有字句变成大写或小写字母，或每个单词的首字母大写。text-transform:uppercase;lowercase;capitalize; 文本的第一行的缩进。text-indent:50px;

5.增加或减少字符之间的空间。letter-spacing:2px;/-3px; 段落中行之间的空间更小/大行高line-height:70%/200%; 文本。从右到左的书写方向direction:rtl; 增加一个段落中的单词之间的空白空间word-spacing:30px; 文本的垂直对齐图像。文字与图形上/下面对齐vertical-align:text-top/bottom; 文本阴影。text-shadow:2px 2px red;

6.字体。设置文本的字体系列。不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号，p{font-family:"Times New Roman", Times, serif;} 斜体font-style:italic; 字体变淡或加粗font-weight:lighter;/bold;

7.链接。a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */ a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面删除链接中的下划线：前两个text-decoration:none; 后两个text-decoration:underline; 指定链接背景色background-color:#B2FF99; 移动到链接上改变字体大小hover {font-size:150%;}

8.列表样式。{list-style-type:circle;/disc;/square;/upper-roman;/lower-alpha;}无序：小圆点、黑原点、黑方框、有序：罗马数字、字母。作为列表项标记的图像list-style-image:url('sqpurple.gif');

9.设置垂直对齐vertical-align:bottom;/top；底部/顶部内容与空格之间的边框：padding:15px; 边框的颜色border:1px solid green; 和th元素的文本color:red;和背景颜色background-color:green;：

10.盒子模型。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

11.边框可以指定不同的侧面不同的边框： border-style:dotted solid double dashed;上右底左

CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，border-width" 属性如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。border-style:solid; border-width:5px; border-color边框颜色

下边框的样式border-bottom-style:none; 左边框的宽度。border-style:solid1; border-left-width:15px;

12.轮廓。突出元素的作用。用outline属性在元素周围画一条线。border:1px solid red outline:green dotted thick;边框外边有点线边框。轮廓的样式outline-style:dotted; 轮廓的颜色、宽度。outline-style:dotted; outline-color:#00ff00 outline-width:thin;;

13.指定不同的侧面不同的边距：margin-top:100px; 可以不写top默认全选上右底左

3个元素：上，左右，下使用厘米值的文本的顶部margin。margin-top:10cm; 使用百分比值的下边距，相对于包含的元素的宽度。margin-bottom:50%;

14.分组选择器：每个选择器用逗号分隔。h1,h2,p{} 嵌套选择器：.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

15.不同元素的高度。height:120px;/50%;