目录：
- 网页制作概述
- HTML语言的语法
- HTML文件的主体结构
- HTML文档头部元素
- HTML文档主体标记
- 文字版面的编辑
- 创建图像和链接
- 使用XHTML表格
- HTML表单设计
1.HTML基础
HTML是Hypertext Markup Language的英文的缩写，即超文本标记语言
HTML语言是一种标记语言，不需要编译，直接由浏览器执行
HTML文件是一个文本文件，包含了一些HTML元素，标签等。HTML文件必须使用html或htm为文件名后缀
HTML是大小写不敏感的，HTML和html是一样的
HTML是又W3C的维护的
2.HTML语言的语法
2.1 HTML标签和元素
- 标签是HTML中最基础单位，也就是最重要组成部分
- 通常要用两个角括号起来："<“和”>"
- 标签都是闭合的（两种形式：成对与不成对）
<标签名>内容</标签名> 如: <table></table>即分起始和结束
<标签名 /> 如: <br />
- 标签是大小写无关的，跟表示意思是一样的，标准推荐使用小写，这样符合XHTML标准
2.2 HTML语法不区分大小写
- HTML标签名和属性不区分大小写的，例如、或都是定义相同的标签，但推荐全部使用小写字母书写
2.3 HTML标签属性
- HTML属性一般都出现在HTML标签中，是HTML标签的一部分。
- 标签可以有属性，他包含了额外的信息，属性的值一定要在双引号中。
- 标签可以拥有多个属性
- 属性由属性名和值成对出现。
- 语法：
<标签名 属性名1="属性名" 属性名2="属性值"...属性名N="属性值"></标签名>
示例：
<a href="http://www.baidu.com">百度网址</a>
<!--定义一个百度的超级链接-->
<img src="imges/linux_logo.jpg" width="80" height="40">
<!--插入一张"linux_logo.jpg"图片，并设置图片显示的高度和宽度-->
2.4 HTML颜色值
- 大多数的浏览器都支持颜色名集合，颜色值是一个关键字或一个RGB格式的数字，在网页中用得很大
- 只要有以下两种：
使用英文单词作为颜色值：如：red、green、blue、black、maroon、white、yellow......
可以使六位十六进制的颜色值：
如：#000000 --- #ffffff
其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色
2.5 HTML文档注释
HTML注释，我们经常要在一些代码旁做一些HTML注释，这样做的好处很多，比如方便查找，方便比对，方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码的理解与修改等等.
语法：<!--被注释的内容-->
一般注释是在代码的上面，如果只注释一行则放在代码右侧
<!--使用alt属性的图片-->
<img src="images/linux_login.jpg" alt="这是Linux图标">
<!--设置图片的边框宽度2px-->
<img src="images/linux_login.jpg" border="2">
<!--只设置宽度高度自动适应-->
<img src="images/linux_logo.jpg" width="80">
<img src="images/linux_login.jpg" width="80" height="40"><!--图片高度和宽度一起设置-->
2.6 HTML代码格式
任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以“Tab”键为准
比如我下面例子,显示效果一样：
整齐的格式
<html>
<head>
<title>这是我第一个网页</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_29010757">我的博客</a>
</body>
</html>
超乱的格式
<html><head><title>我的第一个网页</title></head><body><a href="https://blog.csdn.net/qq_29010757">我的博客</a></body></html>
HTML文档的主体结构
<html>
<head>
<title>我的第一个网页 </title> <!--网页标题--> <head>头部
</head>
<body>
<h3>欢迎来到我的博客！</h3> <!--网页内容，可以是文本、图像等--> <body主体部>
</body>
</html>
文档结构中的标签
<html></html> <head></head>
<title></title> <body></body>
HTML文档头部元素< head >
- head标签代表HTML文档的头信息，以< head >开始，< /head >结束
- 头(head)包含了当前文档的一些信息，例如标题信息，meta信息等，正常情况下头信息是不会显示在HTML文档中的。
- head元素包含的常用标签：
title标签 --代表HTML文档的标题
meta标签 --用定义文件信息的名称、内容等信息，比如说我们网站的关键字，以及网站的描述，想要搜索引擎搜索得更好，这边必须写
link标签 --当在文档中连接外部的css文件
style标签 --在html文档中嵌入css，嵌入样式使用
script标签 --在文档中使用JavaScript脚本使用
举个例子
<head>
<title>我的blog</title>
<!--定义字符集编码，强制浏览器编码-->
<meta http-equiv="Content-Type"content="text/html"; charset=gb2312">
<!--定义网站关键字，对搜索引擎很关注-->
<meta name="keywords" content="Lotus博客|网络安全|编程">
<!--定义网站的描述，简单介绍网站是干什么的-->
<mate name="description" content="学习编程网络安全">
<!--连接外部的css样式,当前文件css文件夹里面有个css样式-->
<link type="text/css" rel="stylesheet" href="./css/index.css">
<!--style里面可以嵌入样式-->
<style>
body{
margin:0px;
padding:0px;
background:red;
color:green;
}
</style>
</head>
5.HTML文档主体标记
body标签的常用属性
下面的标签都不用记，在我们开发的网站都是用css来实现，只需了解
属性 描述
text 设定页面文字的颜色
bgcolor 设定页面的背景颜色
background 设定页面背景图片
bgroperties 设定页面背景图像为固定，不随页面滚动而滚动
link 设定页面默认的链接颜色
alink 设定鼠标正在点击时的颜色
vlink 设定访问后链接文字的颜色
topmargin 设定页面的上边距
leftmargin 设定页面的左边距
6 文字版面的编辑
６.1 格式标签
标签 描述
<br> 换行标签，完成文字的紧凑显示，可以使用连续多个<br>标签来换行
<p> 段落标签，里面可以加入文字，列表，表格等，可以<p></p>或<p />使用
<center> 居中对齐标签，使段落或文字相对于上层标记居中显示
<li> 代表HTML列表项目，每一个列表项使用<li>标签定义
<ul> 代表HTML无序列表，里面每一列表项使用<li>标签定义
<ol> 代表HTML有序列表，里面每一列表项使用<li>标签定义
<hr> 水平分割线标签，用于段落与段落之间的分割
演示
<html>
<head>
<title>我的博客</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf8" />
<meta name="keywords" Content="Lotus博客|网络安全|编程">
<meta name="description" Content="练手网页">
</head>
<body>
<!--br换行标签-->
111111111111111<br />
<!--hr水平线标签-->
111111111111111<hr />
<!--p段落标签-->
<p>222222222222</p>
<p>333333333333</p>
<!--ul无序列表标签,里面每一项要有li-->
<ul>
<li>4444444444</li>
<li>5555555555</li>
</ul>
<!--ol有序列表-->
<ol>
<li>123456</li>
<li>7891011</li>
</ol>
<!--居中标签-->
<center>1111111111111</center>
</body>
</html>
显示：
６.１文本标签
前四个标签比较重要
标签 描述
<hn> 标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行，h1是最大的，一个页面只能有一个h1标签
<b> 粗体字标签
<i> 斜体字标签
<u> 下划线字体标签
<sub> 文字下表字体标签
<sup> 文字上标字体标签
<font> 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> 打字机文字
<cite> 用于引证、举例、通常为斜体字
<em> 表示强调，通常为斜体字
<strong> 表示强调，通常为粗体字
<small> 小型字体标签
<big> 大型字体标签
7 创建图像和链接
7.1插入图片和链接
<html>
<head>
<title>我的博客</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf8" />
<meta name="keywords" Content="Lotus博客|网络安全|编程">
<meta name="description" Content="练手网页">
</head>
<body>
<!--src是告诉浏览器我图像在哪里,设置高度宽度,alt是描述图片，对搜索引擎有好处,border是设置图像的边框-->
<img src="./img/0.png" width="300" height="300" alt="这个是图片" border="5" />
<hr />
<!--a超链接标签，href链接的地址，_blank是从新窗口打开，还有其他属性不用记，用到的时候再查-->
<a href="https://blog.csdn.net/qq_29010757" target="_blank"></a>
<hr />
</body>
8.使用HTML表格
8.1 表格标签常见标签
表格的基本语法
<table> border = 1 <!--border用来设置表格边框尺寸大小-->
<tr> <!--<tr>...</tr> 定义行-->
<td>
单元格内容 <!--<td>...</td> 定义列-->
<td>
</tr>
</table> <!--<table>..</table> 定义表格-->
8.2 表格标签常见属性
table标签属性：
width -- 代表表格的高度
height -- 代表表格的高度
border -- 代表表格边框（此属性应该使用CSS实现）
cellspacing -- 代表表格边框与表格内容填充的距离
cellpadding -- 代表内容填充的宽度（此属性应该使用CSS实现）
th、td标签属性:
width与height -- 代表宽度与高度
colspan -- 一行跨越多列（合并单元格）
rowspan -- 一列跨越多行（合并单元格）
align --代表水平方式（left（左对齐））|center（居中对齐）|（right（右对齐））justfy）（此属性应该使用CSS实现）
valign -- 代表垂直对齐方式（top（顶部对齐）|middle（中部对齐）|bottom（下部对齐）|baseline（基线对齐））（此属性应该使用CSS实现）
tr标签属性:
align与valign具体解释详见上面
8.3 综合示例
<html>
<head>
<title>我的博客</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf8" />
<meta name="keywords" Content="Lotus博客|网络安全|编程">
<meta name="description" Content="练手网页">
</head>
<body>
<table border="1" width="800">
<tr><th>编号</th><th>姓名</th><th>性别</th></tr>
<tr align="center"> <!--默认左对齐-->
<td>1</td><td>张三</td><td>男</td>
</tr>
<tr align="right">
<td>2</td><td>李四</td><td>女</td> <!--再使用复制粘贴即可-->
</tr>
<tr>
<td colspan="2">3</td><td>李五</td><td>女</td> <!--一行跨两列，就是一行中，两个列合并-->
</tr>
<tr>
<td>4</td><td>王五</td><td>男</td>
</tr>
</table>
</body>
显示效果
其他表格被排挤到外部
表单设计
收集用户搜集提交来的数据，用户的注册、用户的搜索、用户的图片都是表单提交来的内容
9.1 HTML的form标签
- 网站怎样与用户进行交互？答案：使用HTML表单
- 表单是可以把浏览器输入的数据传送到服务器端的程序（比如ASP、PHP）的HTML元素，服务器端程序可以处理表单传过来的数据，从而进行一些动作、比如，bbs，blog的登录系统，购物车系统等
form标签 --代表HTML表单
from标签是成对的，以<from>开始，以</from>结束
常用属性
action -- 浏览器输入的数据被传送的地方，如一个PHP页面（dofm.php）
method -- 数据传送的方法
get -- 此传递数据量少，但是传递的信息显示在网址上
post -- 此方法传送信息多，而且不会把传递信息显示在网址上
enctype -- 表示将数据发送到服务器时浏览器使用的编码类型
application/x-www-form-urlencoded --窗体数据被编码为名称/值对
multipart/from-data --窗体数据被编码为一条消息，页上的每一个控件对应消息中的一部分（上传文件的时候要写上，其他的方法可以不用管）
text/plain --以纯文本形式进行编码，其中不含任何控件或格式字符
使用get发现提交的内容会显示在url上，所以使用post会更安全
9.2 HTML的input标签(常用)
前三个常用
属性：
type -- 代表一个输入域的显示方式（分别为输入型，选择型，点击型）
name -- 此表单项名称
value -- 输入域的值
size -- 输入域的长度
maxlength -- 输入域最多可以输入文字的长度
checked -- 如果是选择型的输入域，代表已经被选择，值为checked
readonly -- 输入域可以选择，但是无法修改，值为readonly
disabled -- 输入域无法获得焦点，无法选择，以灰色显示，在表单中不起任何作用。如：disabled="disabled"
accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键
tabledex -- 输入域的"tab"键遍历顺序
src -- 当使用图片来表示按钮时，代表图片的位置（URL）
alt -- 用来替换按钮的图片（当在input的src属性定义的图片无法显示时）提示信息
type属性 – 代表HTML表单，单行输入域（框）的表现方式
type属性取值：
text --文字输入域（输入型）
password -也是文字输入域，但是输入的文字以密码符号'*'显示（输入型）
file --可以输入一个文件路径（输入型）
checkbox --复合型 可以选择零个或多个（选择型）
radio --单选框 只可以选择一个而且必须选择一个（选择型）
hidden --代表隐藏域，可以传送一些隐藏的信息到服务器
butten --按钮（点击型）
image --使用图片来显示按钮，使用src属性指定图像的位置（就像img标签的src属性）（点击型）
submit -- 提交按钮，表单填写完毕可以提交，把信息传送到服务器。可以使用value属性，来显示按钮上的文字（点击型）
reset -- 重置按钮，可以把表单中的信息清空（点击型）
9.3 HTML的textarea标签
此标签是成对出现，即< textarea >开始，以< /textarea>结束
属性：
记住前三个即可
cols -- 多行输入域的列数
rows --多行输入域的函数
name --此表单项名称
accesskey -- 表单的快捷键访问方式
disabled 无法获得焦点，无法选择，灰色显示，表单中无效
readonly 输入域可以选择，但是无法修改
tabindex 输入域，使用"tab"键的遍历顺序
下面就是多列文本框
9.4 HTML的select标签
选择列表标签
select标签是成对出现的，以< select >开始,< /select >结束
此标签中的每对option标签代表一个选择项
属性：
必须记第一个即可
name - 表单项名称
size --选择域的高度
multiple --可以有多个选择
disabled --以灰色显示，在表单中不起到任何作用
tabindex --使用"tab"键的遍历顺序
option标签 – 代表选择列表的一个选择项
option标签是成对出现的，以< option >开始,< /option >结束
属性:
必须记前第二个即可
label -- 说明选择项
value --说明选择项的值
selected --此选择项已经被选择
disabled -- 输入框无法获得焦点，以灰色显示，在表单中表示禁用
tabindex --使用"tab"键的遍历顺序
HTML表单演示：
<html>
<head>
<title>我的博客</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf8" />
<meta name="keywords" Content="Lotus博客|网络安全|编程">
<meta name="description" Content="练手网页">
</head>
<body>
<form action="1.php" method="get"> <!--action提交到哪里，如果是本页为空即可，如果要提交1.php-->
<!--这是一个文本表单-->
TEXT:<input type="text" name="name"><br /> <!--type和name是必须的-->
<!--这是一个密码表单-->
PASSWORD:<input type="password" name="pwd"><br />
<!--这是一个单选按钮-->
RADIO:<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!--这是一个下拉列表-->
SELECT:<select name="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
<!--这是一个多选框，name里面的中括号是数组-->
<input type="checkbox" name="aihao[]" value="book" />看书
<input type="checkbox" name="aihao[]" value="net" />上网
<input type="checkbox" name="aihao[]" value="game" />游戏<br />
<!--这是一个重置按钮-->
<input type="reset" name="reset" value="重置"><br />
<!--多行文本输入控件-->
<textarea name="jieshao" cols="50" rows="5"></textarea><br /><br />
<!--这是一个提交按钮-->
<input type="submit" name="sub" value="提交">
</form>
</body>
图片：
注册页面HTML介绍
2371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
