html基础

发表于

超文本标记语言(英语：Hypertext Markup Language，简称：HTML) ，用于定义一个网页的结构，由一系列的 元素组成，元素标签是不区分大小写。

用HTML标记内容的目的是为了赋予网页含义（semantic），换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。比如人，程序，设备，便于将元素调整为你所需的样式。

HTML规定了一组标签，用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。

在给内容打上不同的标记后，就可以使用CSS来给标签添加样式。

元素

1
<p class="editor-note">My cat is <strong>very</strong> grumpy</p>
  1. 开始标签（The opening tag）：这里包含了元素的名称（本例为 p），被开、闭尖括号所包围。这表示元素从此开始或者开始起作用——在本例中即段落由此开始。
  2. 闭合标签（The closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。初学者常常会犯忘记包含闭合标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（The content）：这是一个元素的内容，这个例子中就是所输入的文本本身。
  4. 元素（The element）：开标签、闭标签与内容相结合，便是一个完整的元素。

嵌套

将一个元素置于其他元素之中

1
<p>My cat is <strong>very</strong> grumpy</p>

块级元素和内联元素

块级元素在页面中以块的形式展现，相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素 不会导致文本换行，它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。

空元素

有一些元素并不包含内容

1
<img src="images/firefox-icon.png" alt="My test image">

属性（Attribute）

包含了关于元素的一些额外的信息，这些信息本身并不需要被显现在内容中

1
<p class="editor-note">My cat is very grumpy</p>

一个属性必须包含如下内容：

  • 在元素和属性之间有个空格space (如果有一个或多个已存在的属性，就与前一个属性之间有一个空格.)
  • 属性后面紧跟着一个“=”符号
  • 有一个属性值,由一对引号“ ”引起来，省略包围属性值的引号可能出错，也可以使用单引号，单引号和双引号不能再一个属性值里面混用，可以嵌套

布尔属性

没有值的属性，称为布尔属性，只能有跟它的属性名一样的属性值

1
2
3
4
5
<input type="text" disabled="disabled">
标记表单输入使之变为不可用，此时用户不能向他们输入任何数据
<input type="text" disabled>    简写
<input type="text">

基本结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
    <!-- 这是评论文本 -->
  </body>
</html>
  1. <!DOCTYPE html> — 文档类型。在 HTML 刚刚出现的时期里（大约是1991/2年），文档类型是用来链接一些好的 HTML 应该遵守的规则，有点像自动校正等。然而现在已经没有人关心这些，只是因为历史原因必须它必须包含在代码中。现在你只需要知道这些就可以。不区分大小写
  2. <html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称作根元素。
  3. <head></head> — <head> 元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS样式表和字符编码声明等元数据。
  4. <body></body> — <body> 元素。这个元素包含了你想让用户在访问你的页面时看到的内容，不管是文本，图像，视频，游戏，可播放的音轨或其他内容。
  5. <meta charset="utf-8"> — 这个元素指定了你的文档需要使用的字符编码是 UTF-8 ，它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容。我们没有任何理由不去设定字符编码，而且也可以避免以后可能出现的问题。
  6. <title></title> — <title> 元素。这个元素设置了页面的标题，标题显示在浏览器标签页上，而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。
  7. <!-- --> 注释。注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等

图像

1
<img src="images/firefox-icon.png" alt="My test image">

src：图像文件路径
alt：图像的描述内容

标记文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
标题
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
段落
<p>This is a single paragraph</p>
无序列表
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>
有序列表
<ol> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ol>

字符引用

在 HTML 中，某些字符是预留的。
为了正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
一些在键盘上找不到的字符也可以使用字符实体。

HTML 字符实体以一个和号&开头，一个分号;结尾，二者之间是表示实体的字符串或者数字。

实体名称对大小写敏感。

实体编号 字符
&ldquo; 左双引号
&rdquo; 右双引号
&amp; &
&lt; <
&gt; >
&nbsp; 空格
&copy; ©
&ldque; 左双引号
&rdque; 右双引号
&hellip; 省略号
&mdash; 破折号 
1
<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

超链接

1
2
3
4
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
<a href="http://www.baidu.com">Moving Pictures</a><img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"></a>
点击图片超链接
  • href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。不能没有http，例如： href=”https://www.mozilla.org/"。
  • title: 标题title 属性为超链接声明额外的信息，比如你将链接至那个页面。例如： title=”The Mozilla homepage”。当鼠标悬浮时，将出现一个工具提示。
  • target: 目标target 属性指定将用于显示链接的浏览上下文。 例如， target=”_blank” 将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。

多媒体

表格

表单

参考：