MDN网站HTML初步学习总结

依据MDN网站学习总结
HTML学习网站

一、总述

1、块级元素：
块级元素相对于前面的内容它会出现在新的一行，其后的内容会被挤到下一行展现。
内联元素：
内联元素通常会出现在块级元素中并环绕文档内容的一小部分，不会导致文本换行，如< em>或< a>。
空元素：
不是所有元素都拥有开始标签、内容、结束标签。一些元素只有一个标签，通常用来在此位置插入/嵌入一些东西。如< img>用来嵌入图片。
2、属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中，可用来识别此元素的样式信息和其他信息。
一个属性包含如下内容：
（1）一个空格，在属性和元素名称之间，或属性和属性之间。
（2）属性名称，后面跟着一个等于号。
（3）一个属性值，由一对引号“”引起来。
例：< p class=“editor-note”>内容< /p>
（单引号或双引号都可以）
3、
(1)段落（Paragraph）< p>:
< p>内容< /p>
(2)斜体(emphasis)< em>:
< em>内容< /em>
(3)加粗强调(strong importance)< strong>
< strong>内容< /strong>
(4)嵌入图片
< img src = “连接URL”>
(5)超链接
< a>
属性href：超链接的web地址
属性title：标题。鼠标悬停在超链接上面时，这部分信息将显示出来
属性target：用于指定链接如何呈现出来

4、布尔属性
没有值的属性，他们只能有跟它的属性名一样的属性值。如disabled属性，他们可以标记表单输入使之变为不可用（变灰色），此时用户不能向他们输入任何数据。
5、HTML文档结构

二、head标签

1、元素< title>表示整个HTML文档标题，还可被用于搜索。
2、< meta>元素：
（1）指定文档中字符编码。utf-8是一个通用的字符集，包含任何人类语言中的大部分字符，所以一般都要为你的页面手动设置编码为utf-8，来避免潜在问题。
< meta charset=“utf-8”>
（2）添加作者。
< meta name = “author” content = “Chris Mills”>
（3）添加描述
< meta name=“description” content=“MDN learning Area”>
指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多。
3、使用CSS让网页更加炫酷，使用JavaScript让网页有交互功能。它们分别使用< link>和< script>

三、HTML文字处理基础

1、无序列表（unordered lists）
每份无序的清单从< ul>元素开始，包裹清单上所有被列出的项目，< /ul>结束。
用< li>元素把每个列出的项目单独包裹起来。

2、有序列表(ordered lists)
用< ol>元素将所有项目包裹。用< li>元素把每个列出的项目单独包裹起来。

四、建立超链接

1、路径
（1）指向当前同级目录
只需指定想要链接的文件名
（2）指向子目录
指定目录名称/文件名称
（3）指向上级目录
先返回上级目录，再在上级目录中找指定目录。返回上一个目录用两个英文点号表示…，如…/pdfs/project-brief.pdf。

2、文档片段
超链接可以链接到HTML文档的特定部分。首先给要链接到的元素分配一个id属性，之后在URL的结尾使用一个井号指向它。
例：

3、绝对URL和相对URL
绝对链接指向其在web上的绝对位置定义的位置，不管绝对URL在哪里使用，它总是指向确定的相同位置。
相对链接根据文件相关的位置选择路径，即与路径中指向当前同级目录时的情况类似。一个相对URL将指向不同的位置，这取决于它所在的文件所在的位置。
尽可能使用相对链接：
当使用绝对链接时，浏览器首先通过DNS查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。而相对链接，浏览器只在同一服务器上查找被请求的文件，因此其效率更高。