HTML简介
HTML是什么?
HTML 是 HyperText Mark-up Language 的⾸字⺟简写,意思是 超⽂本标记语⾔
HTML不是⼀种编程语⾔,⽽是⼀种 标记语⾔
超⽂本指的是超链接,标记指的是标签,是⼀种⽤来制作⽹⻚的语⾔,这种语⾔由⼀个个的标签组
成
⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件,⽂件的扩展名为 .html 或者 .htm
html⽂档也叫 Web⻚⾯ ,其实就是⼀个⽹⻚,html⽂件⽤ 编辑器打开 显示的 是⽂本 ,可以⽤⽂本
的⽅式 编辑它
如果⽤ 浏览器打开 ,浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ,显示的⽹⻚可以从⼀个⽹⻚
链接跳转到另外⼀个⽹⻚
HTML文档类型的设定:
HTML在不同版本下⽂档类型的设定,即 <!Doctype > 对应的属性值。
HTML基础语法
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>
HTML注释:
html⽂档代码中可以插⼊注释,注释是对代码的说明和解释
格式:<!-- 这就是唯⼀的⼀种HTML注释了 -->
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样式代码</style>
实例:
<!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>
HTML文本标签
常用文本标签
<hn>...</hn> 其中n为1--6的值。 标题标签(加粗、独⽴⾏)
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题(引⽤)
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
强调是相对于搜索引擎而言,在搜索的过程中,如果有强调的文本出现,就优先对强调的文本加以收录。(强调用于搜索优化)
实例:
<!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>
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 对
它进⾏操作
示例:
<!DOCTYPE html>
<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>
HTML图像标签
在HTML⽹⻚中插⼊⼀张图⽚,使⽤img标签,他是⼀个单标签: <img />
其中img标签中常⽤属性如下:
src: 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title:⽂字提示属性
width:图⽚宽度
height:图⽚⾼度
border:边框线粗细
理解绝对路径和相对路径
绝对路径:
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径,(URL和物理路径)
例如:
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。
相对路径:
相对与某个基准⽬录的路径。包含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>
HTML超链接标签
超级链接标签a:
格式: <a href="链接⽬标url地址">显示⽂字</a>
a标签的属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开⽅式:
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝(默认)
_top 顶级窗⼝
framename 窗⼝名
title:⽂字提示属性(详情)
锚点链接:
定义⼀个锚点: <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>
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>python04</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>
<!--<td>22</td>-->
<!--<td>python04</td>-->
</tr>
</table>
</body>
</html>
HTML表单标签
(1) <form>...</form> 表单标签
form标签常⽤属性:
*action属性:提交的⽬标地址(URL)
*method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。
(2) <input> 表单项标签input定义输⼊字段,⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很
多新的值。
具体在下⾯有详解:
如:<input type="text" name="username">
*type属性:表示表单项的类型:值如下:
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 (名字相同时才能单选)注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域。
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
⽇期选择器 Date pickers
date - 选取⽇、⽉、年
month - 选取⽉、年
week - 选取周和年
time - 选取时间(⼩时和分钟)
datetime - 选取时间、⽇、⽉、年(UTC 时间)
datetime-local - 选取时间、⽇、⽉、年(本地时间)
search ⽤于搜索域,⽐如站点搜索或 Google 搜索
color 颜⾊选择
*name属性: 表单项名,⽤于存储内容值的
*value属性: 输⼊的值(默认指定值)
*placeholder: 预期值的简短的提示信息
size属性: 输⼊框的宽度值
maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
readonly属性: 对输⼊框只读属性
*disabled属性: 禁⽤属性(彻底废掉,不传送值)
*checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
src和alt是为图⽚按钮设置的
注意:reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空
image图⽚按钮,默认具有提交表单功能。
(3) <select>...</select> 标签创建下拉列表。
name属性:定义名称,⽤于存储下拉值的
size:定义菜单中可⻅项⽬的数⽬,html5不⽀持
disabled 当该属性为 true 时,会禁⽤该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域
name :定义名称,⽤于存储⽂本区域中的值。
cols :规定⽂本区内可⻅的列数。
rows :规定⽂本区内可⻅的⾏数。
disabled: 是否禁⽤
readonly: 只读
...
默认值是在两个标签之间
(5) <button>...</button> 标签定义按钮。
您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之
处。
(6) <fieldset> --fieldset 元素可将表单内的相关元素分组。
disabled属性:定义 fieldset 是否可⻅。
form属性: 定义该 fieldset 所属的⼀个或多个表单。
(7) <legend></legend> -- 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。
<form>
<fieldset>
<legend>个⼈信息:</legend>
姓名:<input type="text" /><br/>
年龄:<input type="text" /><br/>
</fieldset>
<br/><br/>
<fieldset>
<legend>健康信息:</legend>
身⾼:<input type="text" /><br/>
体重:<input type="text" /><br/>
</fieldset>
</form>
(8) <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>
(9) <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>
HTML框架标签:
属性:src:规定在 iframe 中显示的⽂档的 URL
name:规定 iframe 的名称
height:规定 iframe 的⾼度。
width:定义 iframe 的宽度。
frameborder:规定是否显示框架周围的边框。
例如:<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
HTML5
新增布局标签:
header 定义⽂档的⻚眉
nav 定义导航链接部分
footer 定义⽂档或者节的⻚脚/底部
article 定义⽂章
section 定义⽂档中的节(section/段落)
aside 定义其所处内容之外的内容/侧边
datalist 定义选项列表,与input 配合使⽤该标签,两者通过id关联
fieldset 可将表单内的相关元素打包/分组, 与legend 搭配使⽤
新增的input type属性值
这些新增的类型,更加细化的限定了输⼊内容,如果输⼊格式不对,在提交的时候会⾃动给出相应
提示
更多新增type 参考 w3school
email <input type="email"> 输⼊邮箱格式
tel <input type="tel"> 输⼊⼿机号
url <input type="url"> 输⼊url
number <input type="number"> 输⼊数字
search <input type="search"> 搜索框(体现语义化)
range <input type="range"> ⾃由拖动的滑块
time <input type="time"> 输⼊⼩时 分钟
date <input type="date"> 输⼊年 ⽉ ⽇
datetime <input type="datetime"> 输⼊ ⽇期 时间
month <input type="month"> 输⼊⽉年
week <input type="week"> 输⼊星期 年
color <input type="color"> 调出调⾊板
新增的input属性
placeholder 提示⽂本,参考 android TextView 的hintText
autofocus ⾃动获取焦点
multiple 多⽂件上传
autocomplete
⾃动完成,取值 on、 off。on表示记录已经输
⼊的值供下次⾃动完成。此外,必须有提交按
钮,必须设置name 属性,然后该属性才会⽣效
required 必填项
accesskey 定义让控件获取焦点的快捷键,快捷键采⽤alt +
字⺟的形式
多媒体标签:
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不⽀持播放
</audio> <br/>
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不⽀持播放
</audio> <br/><br/>
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不⽀持视频播放
</video> <video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了,不⽀持视频标签
</video> <br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />