本文详细介绍了HTML的基础知识，包括HTML的超文本标记语言概念，基本结构，文本、列表、图片、链接、表格、表单的使用方法，以及样式控制如块元素和行元素的特性。此外，还讲解了如何创建和使用表单元素，如文本框、密码框、单选按钮、多选按钮，以及文件上传、下拉列表、多行文本框等，并探讨了框架和网页嵌套的概念。
做网页的顺序：先分块定位再写内容
HTML
一、HTML:超文本标记语言
二、基本结构
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页正文
</body>
</html>
三、标记分类
1.按照是否有子元素或内容
单标记:<标记名称>
双标记:<标记名称>..</标记名称>
2.按照是否自动换行
行元素:不自动换行,宽度是文本宽度
块元素:自动换行,宽度是父级的100%
四、注释
<!-- 注释内容 -->
五、文本标记
加粗 <b></b>
倾斜 <i></i>
下划线 <u></u>
删除线 <s></s>
上标 <sup></sup>
下标 <sub></sub>
文本 <font color="颜色" size="大小" face="字体"></font>
六、块元素
段落 <p align="水平对齐方式left|center|right"></p>
标题字 <h1~6 align="水平对齐方式left|center|right"></h1~6>
分割线 <hr color="颜色" width="宽度" size="粗细" align="">
强制换行 <br>
七、实体
大于号 >
小于号 <
双引号 "
单引号 '
空格
连接符 &
版权 ©
注册商标 ®
一、列表
1.无序列表
<ul type="disc|circle|square">
<li></li>
..
</ul>
2.有序列表
<ol type="1|a|A|i|I" start="数字">
<li></li>
..
</ol>
3.自定义列表
<dl>
<dt></dt>
<dd></dd>
..
</dl>
二、图片
<img src="图片路径" alt="不显示提示信息" title="显示鼠标停留提示信息" width="宽度" height="高度" border="边框">
三、路径
1.绝对路径
协议名称://主机名称/文件夹/文件全称
http://www.baidu.com/aaa/bbb/01.jpg
2.相对路径
(1)同级
文件名
./文件名
(2)下一级
文件夹/文件名
(3)上一级
../文件名
四、超链接
1.作用:实现页面之间跳转
2.链接元素:文字、图片
3.格式
<a href="跳转页面路径" target="打开方式_self|_blank"></a>
4.链接形式
(1)链接到本地网页或图片
(2)空链接
<a href="#"></a>（空链接自带置顶效果）
(3)下载资源
<a href="压缩文件路径"></a>
(4)发送邮件
<a href="mailto:邮箱地址"></a>
(5)锚点链接
创建锚点
<a name="锚点名称"></a>
使用锚点
<a href="#锚点名称"></a>
<a href="页面路径#锚点名称"></a>
(6)链接到js
警告框:
<a href="javascript:alert('内容')"></a>
警示对话框:
<a href="javascript:confirm('内容')"></a>
信息提示输入框:
<a href="javascript:prompt('内容')"></a>
表格
<table>
<caption>表头</caption>
<tr>
<td></td>
<th></th>
..
</tr>
..
</table>
table属性:
边框border 边框颜色bordercolor 背景颜色bgcolor 背景图片background
宽度width 高度height 外边距cellspacing 内边距cellpadding
水平对齐方式align="left|center|right"
tr属性:
高度height 背景颜色bgcolor 背景图片background
水平对齐方式align="" 垂直对齐方式valign="top|middle|bottom"
td|th属性:
宽度width 背景颜色bgcolor 背景图片background
水平对齐方式align="" 垂直对齐方式valign="top|middle|bottom"
行合并rowspan 列合并colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table height="400" width="500" border="1" bordercolor="blue" bgcolor="yellow" cellspacing="0" cellpadding="3" align="center">
<tr>
<td rowspan="5">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td align="right" valign="bottom">1</td>
</tr>
<tr height="120" bgcolor="pink">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>表单
<form action="提交页面地址" method="提交方式post|get">
表单控件
</form>
get:不安全,发送数据量小,一般不超过2KB
post:安全,发送数据量大,理论上没有限制
表单控件
单行文本框:
<input type="text" name="">
属性:
提示信息placeholder=""
最大长度maxlength=""
默认值value=""
密码框:
<input type="password" name="">
属性:
提示信息placeholder=""
最大长度maxlength=""
默认值value=""
单选框:
<input type="radio" name="" value="">
属性:
默认选中checked="checked"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- POST:安全 发送的数据量大，理论上没有限制
get：不安全，发送数据量小，不超过2kb
-->
<form action=" 01.html" method="post">
<!-- 单行文本框
placeholder 提示 -->
用户名：<input type="text" name="a" placeholder="请输入用户名" maxlength="12" value="3154734043"><br>
<!-- 密码框 -->
密码； <input type="password" name="b" placeholder="请输入密码" maxlength="12" value="123456789"><br>
<!-- 单选框 -->
性别：<input type="radio" name="c" value="0">男
<input type="radio" name="c" value="0" checked="checked">女<br>
<!-- 提交 -->
提交：<input type="submit" value="登录">
</form>
</body>
</html>
多选框:
<input type="checkbox" name="" value="">
属性:
默认选中checked="checked"
提交按钮:
<input type="submit">
属性:
默认显示value=""
浏览框：
<input type="file" name="">
注意:
1.method="post"
2.给form加enctype="multipart/form-data" (enctype属性规定在将表单数据发送到服务器之前如何对其进行编码) （mutlipart/form-data是指表单数据中由多部分构成，既有文本数据，又有文件等二进制数据）
多行文本框：
<textarea name=""></textarea>
属性:
行高rows=""
列宽cols=""
提示信息placeholder=""
只读readonly="readonly"
禁用disabled="disabled"
下拉列表框：
<select name="" size=""(显示几行)>
<optgroup label="分组名称">
<option value="" selected="selected"（默认选项）></option>
..
</optgroup>
..
</select>
重置按钮：
<input type="reset" value="">
图片提交按钮：
<input type="image" src="" width="" height="">
自定义按钮：（需要结合js使用）
<input type="button" value="">
隐藏域：
<input type="hidden" name="" value="">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="../day3/01.html" method="post" enctype="multipart/form-data">
<!-- 单选框 -->
性别：<input type="radio" name="b" value="0" checked="checked">男
<input type="radio" name="b" value="0">女<br>
<!-- 多选框 -->
爱好：<input type="checkbox" name="a" value="0" checked="checked">美食
<input type="checkbox" name="a" value="1" >音乐
<input type="checkbox" name="a" value="2" >足球<br>
提交：<input type="submit" value="提交">
<!-- 浏览框 -->
上传附件：<input type="file" name="c"><br>
<!-- 多行文本框 只读readonly="readonly" 禁用disabled="disabled" -->
个人简介：<textarea name="d" cols="30" rows="10" placeholder="请输入个人简介" readonly="readonly" ></textarea><br>
<!-- 下拉列表框 -->
所在地：<select name="e" >
<optgroup label="华北地区">
<option value="0">山西</option>
<option value="1">陕西</option>
</optgroup>
<optgroup label="华南地区">
<option value="2">北京</option>
<option value="3" selected="selected">天津</option>
</optgroup>
</select><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="../04.jpg" width="100" height="100"><br>
<!-- 自定义按钮 -->
<input type="button" value="注册">
<!-- 隐藏域 -->
<input type="hidden" name="r" value="1">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table border="2" bordercolor="black" align="center" cellspacing="0">
<caption><b><font size="5">会员注册</font></b></caption>
<tr>
<td><b>用户名</b></td>
<td><input type="text" name="a" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><b>密码</b></td>
<td><input type="password" name="b" ></td>
</tr>
<tr>
<td><b>性别</b></td>
<td><input type="radio" name="c" value="0">男
<input type="radio" name="c" value="1" checked="checked">女
<input type="radio" name="c" value="2">保密
</td>
</tr>
<tr>
<td><b>爱好</b></td>
<td><input type="checkbox" name="d" checked="checked" value="0">篮球
<input type="checkbox" name="d" value="1">足球
<input type="checkbox" name="d" checked="checked" value="2">羽毛球
</td>
</tr>
<tr>
<td><b>上传头像</b></td>
<td><input type="file"></td>
</tr>
<tr>
<td><b>所在地区</b></td>
<td><select name="e" >
<option value="0" selected="selected">山西</option>
<option value="1">陕西</option>
<option value="2">湖南</option>
<option value="3">浙江</option>
</select></td>
</tr>
<tr>
<td><b>个人简介</b></td>
<td><textarea name="f" cols="30" rows="5" placeholder="请输入个人简介"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册">
<input type="reset" valuer="重置"></td>
</tr>
</table>
</form>
</body>
</html>
框架
1.框架集
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>（frameset不能和body共存）
<frameset rows="" cols="" border="">(行高：rows=“100，*”表示除了100剩余的全部)
<frame src="" noresize="noresize" name="">(noresize:不能改变大小)
</frameset>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="100,*" border="10">
<frame src="04.top.html">
<frameset cols="200,*">
<frame src="04.left.html" noresize="noresize">
<frame src="04.right.html" name="abc">
</frameset>
</frameset>
</html>04.top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
我是顶部文件
</body>
</html>04.left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<center>
<a href="04.fa.html" target="abc">发件箱</a>
<br>
<a href="04.shou.html" target="abc">收件箱</a>
</center>
</body>
</html>04.right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
右部
</body>
</html>04.fa.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
我是发件箱
</body>
</html>04.shou.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
我是收件箱
</body>
</html>2.网页嵌套
<iframe src="" name=""></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="04.fa.html" target="pp">发件箱</a>
<a href="04.shou.html" target="qq">收件箱</a>
<br>
<iframe src="http:www.taobao.com" width="400" height="400" name="pp" ></iframe>
<iframe src="http:www.taobao.com" name="qq" ></iframe>
</body>
</html>
2554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
