HTML
1. HTML简介
1.1概述
- HTML 是 HyperText Mark-up Language 的⾸字⺟简写,意思是 超⽂本标记语⾔
- HTML不是⼀种编程语⾔,⽽是⼀种标记语⾔
- 超⽂本指的是超链接,标记指的是标签,是⼀种⽤来制作⽹⻚的语⾔,这种语⾔由⼀个个的标签组成
- ⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件,⽂件的扩展名为 .html 或者 .htm
- html⽂档也叫 Web⻚⾯ ,其实就是⼀个⽹⻚,html⽂件⽤ 编辑器打开 显示的 是⽂本 ,可以⽤⽂本 的⽅式 编辑它
- 如果⽤ 浏览器打开 ,浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ,显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚
1.2 HTML的版本发展历史
1.3 HTML⽂档类型
HTML在不同版本下⽂档类型的设定,即 <!Doctype > 对应的属性值。
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下:
(2) XHTML ,其基本结构如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
(3) HTML5 ,其基本格式如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2. HTML基础语法
2.1 HTML基本结构
-
HTML⽂件的扩展名为 .html 或者 .htm
-
HTML⽂本的结构包括“头”部分(head)、和“主体”部分(body),其中“头”部提供关于⽹⻚的信息,“主体”部分提供⽹⻚的具体内容
-
HTML是由: 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体),其最外层是
<html>...</html>
标签包裹 -
HTML标签(标记)的语法是由 < 和 > 括起来。
-
HTML标签有两种: 双标签 : <标签名>…</标签名> 和 单标签 : <标签名 />
-
HTML标签中还可以添加属性: <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
-
HTML标签规范:标签名⼩写、属性使⽤双引号、标签要闭合。
规范不遵守浏览器不会报错,会尽量解析,解析不了的会显示不了效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>⽹⻚标题</title> <!-- 此处可以写各种⻚头属性设置、CSS样式和JavaScript脚本等... --> </head> <body> ⽹⻚显示内容 </body> </html>
2.2 HTML注释
html⽂档代码中可以插⼊注释,注释是对代码的说明和解释
格式
<!-- 这就是唯⼀的⼀种HTML注释了 -->
2.3 HTML中HEAD头部设置
-
head标签作⽤于⽹⻚的头部,它的内容不会在正⽂中显示出来,主要完成对当前⻚⾯的各种设置
-
在head中常包含如下⼦标签:
-
标签 描述 示例 <title>
定义了⽂档的标题 ⽹⻚标题: <title>本⽹⻚标题</title>
<base>
定义了⻚⾯链接标签的默认 链接地址 <base href="http://www.****.com/"
target="_blank"><link>
定义了⼀个⽂档和外部资源 之间的关系 导⼊CSS⽂件 <link type="text/css" rel="stylesheet" href="**.css"/>
<meta>
定义了HTML⽂档中的元数 据 设置⽹⻚编码、关键字、描述 <meta charset="utf-8"/> <meta name="Keywords" content="关键字" /> <meta name="Description" content="简介、 描述" />
<script>
定义了客户端的脚本⽂件 <script > JavaScript脚本程序 </script>
<style>
定义了HTML⽂档的样式⽂件 <style type="text/css">
嵌⼊css样式代码
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⽹⻚标题</title>
<meta name="Keywords" content="关键字" />
<meta name="Description" content="简介、描述" />
<link type="text/css" rel="stylesheet" href="**.css"/>
<style type="text/css">
嵌⼊css样式代码
</style>
<script >
JavaScript脚本程序
</script>
</head>
<body>
<h3>⽹⻚显示内容</h3>
</body>
</html>
3.文本标签
3.1常用的文本标签
<hn>...</hn> 其中n为1--6的值。 标题标签(加粗、独⽴⾏)
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题(引⽤)
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
3.2示例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>⽂本标题示例</title>
</head>
<body>
<h3>HTML标签实例--⽂本标签</h3>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<i>i: 斜体标签</i> <br/>
<em>em: 强调斜体标签</em> <br/>
<b>b: 加粗标签</b><br/><br/>
<strong>strong: 强调加粗标签</strong><br/>
<del>del: 删除线</del><br/>
<u>u: 下划线</u> <br/><br/>
⽔分⼦:H<sub>2</sub>O <br/>
4<sup>2</sup>=16
</body>
</html>
3.3HTML中的的字符实体
实体名称对⼤⼩写敏感
)
4.HTML格式化标签
常⻅格式化标签
-
<br/>
换⾏ -
<p>...</p>
换段 -
<hr />
⽔平分割线 -
列表:
-
<ul>...</ul>
⽆序列表 -
<ol>...</ol>
有序列表 其中type类型值:A a I i 1 start属性表示起 始值 -
<li>...</li>
列表项<dl>...</dl>
⾃定义列表<dt>...</dt>
⾃定义列表头<dd>...</dd>
⾃定义列表内容
-
<div>...</div>
常⽤于组合块级元素,以便通过 CSS 来对这些元素进⾏格式化
<span>...</span>
常⽤于包含的⽂本,您可以使⽤ CSS 对它定义样式,或者使⽤ JavaScript 对它进⾏操作。
示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签实例--格式化标签</title>
</head>
<body>
<h3>HTML介绍</h3>
<p>超⽂本标记语⾔(Hyper Text Markup Language),标准通⽤标记语⾔下的⼀个应⽤。HTML 不
是⼀种编程语⾔,⽽是⼀种标记语⾔ (markup language),是⽹⻚制作所必备的。</p>
<p>“超⽂本”就是指⻚⾯内可以包含图⽚、链接,甚⾄⾳乐、程序等⾮⽂字元素。<br/>
超⽂本标记语⾔的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提
供关于⽹⻚的信息,“主体”部分提供⽹⻚的具体内容。</p>
<hr/>
<!-- 列表标签 -->
你的爱好:
<ul>
<li>看书</li>
<li>上⽹</li>
<li>爬⼭</li>
<li>唱歌</li>
</ul>
<ol type="a">
<li>看书</li>
<li>上⽹</li>
<li>爬⼭</li>
<li>唱歌</li>
</ol>
<dl>
<dt>问:HTML?</dt>
<dd>答:超⽂本标记语⾔</dd>
<dt>问:HTML?</dt>
<dd>答:超⽂本标记语⾔</dd>
<dt>问:HTML?</dt>
<dd>答:超⽂本标记语⾔</dd>
</dl>
<div>aaa</div>
<div>bbb</div>
<span>aaaa</span><span>bbbb</span>
</body>
</html>
5.HTML图像标签
5.1概述
在HTML⽹⻚中插⼊⼀张图⽚,使⽤img标签,他是⼀个单标签: <img />
5.2常⽤属性
属性 | 描述 |
---|---|
src | 图⽚名及url地址 |
alt | 图⽚加载失败时的提示信息 |
title | ⽂字提示属性 |
width | 图⽚宽度 |
height | 图⽚⾼度 |
border | 边框线粗细 |
5.3绝对路径和相对路径
5.3.1绝对路径
-
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径,(URL和物理路径)
例如:
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。
5.3.2相对路径
-
相对与某个基准⽬录的路径。包含Web的相对路径(HTML中的相对⽬录),
例如:在Web开发中,"/"代表Web应⽤的根⽬录。
-
和物理路径的相对表示,
例如:"./" 代表当前⽬录,
"…/"代表上级⽬录。这种类似的表示,也是属于相对路径。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>HTML标签实例--图⽚标签</h3>
<img src="./images/a.jpg" title="图⽚" width="300" />
<img src="./images/add.jpg" alt="⼆⽉兰花图⽚" width="300" />
<img src="./images/a.jpg" width="280" border="2" />
</body>
</html>
运⾏效果如下:
6.HTML超链接标签
6.1概述
- 超级链接标签
<a>
: - 格式:
<a href="链接⽬标url地址">显示⽂字</a>
6.2属性
属性 | 描述 |
---|---|
href | 必须,指的是链接跳转地址 |
target | 表示链接的打开⽅式: |
_blank | 新窗⼝ |
_parent | ⽗窗⼝ |
_self | 本窗⼝(默认) |
_top | 顶级窗⼝ |
framename | 窗⼝名 |
title | ⽂字提示属性(详情) |
6.3锚点链接
- 定义⼀个锚点:
<a id="a1"></a>
以前使⽤的是<a name="a1"></a>
- 使⽤锚点:
<a href="#a1">跳到a1处</a>
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>HTML标签实例--超级链接标签</h1>
<a href="http://www.baidu.com" title="百度链接" target="_blank">百度</a>
本地链接:<a href="3.html">3.html</a>
锚点:<a href="#myimg">我的照片</a>
<br/>
<hr/>
<img src="./images/11.jpg" title="图⽚" width="700" />
<img src="./images/22.jpg" alt="美⼥图⽚" width="700" />
<a id="myimg"></a>
<img src="./images/33.jpg" width="700" />
<img src="./images/44.jpg" width="700" />
</body>
</html>
7. HTML表格标签
表格中的标签:
表格 | 描述 | 常⽤属性 |
---|---|---|
<table> | 定义表格 | border、width、cellspacing、cellpadding |
<caption> | 定义表格标题 | align排列⽅式 |
<th> | 定义表格的表头 | align,valign,bgcolor、rowspan、colspan、width、height |
<tr> | 定义表格的⾏ | align,valign,bgcolor |
<td> | 定义表格单元格 | align,valign,bgcolor、rowspan、colspan、width、height |
<thead> | 定义表格的⻚眉 | align,valign |
<tbody> | 定义表格的主体 | align,valign |
<tfoot> | 定义表格的⻚脚 | align,valign |
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<h3>HTML标签实例--表格标签</h3>
<table border="1" width="700" cellspacing="0" cellpadding="4">
<caption><h3>学⽣信息表</h3></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>22</td>
<td>java04</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>22</td>
<!--占两行-->
<td rowspan="2">python04</td>
</tr>
<tr>
<td>1003</td>
<!--占两列-->
<td colspan="2">王五</td>
</tr>
</table>
</body>
</html>
8.HTML表单标签
8.1form表单
8.1.1格式
<form>...</form>
表单标签
8.1.2常用属性
属性 | 描述 |
---|---|
action属性 | 提交的⽬标地址(URL) |
method属性 | 提交⽅式 get(默认)/post |
enctype | 提交类型 |
target | 在何处打开⽬标 URL。 |
name | 属性为表单起个名字.在HTML5中使⽤ id |
8.2 <
input>
8.2.1概述
标签input定义输⼊字段,⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很多新的值。
8.2.2格式
举例:
<input type="text" name="username">
类型为text,文本 名字为username
8.2.3属性
属性 | 描述 |
---|---|
name属性 | 表单项名,⽤于存储内容值的 |
value属性 | 输⼊的值(默认指定值) |
placeholder | 预期值的简短的提示信息 |
size属性 | 输⼊框的宽度值 |
maxlength属性 | 输⼊框的输⼊内容的最⼤⻓度 |
readonly属性 | 对输⼊框只读属性 |
disabled属性 | 禁⽤属性 |
checked属性 | 对选择框指定默认选项 |
accesskey属性 | 指定快捷键(不常⽤) (IEalt+键 ⽕狐alt+shift+键) |
tabindex属性 | 通过数字指定tab键的切换顺序(不常⽤) |
src和alt是为图⽚按钮设置的
注意:
- reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空
- image图⽚按钮,默认具有提交表单功能。
type属性的值
text | 单⾏⽂本框 |
---|---|
password | 密码输⼊框 |
checkbox | 多选框 注意要提供value值 |
radio | 单选框 注意要提供value值 |
file | ⽂件上传选择框 |
button | 普通按钮 |
submit | 提交按钮 |
image | 图⽚提交按钮 |
reset | 重置按钮, 还原到开始(第⼀次打开时)的效果 |
hidden | 主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改 |
⽤于应该包含 e-mail 地址的输⼊域 | |
url | ⽤于应该包含 URL 地址的输⼊域 |
number | ⽤于应该包含数值的输⼊域。 |
range | ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条 |
Date pickers | ⽇期选择器 |
search | ⽤于搜索域,⽐如站点搜索 |
color | 颜⾊选择 |
当type为range/number可以选用以下属性
属性 | 描述 |
---|---|
max | 规定允许的最⼤值 |
min | 规定允许的最⼩值 |
step | 规定合法的数字间隔(如果step=“3”,则合法的数是-3,0,3,6等) |
value | 规定默认值 |
当type为Date pickers可以选用以下属性
属性 | 描述 |
---|---|
date | 选取⽇、⽉、年 |
month | 选取⽉、年 |
week | 选取周和年 |
time | 选取时间(⼩时和分钟) |
datetime | 选取时间、⽇、⽉、年(UTC 时间) |
datetime- local | 选取时间、⽇、⽉、年(本地时间) |
8.3<
select>
8.3.1格式
<select>...</select>
标签创建下拉列表。
8.3.2属性
属性 | 描述 |
---|---|
name属性 | 定义名称,⽤于存储下拉值的 |
Size | 定义菜单中可⻅项⽬的数⽬,html5不⽀持 |
disabled | 当该属性为 |
true | 时,会禁⽤该菜单。 |
multiple | 多选 |
8.3.3<
option>
<option>... </option>
下拉选择项标签,⽤于嵌⼊到<select>
标签中使⽤的;
-
value属性:下拉项的值
-
selected属性:默认下拉指定项.
8.4<
textarea>
8.4.1格式
<textarea>...</textarea>
多⾏的⽂本输⼊区域
8.4.2属性
name :定义名称,⽤于存储⽂本区域中的值。
cols :规定⽂本区内可⻅的列数。
rows :规定⽂本区内可⻅的⾏数。
disabled: 是否禁⽤
readonly: 只读
默认值是在两个标签之间
8.5<
button>
<button>...</button>
标签定义按钮。- 您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
8.6<
fieldset>
<fieldset>
元素可将表单内的相关元素分组。
disabled属性:定义 fieldset 是否可⻅。
form属性: 定义该 fieldset 所属的⼀个或多个表单。
8.7<
legend>
<legend></legend>
– 标签为 <fieldset> 、 <figure>
以及`` ` 元素定义标题。
姓名:
年龄:
身⾼:
体重:
8.8<
optgroup>
<optgroup>
html5新增标签–
<optgroup>
标签定义选项组。此元素允许您组合选项
城市:
<select name="city">
<optgroup label="河北省">
<option>⽯家庄</option>
<option>保定</option>
<option>廊坊</option>
</optgroup>
<optgroup label="河南省">
<option>郑州</option>
<option>安阳</option>
<option>周⼝</option>
</optgroup>
</select>
8.9<
datalist>
<datalist> </datalist>
html5标签
<datalist>
标签定义可选数据的列表。与 input 元素配合使⽤,就可以制作出输⼊值的下拉列表。
<form action="demo_form.php" method="get">
搜索:
<input type="search" list="namelist" name="keywords"/>
<datalist id="namelist">
<option value="zhangsan">
<option value="zhangsanfeng">
<option value="zhangwuji">
<option value="lisi">
<option value="lixiaolong">
</datalist>
</form>
9. HTML框架标签
属性:
src:规定在 iframe 中显示的⽂档的 URL
name:规定 iframe 的名称
height:规定 iframe 的⾼度。
width:定义 iframe 的宽度。
frameborder:规定是否显示框架周围的边框。
例如:
<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
10. HTML5
新增布局标签
标签 | 作⽤ |
---|---|
header | 定义⽂档的⻚眉 |
nav | 定义导航链接部分 |
footer | 定义⽂档或者节的⻚脚/底部 |
article | 定义⽂章 |
section | 定义⽂档中的节(section/段落) |
aside | 定义其所处内容之外的内容/侧边 |
datalist | 定义选项列表,与input 配合使⽤该标签,两者通过id关联 |
fifieldset | 可将表单内的相关元素打包/分组, 与legend 搭配使⽤ |
的宽度。
frameborder:规定是否显示框架周围的边框。
例如:
<iframe src="1.html" name="myframe" width="700" height="500"></iframe>