HTML学习笔记
html简介
参考链接
1. 什么是网页
网页实质是一个HTML代码构成的纯文本文件
<> 包围的特殊标记，叫做HTML标签
每种 HTML 标签都有不同的含义，适用于不同的场景，能展示出不同的效果，例如：
-
<html>标签用来包围当前网页的所有 HTML 代码，可以把它看做一个外壳。 -
<head>标签表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的：-
<meta charset="UTF-8">用来指明当前网页的编码格式是 UTF-8； -
<title>用来设置当前网页的标题，相当于文件的名字，它会显示在浏览器的标题栏。
-
-
<body>标签表示网页的正文内容，也就是需要在浏览器主界面中显示的内容： -
<p>标签用来表示一个段落，能容纳一段文本； -
<a>标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页； -
<ul>标签用来表示一个列表，其中的每个<li>都是子标签，用来表示一个列表项
可以认为，网站就是一个绑定了域名的文件夹，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。
HTML只是静态地展示网页信息，不能动态地生成内容，HTML不是编程语言。
HTML 中的不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
2. HTML标签语法
一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，如下所示：
属性
↓
<div class="foo">C语言中文网</div>
↑ ↑ ↑
开始标签 内容 结束标签
特殊情况：自闭和标签
<img src="./logo.png"> alt="logo" />
<hr />
<br />
<input type="text" placeholder="请输入内容" />
自闭合标签不需要包围内容
几个常用的标签：
HTML标题：<h1>到<h6>
HTML段落：<p>和<\p>
HTML文本格式化：
| 标签 | 描述 |
|---|---|
<b>...</b> |
加粗标签中的字体 |
<em>...</em> |
强调标签中的内容，并使标签中的字体倾斜 |
<i>...</i> |
定义标签中的字体为斜体 |
<small>...</small> |
定义标签中的字体为小号字体 |
<strong>...</strong> |
强调标签中的内容，并将字体加粗 |
<sub>...</sub> |
定义下标文本 |
<sup>...</sup> |
定义上标文本 |
<ins>...</ins> |
定义文档的其余部分之外的插入文本 |
<del>...</del> |
在文本内容上添加删除线 |
<code>...</code> |
定义一段代码 |
<kbd>...</kbd> |
用来表示文本是通过键盘输入的 |
<samp>...</samp> |
定义程序的样本 |
<var>...</var> |
定义变量 |
<pre>...</pre> |
定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体 |
<abbr>...</abbr> |
用来表示标签中的内容为缩写形式 |
<address>...</address> |
用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行 |
<bdo>...</bdo> |
定义标签中的文字方向 |
<blockquote>...</blockquote> |
定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进 |
<q>...</q> |
定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来 |
<cite>...</cite> |
表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示 |
<dfn>...</dfn> |
用来定义一个术语，标签中的文本会以斜体呈现 |
3. 标签的属性
属性可以为HTML标签提供一些额外信息，或者对HTML标签进行修饰。属性需要添加在开始标签中，语法格式为：
attr="value" //attr表示属性名，value表示属性值，属性值需要使用双引号
一个标签可以没有属性，也可以有一个或者多个属性。
举个例子：
<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到C语言中文网，您已经使用本站 3 年了，这是您第 12 次登录。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>
HTML属性有通用属性和专用属性的区分，
- 通用属性适合大部分HTML标签
- 专用属性只适用于一个或特定几个HTML标签
举个例子，<img>标签有src和alt两个专用属性
<img src="./logo.png" alt="C语言中文网Logo" width="100" height="50">
<a>有href和target两个专用属性
<a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
HTML支持用户自定义属性，需要借助css和JavaScript处理自定义属性，为HTML标签添加指定样式或者行为。
常见的通用属性包括id、title、class、style等
1） id
id用来标识一个标签，方便使用CSS或者JavaScript中操作，id是惟一的
2）class
class也用于标识标签，class不唯一，可以用于群操作
3）title
title用于对标签内容的描述说明，鼠标移到该标签上方时会显示title属性值
4）style
style属性可以在html标签内部定义css样式，如设置文本的颜色、字体等。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<p style="color:red;">http://c.biancheng.net/html/</p>
<img src="./logo.png" style="height:50px;" alt="C语言中文网LOGO">
<div style="padding:10px;border:2px solid #999;text-align:center;">C语言中文网</div>
</body>
</html>
4. HTML嵌入CSS（4种方法）
html表达能力有限，结合CSS使用，可以使画面更加精美
CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中，大致分为如下四种方法：
- 行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；
- 内嵌样式：在 HTML 文档头部（
<head>和</head>之间）使用<style>标签定义 CSS 样式； - 链接式：使用
<link>标签引入外部 CSS 样式表文件。 - 导入式：使用 @import 命令导入外部 CSS 样式表文件。
5. HTML块级元素和内联元素
块级元素
以<div>标签为例，用于定义HTML页面的一个版块，本身没有特殊的显示效果，需要搭配CSS样式进行设置，从而对版块布局。
内联元素
以<span>标签为例，举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#profile span{
display: inline-block;
padding: 2px 4px;
border: 1px solid #ddd;
background-color: #f6f6f6;
border-radius: 3px;
}
</style>
<title><span>标签演示</title>
</head>
<body>
<h1>C语言中文网<span style="font-size:18px; color:#666;">简介</span></h1>
<p id="profile">
C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 50<sup>①</sup> 套教程，包括 <span>C语言</span>、<span>C++</span>、<span>Java</span>、<span>Python</span> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
<hr />
<span style="font-size:14px;">注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</span>
</p>
</body>
</html>
此处，span 标签可以实现对CSS样式的统一运用。
浙公网安备 33010602011771号