网页的构造块
第一章：
一个网页主要分为三个部分：
1： 文本内容（text content）
2：对其他文件的引用(references to other file)：
用这些引用来加载图像，音频，视屏文件，以及样式表和javaScript文件
3：标记
需要注意的是，网页这些成分都仅有文本构成。
给合适的内容添加合适的标签
如：
P 用于标记段落,li 用于列表项目,abbr 用于缩略图等
HTML思想：
用合适的标签去描述合适的文字，html需要考虑的是元素的内容是什么，专注于考虑结构，而不去考虑表现（颜色，位置等） 单单去考虑结构上的问题
1.2基本的HTML页面：
访问者能看到的只是<body></body>标签里面的内容
每个页面都包括 DOCTYPE、html、head和body元素，他们是网页的基础。在这个页面里面可以定制的内容包括两项，一个是赋予lang属性的语言代码 二是<title></title>之间的文字。
HTML使用和HTML标签
开始标签 和 结束标签 如：<head>/head>：有的元素没有结束标签
网页的头部<body>开始标签以上的内容都是浏览器和搜索引擎准备的。
<!DOCTYPE>部分（称为DOCTYPE）这里填写页面的版本号
<html lang=”en”> 这里可以为浏览器指定其他语言
1.3标签：元素、属性、值及其他
标签的组成：三部分 元素(element)、属性(attribute)、值(value)。
元素：就是各个标签如：<p></p> 标签通常采用小写字母
空元素：没有结束标签 结尾处有一个斜杠/
如<img sec=”” alt”” />
属性和值
属性包含了元素的额外信息
例如：href=“#” title=”” 和元素一样都是使用小写字母
有的元素只能接收特定的值。例如:<link>里面的media属性 只能设为 all screen print
父元素和子元素的关系：
所谓的父元素和子元素就是有着包含的关系，就和箱子套箱子一样 ，套在外面的箱子就是里面箱子的父元素 子元素的所有元素都是父元素的子元素
如
<article>
<h1></h1>
<img src=”#” />
</article>
在这里article就是h1和img的父元素
1.6
文件和文件夹名
文件名全部使用小写字母，单词之间使用（短线分割单词）做连接。关键是保持一致，用.html做后缀名，可以让使用者省去切换大小写所用的时间
文件夹和文件相似，都使用小写字母来写关键是保持一致。！！
1.7 URL
（Uniform Resource Locator 统一资源定位符） 地址的别名。
URL的第一个部分称为模式（scheme）url="http://www.baidu.com";
URL的第二个部分是文件所在的主机名称，紧接着是路径
常用的模式是
http（超文本传输协议） http：//baidu.com/
mailto（用于发电子邮件) “mailto:电子邮箱地址” 比较特殊
ftp （文件传输协议）“ftp://ftp.sit.com(主机名)/pub(目录)/proposal.pdf（文件名）”
绝对URL
URL可以是绝对的也可以是相对的。绝对URL（absolute URL）包含了指向目录或者文件的完整信息
引用别人Web服务器上的文件是，应该总是使用绝对URL。
相对URL
和绝对URL不同的是，只是告诉一个大概的东西，并没有说的很清楚
根相对URL
一层用一个斜杠/来划分开来，用来变现层
1.8 HTML：有含义的标记
HTML描述的是网页内的含义，即语义。
语义化：用最恰当的HTML元素进行标记的内容
<article>该元素是H5新的标签，用来取代div的位置，但是要做样式体现的话还是建议使用div 它是一个独立的部分，可以嵌套起来使用
<em> 起强调作用的标签
<a>(anchor) 锚 链接
Alt:当图片显示不成功的时候，就会使用alt中的文字来代替显示了
Title：当鼠标滑过图片的时候，就会显示title内的文字内容
为什么语义化很重要？
1：提升可访问性和互操作性
2：提供搜索引擎优化（SEO）的效果
3：使维护代码和添加样式变得更加容易
无障碍访问，让所有用户可用，不论其能力如何
1.9浏览器对页面的默认显示效果
块级元素和行级元素
块级元素 （block）：块级元素就是在变现的时候会另起一行开始显示
常见的元素：div article h p
行级元素（inline）：和块级元素相反，元素会在一行内进行表示。
常见的元素：a em
需要强调的是，这是浏览器默认的样式，而不是HTML元素自身的样式，也不是由代码中两个元素之间的空行引起的
1.10 重点总结
1：一个页面一般有三个部分组成：文本内容，对其他文件的引用和标记
2：HTML标记由元素、属性和值构成
2处理网页文件
2.1规划网站
规划网站的方法：
1:确定为什么要创建这个网站，需要展示什么内容
2：确定网站的访问者，应该如何调整整个内容使之吸引这些访问者
3：需要多少个页面，你希望是怎样的结构，是希望按照特定的方式来浏览网站还是自由访问
4：在纸上画出网站结构的草图，确定你在每个页面希望呈现的内容。
5：为页面、图像和其他外部文件设置一个一致的命名规则
2.4指定默认页面或主页
大多数情况下系统会将index.html识别为默认的页面，如果没有就会继续寻找index.html、default.html等文件，如果访问者输入代目录的URL，但是没有指定文件名，那么就会打开默认的页面
2.8借鉴他人的灵感
可以借助一些小工具来查看网站的结构和样式
3基本的HTML结构
DOCTYPE 声明文件
Html 元素文件通常包含lang属性 （用于指定语言）
Head 元素 头文件（包含link元素 title元素！Meta元素（指定编码格式））
说明字符编码的meta元素
Title元素 作为标题的元素
Body元素 用户能看到的部分
<！DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
</head>
<body>
</body>
</html>
网页的两个部分：head和body
Head里面主要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载javascript文件 ！！！（不过出于性能考虑，多数时候在页面底部</body>之前加载javascript是更好地选择）
3.2 创建页面标题
<title></title>
每个HTML页面都必须有一个title元素。
标题应该具备的特点
简短的，描述性的，唯一的
开头常见的做法是将网站名称放在title的开头
建议：把核心内容放在前60个字符中（含空格）。
3.3 创建分级标题
1.分级标题的重要性 分级标题通常传达页面的主题，因此对搜索引擎来说，如果标题与搜索词汇匹配，这些标题就会被赋予很高的权重，尤其等级最高的H1
3.4 普通页面的构成
Header:包含一些介绍性或导航型内容的区域（页眉/页头）
包含网站标志 主导航 和其他全站连接
Role=”banner”并不适用于所有的页眉。
它显示的指出该页眉为页面级的页眉，可以提高访问性
Nav:标记导航 role=”navigation“
Main:标记页面的主要区域 是html5里新增加的元素，在一个页面里只能使用一次
Article:表示文档，页面应用或网站中一个独立的容器，原则上是可以独立分配或可再用。
主要用于包括像新闻一样的元素，博客等
Section:定义区块 section必须具有一个标题 划分区域块的时候通常会使用section元素，划分模块通常也是用section来划分
！！Section元素代表文档或应用的一个一般的区域块。在这里，section是具有相似主题的一组内容，通常包含一个标题元素
Aside:指定附注栏
Footer: 页脚 只有他的父元素是body时他才会是整个页面的页脚
通常用来包括版权声明，链接，隐私政策等类似的内容
不能嵌套在header footer 或者address元素里
加role的原因是提高访问性
3.13使用ARIA改善可访问性
ARIA 是一种技术规范 自称：”有桥梁作用的技术“他会在HTML提供相应的语义功能之前，它会用属性来填补一些语义上的空白
无障碍访问的意义：是让所有的访问者都能获取网站的内容。
地标角色：role属性
一些可用的地标角色
Role=”banner“横幅 通常包含网站的标志 网站的赞助者标志，全站搜索工具等。横幅通常显示在页面的顶端，而且通常横跨整个页面的宽度
如何使用及何时使用：
将其添加到页面级的header元素 一个页面只能使用一次
Role=”navigation“ 导航 文档内不同部分相关文档的导航性元素（通常为链接）的集合
如何使用及何时使用：
与nav元素是对应关系 在一个页面上可以使用多次 但是和nav元素一样 不过不要过度使用
Role=”main“（主体） 文档的主要内容
如何使用及何时使用：
和main是对应关系，最好添加到main元素里可以用来表示主体内容的元素
Role=”complementary“补充性内容
文档中作为主体的补充的支撑部分 他对区分主体内容是有意义的
如何使用及何时使用：
Aside是对应关系，应将其添加到aside或div元素（前提是该div只包含了补充性内容）
Role=”contentinfo“（内容信息）
包含关于文档的信息的大块可感知区域这类信息的例子，包括版权声明和指向隐私的链接等
如何使用及何时使用：
将其加到footer元素里 一个页面只能出现一次
3.14 为元素指定类别或ID名称
应该避免使用描述变现样的名称，如class=”red“
可以使用title属性（注意不是title属性）
Title是提示标签：当用户将鼠标停留在添加了说明的标签上的时候，就会显示title
3.16 添加注释
可以在HTML文档中添加注释，标明区块开始和结束的位置，提醒自己或者未来的代码编辑者某段代码的意图
<!--注释内容-->
注释不能嵌套在注释里面
4 文本
Em元素是用来强调文本的
Cite元素用于对艺术品等的引用
Code用来格式化脚本或者程序中的代码
4.1添加新的段落
使用<p>标签
4.2指定明细
使用<small>元素 通常用于页脚 包括免责声明注意事项等
4.3标记重要和强调的文本
<strong>元素表示内容的重要性，而em则表示内容的着重点，根据需要来使用
HTML5更强调语义，而非表现。所以用Strong元素取代了b元素，使用em代替了i元素
HTML5对b重新定义：
B元素表示出于实用的提醒读者的一块文字，不传达任何额外的重要性。
I元素的重新定义：
I元素表示一块不同于其他文字的文字，具有不同的语态或语气
4.4创建图
图可以是图表，照片，图形，插图，代码片段，以及其他类似的独立内容。
创建图及其标题的步骤
1：输入<figure>
2:作为可选步骤 输入<figcaption>开始的标题
3:输入标题文字。
4：如果在2,3步创建了标题，就输入<figcaption>
5：添加图像，视频，数据表格等内容
如果包含了figcaption 他就必须是内嵌的第一个元素或者是最后一个元素
6：现代浏览器会默认给figure添加40px的左右边距
4.5指明引用或参考
使用cite元素可以指明对某元素内容源的引用或者参考（
参考缘）
Cite元素默认以斜体显示
步骤：
1：输入<city>
2:输入参考的名称。
3：输入<cite>
Cite只是用于参考源本身，而不是从中引用内容 不应该使用cite元素做人名的引用
4.6引述文本
Blockquote 块引用
Q元素和blockquote元素的区别是q适合用于简短的行内引用，如果需要引用较长的部分就建议使用blockquote元素
4.7指定时间
我们可以使用time元素来标记时间、日期或者时间段，这是HTML5的新增元素
Time最简单的方法就是不加datetime属性 datetime属性是为机器准备的。该属性遵循特定的格式
步骤：
1输入<time开始time元素
2如果需要就加上datetime=”time“其中的time值得是第4步中文本的机器可读格式
3输入结束标签 >
4输入要在浏览器中显示的格式
5输入</time>
4.8 解释缩写词
可以用abbr元素标记缩写词并解释其含义，只需要在用户了解该词语含义的时候使用
可以使用title属性来提供该缩写词汇的全称，还有另一种方法就是在括号里加上一个空格 然后再写出该缩写的全称
4.9 定义术语
在HTML中定义术语时，可以使用dfn来包裹，其表现形式和cite相同都表示为斜体
4.10 创建上标和下标
输入SUB是下标 输入SUP是上标
上标和下标在一定情况下会影响行距，可以用css对其进行操作来改善这个效果
4.11添加作者联系信息
Address 用于提供作者的个人信息等
HTML5禁止address元素里包含以下元素
H1~H6 article address aside footer header hggroup(标题组)
Nav he section
4.12标注编辑和不再准确的文本
三个元素
Ins 新插入的文本
Del 标记已删除文本
S 对内容添加删除线
4.13标记代码
Code 包含代码实例或者是文件名
其他计算机相关元素：kbd samp var
Kbd :标记用户输入指令
Samp:用于指示程序或系统的实例输出
Var:变量或者占位符的值
4.14使用预格式化的文本
预格式化的文本可以保持文本固有的换行和空格。它是计算机代码实例的理想元素
<pre>需要保留原有格式的的文本</pre>
4.15突出显示文本
使用mark标签，在标签内的元素会产生马克笔的效果，后期可以用css对mark标签进行修改
常用的地方：mark元素常用于搜索结果页面
4.16创建换行
使用<br/>进行换行
4.17创建span
Span是没有任何语义化的
定义和用法
<span> 标签被用来组合文档中的行内元素
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
4.18其他元素
1 u 以前是为文本添加下划线 现在用于非文本注解
2 wbr 可换行处
3 ruby rp rt 旁注
Rp是显示括号 rt指对字符进行注解
例
<ruby>
string <rp>(</rp><rt>注解</rt><rp>)</rp>
</ruby>
Bdi和bdo元素
主要实现字符从左向右或者从右向左
<p dir=”rtl”lang=”he”>.......</p>
5:meter元素
是HTML5里的新元素
表示任务的完成进度
6：progress元素
HTML5新增的元素
指某项任务的完成进度，就像一个进度条
5 图像
Web上使用最广泛的三种格式图片 png gif jpeg
选择目标是：选择质量最高，同时文件最小的格式
Jpeg 适合于彩色照片 文件相对较小 是有损的格式
PNG GIF 是无损的格式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>语义化结构</title> <link href="../css/3.26.css" rel="stylesheet" media="all"> <link href="../css/960_12_col.css" rel="stylesheet"> </head> <body> <div id="contain" class="clearfix"> <header role="banner" id="top"> <nav role="navigation"> <ul> <li><a href="http://www.sina.com">新浪</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.qq.com">腾讯</a></li> <li><a href="http://www.imooc.com">慕课网</a></li> </ul> </nav> </header> <main role="main" class="body"> <article class="clearfix"> <article class="image_cir"> <figure> <img src="../../../images/圆圈.png" alt="圆圈标志" title="圆圈标志"/> <figcaption> <span><strong>这只是一个图片的demo</strong>来源于<cite>demo/image/xx.jpg</cite></span> </figcaption> </figure> </article> <section class="text_group"> <h1>HTML5andCSS3</h1> <p><em>利用</em>今天所学的知识，做出的具有<strong>语义化</strong>结构的demo<sub>2</sub>，利用了html<sup>5</sup>里新增的结构化元素</p> <p><strong>语义化：</strong><dfn>用最恰当的HTML元素去标记内容。</dfn></p> <ol> <li>header</li> <li>nav</li> <li>main</li> <li>article</li> <li>section</li> <li>aside</li> <li>footer</li> </ol> </section> <section class="text_base"> <h2>基础知识</h2> <p>看书并做好了笔记</p> <span> <mark>css代码例子</mark> <code><pre> *{ padding:0; margin:0; max-1000px; min-320px; 100%; font-family:"黑体" } </pre> </code> </span> </section> </article> </main> <aside role="complementary" class="right"> <h3>副标题栏</h3> <article> <ul> <li><a href="#">1</a></li> <li><a href="#"><abbr title="javascript">JS</abbr></a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </article> </aside> <article class="icon"> <figure> <a href="#top"><img src="../../../images/头条.png"></a> <figcaption><a href="#top">回到顶部</a></figcaption> </figure> </article> <footer role="contentinfo" class="bottom"> <small> <time datetime="2016-03-25">2016年3月25日</time> <address>by： <ruby>志豪 <rp>(</rp> <rt>gavin</rt> <rp>)</rp> </ruby> </address> </small> </footer> </div> </body> </html>