2017年1月27日
1.元素 = 开始标记 + 内容 + 结束标记
<h1>Starbuzz Coffee Beverages</h1>
2.属性：能提供元素的一些额外信息（属性的正确写法 别忘了都用双引号）
<a href="beverages/elixir.html">elixirs</a>
2017年1月28日
一HTML和CSS
1.HTML负责创建网页结构（超文本标记语言）【HyperText Markup Language】
CSS负责控制网页表现 （层叠样式表）【cascading style sheets】
2.内联模式使用css （<style> 放在 <head>元素里面）
<!doctype html> <!-- 最新版本html,即html5 -->
<html>
<head>
<meta charset="utf-8"> <!-- 指定字符编码 -->
<title>Starbuzz Coffee's Mission</title>
<!-- 指定为css类型，其实只用style就可以，浏览器都知道是CSS类型 -->
<!-- 设置背景颜色 -->
<!-- 创建左右 外边距为页面20% -->
<!-- body边框为虚线 -->
<!-- 创建内边距 -->
<!-- 设置文本字体 -->
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>
</html>
3.<a>属性href用法 相对链接建立内部链接，绝对链接建立外部链接
a.相对路径
<a href="beverages/elixir.html">elixirs</a>
b.绝对路径（一般是网站外部的链接才用，URL） <跳转到锚点地方>
<a href="http://wickedlysmart.com/buzz/#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
其中目标链接页面(buzz/index.html)有如下id设置
<h3 id="Coffee">Coffee</h3>
c.补充：如果是同一个文件页面内跳转
<a href="#top">Back to top</a>
d.每次链接到一个新窗口展示.（如果同一类的跳转到同一个窗口，target取个特定名字就可以,如coffee）
<a target=“_blank" href="http://wickedlysmart.com/buzz/#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
二.代码组织（一般不要把所有的页面都放在根目录下，即使很少的页面，也不利于后期维护）
-
按推荐方式进行代码组织
第一步：按推荐方式最近文件目录
Paste_Image.png
第二步,根据目录如下结构,修改代码里面页面跳转和图片相关链接
Paste_Image.png
1.”lounge.html”链接到”elixir.html” (首先进入beverages文件夹)
<a href="beverages/elixir.html">elixirs</a>
2.”directions.html”链接到”lounge.html” （先用..返回上级， 进入同级页面后，可以直接访问）
<..返回到上一层的父文件夹>
<a href="../lounge.html">Back to the Lounge</a>
3.修改图片链接（进入images目录先）
<img src="images/drinks.gif">
4.”elixir.html”获取图片链接
<img src="../images/green.jpg">
三.引用元素
1.<q> 短引用（便不是所有浏览器都支持）[一般用在段落里]
<q>A journey of a thousand miles begins with one Segway.</q>
2.长引用<blockquote> [一般用在自成一段]
<blockquote>
Passing cars,
<br> When you can't see,
<br> May get you,
<br> A glimpse,
<br> Of eternity.
<br>
</blockquote>
四.块元素和内联元素（块元素特立独行；内联元素随波逐流）
1.块元素显示时就好像前后各有一个换行。
<h1> <p> <blockquote> <ol> <li>2.内联元素，行内显示
<q> <a> <img>
五.空元素（void元素）[除了空元素，其他都是正常元素]
1.没有内容，也没有结束标记
<img> <br>
六.创建HTML列表
1.有序列表<ol> <li>【一定要一起使用】
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol>
2.无序列表<ul> <li>【一定要一起使用】
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
七.输出特殊字符<> 和 &
The <html> elment rocks. the &
http://www.w3school.com.cn/tags/html_ref_ascii.asp (< 也可以用
<实体表示)
2017年1月29日
一.将写好的网站发布到web上
第1步.找一家托管公司。（保证服务器一天24小时运行）
选择标准
<blockquote>
a.技术支持
b.数据传输（网站如果有大量访问，需要考虑）
c.备份（服务器出现故障后，能否及时恢复）
d.域名（很多托管公司，都有附带域名注册服务）
e.可靠性（一般保证99%以上时间都能正常运行）
</blockquote>
第2步. 为网站注册一个网站名
eg:www.starbuzzcoffee.com
注意 starbuzzcoffee.com才是域名。（一个域名可以创建多个网站）
第3步.测试正常后，把你的代码上传到托管公司的服务器上后，就可以通过网站名访问了。
一般都会有工具用于上传。
4.补充：一般可以用如下URL(Uniform Resource Locator)【统一资源定位符】访问
http://www.starbuzzcoffee.com <web服务器会默认请求index.html 或default.htm,根据托管公司的默认值>
上面的链接服务器自动加上/（建议都自己主动加个/）,之后在加上默认文件，
http://www.starbuzzcoffee.com/index.html
URL由一个协议，一个网站名和资源文件绝对地祖册。
二.图片
1.浏览器获取图片顺序
2.3种图片一般使用场景JPEG,PNG,GIF
JPEG:有损，一般处理复杂图片，如照片
PNG:无损，有多种颜色透明背景，logo
GIF:无损，可以有动画效果，一种颜色透明背景 ,logo
3.<img>元素
标准写法
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="Pencil line 35 miles long">
4.图像大小属性（由于<img>元素是内联模式，所以图片没显示前，可能会影响后面的布局，所以可以提早告诉浏览器长宽属性）
（不建议直接用width和height属性来调整页面图片大小,因为还是获取整个原文件后，再缩放。）
2017年1月30日
一.写标准的HTML（HTML5）
1.html5
html5其实就是最新版的html，当前HTML标准
html不会在有6,7,8指定标准，它其实是个“活的标准”，会采用向后兼容的方式，既支持老的方式，也支持新的方式。
html5:不在单单用来构建web页面，还可以构建web应用，如社交媒体应用，游戏应用等。
2.书写标准的html代码
2.1声明使用html5标准，第一行输入
<!doctype html>
2.2用<meta>元素增加指定字符编码，一般都是utf-8（保存html文件时也选择utf-8模式）
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
</head>
3.W3C检验工具
如果您发现本文对你有所帮助，如果您认为其他人也可能受益，请把它分享出去。
