关于html学习笔记

2018-06-05  本文已影响53人  码农随想录

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 &lt;p&gt; element.</p>
2018-05-25 16 39 11

你会看到第一段是错误的，因为浏览器会认为第二个<p>是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号)

Head标签

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的

1、 元素 <title> 是用来表示整个HTML文档大致内容的元数据(不是文档的内容.)
2、 元数据：<meta>元素: 元数据就是描述数据的数据

<meta charset="utf-8">

3、 许多<meta> 元素包含了name 和 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

<ul>
  <li>牛奶</li>
  <li>鸡蛋</li>
  <li>面包</li>
  <li>鹰嘴豆泥</li>
</ul>
2018-05-25 18 03 44 
<ol>
  <li>行驶到这条路的尽头</li>
  <li>向右转</li>
  <li>直行穿过第一个双环形交叉路</li>
  <li>在第三个环形交叉路左转</li>
  <li>学校就在你的右边，300米处</li>
</ol>
2018-05-25 18 05 24

关于文档语义

关于文档语义

关于超链接

您可能要添加到您的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。 例如：

<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&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

持续更新地址

以后在工作中会不断更新和补充，大家也可以在持续更新地址补充。

上一篇下一篇

猜你喜欢

热点阅读