【笔记】HTML基础
HTML的基础语法
一、元素
元素具有一下几点性质
- HTML是由各种元素组成的
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭（也就是说没有结束标签，只有开始标签）
- 大多数 HTML 元素可拥有属性
嵌套
元素还支持嵌套式结构，也就是说元素之中可以有其他元素
空元素
只有开始标签，且无内容的元素。
例如<br>,在书写时我们一般在结束时加上"/"，代表在开始标签的末尾就已经结束了
就像这样<br/>,这种写法通常比较保险
元素的书写
HTML对大小写不敏感，但是元素书写时一般采用小写，不仅方便阅读，还更加保险
区块元素和内联元素
* 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
如: <h1>, <p>, <ul>, <table>
* 内联元素
内联元素在显示时通常不会以新行开始。
如: <b>, <td>, <a>, <img>
二、属性
属性具有一下几点性质
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性可以有多个
属性的书写
属性一般写在开始标签的尖括号内部，元素名之后。
属性名与元素名以及其他属性名之间以空格分割。
一般一个属性按照一下形式:属性名="属性值"
全局属性和事件属性
- 全局属性是可与所有 HTML 元素一起使用的属性。
- 局部属性是每种元素都能规定自己的属性。
所有全局属性:
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-*New | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggableNew | 指定某个元素是否可以拖动 |
| dropzoneNew | 指定是否将数据复制，移动，或链接，或删除 |
| hiddenNew | hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
| spellcheckNew | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translateNew | 指定是否一个元素的值在页面载入时是否需要翻译 |
HTML的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
以上文为例，可以发现:HTML代码大体分为三部分:
- 顶部的元素
<!DOCTYPE html> <html>部分的<head>结构<html>部分的<body>结构
我们一次对此进行解释
一、!DOCTYPE
这个元素是一个声明：表示本文档使用 HTML5 进行编译
此声明有助于浏览器现实正确的网页，书写时不区分大小写
其中 html 是一个属性，代表使用 HTML5
同时可以更换不同元素来表示不同的编译标准
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
二、head 元素
head 元素的作用是规定一些标签元素，他不会直接呈现在页面中，但规定了某些页面的元素属性。
1.meta 元素
<meta 属性>
这个空元素<meta>规定了元数据。
元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
charset 属性
观察这一行代码
<meta charset="utf-8">
在这行代码中，<meta>规定了页面的字符编码也就是元素 charset。
我们一般使用编码 utf-8 它包含的绝大部分的汉语，英语以及其他语言。
如果在编码内没有找到相应的字符形式，则会出现乱码。
标签的使用
为搜索引擎定义关键词（已停用）:
<meta name="keywords" content="关键词1, 关键词2, .... , 关键词n">
为网页定义描述内容:
<meta name="description" content="描述内容">
定义网页作者:
<meta name="author" content="作者名称">
2.title 元素
<title>文档标题</title>
title 元素用于定义标题,也就是在浏览器上方工具栏所显示的标题。
同时当网页添加到收藏夹时，或网页被搜索引擎搜索时，默认的标题也是此标题。
3.base 元素
<base 属性>
href 属性
herf是指定超链接目标的URL，也就是点击后会进入的超链接
target 属性
target 属性规定在何处打开链接文档。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
4.link 元素
<link 属性>
link是空元素，用来获取目标文档的 css 格式。
rel 属性
定义当前文档与被链接文档之间的关系。
| 值 | 描述 |
|---|---|
| alternate | 链接到该文档的替代版本（比如打印页、翻译或镜像）。 |
| author | 链接到该文档的作者。 |
| help | 链接到帮助文档。 |
| icon | 导入表示该文档的图标。 |
| license | 链接到该文档的版权信息。 |
| next | 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。 |
| prefetch | 规定应该对目标资源进行缓存。 |
| prev | 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。 |
| search | 链接到针对文档的搜索工具。 |
| stylesheet | 要导入的样式表的 URL。 |
type 属性
type 属性规定被链接文档/资源的 MIME 类型。
只有当设置了 href 属性时，才能使用该属性。
link 标签常用的 MIME 类型是 "text/css"，它规定样式表。
属性 href
href 属性规定外部资源（通常是样式表文件）的位置（URL）。
可能的值：
- 绝对 URL - 指向另一个网站（比如 href="http://www.example.com/theme.css"）
- 相对 URL - 指向网站内的一个文件（比如 href="/themes/theme.css"）
5.style 元素
<style 属性>
编写 css 样式
</style>
用来创建 css 样式
type 属性
type 属性规定此 css 的 MIME 类型。
常用的 MIME 类型是 "text/css"，它规定样式表。
在 HTML5 中, type 属性不再是必须的。默认值为 "text/css"。
6.script 元素
<script>
脚本
</script>
用于加载脚本文件，如： JavaScript。
三、body 元素
1.p 元素
<p> 段落 </p>
p 元素定义段落，他在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
p 元素可以通过 css 样式表进行修改样式。
2.标题元素
<h1> 标题 </h1>
h1 - h6 标签被用来定义 HTML 标题。
h1 定义重要等级最高的标题。h6 定义重要等级最低的标题。
3.强调文本型元素
用来区分与文本中其余部分不同的部分，并把这部分文本进行强调。
| 标签 | 描述 |
|---|---|
<em> 或 <i> |
呈现为被强调的文本。 （斜体） |
<strong> 或 <b> |
定义重要的文本。 （加粗） |
<dfn> |
定义一个定义项目。 |
<code> |
定义计算机代码文本。 |
<samp> |
定义样本文本。 |
<kbd> |
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> |
定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
| 一般来说，会使用 css 来达到更好的效果。 |
4.a 元素
<a 属性>文本</a>
该元素用来定义超链接，用于从一个页面链接到另一个页面。
在所有浏览器中，链接的默认外观如下：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
href 属性
herf是指定超链接目标的URL，也就是点击后会进入的超链接
rel 属性
定义当前文档与被链接文档之间的关系。
| 值 | 描述 |
|---|---|
| alternate | 链接到该文档的替代版本（比如打印页、翻译或镜像）。 |
| author | 链接到该文档的作者。 |
| help | 链接到帮助文档。 |
| icon | 导入表示该文档的图标。 |
| license | 链接到该文档的版权信息。 |
| next | 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。 |
| prefetch | 规定应该对目标资源进行缓存。 |
| prev | 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。 |
| search | 链接到针对文档的搜索工具。 |
| stylesheet | 要导入的样式表的 URL。 |
download 属性
download 属性定义了下载链接的地址。
href 属性必须在 a 元素中指定。
属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。
type属性
type 属性规定目标文档的 MIME 类型。
只能在 href 属性存在时使用。
该类型一般为 text/html
target 属性
该属性规定在何处打开链接文档。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
5.img 元素
<img 属性>
img元素是空标签，用于插入图像。
src 属性
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
当图片无法加载时，原有的图像将会转变为这段文字。
height（高度） 与 width（宽度）属性
用于设置图像的高度与宽度，属性值默认单位为像素。
border 元素
添加边框，属性的值为边框厚度
6.table 元素
<table 属性>
<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>
该元素用于定义表格。
每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border 元素
添加边框，属性的值为边框厚度
表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
7.列表元素
HTML 支持有序、无序和定义列表。
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 元素进行声明，内容则使用<li>元素编辑。
<ul>
<li>a</li>
<li>b</li>
</ul>
有序列表
同无序列表，用<ol>元素进行声明，<li>元素编辑。
<ol>
<li>a</li>
<li>b</li>
</ol>
自定义列表
用于编辑列表的每一项，和每一项的解释。
以 <dl> 元素声明，<dt> 元素编辑每一条，在每一条下用 <dd> 表示每一条的解释。
<dl>
<dt>a</dt>
<dd>A</dd>
<dt>b</dt>
<dd>B</dd>
</dl>
8. div 和 span 元素
HTML 可以通过 div 和 span 将元素组合起来。
span 元素
span 元素是内联元素，可用作文本的容器，没有特定的含义。
当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。
div 元素
div 元素是块级元素，它可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。
div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。
浙公网安备 33010602011771号