HTML5与CSS3基础（一）
网页的构造块
第一章：
一个网页主要分为三个部分：
1：文本内容（textcontent）
2：对其他文件的引用(referencestootherfile)：
用这些引用来加载图像，音频，视屏文件，以及样式表和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）这里填写页面的版本号
<htmllang=”en”>这里可以为浏览器指定其他语言
1.3标签：元素、属性、值及其他
标签的组成：三部分元素(element)、属性(attribute)、值(value)。
元素：就是各个标签如：<p></p>标签通常采用小写字母
空元素：没有结束标签结尾处有一个斜杠/
如<imgsec=””alt””/>
属性和值
属性包含了元素的额外信息
例如：href=“#”title=””和元素一样都是使用小写字母
有的元素只能接收特定的值。例如:<link>里面的media属性只能设为allscreenprint
父元素和子元素的关系：
所谓的父元素和子元素就是有着包含的关系，就和箱子套箱子一样，套在外面的箱子就是里面箱子的父元素子元素的所有元素都是父元素的子元素
如
<article>
<h1></h1>
<imgsrc=”#”/>
</article>
在这里article就是h1和img的父元素
1.6
文件和文件夹名
文件名全部使用小写字母，单词之间使用（短线分割单词）做连接。关键是保持一致，用.html做后缀名，可以让使用者省去切换大小写所用的时间
文件夹和文件相似，都使用小写字母来写关键是保持一致。！！
1.7URL
（UniformResourceLocator统一资源定位符）地址的别名。
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（absoluteURL）包含了指向目录或者文件的完整信息
引用别人Web服务器上的文件是，应该总是使用绝对URL。
相对URL
和绝对URL不同的是，只是告诉一个大概的东西，并没有说的很清楚
根相对URL
一层用一个斜杠/来划分开来，用来变现层
1.8HTML：有含义的标记
HTML描述的是网页内的含义，即语义。
语义化：用最恰当的HTML元素进行标记的内容
<article>该元素是H5新的标签，用来取代div的位置，但是要做样式体现的话还是建议使用div它是一个独立的部分，可以嵌套起来使用
<em>起强调作用的标签
<a>(anchor)锚链接
Alt:当图片显示不成功的时候，就会使用alt中的文字来代替显示了
Title：当鼠标滑过图片的时候，就会显示title内的文字内容
为什么语义化很重要？
1：提升可访问性和互操作性
2：提供搜索引擎优化（SEO）的效果
3：使维护代码和添加样式变得更加容易
无障碍访问，让所有用户可用，不论其能力如何
1.9浏览器对页面的默认显示效果
块级元素和行级元素
块级元素（block）：块级元素就是在变现的时候会另起一行开始显示
常见的元素：divarticlehp
行级元素（inline）：和块级元素相反，元素会在一行内进行表示。
常见的元素：aem
需要强调的是，这是浏览器默认的样式，而不是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元素用户能看到的部分
<！DOCTYPEhtml>
<html>
<headlang=”en”>
<metacharset=”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时他才会是整个页面的页脚
通常用来包括版权声明，链接，隐私政策等类似的内容
不能嵌套在headerfooter或者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~H6articleaddressasidefooterheaderhggroup(标题组)
Navhesection
4.12标注编辑和不再准确的文本
三个元素
Ins新插入的文本
Del标记已删除文本
S对内容添加删除线
4.13标记代码
Code包含代码实例或者是文件名
其他计算机相关元素：kbdsampvar
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其他元素
1u以前是为文本添加下划线现在用于非文本注解
2wbr可换行处
3rubyrprt旁注
Rp是显示括号rt指对字符进行注解
例
<ruby>
string<rp>(</rp><rt>注解</rt><rp>)</rp>
</ruby>
Bdi和bdo元素
主要实现字符从左向右或者从右向左
<pdir=”rtl”lang=”he”>.......</p>
5:meter元素
是HTML5里的新元素
表示任务的完成进度
6：progress元素
HTML5新增的元素
指某项任务的完成进度，就像一个进度条
5图像
Web上使用最广泛的三种格式图片pnggifjpeg
选择目标是：选择质量最高，同时文件最小的格式
Jpeg适合于彩色照片文件相对较小是有损的格式
PNGGIF是无损的格式
<!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-width:1000px; min-width:320px; width: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>优质内容筛选与推荐>>
1、C语言传参的类型匹配
2、HDU——1005 Number Sequence 弱智数学题
3、C#语言从零开始(1)
4、页面输出缓存之ASP.Net性能优化篇
5、用javascript操作xml