TARDIS

知识时光机

0%

HTML学习笔记

发表于 分类于 Valine：

在菜鸟教程上学习HTML，做一些简单的笔记。附上网址：菜鸟教程-HTML教程

一、HTML基础知识

HTML：Hyper Text Markup Language，超文本标记语言，通常用来描述网页。
在Chrome浏览器中，右击页面空白处右击，选择“查看网页源代码”，可以查看页面的HTML源码。不同浏览器查看方式有所差异，但大体类似。

HTML可以直接内嵌到Markdown文件中。换言之，Markdown对HTML是兼容的。

HTML文件基本构成

一个基本的html文件通常包括文件类型声明、头部、主体内容等。
用一对尖括号<xxx>和</xxx>包含该部分内容，分别称作开始标签和结束标签，一对标签及其中间的内容称为一个元素，元素嵌套构成了整个html文档。HTML标签对大小写不敏感，但通常建议使用小写。下面是一个html实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 我的html hello-world </title>
</head>

<body>
    <h1> 我的第一个标题 </h1>
    <p> 我的第一个段落。 </p>
</body>

</html>

在上面的实例中：

  • <!DOCTYPE html> 声明为HTML文档
  • <html> html的根元素
  • <head> 包含文档的元数据(meta data)，如如 定义网页编码格式为 utf-8
  • <title> 描述文档标题，显示在浏览器标题栏
  • <body> 描述网页主体，是网页的可见页面内容
  • <h1> 定义一个大标题
  • <p> 定义一个段落

HTML元素

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content），但通常建议空内容标签也在开始标签中进行关闭
    • <br> 就是没有关闭标签的空元素（表示换行）。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

HTML属性

HTML元素可以设置属性，通常写在开始标签内。如HTML链接元素：

1
<a href="https://midoq.github.io/">MidoQ的小站</a>

在上面的实例中：

  • <a> </a>是超链接元素的开始和结束标签
  • href=”xxxxxxx” 表示将href属性（Hypertext Reference）设置为引号内的内容
  • HTML的属性值必须放在双引号或单引号内，通常使用双引号。在某些个别情况下，属性值本身含有双引号时，必须使用单引号，如：name=’John “ShotGun” Nelson’

二、HTML基本标签

该部分介绍了一些基本的HTML元素。

1. 文本基本元素

注释元素<!– –>

用注释标签插入注释。浏览器渲染时会忽略注释。

1
<!-- 这是一个注释 -->

标题元素<title>

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
将HTML标题标签只用于标题是一种规范，不要仅仅为了粗体或大号文本而使用标题。搜索引擎会按照标题为网页的结构和内容索引。良好的标题及层次对于呈现文档结构非常重要。

1
2
3
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

段落元素<p>

1
2
<p>这是一个段落 </p>
<p>这是另一个段落</p>

注意，浏览器显示页面时，所有连续的空行和空格都会被算作一个，这种由键盘键入的空格叫不换行空格（&nbsp）。
如果要加入多个空格，可以使用HTML空格实体。
如果要加入多个空行，可以使用换行元素。

水平线元素<hr>

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

1
2
3
4
5
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>

换行元素<br>

1
<p>这个<br />段落<br />演示了分行的效果</p>

文本格式化

标签 描述
<b> 定义粗体文本
<strong> 定义加重语气
<i> 定义斜体字
<em> 定义着重文字
<small> 定义小号字
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

<strong>在效果上等同于<b>，<em>在效果上等同于<i>，但相比较而言含义有所差别。lt;strong>和<em>意味着该段文本是重要的，所以要突出显示。

特殊字符与字符实体

在HTML中，被保留的字符是无法直接输入的，如大于号<和小于号>以及多余的空格，它们会被解析为html语言的一部分而不是作为字符显示出来。另外一些特殊字符也是无法直接输入的，所以要使用实体编号或实体名称来代替字符本身，相当于字符的转义。
这里介绍可能常用的几种，其他具体可以查阅手册。

字符 实体名称 实体编号 描述
< &lt; &#60; 小于号
> &gt; &#62; 大于号
& &amp; &#38; 和号
" &quot; &#34; 引号
A&ensp;B &ensp; &#8194; 半角空格
A&emsp;B &emsp; &#8195; 全角空格
A&thinsp;B &thinsp; &#8201; 窄空格（全角空格的1/6宽）

注意，HTML字符实体对大小写敏感，如希腊字母大小写的实体名称是不同的。

2. 超链接元素<a>

基本语法：

1
<a href="https://midoq.github.io/">MidoQ的小站</a>

href属性描述了超链接的目标。建议始终在链接末尾添加斜杠，否则服务器会发起两次HTTP请求，第二次添加正斜杠后创建新的请求。
超链接的文本部分（上面“MidoQ的小站”部分）不仅可以是文本，也可以是图片元素或其他HTML元素。

  • 默认情况下，链接将以以下形式出现在浏览器中：
    • 一个未访问过的链接显示为蓝色字体并带有下划线。
    • 访问过的链接显示为紫色并带有下划线。
    • 点击链接时，链接显示为红色并带有下划线。

如果超链接设置了CSS样式，其外观会根据CSS样式改变。
除了必须包括的href属性，超链接还可以包含以下属性。

target属性

规定在何处打开目标URL。
默认为_self，在当前页面打开。如果设置为_blank则为在新窗口打开。
以下代码会在新窗口打开文档：

1
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

id属性

id属性可以为任意一个标签设定唯一的ID值，可以用作到本页面上或者其他页面上某位置的超链接目标。此时必须在id值前加井号#。
在HTML文档中插入ID:

1
<a id="tips">这里是提示</a>

在本文档中创建一个链接到”这里是提示(id=”tips”）”：

1
<a href="#tips">访问有用的提示部分</a>

从另一个页面创建一个链接到”这里是提示(id=”tips”）”：

1
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

3. 头部元素<head>

<head>元素内包含所有头部标签元素，可以包括以下元素。

<title>

定义文档标题。该元素是头部标签中必需的。

<script>

用于加载脚本文件，如JavaScript脚本。

<base>

定义基本链接地址。该标签的href作为本页面所有相对地址超链接的默认链接，target作为本页面所有超链接的默认打开方式。
将<base>元素放在<head>中第一个，这样head中的其他元素也可以使用<base>的内容。

1
2
3
4
5
6
7
8
9
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<base href="//www.runoob.com//images/" target="_blank">
</head>

<p><img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"</p>

<p><a href="//www.runoob.com/">runoob.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</p>

定义文档与外部资源的关系。通常用于链接到样式表。

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

<style>

定义HTML文档的样式文件引用地址。

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>

meta标签描述了一些基本的元数据。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
一些实例如下。

  • 为搜索引擎定义关键词:
    1
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 为网页定义描述内容:
    1
    <meta name="description" content="免费 Web & 编程 教程">
  • 定义网页作者:
    1
    <meta name="author" content="Runoob">
  • 每30秒钟刷新当前页面:
    1
    <meta http-equiv="refresh" content="30">

4. 图像元素<img>

基本语法：

1
<img src="url" alt="some_text">

img是空标签，没有闭合标签。
src属性为图像的包含存储路径的文件名，静态图、动态图均可。
alt属性用于定义一串可替换的文本，当用户浏览器无法加载图片时可以显示信息。
还可以设置宽度和高度属性，默认单位为像素。为图像指定宽高可以防止破坏页面布局。
实例：

1
<img src="smiley.gif" alt="Smiley face" width="32" height="32">

5. 表格元素<table>

用<table>标签定义表格，用<tr>标签定义行，用<td>标签定义单元格。
用<th>标签定义表头。
实例：

1
2
3
4
5
6
7
8
9
10
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

上面table标签的属性中，border代表边框粗细，不设置或设置为0时无边框。
table标签内可以用cellspacing设置单元格间距（默认为2），用cellpadding设置单元格内容与单元格边缘的距离。
在th或td标签内，用colspan=”2”或以上表示该单元格跨列， rowspan=”2”或以上表示跨行。
单元格标签之间的内容，不仅可以是文本，也可以是其他元素。

6. 列表元素

有序列表<ul>

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

显示如下：

  • Coffee
  • Milk

无序列表<ol>

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

显示如下：

  1. Coffee
  2. Milk

自定义列表<dl>

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

其中，<dt>为列表项，<dd>为列表项的定义。
显示如下：

Coffee
- black hot drink
Milk
- white cold drink

7. 区块元素

区块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

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

实例: <b>, <td>, <a>, <img>

<div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span>元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

实例：

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
26
27
<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
</head>

<body>
    <div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">主要的网页标题</h1></div>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © runoob.com</div>
    </div>
</body>
</html>

渲染结果：
div-result

8. 表单元素

表单元素是用户可以写入文本的区域，如文本框、下拉列表、单选框、复选框等。

文本域（Text Fields）

1
2
3
4
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

1
2
3
<form>
Password: <input type="password" name="pwd">
</form>

密码字段输入的值将会以星号或圆点显示。

单选按钮（Radio Buttons）

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

复选框（Checkboxes）

1
2
3
4
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮(Submit Button)

1
2
3
4
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

下拉列表

1
2
3
4
5
6
7
8
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

selected表示初选值。如果所有option都没有selected，初选值默认为第一个。

框架元素

通过框架元素可以在一个页面中显示多个文档。
语法：

1
<iframe src="URL"></iframe>

该URL指向另一个网页文档。

设置高度、宽度
1
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

默认以像素为单位，也可以为百分比，如width=”60%”。

设置边框
1
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

frameborder=”0”表示去除边框

使用框架显示超链接页面
1
2
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

三、HTML CSS样式

CSS (Cascading Style Sheets，层叠样式表)， 用于渲染HTML元素标签的样式。使用CSS可以大大提升网页开发的效率。
CSS 可以通过以下方式添加到HTML中:

  • 内联样式 - 在HTML元素中使用”style” 属性
  • 内部样式表 - 在HTML文档头部 <head>区域使用<style>元素来包含CSS
  • 外部引用 - 使用外部 CSS 文件
    最好的方式时是引用外部CSS文件。

内联样式

内联样式通常用于某单个元素需要改变样式的时候。

设置背景颜色

1
2
3
4
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

设置字体

1
2
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

在上面实例中，为style属性赋值规定了字体、字体颜色、字号等。这些不同的内容之间用英文分号隔开。

设置文本对齐

1
2
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

内部样式表

单个文件需要特别样式时通常使用内部样式表，在<head>部分通过<style>标签来设置。

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

上面实例中，属性定义语句type=”text/css”规定了样式表的MIME类型，这是type属性的唯一可能值。
body {background-color:yellow;}规定了主体部分的背景色。
p {color:blue;}规定了段落的字体颜色。

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
在<head>部分使用<link>部分元素可以链接到外部样式表。

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

上面实例中，rel=”stylesheet”指定被链接文档是一样式表文件。
href属性指定了样式表链接目标。

更多内容需要学习CSS教程。

四、HTML脚本

可以直接在HTML文档中插入JavaScript脚本。

<script>标签

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

1
2
3
<script>
document.write("Hello World!");
</script>

上面实例向浏览器输出”Hello World!”。

<noscript>标签

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

1
2
3
4
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

更多内容需要具体学习JavaScript。