HTML笔记

发表于 | 分类于 ，

HTML笔记

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

!DOCYTYPE 声明

1
2
3
4
5
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML版本，浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE>的用处。 
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

<!DOCYTYPE>是HTML5的版本声明

HTML head 元素

1
2
3
<head>元素是所有头部元素的容器。 
<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。 
以下标签都可以添加到<head> 部分：<title>、<base>、<link>、<meta>、<script>以及 <style>。

HTML title元素

1
2
3
4
5
<title>元素在所有 HTML/XHTML 文档中都是必需的。 
<title>元素能够： 
1. 定义浏览器工具栏中的标题 
2. 提供页面被添加到收藏夹时显示的标题 
3. 显示在搜索引擎结果中的页面标题
1
2
3
4
5
6
<link>标签定义文档与外部资源之间的关系。 
<link>标签最常用于连接样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML style 元素

1
2
3
4
5
6
7
8
9
<style>标签用于为 HTML 文档定义样式信息。 
您可以在<style>元素内规定 HTML 元素在浏览器中呈现的样式。

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML script 元素

1
2
3
4
5
6
7
8
9
<script>标签用于定义客户端脚本，比如 JavaScript。 
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 
必需的 type 属性规定脚本的 MIME 类型。 
JavaScript 最常用于图片操作、表单验证以及内容动态更新。 
下面的脚本会向浏览器输出“Hello World!”：

<script type="text/javascript">
document.write("Hello World!")
</script>

noscript 标签

1
2
3
4
5
6
7
8
<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

标题标签

标题有多种标签(h1~h6) 

1
<h1>This is a heading</h1>
1
<h2>This is a heading</h2>
  • 浏览器会自动地在标题的前后添加空行。
  • 默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

段落标签

1
<p>This is a paragraph.</p>

水平线标签

1
<hr />标签在 HTML 页面中创建水平线。

换行标签

1
<br /> 标签换行

链接标签

1
<a href="http://selfimper.github.io">This is a link</a>

图像标签

1
<img src="head.jpg" width="50" height="50" />

文本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
<b></b>加粗 
<strong></strong>貌似也是加粗 
<big></big>变大 
<small></small>变小 
<i></i>斜体 
<em></em>强调（与斜体效果貌似一样） 
<sub></sub>上标（subscript） 
<sup></sup>下标（superscript） 
<pre></pre>预格式文本，保留空格和换行 
<blockquote></blockquote>长引用 
<q></q>短引用 
<del></del>删除线 
<ins></ins>下划线

使用样式

内部样式

1
2
3
4
5
6
7
8
当单个文件需要特别样式时，就可以使用内部样式表。
可以在head部分通过<style>标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1
2
3
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

外部样式

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

超链接

1
2
3
4
5
6
7
<a></a>定义超链接，a是指anchor。 
<a href="http://www.w3school.com.cn/" title="W3Shool">Visit W3School</a>点击这个超链接会把用户带到 W3School 的首页。 
title属性为鼠标悬停时显示的文本

有两种使用<a>标签的方式： 
1. 通过使用 href 属性 - 创建指向另一个文档的链接 
2. 通过使用 name 属性 - 创建文档内的书签

超链接中的target属性

1
2
target属性：可以定义被链接的文档在何处显示。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>在新窗口打开链接。

超链接中的name属性

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，即在页面内跳转。

1
2
3
4
使用方法： 
1. 首先，在 HTML 文档中对锚进行命名（创建一个书签）：<a name="word">文字</a> 
2. 然后，在同一个页面中创建指向该锚的链接：<a href="word">文字</a>
3. 也可以在其他页面中创建指向该锚的链接：<a href="http://www.example.com/html.asp#word">w文字</a>

具体可查看W3School中的实例。

将图像作为链接

1
2
3
4
5
将<img>标签包含在<a>标签中

<a href="/html/example.html">
<img src="/example.gif" />
</a>

图像替换为文本属性

在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

1
<img src="boat.gif" alt="Big Boat">

排列图片

1
2
3
在文字中排列图片 
<img src="/.../picture.gif" align="bottom"> 
align属性可为bottom、middle、top

具体可查看W3School。

表格

列表

无序列表

1
2
3
4
<ul>
  <li>apple</li>
  <li>banana</li>
</ul>

有序列表

1
2
3
4
<ol>
  <li>apple</li>
  <li>banana</li>
</ol>

自定义列表

1
2
3
4
5
6
7
8
9
自定义列表以<dl> 标签开始。
每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd>开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

块元素与内联元素

块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。

内联元素：内联元素在显示时通常不会以新行开始。

表单

文本域

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>
</body>
</html>

密码域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<p>
请注意，当在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>

单选按钮

radio：单选钮

1
2
3
4
5
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框

checkbox：复选框

1
2
3
4
5
6
7
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

更多查看

预留字符

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

不间断空格（non-breaking space）

1
2
3
4
HTML 中的常用字符实体是不间断空格( )。 
浏览器总是会截短 HTML 页面中的空格。
如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。
如需在页面中增加空格的数量，需要使用&nbsp;字符实体。

如有后续将会不断添加~~

听首歌放松下吧^o^