HTML 基础知识

HTML 介绍

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML页面结构</title>
</head>
<body>
 ...
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如<b>和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

HTML 标签

HTML `<head>`元素

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>，<style>，<meta>，<link>，<script>，<noscript>，<base>

HTML `<title>` 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素的作用:
1. 定义了浏览器工具栏的标题
2. 当网页添加到收藏夹时，显示在收藏夹中的标题
3. 显示在搜索引擎结果页面的标题

HTML `<base>` 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接;
<base href="http://www.xxx.com/images/" target="burl">

HTML `<link>` 元素

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">

HTML `<meta>` 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据，元数据也不显示在页面上，但会被浏览器解析。
meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签使用实例:
1. 为搜索引擎定义关键词:
  <meta name="keywords" content="HTML, CSS, JavaScript">
2. 为网页定义描述内容:
  <meta name="description" content="学习编程">
3. 定义网页作者:
  <meta name="author" content="zhangsan">
4. 每10秒钟刷新当前页面:
  <meta http-equiv="refresh" content="10">

HTML `<style>` 元素

<style> 标签定义了HTML文档的样式文件引用地址
在<style> 元素中也可以直接添加样式来渲染 HTML 文档:
<style type="text/css"> body{ background-color:yellow } p { color:blue } </style>

HTML `<script>` 元素

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

HTML `<noscript>` 标签

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

HTML 标题

标题是通过 <h1>~<h6>标签进行定义的。
<h1>定义最大的标题，<h6> 定义最小的标题。

HTML 段落

<p> 定义一个段落
<hr> 标签在 HTML 页面中创建水平线，用于分隔内容
<br/> 用于换行

HTML 链接

HTML使用标签 <a>来设置超文本链接。<a href="url"></a>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

HTML 图像

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：<img src="url" alt="some_text">
图像属性：
1. alt 属性用来为图像定义一串预备的可替换的文本。
2. height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

HTML 表格

表格由 <table> 标签来定义。
表格的表头使用<th> 标签进行定义。
每个表格均有若干行（由 <tr> 标签定义）
每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签。每个列表项始于 <li> 标签。

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

HTML 区块

块级元素通常会以新行来开始，如：<h1>,<p>,<table>
内联元素通常不会以新行开始，如：<b>,<td>,<a>
HTML <div> 元素是块级元素，可用于组合其他 HTML 元素的容器
HTML <span> 元素是内联元素，可用作文本的容器

HTML 表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

输入元素

输入标签<input>
输入类型由类型属性（type）定义
常用类型如下：
1. 文本域（text）：<input type="text" name="lastname">
2. 密码字段（password）：<input type="password" name="pwd">
3. 单选按钮（radio）：<input type="radio" name="sex" value="female">
4. 复选框（checkbox）：<input type="checkbox" name="vehicle" value="Bike">
5. 提交按钮（submit）：<input type="submit" value="Submit">

HTML 框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
iframe语法: <iframe src="URL"></iframe> 该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度，
属性默认以像素为单位, 但是可以指定其按比例显示 (如："60%")。
<iframe loading="lazy" src="iframe01.html" width="200" height="200"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:<iframe src="iframe01.html" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性
<iframe src="iframe01.html" name="iframe_a"></iframe>
<p><a href="http://www.xxx.com" target="iframe_a" rel="noopener">xxx</a></p>

HTML 格式化标签

HTML 文本格式化标签

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML "计算机输出" 标签

<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
HTML 引文, 引用, 及标签定义

<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

HTML 注释

HTML 颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。
三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符，三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。

常见字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

音标符

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML URL

统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址，可以由字母组成，如“xxx.com”，或互联网协议（IP）地址：10.10.10.10
一个统一资源定位器(URL) 用于定位万维网上的文档。

语法规则

scheme://host.domain:port/path/filename
说明:
1. scheme - 定义因特网服务的类型。最常见的类型是 http
2. host - 定义域主机（http 的默认主机是 www）
3. domain - 定义因特网域名，比如 xxx.com
4. :port - 定义主机上的端口号（http 的默认端口号是 80）
5. path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
6. filename - 定义文档/资源的名称

常见的 URL Scheme

Scheme	访问	用于
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL 字符编码

URL只能使用ASCII字符集，来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，所以URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。如（space）：%20

XHTML

XHTML是以XML格式编写的HTML

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

HTML 媒体

Web 上的多媒体指的是音效、音乐、视频和动画。
确定媒体类型的最常用的方法是查看文件扩展名。

HTML 插件

插件的功能是扩展 HTML 浏览器的功能。

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用
标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
插件可以通过
标签或者标签添加在页面中。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

<object> 元素
- 所有主流浏览器都支持 <object> 标签。
- <object> 元素定义了在 HTML 文档中嵌入的对象。该标签用于插入对象，例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器等。
- <object width="100%" height="500px" data="demo.html"></object>
<embed>元素
- 所有主流浏览器都支持 <embed> 元素。
- <embed>标签定义外部（非 HTML）内容的容器。该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。
- <embed> 元素没有关闭标签。不能使用替代文本。
- <embed width="100%" height="500px" src="demo.html">
HTML 音频

HTML 视频

posted @ 2021-07-07 09:00 杨凯凡阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

杨凯凡的博客

记录点滴，分享心得，愿与你共同进步，用代码构建更美好的数字世界。

HTML 基础知识

HTML 介绍

HTML 结构

HTML 标签

HTML 元素

HTML 属性

HTML 标签

HTML <head>元素

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <meta> 元素

HTML <style> 元素

HTML <script> 元素

HTML <noscript> 标签

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 表格

HTML 列表

无序列表

有序列表

自定义列表

HTML 区块

HTML 表单

输入元素

HTML 框架

Iframe - 设置高度与宽度

Iframe - 移除边框

使用iframe来显示目标链接页面

HTML 格式化标签

HTML 注释

HTML 颜色

HTML 字符实体

常见字符实体

音标符

HTML URL

语法规则

常见的 URL Scheme

URL 字符编码

XHTML

与 HTML 相比最重要的区别：

文档结构

元素语法

属性语法

如何将 HTML 转换为 XHTML

HTML 媒体

HTML 插件

<object> 元素

<embed>元素

HTML 音频

HTML 视频

公告

HTML `<head>`元素

HTML `<title>` 元素

HTML `<base>` 元素

HTML `<link>` 元素

HTML `<meta>` 元素

HTML `<style>` 元素

HTML `<script>` 元素

HTML `<noscript>` 标签

`<object>` 元素

`<embed>`元素

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ