第2章
2-1 语义化，让你的网页更好的被搜索引擎理解
1.html标签学习注意事项：a.标签的用途 b.标签在浏览器中的默认样式
2.标签的用途：我们学习网页制作时，常常会听到一个词：语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）。比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等
3.语义化的好处：a.更容易被搜索引擎收录 b.更容易让屏幕阅读器读出网页内容
2-2 <body>标签，网页上显示的内容放在那里
<em>、<strong>、<span>
2-3 开始学习<p>标签，添加段落
语法：<p>段落文本</p>
注意事项：a.一段文字一个<p>标签
b.<p>标签的默认样式，段前段后都会有一行空白，如果不喜欢这个空白，可以用css样式来删除或改变它
2-4 了解<hx>标签，为你的网页添加标题
标题标签一共有6个，h1，h2，h3，h4，h5，h6分别为一级标题，二级标题，三级标题，四级标题，五级标题，六级标题。并且依据重要性递减。<h1>是最高的等级
1.语法：
<hx>标题文本</hx>（x为1-6）
2.使用注意事项：
因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>
3.样式：
都会加粗，h1字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小
2-5 加入强调语气，使用<strong>和<em>标签
1.区别：在强调的语气上有区别：<em>表示强调，<strong>表示更强烈的强调。并且在浏览器中<em>默认用斜体表示，<strong>用粗体表示
2.语法：
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
2-6 使用<span>标签为文字设置单独样式
1.语义：<em>和<strong>标签是为了强调一段话中的关键字时使用，他们的语义是强调。
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
2.语法：<span>文本</span>
2-7 <q>标签，短文本引用
1.语法：<q>引用文本</q>
2.注意事项：要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话
2-8 <blockquote>标签，长文本引用
1.语法：<blockquote>引用文本</blackquote>
2.样式：浏览器对<blockquote>标签的解析是缩进样式，且自动添加双引号
2-9 使用<br>标签分行显示文本
1.语法：xhtml 1.0写法：<br/>
html 4.01写法：<br>
注意：现在一般使用xhtml 1.0的版本的写法（其它标签也是），这种版本比较规范
2.语义：
<br/>标签作用相当于word文档中的回车
3.空标签：没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br/>、<hr/>和<img/>
4.注意：在html中是忽略空格和回车的
2-10 为你的网页中添加一些空格
1.语法：
2.语义：输入空格
2-11 认识<hr>标签
1.语法：
html4.01版本<hr>；xhtml1.0版本<hr/>
2.默认样式：
线条比较粗，颜色为灰色
2-12 <address>标签，为网页加入地址信息
1.语法：<address>联系地址信息</address>
2.语义：也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份
3.默认样式：斜体，换行
2-13 想加入一行代码吗？使用<code>标签
1.语法：<code>代码语言</code>
2-14 使用<pre>标签为你的网页加入大段代码
1.语法：<pre>语言代码段</pre>
2.主要作用：预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符
3.主意：<pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码
2-15 使用ul，添加新闻信息列表
1.语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
2.语义：没有前后顺序的信息列表
3.默认样式：每项li前都自带一个圆点
2-16 使用ol,添加图书销售排行榜
1.语法：
<ol>
<li>信息</li>
<li>信息</li>
......
<ol>
2.语义：制作有序列表来展示有前后顺序的信息列表
3.默认样式：每项<li>前都自带一个序号，序号默认从1开始
2-17 认识div在排版中的作用
1.语法：<div>......</div>
2.语义：在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器
3.确定逻辑部分：什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块
2-18 给div命名，是逻辑更加清晰
1.语法：<div id="版块名称">......</div>
2.语义：为了使逻辑更加清晰，我们可以为<div>提供唯一的名称，利用id属性，为这个独立的逻辑部分设置一个名称
2-19 table标签，认识网页上的表格
1.语法：创建表格的四个元素:table,tbody,tr,td,th
a.<table>......</table>：整个表格以<table>标记开始，</table>标记结束
b.<tbody>......</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示
c.<tr>......</tr>：表格的一行
d.<td>......</td>：表格的一个单元格，决定表格的列的个数
c.<th>......</th>：表格的头部的一个单元格，表格表头
2.默认样式：a.没有表格线
b.表头也就是th标签中的文本默认为粗体并且居中显示
2-20 用css样式，为表格加入边框
1.语法：
<style type="text/css">
table tr td, th{border:1px solid #100; }
</style>
2.语义：用css样式代码为th,td单元格添加粗细为一个像素的黑色边框
2-21 caption标签，为表格添加标题和摘要
1.语法：（摘要）<table summary="表格简介文本">
（标题）<table>
<caption>标题文本</caption>
2.语义：（摘要）摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，是搜索引擎更好地读懂表格内容，还可以使屏幕阅读器更好地帮助特殊用户读取表格内容
2-22 使用<a>标签，链接到另一个页面
1.语法：<a href="目标网址" title=“鼠标滑过显示的文本”>连接显示的文本</a>
2.语义：title属性主要方便搜索引擎了解链接地址的内容
3.默认样式：蓝色（被点击过的文本颜色为紫色）
2-23 在新建浏览器窗口中打开链接
1.语法：<a href="目标网址" target ="_blank">链接显示的文本</a>
2.语义：<a>标签在默认情况下，链接的网页是在当前浏览器中打开，有时我们需要在新的浏览器窗口中打开
2-24 使用mailto在网页中链接email地址
1.语法：
"mailto:"邮件地址，浏览器会全自动调用磨人的客户端电子邮件程序(如outlook)，并在收件框中自动填上收件人的地址，<a href=“mailto:yy@imooc.com”>发送</a>
"cc="抄送地址，在收件人地址后用cc地址，可以填写抄送地址，<a href=“mailto:yy@imooc.com?cc=imoocAdmin@imooc.com”>发送</a>
“bcc=”密件抄送地址，在收件人地址后用bcc地址，可以填上密件抄送地址，<a href=“mailto:yy@imooc.com?bcc=pp@imooc.com”>发送</a>
";"多个收件人，抄送，密件抄送人，用分号隔开多个收件人的地址，可以实现发送给多个收件人功能，<a href=“mailto:yy@imooc.com;pp@imooc.com”>发送</a>
“subject=”，邮件主题，用subject=添加邮件主题，<a href=“mailto:yy@imooc.com?subject=发送邮件地址”>发送</a>
"body="，邮件内容，用body=添加邮件的内容，<a href=“mailto:yy@imooc.com?body=欢迎来到慕课网”>发送</a>
2.注意：如果mailto后面同时有多个参数的话，第一个参数必须以"?"开头，后面的参数每一个都以"&"分隔
3.语义：<a>标签还有一个作用是可以链接email地址，使用mailto能让访问者便捷向网站管理员发送电子邮件
2-25 认识<img>标签，为网页插入图片
1.语法：<img src="图片地址" alt="下载失败时的替换文本 title="提示文本">
2.语义：src 标识图像的位置
alt 制定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本
title 提供在图像可见是对图像的描述（鼠标滑过图片时显示的文本）
图像可以是GIF、PNG、JPEG格式的图像文件
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
