HTML总结

2020-08-14 本文已影响0人 Joel_zh

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。

HTML 元素

元素的主要部分

元素.png

开始标签：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本- 例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容：元素的内容，本例中就是所输入的文本本身。
元素：开始标签、结束标签与内容相结合，便是一个完整的元素。

属性.png

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。
属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。必须保证元素嵌套次序正确：本例首先使用  标签，然后是  标签，因此要先结束  标签，最后再结束  标签。

我的猫咪脾气爆:)

元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就开始瞎胡蒙了，你懂得！

空元素

不包含任何内容的元素称为空元素。所有效果由属性控制。

完整的 HTML 页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

多媒体与嵌入

图片

<img src="dinosaur.jpg">
注意：搜索引擎也读取图像的文件名并把它们计入SEO。因此你应该给你的图片取一个描述性的文件名：dinosaur.jpg 比 img835.png 要好。

备选文本

alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

那么，为什么我们需要备选文本呢？它可以派上用场的原因有很多：

用户有视力障碍，通过屏幕阅读器来浏览网页。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。
就像上面所说的，你也许会把图片的路径或文件名拼错。
浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，这些浏览器会把图片替换为描述文本。
你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽有限且昂贵。

宽度和高度

你可以用宽度和高度属性来指定你的图片的高度和宽度

如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。

Image titles 图片标题

这会给我们一个鼠标悬停提示，看起来就像链接标题。

image.png

为图片搭配说明文字的方式来解说图片

有一个更好的做法是使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

注意：从无障碍的角度来说，说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 alt 文字只有在图片无法显示时才这样。所以，说明文字和 alt 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试让你的图片不显示，

音频和视频

<video> 元素

同<img> 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。用户必须能够控制视频和音频的回放功能。
你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。
<video> 标签内的内容这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

使用多个播放源以提高兼容性

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签 <source> 当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

其他 <video> 特性

width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。
loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
muted
这个属性会导致媒体播放时，默认关闭声音。
poster
这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件，有3个值可选：
- "none" ：不缓冲
- "auto" ：页面加载后缓存媒体文件
- "metadata" ：仅缓冲文件的元数据

<audio> 标签

<audio> 标签与 <video> 标签的使用方式几乎完全相同，有一些细微的差别

<audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性 — 同样，没有视觉部件。

显示音轨文本

HTML5 <video> 使之成为可能，有了 WebVTT 格式，你可以使用 <track> 标签。提供一个音频内容的副本。

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

如何理解HTML语义化

什么是HTML语义化

语义化，其实就是用恰当的标签，去展示恰当的内容，以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然，而非div、span一把梭的方式。

为什么要语义化

更清晰的DOM结构：你不再需要些一堆冗余且意义不明的标签，有利于书写css和js；
更有利于SEO ：可以提高搜索引擎的有效爬取，提高网站的流量；
可读性：如果不幸网站的样式丢失，清晰的结构依然使你的页面可读性较高；
互用性：没人喜欢维护一坨烂代码，语义化的HTML代码，让你的团队维护更轻松。

如何语义化的编写HTML

如：h1~h6标签是用于标题类的; ul是用于无序列表的; ol是用于有充列表的; dl是用于定义列表的;em,strong标签是用来强调的等等，
去掉CSS，看结构是否井然有序，是否有较高的可读性。

SEO基础

静态页面
将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录。
页面标题（Page Title）的关键词优化
必须列出信息的标题、网站的名称以及相关关键字。
Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）
主要包括：Meta description、Meta keywords的设置。关键字密度要适度，通常为2%-8%，也就是说你的关键字必须在页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。
图片的关键词优化
图片的替代关键词也不要忽略，其另外一方面的作用是，当图片不能显示的时候，可以给访问者一个替代解释语句。
避免表格的嵌套
目前本站的表格嵌套太多，搜索引擎通常只读取3个<table>的嵌套，如果太多，会造成部分有用信息没有被检测到。
采用web标准进行网站重构
尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML＋CSS技术进行网站重构，减少不表格及冗余代码，提高网站页面的扩展性，兼容性，可以使更多浏览器支持。
网站结构的扁平化规划
目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母
页面容量的合理化
合理的页面容量会提升网页的显示速度，增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件
外部文件策略
把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部，同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面的重要内容。其他的字体和格式化标签也尽量少用，建议采用CSS定义。
外部链接
尽可能多地让其他跟你主题相关的网站链接本站，同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接，被搜索引擎认为有丰富的与主题相关的内容，也有利于排名，例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网，对搜索引擎而言宁缺勿滥。
网站地图
网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图，内含网站所有栏目、子栏目。网站地图的三大因素：文本、链接、关键词，都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要创建网站地图。
图像热点
除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时，就会无法辨别。因此尽量不要设置图像热点（Image Map）链接。
FLASH应用
FLASH由于不含文字信息，应尽量用于功能展示和广告，少用于网站栏目和页面。
JS脚本
在不支持JS脚步的浏览器里<NOSCRIPT>标签会起到重要提示作用，对搜索引擎的Spider搜索也会有帮助。
Frame框架
Frame标签会被搜索忽略，尽量少用，如果一定要用，则应正确使用Noframe标签，在<Noframe></Noframe>区域中包含指向frame页的链接或带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。
资讯的内部链接
有助提高网站排名和PR值，例如相关资讯、推荐资讯等