第一部分 HTML
@声明编码，放在<head>
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
@HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符。
@
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
@href和src
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
@属性
属性总是以名称/值对的形式出现，比如：name="value"
@标题
浏览器会自动地在标题的前后添加空行。
@当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
@格式
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
@在早先发布的html规范中<br>/<hr>/<img>等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。
在xhtml中所有类似br这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如<br
/>，因此，是没有</br>这个写法的。从逻辑上讲<br
/>=<br>...</br>，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。
@pre元素保留空格和换行。是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
@删除字和下划线
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
@链接
会在新窗口打开文档
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
跳转链接覆盖原界面
<a href="http://www.runoob.com/" target="_top">点击这里!</a>
图片设置为链接（alt是替代文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息）
<p>无边框的图片链接: <a href="http://www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
在当前页面跳到指定位置
<p> <a href="#C4">查看章节 4</a> </p> <h2><a id="C4">章节 4</a></h2> <p>这边显示该章节的内容……</p>
@头部
默认链接地址
<title>菜鸟教程(runoob.com)</title> <base href="http://www.runoob.com/images/" target="_blank"> </head> <body> <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png" <br><br> <a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
链接样式方法一：外链
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
链接样式方法二：内链
<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>
定义搜索引擎关键词等、30秒刷新
<head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta http-equiv="refresh" content="30"> </head>
@表格（border外边框、colspan跨行、rowspan夸列、cellpadding单元格边距、cellspacing框的所有线条宽度）
<h4>两行三列:</h4> <table border="1" cellpadding="5" cellspacing="10">
<caption>Monthly savings</caption> <tr> <th colspan="2">数量</td> <td rowspan="2">200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td>
<th> 表头
<caption>表格标题
包含列表
<tr> <td>这个单元格包含一个列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr>
@列表
有序列表
<h4>大写字母列表：</h4>
<ol type="A" start="D">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
@区块
HTML 可以通过 <div> 和 <span>将元素组合起来。需要搭配内置css
@布局
通过div布局
<body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com</div> </div> </body>
通过table布局（不推荐）
<body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;vertical-align:top;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © runoob.com</td> </tr> </table> </body>
@表单
账号密码（type管用，name随便）
<form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
有默认选项的单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female" checked="checked">Female </form>
复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
提交按钮
<form name="input" action="？？" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
有预选的下拉菜单
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
文本框
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
按钮
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
带边框的表单
<form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>
点击选项的内容也可以选中（label，for=）
<form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br> <input type="submit" value="提交"> </form>
@框架
页面中显示页面
<iframe src="demo_iframe.htm" width="200" height="200"></iframe> <p>一些旧的浏览器不支持 iframe。</p> <p>如果浏览器不支持 iframes 则不会显示。</p>
链接跳转到内框架
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p> <p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
@文字背景颜色及透明度（数字越大，颜色越深）
<p style="background-color:rgba(255,255,0,0.75)"> 通过 rbg 值设置背景颜色 </p>
@脚本
浏览器不支持提示
<script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> <p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
点击改变内容
<h1>我的第一个 JavaScript </h1> <p id="demo"> JavaScript 可以触发事件，就像按钮点击。</p> <script> function myFunction() { document.getElementById("demo").innerHTML="Hello JavaScript!"; } </script> <button type="button" onclick="myFunction()">点我</button>
点击改变颜色
<p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button>
@字符实体
虽然 html 不区分大小写，但实体字符对大小写敏感。
@url
- scheme - 定义因特网服务的类型。最常见的类型是 http（https加密，ftp，file）
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
URL 编码实例
http://www.runoob.com/tags/html-urlencode.html
@CDN内容分发网络Content Delivery Network
第二部分 bootstrap
@Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
@
第三部分 css（w3c）
@继承
body { font-family: Verdana, sans-serif; } td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; } p { font-family: Times, "Times New Roman", serif; }
多个字体是为了如果用户电脑没有前面的字体就用后面的
@id选择器
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
sidebar是html元素设置的id值，p和h2用作派生选择器，id 属性只能在每个 HTML 文档中出现一次。
@类选择器
.fancy td { color: #f60; background: #666; }
@CSS 属性选择器？
@css样式——背景
background
background-image
所有背景属性都不能继承
@连接框
<head> <style> a:link,a:visited { display:block; font-weight:bold; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#7A991A; } </style> </head> <body> <a href="/index.html" target="_blank">W3School</a> </body>
