HTML?
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML 文档也叫做 web页面
HTML 标签
HTML 标记标签通常被称为HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 属性
属性是为 HTML 元素提供的附加信息。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML "计算机输出" 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目。 |
1、<!DOCTYPE> 声明
是 document type(文档类型)的简写。!DOCTYPE 是一个文档类型标记,是一种标准通用标记语言的文档类型声明,在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。
<!DOCTYPE> 声明位于文档中的最前面的位置,处于<html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
2、HTML <html> 标签
<html> 标签用于创建一个 HTML 文档
简单的 HTML5 文档:
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
3、HTML <title> 标签
<title> 标签定义HTML文档的标题,通常体现了网页的主题内容,浏览器会以特殊的方式来使用标题,并且通常它显示在浏览器窗口的标题栏或状态栏上。
**一个 HTML 文档中不能有一个以上的 <title> 元素。
**如果缺少 <title> 标签,文档作为 HTML 是无效的。当把文档加入用户的链接列表或者收藏夹或书签列表时,<title> 标签的内容将成为该文档链接的默认名称。
4、HTML <body> 标签
<body> 标签表示 HTML 网页的主体部分,该标签内的内容使用户可以看到的。
一个 HTML 文件只能存在一个 <body> 标签。 <body> 元素包含文档的所有内容
5、HTML <h1> - <h6> 标签
标题是通过 <h1> - <h6> 标签进行定义的.<h1>定义最大的标题。<h6> 定义最小的标题。
* 浏览器会自动地在标题的前后添加空行。
*默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
6、HTML <p> 标签
段落是通过 <p> 标签定义的。(浏览器会自动地在段落的前后添加空行。(</p>是块级元素));
7、HTML <br> 标签
<br> 标签是空标签,可插入一个简单的换行符。
8、HTML <hr> 标签
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
9、 注释写法:<!-- 这是一个注释 --> 可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
10、头部 head 元素
标签 | 描述 |
---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
标签 | 描述 |
---|---|
<a> | 定义一个超级链接 |
HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在标签<a> 中使用了href属性来描述链接的地址(URL)。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时,链接显示为红色并带上下划线
空链接:
HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
基本语法:其中“ # ”表示空链接。
<a href="#">链接文字</a>
属性:
(1)target
使用 Target 属性,你可以定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口中打开)。默认的被链接文档会在原有的窗口 中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
(2)id
id 属性可用于在一个 HTML 文档中创建书签标记。书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
(2)<link>标签
常用于链接 CSS 样式表,例如:<head><link rel="stylesheet" type="text/css" href="styles.css"></head>
(3) <nav> 标签
<nav> 标签表示一个页面中的某个部分,目的是提供导航链接,常见的导航栏的示例是菜单、目录和索引.
例:<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/javascript/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
12、HTML <form> 标签
使用 <form> 标签可以向服务器传输数据,该标签的使用示例如下:
带有两个输入字段和一个提交按钮的 HTML 表单:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
- <form> 元素包含一个或多个如下的表单元素:
- <input> 例:<input type="submit" value="提交">
- <textarea> 例:<textarea rows="10" cols="30">...</textarea>
- <button> 例:<button type="button">点我!</button>
- <select> 例:用来创建下拉列表,在表单中接受用户输入,当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多 个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。 <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> - <option> 例:<option> 标签用于定义包含在<select>、<optgroup> 或 <datalist> 元素中的项,可以表示 HTML 文档中 弹出窗口中的菜单项和其他项目表
属性 值 描述 disabled disabled 规定此选项应在首次加载时被禁用。 label text 定义当使用 <optgroup> 时所使用的标注。 selected selected 规定选项(在首次显示在列表中时)表现为选中状态。 value text 定义送往服务器的选项值。 - <optgroup> 例:用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时,对相关的选项进行组合会使处理 更加容易。 <select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>属性 值 描述 disabled disabled 规定禁用该选项组。 label text 为选项组规定描述。 - <fieldset> 例: 标签会在相关表单元素周围绘制边框,<legend> 标签为 <fieldset> 元素定义标题。<legend> 必须是 <fieldset> 元素的一个子元素
<form>
<fieldset>
<legend>个人信息:</legend>
姓名: <input type="text"><br>
邮箱: <input type="text"><br>
生日: <input type="text">
</fieldset>
</form> - <label> 例:<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
<label for="male" >Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
13、表格标签
(1)<table>标签
用来定义 HTML 表格,一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 <td> 元素。<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元
属性
属性 | 值 | 描述 |
---|---|---|
align | left center right | HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
border | 1 "" | 规定表格单元是否拥有边框。 |
cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
frame | void above below hsides lhs rhs vsides box border | HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
rules | none groups rows cols all | HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
summary | text | HTML5 不支持。规定表格的摘要。 |
width | pixels % | HTML5 不支持。规定表格的宽度。 |
表示 HTML 表格的标题,对表格的简单描述,必须直接放置到 <table> 标签之后,
只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。然而,CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。
(3)其他表格 标签
<th> | 定义表格中的表头单元格。 |
<tr> | 定义表格中的行。 |
<td> | 定义表格中的单元。 |
<thead> | 定义表格中的表头内容。 |
<tbody> | 定义表格中的主体内容。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<col> | 定义表格中一个或多个列的属性值。 |
<colgroup> | 定义表格中供格式化的列组。 |
列表 | |
<ul> | 定义一个无序列表 |
<ol> | 定义一个有序列表 |
<li> | 定义一个列表项 |
<dir> | HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。 |
<dl> | 定义一个定义列表 |
<dt> | 定义一个定义定义列表中的项目。 |
<dd> | 定义定义列表中项目的描述。 |
<menu> | 定义菜单列表。 |
<command>New | 定义用户可能调用的命令(比如单选按钮、复选框或按钮)。 |
<frame> | HTML5不再支持。 定义框架集的窗口或框架。 |
<frameset> | HTML5不再支持。定义框架集。 |
<noframes> | HTML5不再支持。 定义针对不支持框架的用户的替代内容。 |
<iframe> | 定义内联框架。 |
图像 | |
<img> | 定义图像。 |
<map> | 定义图像映射。 |
<area> | 定义图像地图内部的区域。 |
<canvas>New | 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。 |
<figcaption>New | 定义一个 caption for a <figure> element |
<figure>New | figure 标签用于对元素进行组合。 |
<canvas> 标签是 HTML5 中新定义的标签,它是一个画布标签,只是作为一个图形容器,必须使用脚本来绘制图形。
例:<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
17、媒体标签
Audio/Video | |
<audio>New | 定义声音,比如音乐或其他音频流。 |
<source>New | 定义media元素 (<video> 和 <audio>)的媒体资源。media |
<track>New | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。 |
<video>New | 定义一个音频或者视频 |
音频格式 | MINE-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
属性 | 值 | 描述 |
---|---|---|
autoplayNew | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controlsNew | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
loopNew | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
mutedNew | muted | 如果出现该属性,则音频输出为静音。 |
preloadNew | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
srcNew | URL | 规定音频文件的 URL。 |
例: <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
...
</audio>
18、元信息
元信息 | |
<head> | 定义关于文档的信息 |
<meta> | 定义关于 HTML 文档的元信息。 |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<basefont> |
*<base>
<base> 标签是 HTML 语言中的基准网址标记,是一个单标签。位于网页头部文件的 <head> 标签内,一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标。
<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。在一个文档中,最多能使用一个 <base> 元素。 <base> 标签必须位于 <head> 元素内部
<base> 标签应在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。
注释:如果使用了 <base> 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。
HTML 标签分类总结
html中的标签元素大体被分为三种不同的类型:块级元素、内嵌元素和内嵌块状元素。
常用的块级元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内嵌元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内嵌块状元素有:
<img>、<input>
注:内嵌元素不能嵌套块级元素;内嵌元素能够嵌套内嵌元素;块级元素能够嵌套内嵌元素;块状元素能够嵌套块状元素(除了p元素,p元素不能相互嵌套,但是p元素能够嵌套其他元素)。
一、块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
二、行内(内嵌)元素
在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。
行内元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
二、内嵌块级元素
内嵌块级元素(inline-block)就是同时具备内嵌元素、块级元素的特点,代码display:inline-block就是将元素设置为内嵌块级元素。(css2.1新增),<img>、<input>标签就是这种内嵌块级标签。
inline-block元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置