一、HTML定义
- 直译:HyperText Markup Language
- 文本:没有增加任何修饰的纯字符
- 超文本:给文本嵌入样式，图片，音频，视频，超链接等
- 总结:用标记嵌入文本实现超文本效果的语言
二、HTML特点
- 解释性:代码错误，显示效果不确定
三、HTML缺点
- 没有循环、选择等基本的语言结构
- 只有纯文本和52个标签
四、HTML版本
- 版本
(1) html1.0、html2.0、html3.0
(2) html4.0(strict/transitional)
(3) xhtml(strict/transitional/frameset)
(4) html5 - 总结
(1) 不同的html版本，标签数量不同，标签属性不同，浏览器对CSS和javascript的解释不同
五、HTML语法
1、标记
- 定义:用于描述功能的符号
- 组成:尖括号包围元素名，"/"表示结束
- 书写:不区分大小写,文档类型声明除外
- 属性:不同的标记具有不同的属性
- 分类
(1)双标记:有开始标签和结束标签
(2)单标记:只有一个标签,也叫空标记
2、元素
-
定义:从开始标签到结束标签的所有代码
-
组成:包含标记,属性和元素内容
-
分类
(1) 行内元素:前后成行,没有尺寸
(2) 块级元素:独立成行,有尺寸
(3) 行内块级元素:前后成行,也有尺寸 -
嵌套:一个元素内部包含另外一个元素
(1) 必须完整嵌套
(2) 块级元素包含行内元素
(3) 行内元素不允许嵌套块级元素
(4) div用在最外层嵌套块级元素
(5) 代码缩进可表示层级关系
(6) HTML文档由嵌套的HTML元素构成
3、属性
-
定义:为标记添加一些额外的描述
-
语法:
(1) 在开始标签中,与标记名称用空格隔开
(2) 元素可有多个属性,属性间用空格隔开
(3) 总以名称/值对形式出现,用 = 相关联
(4) 始终为属性值加引号
(5) 属性对大小写不敏感,建议小写 -
标准属性（所有标记都具备的属性）
(1) id：定义元素在页面中的唯一标识
(2) title：鼠标移入元素时的提示文本
(3) class：引用的样式的类名称
(4) style：定义元素行内样式
六、HTML结构
1、DOCTYPE
-
作用
(1) 声明文档的类型(html、xhtml)
(2) 声明文档的版本(html1.0、html5)
(3) 声明文档的风格(Strict,Transitional,Frameset) -
注意:
(1) 必须是HTML文档的第一行，位于html标签之前
(2) 不是HTML标签，指示浏览器用哪种规则解析页面
(3) h5之前的版本要引用DTD，因为 基于 SGML
2、html
- 作用:声明一个文档的开始和结束
- 属性
(1) xmlns:名称空间,区分不同版本的标签
----默认值：“http://www.w3.org/2003/html5”
3、head
- 作用:声明文档的设置区域
- 效果:不在页面中展示
3、body
- 作用:声明文档的显示区域
- 属性:
(1) text:文本颜色,
取值：为合法颜色值
(2) bgcolor:背景颜色,
取值：为合法颜色值
4、实例
<!DOCTYPE HTML> ----文档类型声明
<html> -------------文档
<head></head> ---页面头部
<body></body> ---页面主体
</html>
七、HTML注释
1、普通注释
- 作用:为代码添加说明,增加代码的可阅读性
- 效果:浏览器会忽略注释的内容,不在页面显示
- 注意
(1) 注释标记没有属性
(2) 注释不能嵌套注释
(3) 注释不能写在标签内 - 实例
<!-- 被浏览器忽略的文本或代码 -->
2、条件注释
- 作用:根据条件是否成立选择是否执行代码
- 注意:只有在IE浏览器中有效,在其他浏览器只是普通注释
- 实例:
<!-- [if 条件 IE 版本 ]>
.... some HTML here ....
<![endif]-->
1)省略:判断是否为ie的指定版本
<!-- [if IE 8 ]> <![endif]-->
2)gt：大于指定版本(不包含)
<!-- [if gt IE 8 ]> <![endif]-->
3)gte：大于等于指定版本(包含)
<!-- [if gte IE 8 ]> <![endif]-->
4)lt：小于指定版本(不包含)
<!-- [if lt IE 8 ]> <![endif]-->
5)lte :小于等于指定版本(包含)
<!-- [if lte IE 8 ]> <![endif]-->
6)!：指定版本以外的其他版本
<!-- [if ! IE 8 ]> <![endif]-->
八、HTML头部
1、title
-
作用:
(1) 定义浏览器工具栏中的标题
(2) 提供页面被添加到收藏夹时显示的标题
(3) 显示在搜索引擎结果中的页面标题 -
实例:
<title>网页标题文本</title>
2、style
-
作用:声明书写css代码的区域
-
属性:
(1) type:规定样式表的 MIME 类型
取值：“text/css”
(2) media:规定样式将被显示在什么设备上
取值：media_query -
实例:
<style type="text/css" media="screen,print,all">
....CSS 代码....
</style>
3、script
-
作用:声明书写JS的区域或者引入外部脚本文件
-
属性:
(1) type:规定样式表的 MIME 类型
取值：“text/javascript”
(2) src:规定外部脚本文件的地址
取值：URL
(3) defer：是否对脚本执行进行延迟，直到页面加载为止
取值：“defer”，
注意：只有IE支持 defer 属性 -
实例:
<script type="text/javascript" defer="defer">
....JS代码....
</script>
<script src="jquery.js"></script>
4、link
-
作用:为网页引入各种资源文件
-
属性
(1) rel: 声明目标文件的性质，取值： “stylesheet”：样式表；“icon”：网页标题图标
(2) href：规定被链接文档的位置，取值：URL
(3) type：规定被链接文档的 MIME 类型，取值：MIME_type
(4) media：规定被链接文档将被显示在什么设备上，取值：media_query -
实例
1.为网页引入外部css文件
<link rel="stylesheet" type="text/css" href="theme.css" />
2.引入设置网站标题的小图标
<link rel="shortcut icon" href="文件名.ico"/>
5、meta
-
作用:声明网页相关的元数据
-
属性
(1) content：定义与 http-equiv 或 name 属性相关的元信息
取值：some_text
(2) name：把 content 属性关联到一个名称
取值：
“author”: 指定网页的作者；
“description”: 对页面的描述
“keywords”: 网页的关键词
“generator”：网页的编辑器；
“revised”：网页文档的修改时间
(3) http-equiv：把 content 属性关联到 HTTP 头部
取值：
“content-type”：设置页面的文档类型；
“expires”：设置页面的过期时间；
“refresh”：设置刷新时间并跳转页面；
“set-cookie”：若cookie过期，则自动删除本地cookie -
实例
1.设置网页的编码格式
<meta charset="utf-8" />
2.设置响应式页面
<meta name = "viewport"
content = "width = device-width,
initial-scale = 1.0,
maximum-scale = 1.0,
minimum-scale = 1.0,
user-scalable = no " />
* width= device-width: 宽度 = 设备宽度
* height= device-height：高度 = 设备高度
* initial-scale：初始的缩放比例
* maximum-scale：允许用户缩放到的最大比例
* minimum-scale：允许用户缩放到的最小比例
* user-scalable：用户是否可以手动缩放
5、base
- 作用:定义页面上所有链接的默认地址或默认目标
- 实例
1.定义链接默认地址
<base href="http://www.w3school.com.cn/images/" />
2.定义链接默认目标
<base target="_blank" />
九、HTML文本
1、文本
- 普通文本：直接显示,多个回车或多个空格,最终解释成一个空格
- 特殊文本：被系统征用,赋予其特定意义的文本
- 转义字符:代替特殊文本的显示
(1) < --------- <
(2) > --------- >
(3) -------- 空格
(4) © -------- 版权符号
(5) ¥ --------- ￥
2、标题
- 分类：块级元素
- 属性
(1) align：水平对齐方式
取值：left、center、right、justify - 实例
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
3、段落
- 分类：块级元素
- 嵌套：只能嵌套文本,图像,行内元素,绝对不能嵌套块级元素,否则块级元素会将p元素拆开
- 属性
(1) align：水平对齐方式
取值：left、center、right - 实例
<p>This is a very short paragraph</p>
4、水平线
- 作用：可用于分隔内容的分割线
- 属性
(1) size：水平线的高度
取值：带单位的数字
(2) width：水平线的宽度
取值：带单位的数字
(3) color：水平线的颜色
取值:颜色数值
(4) align：水平线的水平对齐方式
取值:left、center(默认值)、right - 实例
<p>This is a very short paragraph1</p>
<hr align="left" />
<p>This is a very short paragraph2</p>
5、换行
- 作用:插入回车的效果
- 实例
<p>This is a <br/> short paragraph1</p>
<span>some text1</span><br/>
<span>some text2</span>
6、预格式化
- 作用:保留了文本的空格和换行
- 分类:块级元素
- 场景:展示计算机源代码
- 注意:转义字符会被转换为符号实体
- 实例
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
7、文本样式
- 分类:行内元素
- 作用:为文本添加不同的样式
- 注意:不推荐,可以通过CSS样式表实现相同效果
- 实例
<b>文本</b> -----------文本加粗
<i>文本</i> -----------文本倾斜
<u>文本</u> -----------下划线
<s>文本</s> -----------删除线
<sup>文本</sup> -------上标
<sub>文本</sub> ------下标
<small>文本</small> --字体缩小
<big>文本</big> ----- 字体放大
十、HTML布局
1、块级分区元素
- 作用:主要用在布局上给元素分组
- 标签:<div></div>
- 实例:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
2、行内分区元素
- 作用：格式化不同元素内容的样式
- 标签:<span></span>
- 实例:
<p>
<span>some text.</span>
some other text.
</p>
十一、HTML链接
1、概述
- 分类:行内元素
- 标签:<a href=" "></a>
- 作用: 允许客户进行点击的操作
- 属性
(1) href：规定目标链接的地址
取值:URL
(2) name：定义锚点名称
取值：some_text
(3) target：规定新页面的打开方式
取值- _blank:新标签页中打开(不断打开新窗口)
- _self:在当前标签页中打开(默认值)
- myself:自定义名称，新标签页中打开(只打开一个新的窗口)
2、表现形式
- 页面间的跳转:
<a href="页面路径">文本或图像</a>
- 页面上的资源下载
<a href="指定资源路径">下载</a>
- 返回页面顶部的空链接
<a href="#">返回顶部</a>
- 链接到Javascript:
<a href="javascript:js代码">JS功能</a>
- 电子邮件链接:
(1) 效果:打开本机邮件客户端,发送email邮件
(2) 前提:用户电脑配置好邮件客户端(outlook,foxmail)
<a href="mailto:zhaoxu@tedu.cn"></a>
3、锚点
- 定义:在页面中标记一个记号,允许超链接跳转到这个记号处
- 步骤
(1) 定义锚点
(2) 链接锚点 - 实例
* 定义锚点(2种)
<a name="锚点名称"></a>
<其他标记 id="锚点名称"></其他标记>
* 链接锚点(2种)
跳转到本页面的锚点处：
<a href="#锚点名称"></a>
跳转到其他页面的锚点处：
<a href="页面url#锚点名称"></a>
十二、HTML图像
1、概述
-
作用: 向网页中嵌入一幅图像
-
标记: <img />
-
分类: 行内块元素
-
属性:
(1) src：设置图像的地址
取值：URL
(2) width：规定图像的宽度
取值：带单位的数值
(3) height: 规定图像的高度
取值：带单位的数值
(4) alt: 没有图像或鼠标移入显示的文本
取值：有效字符串
强调：作用与title一样,老版本浏览器支持,现在主流浏览器支持性很差 -
注意: 若宽和高只设置一个,图像会等比缩放
-
实例
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
十三、HTML表格
1、概述
- 表格是用来组织结构化信息的一个"容器",可以包含文本、图片、列表、段落、表单、水平线、表格等等
- 表格是由一系列的"单元格"按照,从左到右，从上到下的顺序排列组成的
- 表格的最终使用目的是将数据保存在单元格中
2、语法
-
表格标记：<table></table>
-
表格标题：
(1) 作用: 出现在整个表格上面,水平居中的内容
(2) 语法: <caption>文本</caption>
(3) 强调- 位于所有tr之上,紧跟着table之下
- 一个table最多只能有一个caption
-
表格的行
(1) 作用: 在表格的内部,由若干行组成的
(2) 语法: <tr></tr> -
表格的列
(1) 作用: 在行内部,由单元格(列)组成的
(2) 语法: <td></td>
(3) 注意: 默认下所有行的列数都是统一的 -
表格表头
(1) 作用: 大多数浏览器会把表头显示为粗体居中的文本
(2) 语法: <th></th>
(3) 强调: th的用法和td的用法一样
3、属性
-
table的属性
(1) width: 表格的宽度
取值：数字(像素)
(2) height：表格的高度
取值：数字(像素)
(3) align：表格在其外层父元素的水平对齐方式，而不是表格里面内容的对齐方式
取值：取值:left(默认),center,right
(4) border：边框宽度
取值:数字
(5) cellpadding：内边距,即单元格与内容之间的距离
取值:数字
(6) cellspacing：外边距,即单元格之间的距离
取值:数字
(7) bgcolor：表格的背景颜色
取值:合法的颜色数值 -
tr的属性
(1) align：当前行的内容的水平对齐方式
取值:left、center、right
(2) valign：当前行的内容的垂直对齐方式
取值:top,middle,bottom -
td的属性
(1) width：单元格的宽度
取值:数字(像素)
(2) height：单元格的高度
取值:数字(像素)
(3) align：当前单元格内容的水平对齐方式
取值:left、center、right
(4) valign：当前单元格内容的垂直对齐方式
取值:top,middle,bottom
(5) bgcolor：当前单元格的背景颜色
取值:合法的颜色数值
(6) colspan：单元格跨列(向右合并单元格)
取值:数字(合并单元格的个数，包含本身)
(7) rowspan：单元格跨行(向下合并单元格)
取值:数字(合并单元格的个数，包含本身)
4、表格的复杂应用
-
行分组：table可以将tr划分为3大部分
(1) 头部：<thead></thead>
(2) 主体：<tbody></tbody>
(3) 尾部：<tfoot></tfoot> -
不规则：改变传统表格模式,每行列数可以不同
(1)强调：被合并掉的单元格,一定要从代码中删除出去,否则当前行会多出单元格
(2)实现方式- 跨列：从某个单元格开始横向向右合并(包含自己)
- 跨行：从某个单元格开始纵向向下合并(包含自己)
-
嵌套表格
(1)定义：在单元格中,允许放置另一个表格
(2)语法：在<td>中再包含一个以<table>开始的表格
5、实例
<table width="400" border="1">
<caption>支出统计</caption>
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
</table>
十四、HTML列表
1、概述
- 定义：按照一定格式来显示数据的容器
- 作用：会将具有相似特征或明显具备先后顺序的内容放在列表中
- 组成：
(1)列表类型:有序列表和无序列表
(2)列表项:列表中所显示的内容
2、有序列表
-
作用: 可以将列表项的"顺序"罗列出来的列表
-
组成:
(1) 列表：<ol></ol> —> Order List
(2)列表项：<li></li> —> List Item -
属性: ol
(1) type：列表项前面的标识类型是什么
取值：
1 ----- 数字 (默认值)
a ----- 小写字母
A ----- 大写字母
i ----- 小写罗马数字i ii iii iv …
I ----- 大写罗马数字
(2)start：规定有序列表的起始值，即type值中的第几个数字开始
3、无序列表
-
作用：通过统一的固定标识,显示出列表项
-
组成：
(1) 列表：<ul></ul> ----> Unorder List
(2) 列表项：<li></li> —> List Item -
属性：ul
(1) type：列表项标识类型
取值：
disc ----- 实心圆(默认值)
circle ----- 空心圆
square ----- 实心矩形
4、定义列表
- 定义: 给出一类事物定义的情形时使用
- 场景: 图文混排的布局
- 实例
<dl>
<dt>描述的术语或名词</dt>
<dd>对上述名词或术语的解释</dd>
............
<dt>描述的术语或名词</dt>
<dd>对上述名词或术语的解释</dd>
</dl>
// 使用场合:图文混排的布局
<dl>
<dt>
<img src="xxx.jpg" >
</dt>
<dd>
<span>Price : 125.55</span>
<span>xxxxx</span>
</dd>
</dl>
十五、HTML表单
1、表单元素
- 作用: 用于显示,收集信息并且将信息提交个服务器
- 语法:<form action="" method="" ></form>
- 注意: 使用表单控件提交数据时表单元素不能省略
- 属性:
(1) action：设置提交表单的地址
取值:URL，默认提交给本页
(2) method：表单的提交方式
注意:不同的提交方式,约束的内容不一样
取值: 常用的两个
get:明文提交
– 安全：会将提交信息显示在地址栏上,安全性不高
– 大小限制：最大支持到2KB的提交
– 默认：不设置method属性,get方式进行提交
– 使用场合：向服务器索取数据,优先使用get
post:密文提交
– 安全：不会将提交信息显示在地址栏上,安全性高
– 限制：没有大小限制(大量数据提交时,可以使用)
– 使用场合：安全性要求较高的页面(如包含敏感信息)，要求服务器 去处理数据时；使用post传递数据量较大时使用
(3) enctype(了解)：设置表单提交的数据的编码方式,规范哪些数据可以提交给服务器…
取值：
– applicatioin/x-www-form-urlencoded
默认值,可以将正常字符,特殊字符(&…),提交给服务器,不支持文件上传
– multipart/form-data
如果上传文件的时候,必须使用该值
– text/plain(很少用)
只能将正常字符(中英文,数字)传递给服务器，特殊字符(=,& …)不允许
(4) name:定义表单名称
1.概述：用于显示,收集信息并且将信息提交个服务器
2.表单元素
1)语法：<form action="" method="" ></form>
2)注意：使用表单控件提交数据时表单元素不能省略
3)属性：
* action：设置提交表单的地址
取值:URL，默认提交给本页
* method：表单的提交方式
注意:不同的提交方式,约束的内容不一样
取值：常用的两个
# get:明文提交
-- 安全：会将提交信息显示在地址栏上,安全性不高
-- 大小限制：最大支持到2KB的提交
-- 默认：不设置method属性,get方式进行提交
-- 使用场合：向服务器索取数据,优先使用get
# post:密文提交
-- 安全：不会将提交信息显示在地址栏上,安全性高
-- 限制：没有大小限制(大量数据提交时,可以使用)
-- 使用场合：安全性要求较高的页面(如包含敏感信息)，要求服务器 去处理数据时；使用post传递数据量较大时使用
* enctype(了解)：设置表单提交的数据的编码方式,规范哪些数据可以提交给服务器...
取值：
# applicatioin/x-www-form-urlencoded
默认值,可以将正常字符,特殊字符(&...),提交给服务器,不支持文件上传
# multipart/form-data
如果上传文件的时候,必须使用该值
# text/plain(很少用)
只能将正常字符(中英文,数字)传递给服务器，特殊字符(=,& ...)不允许
* name:定义表单名称
3.表单控件
1)概述：
* 定义：包含在表单中的元素,具备可视化外观,并且可以接受用户输入的数据
* 分类：
# input元素
# textarea
# select
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
