HTML入门笔记1

xihaoshangdi
371 阅读10分钟

HTML入门

HTML是谁发明的？

1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。

HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。

HTML起手应该写什么？

网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

文档类型声明

防止浏览器在渲染文档时，切换到“怪异模式(兼容模式)”的渲染模式。 
<!DOCTYPE html> 确保浏览器按照最佳的相关规范进行渲染。

根元素标签

html 元素是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html标签。

<html lang="en">该标签的lang属性，表示网页内容默认的语言。

lang属性为全局属性，参与元素语言的定义。简体中文通常取值为zh-CN。

文档头部元素

head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。可用于<head>元素内的元素有:

  • title
  • base
  • link
  • style
  • meta
  • script
  • noscript
  • command[已废弃]
meta

meta 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。 属性：

  1. charset 此属性声明当前文档的字符编码，通常为UTF-8。
  2. name 此属性定义文档级元数据的名称。此属性的可能值为：
    • application-name 定义正运行在该网页上的网络应用名称。
    • author 定义文档的作者名称，格式自由。
    • description 定义页面内容的简短介绍和描述。
    • generator 定义生成页面的软件的标识符。
    • keywords 定义页面内容相关的单词。
    • referrer 实验性API，详情查询MDN。
    • viewport 定义有关视口初始大小的设置，以提供移动设备服务。
  3. http-equiv 此枚举属性定义了能改变服务器和用户引擎行为的编译。
    • content-security-policy内容安全策略。
    • refresh 定义页面的载入时间。
  4. content 此属性包含http-equiv或name属性的值,具体取决于所使用的值。
<title>

title 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。

<base>

base 元素指定用于一个文档中包含的所有相对URL的根URL，默认的target。一份中只能有一个 <base> 元素。 属性：

  1. href 定义文档中相对URL地址的基础URL。
  2. target 定义了默认的页面刷新位置。
    • _self 载入结果到当前HTML5的浏览上下文。
    • _blank 载入结果到一个新的窗口。
    • _parent 载入到父级窗口，如果没有父级，载入当前窗口。
    • _top 载入到顶级窗口。
<link>

外部资源链接 元素 规定了当前文档与外部资源的关系。 <link href="main.css" rel="stylesheet">

<style>

style 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。 属性：

  1. type 该属性以MIME类型定义样式语言。
  2. media 该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询，默认值为 all。
  3. scoped 如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。
<style type="text/css">
body {
  color:red;
}
</style>
<script>

script 元素用于嵌入或引用可执行脚本。 <script src="javascript.js"></script>

<noscript>

noscript 元素定义脚本未被执行时的替代内容。

<noscript>
  <a href="########">禁用脚本时的结果</a>
</noscript>
<p>允许脚本时的结果!</p>

文档主体元素

body 标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。

章节标签(语义化)

语义原则

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。

<header>

<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

<header>里面不能包含另一个<header>或<footer>。

<footer>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。

<main>

<main>标签表示页面的主体内容，一个页面只能有一个<main>。

<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。

<article>

<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。

<aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置评论或注释。

<section>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节。<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

<nav>

<nav>标签用于放置页面或文档的导航信息。一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

<hgroup>

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

<hgroup>
  <h1>主标题</h1>
  <h2>副标题 1</h2>
  <h2>副标题 2</h2>
</hgroup>

HTML常见全局属性

全局属性（global attributes）是所有元素都可以使用的属性。

id

id属性是元素在网页内的唯一标识符。id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。 https://foo.com/index.html#bar 页面会自动滚动到bar。

clss

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

title

title属性用来为元素添加附加说明。鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

contenteditable

HTML网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。 它有两个可能的值。

  • true
  • false

属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

hidden

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

CSS的可见>hidden属性

spellcheck

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。它有两个可能的值。

  • true
  • false

该属性只在编辑时生效 属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

CSS：长文本省略

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

内容标签

列表类型

ol+li

<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。 <ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表。

属性：

  • reversed：产生倒序的数字列表。
  • start：数字列表的起始编号。
  • type：指定数字编号的样式。
    • a：小写字母。
    • A：大写字母。
    • i：小写罗马数字。
    • I：大写罗马数字。
    • 1：整数（默认值）。

ul+li

<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。

li

<li>表示列表项，用在<ol>或<ul>容器之中。有序列表<ol>之中，<li>有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。

dl，dt，dd

<dl>常用来定义词汇表。 <dl>标签是一个块级元素，表示一组术语的列表（description list）。 术语名（description term）由<dt>标签定义， 术语解释（description detail）由<dd>标签定义。

文本标签

pre

<pre>是一个块级元素，表示保留原来的格式，浏览器会保留该标签内部原始的换行和空格。

hr

用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。

br


让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

code

<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

blockquote

<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。

avatar
文章
阅读
粉丝