在菜鸟教程上学习HTML,做一些简单的笔记。附上网址:菜鸟教程-HTML教程
欢迎访问我的github个人博客:https://midoq.github.io/
一、HTML基础知识
HTML:Hyper Text Markup Language,超文本标记语言,通常用来描述网页。
在Chrome浏览器中,右击页面空白处右击,选择“查看网页源代码”,可以查看页面的HTML源码。不同浏览器查看方式有所差异,但大体类似。
HTML可以直接内嵌到Markdown文件中。换言之,Markdown对HTML是兼容的。
HTML文件基本构成
一个基本的html文件通常包括文件类型声明、头部、主体内容等。
用一对尖括号<xxx>
和</xxx>
包含该部分内容,分别称作开始标签和结束标签,一对标签及其中间的内容称为一个元素,元素嵌套构成了整个html文档。HTML标签对大小写不敏感,但通常建议使用小写。下面是一个html实例。
<!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链接元素:
<a href="https://midoq.github.io/">MidoQ的小站</a>
在上面的实例中:
- <a> </a>是超链接元素的开始和结束标签
- href=“xxxxxxx” 表示将href属性(Hypertext Reference)设置为引号内的内容
- HTML的属性值必须放在双引号或单引号内,通常使用双引号。在某些个别情况下,属性值本身含有双引号时,必须使用单引号,如:name=‘John “ShotGun” Nelson’
二、HTML基本标签
该部分介绍了一些基本的HTML元素。
1. 文本基本元素
注释元素<!-- -->
用注释标签插入注释。浏览器渲染时会忽略注释。
<!-- 这是一个注释 -->
标题元素<title>
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
将HTML标题标签只用于标题是一种规范,不要仅仅为了粗体或大号文本而使用标题。搜索引擎会按照标题为网页的结构和内容索引。良好的标题及层次对于呈现文档结构非常重要。
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
段落元素<p>
<p>这是一个段落 </p>
<p>这是另一个段落</p>
注意,浏览器显示页面时,所有连续的空行和空格都会被算作一个,这种由键盘键入的空格叫不换行空格( )。
如果要加入多个空格,可以使用HTML空格实体。
如果要加入多个空行,可以使用换行元素。
水平线元素<hr>
<hr> 标签在 HTML 页面中创建水平线。
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
换行元素<br>
<p>这个<br />段落<br />演示了分行的效果</p>
文本格式化
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<strong> | 定义加重语气 |
<i> | 定义斜体字 |
<em> | 定义着重文字 |
<small> | 定义小号字 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
<strong>在效果上等同于<b>,<em>在效果上等同于<i>,但相比较而言含义有所差别。lt;strong>和<em>意味着该段文本是重要的,所以要突出显示。
特殊字符与字符实体
在HTML中,被保留的字符是无法直接输入的,如大于号<和小于号>以及多余的空格,它们会被解析为html语言的一部分而不是作为字符显示出来。另外一些特殊字符也是无法直接输入的,所以要使用实体编号或实体名称来代替字符本身,相当于字符的转义。
这里介绍可能常用的几种,其他具体可以查阅手册。
字符 | 实体名称 | 实体编号 | 描述 |
---|---|---|---|
< | < | < | 小于号 |
> | > | > | 大于号 |
& | & | & | 和号 |
" | " | " | 引号 |
A B |   |   | 半角空格 |
A B |   |   | 全角空格 |
A B |   |   | 窄空格(全角空格的1/6宽) |
注意,HTML字符实体对大小写敏感,如希腊字母大小写的实体名称是不同的。
2. 超链接元素<a>
基本语法:
<a href="https://midoq.github.io/">MidoQ的小站</a>
href属性描述了超链接的目标。建议始终在链接末尾添加斜杠,否则服务器会发起两次HTTP请求,第二次添加正斜杠后创建新的请求。
超链接的文本部分(上面“MidoQ的小站”部分)不仅可以是文本,也可以是图片元素或其他HTML元素。
- 默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
如果超链接设置了CSS样式,其外观会根据CSS样式改变。
除了必须包括的href属性,超链接还可以包含以下属性。
target属性
规定在何处打开目标URL。
默认为_self,在当前页面打开。如果设置为_blank则为在新窗口打开。
以下代码会在新窗口打开文档:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
id属性
id属性可以为任意一个标签设定唯一的ID值,可以用作到本页面上或者其他页面上某位置的超链接目标。此时必须在id值前加井号#。
在HTML文档中插入ID:
<a id="tips">这里是提示</a>
在本文档中创建一个链接到"这里是提示(id=“tips”)":
<a href="#tips">访问有用的提示部分</a>
从另一个页面创建一个链接到"这里是提示(id=“tips”)":
<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>的内容。
<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>
<link>
定义文档与外部资源的关系。通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style>
定义HTML文档的样式文件引用地址。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta>
meta标签描述了一些基本的元数据。通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
一些实例如下。
- 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
- 定义网页作者:
<meta name="author" content="Runoob">
- 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
4. 图像元素<img>
基本语法:
<img src="url" alt="some_text">
img是空标签,没有闭合标签。
src属性为图像的包含存储路径的文件名,静态图、动态图均可。
alt属性用于定义一串可替换的文本,当用户浏览器无法加载图片时可以显示信息。
还可以设置宽度和高度属性,默认单位为像素。为图像指定宽高可以防止破坏页面布局。
实例:
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
5. 表格元素<table>
用<table>标签定义表格,用<tr>标签定义行,用<td>标签定义单元格。
用<th>标签定义表头。
实例:
<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>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
显示如下:
- Coffee
- Milk
无序列表<ol>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
显示如下:
- Coffee
- Milk
自定义列表<dl>
<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> 元素可用于为部分文本设置样式属性。
实例:
<!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>
渲染结果:
8. 表单元素
表单元素是用户可以写入文本的区域,如文本框、下拉列表、单选框、复选框等。
文本域(Text Fields)
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段
<form>
Password: <input type="password" name="pwd">
</form>
密码字段输入的值将会以星号或圆点显示。
单选按钮(Radio Buttons)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框(Checkboxes)
<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)
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
下拉列表
<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,初选值默认为第一个。
框架元素
通过框架元素可以在一个页面中显示多个文档。
语法:
<iframe src="URL"></iframe>
该URL指向另一个网页文档。
设置高度、宽度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
默认以像素为单位,也可以为百分比,如width=“60%”。
设置边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
frameborder="0"表示去除边框
使用框架显示超链接页面
<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文件。
内联样式
内联样式通常用于某单个元素需要改变样式的时候。
设置背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
设置字体
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
在上面实例中,为style属性赋值规定了字体、字体颜色、字号等。这些不同的内容之间用英文分号隔开。
设置文本对齐
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
内部样式表
单个文件需要特别样式时通常使用内部样式表,在<head>部分通过<style>标签来设置。
<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>部分元素可以链接到外部样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
上面实例中,rel="stylesheet"指定被链接文档是一样式表文件。
href属性指定了样式表链接目标。
更多内容需要学习CSS教程。
四、HTML脚本
可以直接在HTML文档中插入JavaScript脚本。
<script>标签
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<script>
document.write("Hello World!");
</script>
上面实例向浏览器输出"Hello World!"。
<noscript>标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。
<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
更多内容需要具体学习JavaScript。