一.HTML概述
HTML,全称叫超文本标记语言,英文名是Hyper Text Markup Language
,是一种标记语言。 它包含了一系列具有描述性标记的标签(Tag,也可叫标记),通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,形成一个可供用户进行浏览、交互的优美页面。比如有描述段落、图片、文字、音频、视频、表格、链接等标签。
总之一句话,HTML是用来设计网页的布局结构的。
二.HTML基础结构
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
解析:
-
<!DOCTYPE html>
: 声明该文档是HTML5文档,固定写法。 必须放在首行 -
<html>
: HTML的根标记(根元素),该标记在文档中只能有且只有一个。 -
根标记中通常有两个子标记,分别是
<head>
和<body>
-
<head>
标记: 进行网页meta的设置(规定字符集等),定义标题,引入css文件,js文件,或者编写style和javascript代码等,可以添加在头部区域的元素标签为:<title>
,<style>
,<meta>
,<link>
,<script>
,<noscript>
和<base>
。 -
body标记: 用来定义网页的可见内容。
-
三.HTML常用标签
1.<tittle>元素 :在 HTML/XHTML 文档中是必需的,即浏览器工具栏(标签页)的标题;当网页添加到收藏夹时,显示在收藏夹中的标题;显示在搜索引擎结果页面的标题。
2.<base>元素:<base>
标签规定文档中所有相对 URL 的基准 URL(即父路径)。
3.<meta>元素:描述了一些基本的元数据。
- 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
- 定义网页作者:
<meta name="author" content="michael">
- 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30"> <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
4.<style>元素:描述了一些基本的元数据
<head>
<style type="text/css">
body {
background-color:yellow;
}
</style>
</head>
5.<script>元素:用于引入外部的脚本文件,或者书写脚本代码。
6.<noscript>元素:noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。
四.HTML基础标签
1.标题标签:标题(Heading)是通过 <h1>
- <h6>
标签进行定义的。(<h1>定义最大标题,<h6>定义最小标题)。
2.段落标签:HTML 可以将文档分割为若干段落。段落是通过<p>
标签定义的。
3.换行标签:
- 使用
<br>
标签,在不产生一个新段落的情况下进行换行(新行)。 <br>
标签对于写地址或诗歌非常有用。<br>
元素是一个空的 HTML 元素,也就是自结束标签。在XHTML中,强制写斜杠的。-
<br>
标签来插入换行符,而不是用它来增加段落之间的空白。
4.水平线标签:<hr>
标签在 HTML 页面中创建水平线,可用于分隔内容。
5.图像标签:<img>
标签可以在网页上插入图片,是一个单标记,自结束标记, 名字后面带有斜杠。
<img>
标签的常用属性如下:
属性 | 作用 |
---|---|
src | 用于书写图片的引用路径,可以是本地路径,也可以是网络路径 |
alt | 如果由于某种原因无法显示图像,则指定图像的替代文本。 该属性主要用于搜索引擎 |
width | 图片的宽 |
height | 图片的高 |
6.超链接标签:<a>
是一个双标记,标签内容体可以是文本,也可以是图像。
<a>
的属性如下:
属性 | 重要性 | 描述 |
---|---|---|
href | 必需 | 指令链接目标的URL。可以是另一个页面,也可以是本页面的其他位置 |
title | 可选 | 鼠标悬停在超链接上时显示的内容 |
target | 可选 | 指定链接如何在浏览器中打开,常用值如下: _blank : 在新标签页打开链接 _self : 在当前标签页打开链接 |
rel | 可选 | 规定当前文档和被链接文档之间的关系。 |
7.按钮标签:<button>
标签定义一个按钮。在 <button>
元素内部,可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处。
8.音频标签:<audio>
标签定义声音,比如音乐或其他音频流。
<audio>
的属性如下:
属性 | 值 | 描述 |
---|---|---|
src | URL | 规定音频文件的 URL。 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
9.视频标签:<vedio> 标签定义视频,比如电影片段或其他视频流。
<video>
的属性:
属性 | 值 | 描述 |
---|---|---|
src | URL | 要播放的视频的URL |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
width | pixels | 设置视频播放器的宽度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
五.列表
- 无序列表:是一个项目的列表,列表项使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用
<ul>
标签,列表项使用<li>
标签。 - 有序列表:是一列项目,列表项使用数字进行标记。有序列表始于
<ol>
标签。每个列表项始于<li>
标签。 - 自定义列表:不仅仅是一列项目,而是项目及其注释的组合。自定义列表以
<dl>
标签开始。每个自定义列表项以<dt>
开始。每个自定义列表项的定义以<dd>
开始。
六.表格
1.表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行,每行被分割为若干单元格,表格可以包含标题行(俗称表头),用于定义列的标题。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2.<table>
元素表示整个表格,在整体上可以分成四个部分:<caption>
,<thead>
,<tbody>
和 <tfoot>
-
<caption>
为整个表格定义主题 -
<thead>
表格头部部分(也称表格页眉)。-
<th>
在<thead>
中使用<th>
元素定义每一列的标题,有加粗效果,与普通单元格区分开来。(table header)
-
-
<tbody>
表格主体部分-
<tr>
在<tbody>
中使用<tr>
元素定义行(table row 的缩写) -
<td>
在<tr>
中使用<td>
元素定义单元格数据( table data 的缩写)
-
-
<tfoot>
可用于在表格的底部定义摘要、统计信息等内容
七.表单
1.HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。 这些元素也都被称为控件元素。
2.标签介绍:
-
<form>
元素用于创建表单,action
属性定义了表单数据提交的目标 URL,method
属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。 -
<label>
元素用于为表单元素添加标签,提高可访问性。 -
<input>
元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type
属性定义了输入框的类型,id
属性用于关联<label>
元素,name
属性用于标识表单字段。 -
<select>
元素用于创建下拉列表,而<option>
元素用于定义下拉列表中的选项。 -
<textarea>
元素用于创建文本域(多行文本输入控件),可写入字符的字数不受限制。