HTML中的空白
在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
2018-05-25 16 36 15
无论你用了多少空白(包括空白字符，包括换行), 当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
在HTML中包含特殊字符
2018-05-25 16 33 52
<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> element.</p>
2018-05-25 16 39 11
你会看到第一段是错误的，因为浏览器会认为第二个<p>是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号)
Head标签
在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的
1、 元素 <title> 是用来表示整个HTML文档大致内容的元数据(不是文档的内容.)
2、 元数据：<meta>元素: 元数据就是描述数据的数据
- 指定你的文档中字符的编码
<meta charset="utf-8">
3、 许多<meta> 元素包含了name 和 content 特性
- name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。
- content 指定了实际的元数据内容。
<meta name="author" content="yangxiaoping">
<meta name="description" content="yangxiaoping is a good boy">
这两个meta 元素对于定义你的页面的作者和提供页面的内容描述是很有用的
4、 在搜索引擎中description和title的使用
1811527238927_ pic
1821527239091_ pic
在你的站点增加自定义图标
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
这些注释解释了每个图标的用途 - 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。
为文档设定主语言
值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现
<html lang="en-US">
这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)
你还可以将文档的分段设置为不同的语言。例如， 我们可以把日语部分设置为日语， 如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
列表 Lists
- 无序 Unordered
<ul>
<li>牛奶</li>
<li>鸡蛋</li>
<li>面包</li>
<li>鹰嘴豆泥</li>
</ul>
2018-05-25 18 03 44
- 有序 Ordered
<ol>
<li>行驶到这条路的尽头</li>
<li>向右转</li>
<li>直行穿过第一个双环形交叉路</li>
<li>在第三个环形交叉路左转</li>
<li>学校就在你的右边，300米处</li>
</ol>
2018-05-25 18 05 24
关于文档语义
- 强调 用<em>
- 非常重要用<strong>
- <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
- <b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
- <u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
关于文档语义
- 强调 用<em>
- 非常重要用<strong>
- <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
- <b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
- <u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
关于超链接
- 使用title属性添加支持信息
您可能要添加到您的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。 例如：
<a href="https://www.jd.com"
title="京东title">京东</a>.
结果如下（当链接悬停在其上时，标题将作为工具提示出现）：
<img width="106" alt="2018-05-25 18 21 07" src="https://user-images.githubusercontent.com/15627244/40540295-3292bc4e-604a-11e8-944f-a51428570fa0.png">
- 块级链接
你可以将一些内容转换为链接，甚至是 块级元素。如果你想要将一个图像转换为链接，你只需把图像放到<a></a>标签中间
<a href="https://www.jd.com"
title="京东title">
<img src="//www.jd.com/favicon.ico" alt="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
</a>
1851527244037_ pic
关于超链接
- 在下载链接时使用下载属性
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 39 Windows版本的示例
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
download="firefox-39-installer.exe">
Download Firefox 39 for Windows
</a>
<img width="320" alt="2018-05-28 10 33 42" src="https://user-images.githubusercontent.com/15627244/40594626-d7ae3748-6262-11e8-9f5e-8d1b0ac792db.png">
- 电子邮件链接
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到邮件的URL你提供。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
下面是一个包含cc、bcc、主题和主体的示例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
持续更新地址
以后在工作中会不断更新和补充，大家也可以在持续更新地址补充。
网友评论