前端01

1HTML概述
1.1HTML是什么
HTML：超文本标记语言，是最基础的开发网页的一门语言。
HTML是一门标记语言，不是一门编程语言。
HTML是通过标记（标签、元素）来组织网页结构的。
HTML是文档的一种。
txt、doc、pdf。。。
1.2HTML结构
1.2.1案例：使用html编写我的第一个网页。

1.2.2HTML的结构介绍
1.: 用来指定当前HTML文档所遵循的HTML规范, 该声明是html5.0的声明.
2.: 用来存放网页的基本属性信息, 比如网页的标题, 网页在被打开时使用的编码等. head里面的内容需要优先被浏览器加载.
3.: 网页的主体, 用来存放可视的网页内容
4.

1.3.2HTML属性
属性必须要声明在标签上, 属性可以有多个, 多个属性之间用空格隔开, 属性的值可以用单引号或双引号引起来, 或者不用引号.一般都会使用双引号引起来.

1.3.3空格和换行
在html中, 多个连续的空白字符会被当成一个空格来显示, 所以直接敲回车换行不能在html中进行换行.所以:
如果要做一个换行, 可以用
标签来代替.
如果要做一个空格, 可以用 来代替.

1.3.4html注释
格式:
注释不能够交叉嵌套

1.3.5html和xml的区别
1.相同点: html和xml都是标记语言, 都是由标记(标签)组成的.
2.不同点:
(1)html是超文本标记语言, 其中的标记都是提供好的, 不能自己定义.
(2)xml是可扩展标记语言, 可以自己定义标签.
(3)html对语法的要求特别的不严格.a)大小写可以混用.b)有时标签没有关闭, 也可能会被正常解析.c)如果出现了交叉嵌套, 有时也能被正常解析.
(4)xml对语法的要求特别的严格.a)严格区分大小写.b)标签必须要关闭才可以.c)标签必须要合理的嵌套,不能出现交叉嵌套.

2HTML标签
2.1标题标签
h1~h6标签可以在网页生成标题
1.标签

<!-- 标题标签 -->
<h1 align="center">helloword...</h1>
<h2>helloword...</h2>
<h3>helloword...</h3>
<h4>helloword...</h4>
<h5>helloword...</h5>
<h6>helloword..</h6>

2.属性
(1)align属性: 定义标题标签内文本的排列方式
left(左对齐, 默认)、center(居中对齐)、right(右对齐)、justify(两端对齐)
2.2列表标签
2.2.1无序列表

<ul>
	<li>中国</li>
	<li>美国</li>
	<li>韩国</li>
	<li>小日本</li>
</ul>

1.标签
(1)ul: 用来定义一个无序列表
(2)li: 用来定义列表中的条目

2.属性
(1)type属性: 定义列表项目的符号类型
disc(默认), circle, square
2.2.2有序列表

<!-- 有序列表标签 -->
<ol>
	<li>中国</li>
	<li>美国</li>
	<li>韩国</li>
	<li>小日本</li>
</ol>

2.3图像标签

<img src=“imgs/1.jpg” alt=“这是一个美女~!” title=“鼠标悬停上去是显示文字 ”； width=“500px” height=“400px”/>
1.img标签用于在网页中插入一副图像.
2.属性介绍:
(1)src: 指向图片的路径
(2)alt: 指定代替图像显示的文本
(3)width: 指定图片的宽
(4)height: 指定图片的高
2.4超链接标签
a标签也叫做锚, 可以在网页中创建一个超链接或者是创建书签.具体如下:
作用1.创建指向另外一个文档的超链接
百度一下, 你就不知道!

作用2.在当前文档的不同位置之间进行跳转

…
…
回到顶部
1.属性介绍
(1)href属性: 指定点击连接后将要跳转到的地址
(2)target属性: 指定以何种方式打开超链接.
_self: 在当前窗口打开超链接
_blank: 在新的窗口中打开超链接.
2.5表格标签

2.5.1案例: 在网页中定义一个表格

<!-- 表格标签 -->
<table border="1px" cellspacing="0" width="70%" cellpadding="10px" bgcolor="pink" align="center">
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
		<td>14</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
		<td>24</td>
	</tr>
	<tr>
		<td>31</td>
		<td>32</td>
		<td>33</td>
		<td>34</td>
	</tr>
	<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
		<td>44</td>
	</tr>
</table>

1.标签介绍
(1)table 用于定义一个表格
(2)tr 用于定义表格中行
(3)td 用于定义表格中的单元格(内容)
(4)th 用于定义表头中的单元格
2.table标签属性
(1)border 定义表格的边框
(2)cellspacing 定义表格边框之间的距离
(3)cellpadding 定义单元格边框和内容之间的距离
(4)width 定义表格的宽
(5)bgcolor 定义表格的背景颜色, 颜色的取值方式有三种
a)颜色的名称, red(红色), green(绿色)等
b)rgb三基色值, rgb(255,0,0)(红色), rgb(0,255,0)(绿色)
c)六位十六进制数值, #FF0000(红色), #00FF00(绿色)等
(6)align 定义表格的排列方式
left居左, right居右, center居中
3.tr标签属性
(1)bgcolor 定义表格行的背景颜色, 颜色的取值方式有三种
a)颜色的名称, red(红色), green(绿色)等
b)rgb三基色值, rgb(255,0,0)(红色), rgb(0,255,0)(绿色)
c)六位十六进制数值, #FF0000(红色), #00FF00(绿色)等
(2)align 定义这一行内容的排列方式
left居左, right居右, center居中

2.td/th标签属性
(1)bgcolor 定义表格行的背景颜色, 颜色的取值方式有三种
a)颜色的名称, red(红色), green(绿色)等
b)rgb三基色值, rgb(255,0,0)(红色), rgb(0,255,0)(绿色)
c)六位十六进制数值, #FF0000(红色), #00FF00(绿色)等
(2)align 定义这一行内容的排列方式
left居左, right居右, center居中
(3)width 定义单元格的宽
(4)height 定义单元格的高

(5)colspan 定义单元格横跨的列数
(6)rowspan 定义单元格竖跨的行数
2.5.2在网页中定义一个不规整的表格

<!-- 表格标签 -->
<table border="1px" cellspacing="0" width="70%" cellpadding="10px" bgcolor="pink" align="center">
	<tr>
		<td colspan="3">11</td>
		<td>14</td>
	</tr>
	<tr>
		<td rowspan="2">21</td>
		<td>22</td>
		<td>23</td>
		<td rowspan="2">24</td>
	</tr>
	<tr>
		<td>32</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td colspan="2">42</td>
		<td>44</td>
	</tr>
</table>

2.6表单标签
2.6.1表单的作用
表单可以将数据从客户端浏览器发送给服务器, 除了表单可以向服务器发送数据之外, 超链接也可以向服务器发送数据.
1.表单向服务器发送数据

在表单中包含表单项标签, 用户可以通过表单项输入信息(比如用户名,密码等信息), 通过提交表单将表单项中的信息发送给服务器.
2.通过超链接向服务器发送数据
http://localhost:8080/Regist?username=linqingxia&password=123456
http://localhost:8080/Login?username=linqingxia&password=123456
在超链接后面通过问号(?)拼接参数的形式, 可以将数据带给服务器.
问号前面是url地址, 问号后面是参数, 参数可以有多个, 参数之间用&号分割, 参数分为参数名和参数值, 中间用等号连接.参数名可以重复!

2.6.2通过表单标签和表格标签实现注册表单

<!-- 注册表单实现 -->
<form action="#">
	<table border="1" cellspacing="0" cellpadding="5" bordercolor="red" bgcolor="lightgray" align="center">
		<caption>注册表单</caption>
		<tr>
			<td>用户名:</td>
			<td>
				<input type="text" name="username"/>
			</td>
		</tr>
		<tr>
			<td>密码:</td>
			<td>
				<input type="password" name="password"/>
			</td>
		</tr>
		<tr>
			<td>确认密码:</td>
			<td>
				<input type="password" name="repassword"/>
			</td>
		</tr>
		<tr>
			<td>昵称:</td>
			<td>
				<input type="text" name="nickname"/>
			</td>
		</tr>
		<tr>
			<td>邮箱:</td>
			<td>
				<input type="text" name="email"/>
			</td>
		</tr>
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="gender" value="man"/>男
				<input type="radio" name="gender" value="woman"/>女
			</td>
		</tr>
		<tr>
			<td>爱好:</td>
			<td>
				<input type="checkbox" name="like" value="lanqiu"/>篮球
				<input type="checkbox" name="like" value="zuqiu"/>足球
				<input type="checkbox" name="like" value="paiqiu"/>排球
			</td>
		</tr>
		<tr>
			<td>城市:</td>
			<td>
				<select name="city">
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
					<option>深圳</option>
					<option>日本</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>头像:</td>
			<td>
				<input type="file" name="photo"/>
			</td>
		</tr>
		<tr>
			<td>验证码:</td>
			<td>
				<input type="text" name="verifyCode"/>
				<img src="imgs/vc.jpg" width="80px" height="20px"/>
				<input type="button" value="换一张"/>
			</td>
		</tr>
		<tr>
			<td>自我描述:</td>
			<td>
				<textarea cols="30" rows="5" name="desc">请输入个人描述...</textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="提交"/>
				<input type="reset" value="重置"/>
			</td>
		</tr>
	</table>
</form>