一、HTML概述
1. HTTP：超文本传输协议 ——> 传输超文本
2. HTML：全称为HyperText Markup Language，翻译为超文本标记语言，不是一种编程语言，不负责进行逻辑处理。是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体的颜色、大小等。
它是由W3C组织所制定的一套专门用于显示网页的规范，他不负责处理业务逻辑，只用于显示。
二、HTML编写工具及特点
1. 编写工具：
1). 文本工具：记事本，Nodepad++，EditPlus
2). 专业版工具：DW（DreamWeaver）、WebStorm
2. 特点：
1). 任何标记皆由"<"和">"所围住，即使不能解析出来，如<p>
2). 标记名与小于号之间不能留有空白字符
3). 某些标记，要加上参数，某些则不必。如<font size="+2">Hello</font>
4). 参数只可加于起始标记中
5). 在起始标记之标记名前加上符号"/"便是其终结标记，如</font>
6). 标记字母大小写皆可
3. 文本与超文本的区别：
超文本是可以被浏览器识别并显示出来的
4. 扩展名：
扩展名为：.html 或 .htm
5. 书写规范：
1). 必须要有开始和结束标记
2). 统一用小写
3). 属性要用""引起来
6. 文档的主要组成部分：
<html>------------------------------html声明
<head>-------------------------头部
<title>网页的标题</title>
</head>
<body>-------------------------主体
网页的内容，很多标记都作用于此
</body>
</html>
三、具体标签的介绍
1. 排版标签
- 注释标签：<!-- -->
- 换行标签：<br/>
- 段落标记：<p> 作用：为字、画、表格等之间留一空白行。
<P> 的常用参数： 如：<p align="center"> align="center" 可选值：right, left, center 内定值： align="left"
- 设置水平线：<hr>
例如：<hr align="left" size="2" color="#0000FF" noshade>
属性：align:left center right；
width可以使固定像素，也可以是百分比；
size指粗细；
color线的颜色；
noshade：没有阴影效果
- 预格式标记：<pre>
- 居中标签：<center>
- 块标记，它会自动换行：<div> 作用：设定字、画、表格等的摆放位置。
- 块标记，不会自动换行：<span>
2. 字体标记
- 实体标记与逻辑标记的分别：
1、实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等。
2、多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多 重的标示。
例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。
实体标记有： <I> <B> <U>
逻辑标记有： <STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
- 标题标签：由大到小：<h1> ------ <h6>
- 字体标记：<font>
属性：color：red(单词) / #FF0000（6位十六进制数）/ rgb(255,0,0) 函数
size：字体大小 具体数字 / +2（代表在3的基础上加2，实际是5），取值1--7
face：字体类型 黑体
- 加粗标签：<strong>或者<b>
- <TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。
- <U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
- <STRIKE> 加上删除线的标记。
- <BIG> 令字体加大。
- <SMALL> 令字体变细。
- <SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。
x<sup>2</sup>+y<sup>2</sup>=r<sup>2</sup><br/>
2H<sub>2</sub>+O<sub>2</sub>=2H<sub>2</sub>O
- 特殊字符
< <
> >
人民币 ¥
商标 ™
版权 ©
空格
3. 图像标记
- 图像标记：<img >
属性：src 图像地址，可以是绝对地址（本地的，网络的），也可以是相对地址。
width 图片宽度
height 图片高度
alt 指示信息
border 边框粗细
align：调整周围文本对齐方式，top center bottom。 默认是bottom
热点：
usemap="#Map"
<map name="Map">
<area shape="circle" coords="322,308,32" href="2.gif">
</map>
示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>图像标签</title>
</head>
<body>
<img src="0U6A3220%20.JPG" alt="1" width="400" height="500" usemap="Map"/>
<map name="#Map">
<area shape="circle" coords="100,100,32" href="0U6A3220%202.JPG">
</map>
</body>
</html>4. 清单标记
- 有序列表<ol>
type：1是默认，A, a, I, i
start：从几开始
- 无序列表<ul>
type：disc 实心圆（默认） circle 空心圆 square 实心方形
- 列表项<li> 它是允许嵌套的
- 自定义列表<dl>
<dt> define title
<dd> define data
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>Title</title>
</head>
<body>
<img src="images/header.jpg"/>
<p>
首页>中国馆>女装/女士精品>所有商品
</p>
<img src="images/list_header.jpg" alt="">
<h1>热点推荐</h1>
<dl>
<dt><img src="images/photo_01.jpg" alt=""></dt>
<dd>一口价：¥49.00 <br/>
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<img src="images/line.gif" alt="">
<dl>
<dt><img src="images/photo_02.jpg" alt=""></dt>
<dd>一口价：¥49.00 <br/>
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<img src="images/line.gif" alt="">
<dl>
<dt><img src="images/photo_03.jpg" alt=""></dt>
<dd>一口价：¥49.00 <br/>
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<img src="images/line.gif" alt="">
<dl>
<dt><img src="images/photo_04.jpg" alt=""></dt>
<dd>一口价：¥49.00 <br/>
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<img src="images/line.gif" alt="">
<dl>
<dt><img src="images/photo_05.jpg" alt=""></dt>
<dd>一口价：¥49.00 <br/>
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<img src="images/line.gif" alt="">
</body>
</html>5. 超链接
<a>
绝对定位：
带有协议的：http ftp(file transport protocol)
不带协议的：file
相对定位
href指链接地址，可以是绝对地址，也可以是相对地址
链接到邮箱：mailto:邮箱名
target：打开的地址
_blank 打开一个新的窗口
_self 在自身打开
_top 在顶层打开
框架名 在指定的框架中打开
锚链接
示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<br/>
<a href="mailto:812483927@qq.com">邮箱</a>
<br>
<a name="myAnchor">顶部</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#myAnchor">回到顶部</a>
</body>
</html>6. 表格标记
- 创建一个简单的表格 <table> <tr> <th> <td>
- 表格属性：
border：边框
bordercolor：边框颜色
width：宽度
height：高度
align：left center right
cellspacing：边框与边框间距
cellpadding：字体与边框间距
- 表格的标题 <caption>
- 表格中单元格的合并（跨行rowspan，跨列colspan）
- 表格的分块和嵌套<thead> <tbody> <tfoot>
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>表格</title>
</head>
<body>
<table border="1" bordercolor="blue" width="500" align="center" cellspacing="0" cellpadding="10">
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>李伟</td>
<td>男</td>
<td>24</td>
<td>篮球</td>
</tr>
<tr>
<td>李伟</td>
<td>男</td>
<td>24</td>
<td>篮球</td>
</tr>
<tr>
<td>李伟</td>
<td>男</td>
<td>24</td>
<td>篮球</td>
</tr>
</table>
<hr/>
<br/>
<table border="1" bordercolor="blue" width="500" align="center" cellspacing="0" cellpadding="10">
<caption>这是高一三班成绩表</caption>
<thead>
<tr>
<th colspan="3">学生考试成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>96</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>7. 框架标记及<iframe>
- 窗口框架的建立（frameset，frame标签）：相当于将一个页面拆分成好几个HTML页面组成
- frameset不能与body同用
- 窗口属性
rows：水平分割
cols：垂直分割
frameborder：0或1 隐藏或显示边框
scrolling：yes或no 是否可以滚动
noresize：不可以改变窗口大小
示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>frame</title>
</head>
<frameset rows="50,*,10%">
<frame src="Demo2.html" scrolling="no" noresize/>
<frameset cols="20%,*">
<frame src="Demo3.html"/>
<frame name="mainFrame" src="Demo4.html"/>
</frameset>
<frame src="Demo5.html"/>
</frameset>
</html>- iframe标签的使用
<iframe src="1.jpg" width="400" height="300"/>
属性
name="mainFrame" 窗口名称
width=“800px” 宽度
height="150px" 高度
scrolling="yes" 是否允许滚动
src="subframe/the_second.html" 链接的网页
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>iframe</title>
</head>
<body>
<a href="the_first.html" target="imgFrame">第一页</a><br/>
<a href="the_second.html" target="imgFrame">第二页</a><br/>
<a href="the_third.html" target="imgFrame">第三页</a><br/>
<iframe name="imgFrame" src="the_first.html" width="400" height="400">
</iframe>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>画中画</title>
</head>
<body style="background:url('0U6A3220 琦琦.JPG');">
<iframe src="Demo3.html" align="center"/>
</body>
</html>8. 表单标记及语义化
- 表单标签：<form>用于与服务器端的交互。
- <input>：输入标签，接收用户输入，Type属性：text, password, radio, checkbox, hidden, submit, reset, button, file, image
- <select>标签：下拉列表，size selected
- <textarea>标签：多行文本框
- <lable>标签：for属性配合id一起用，形成标注
- form表单的两种提交方式的区别
示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>表单</title>
</head>
<body>
<!--
form：表单 action method
input: text(文本框) radio（单选） checkbox（复选） password（密码） submit（提交）
reset（重置） image（图片） file（文本域） hidden（隐藏） button（普通按钮）
-->
<!--
提交数的两种方式：
method=get/post
get：1.在地址栏能看到提交的数据；2.不安全；3.不超过1kb
post：1.在地址栏看不到数据，数据在主体内容中一起提交了；2.安全
-->
<form action="subframe/iframe.html" method="get">
<input type="hidden" name="id" value="1"/>
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="sex" value="male" checked="true"/>男
<input type="radio" name="sex" value="female"/>女<br/>
爱好：<input type="checkbox" name="hobby" value="piano" checked/>钢琴
<input type="checkbox" name="hobby" value="computer" checked="true"/>计算机
<input type="checkbox" name="hobby" value="coding"/>敲代码
<input type="checkbox" name="hobby" value="running"/>跑步<br/>
上传文件：<input type="file" name="transportfile"/><br/>
省份：<select>
<option>北京</option>
<option>湖南</option>
<option>河北</option>
<option>四川</option>
</select><br/>
个人介绍：<textarea rows="3" cols="15"></textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/><br/>
<input type="button" onclick="alert('My Garden')" value="弹框"/>
<!--input type="image" 具有提交功能，同submit-->
<input type="image" src="0U6A3220 琦琦.JPG"/>
</form>
</body>
</html>- 语义化的表单扩展
<form action="" method="post">
<fieldset>
<legend>用户信息</legend>
姓名：<input type="text"/>
</fieldset>
</form>
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<title>表单语义化</title>
</head>
<body>
<form>
<fieldset>
<legend>用户必填信息</legend>
<label for="name">用户名：</label><input type="text" id="name" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
性别：<input type="radio" name="sex" id="male" value="man" checked/><label for="male">男</label>
<input type="radio" name="sex" id="female" value="woman"/><label for="female">女</label>
</fieldset>
<fieldset>
<legend>用户选填信息</legend>
爱好：<input type="checkbox" name="hobby" value="piano"/>钢琴
</fieldset>
</form>
</body>
</html>9. 多媒体标记
- 多媒体文件的链接
<embed src="a.mp3" width="300" height="300" autostart="true" loop="true"></embed>
- 在网页中添加背景音乐
<bgsound src="a.mp3" loop="-1"/>
- 跑马灯
<marquee behavior="alternate" width>
10. 头标记
- 头标签放在<head></head>头部分之间。包括title，base，meta，link
- <title>：指定浏览器的标题
- <base>：为页面上的所有链接规定标题栏显示的内容为默认地址或默认目标
- <meta>：可提供有关页面的基本信息
- <link>：定义文档与外部资源的关系
11. HTML中区域和层的概念
- 区域标签是用来定义网页上的一个特定区域，在这个特定区域内可以包含文字，图片和表格等各种网页组件。可用区域来划分网页组件，各个区域之间都是彼此独立的。
- 区域的标签：div和span ---- 两者的区别：div换行，span不换行
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
