前言
0基础学习HMTL,因编写原因，需要去除空格
一、HTML语言特征
HTML代码是由头和体组成。
<html>
<head>标题</head>
<body>需要展示给用户看的内容</body>
</html>
注：<html>标签就相当于java类大括号
- HTMIL文件的扩展名为html或者htm
- HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
- HTML标签通常由开始标签和结束标签组成。
- 开始标签和结束标签之间的内容叫做内容体
- HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如:< br >自关闭
- HTML标签不区分大小写，为了方便阅读，建议使用小写。
- HTML标签是有属性的，格式为:属性名=属性值”，属性值用引号引起。引号包含单引号和双引号
- HTML标签建议包囊嵌套，不建议交叉嵌套
二、HTML的基本标签
1.字体标签和格式化标签
<font>
字体标签，用于展示效果中修饰文字样式
<font 属性名= “属性值” > 文字 </font>
size:控制字体大小,最小1~最大7,如果设置范围不在1 ~ 7之间，否则设置无效。
color: 控制字体颜色,使用英文设置（ 例如 : red , blue )
face:控制字体类型。只能设置系统字库中存在的字体类型
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
今天天气<font color="blue" size="7">好！</font>
</body>
</html>
代码运行如下（示例）：
<br/>
HTML源码中换行，浏览器解析时会自动忽略。
换行标签，用于展示效果中换行
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
今天天气<font color="blue" size="7">好！</font><br/>
知道了要换行<br/>
</body>
</html>
<p></p>
段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空行。
align:段落内容的对齐方式
默认是left，内容居左。
Right右
Center居中
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
今天天气<font color="blue" size="7">好！</font> <br/>
知道了要换行
<p align="left">想要居左</p>
<p align="center">想要居中</p>
</body>
</html>
<h1></h1>
标题标签，用子展示效果中划分标题
其中<h1>最大，<h6>最小
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>大标题</h1>
<h2>大标题</h2>
<h3>大标题</h3>
<h4>大标题</h4>
</body>
</html>
& nbsp；
HTML源码中的多个空格，效果中最终会合并成一个。
空格符号，用于展示效果中显示一个空白的位置
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
空 白
</body>
</html>
HTML注释
用于注释HTML源码，不在HTML效果中展示。
只能在原码中看见
格式:<!-- HTML注释内容 -->
2.图片标签
<img/>
用于在页面效果中展示一张图片。
src: 指明图片的路径。(必有属性）
图片路径的写法:
内网路径:以
绝对路径:文件在硬盘上的具体位置。【不建议使用】。
例如:C:\JavaWeb001_htm\ imglc_1.jpg
相对路径:从引入者所在目录出发。【建议使用相对路径】.
例如: …/img/c_1.jpg
. ./表示上一层目录·
./表示当前目录
互联网路径:
必须前面加上 http://
例如: http://www.baidu.com/xxx.jpg
width:图片宽度
height:图片的高度·
宽度和高度的设置:.
默认单位是px，像素。例如: width=”400”其实设置的是width=400px”。是固定设置方式
百分比设置。例如: width=50%。是父标签的百分比。动态改变的随网页大小变化。所谓的父标签是整个空白页面。
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="./img/考研.png" width = "90%" />
</body>
</html>
3.列表标签
<ul></ul>
无序列表标签，用于在效果中定义一个无序列表.配合定义列表条目使用
<li></li>
列表条目项标签，用于在效果中定义一个列表的条目。
<ol></ol>
有序列表标签，用于在效果中定义一个有序列表
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>星期一</li>
<li>星期二</li>
</ul>
<ol>
<li>星期一</li>
<li>星期二</li>
</ol>
</body>
</html>
4.超链接标签
<a></a>
超链接标签，用于在效果中定义一个可以点击跳转的链接·
href:超链接跳转的路径(必有属性)
内网本机路径:相对路径和绝对路径
互联网路径:https://地址·
本页:默认跳转到本页
超链接正常工作:
①a标签中必须有内容
②a标签必须有href属性
注意:
①a标签内容体，不仅仅是文字，也可以是其他内容，例如图片。
②a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片 ，假如想要跳转到某一元素即可在href属性值填入 #元素id值。也就是页面内部跳转
③target=_blank 属性可以在创建新页面打开href的内容。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="./img/考研.png">连接图片</a>
<a href="https://baidu.com">百度</a>
<a href="https://baidu.com">
<img src="img/考研.png">
</a>
</body>
</html>
5.表格标签
<table></table>
表格标签，定义一个表格 cellspacing是单元格外边距，cellpadding是单元格内边距
<tr></tr>
行标签，定义一行
<td></td>
在一行中定义单元格
<th></th>
定义表头单元格，与td的区别是居中加粗
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2px" width="50%">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>小红</td>
<td>21</td>
</tr>
</table>
</body>
</html>
小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2" cellspacing="0"><!--cellspacing 单元格边距，cellpadding 单元格内边距-->
<caption>表标题</caption>
<tr>
<th>编号</th><!--th加粗-->
<th>名称</th>
<th>单价</th>
<th>数量</th>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>5000</td>
<td>2</td>
</tr>
</table>
</body>
</html>
单元格合并
<td>或者<th>都有两个单元格合并属性:
colspan : 陵列合并单元格
rowspan : 跨行合并单元格
合并步骤:.
①确定合并哪几个单元格，确定是跨列合并还是跨行合并。
②在第一个出现的单元格上书写合并单元格属性.
③合并几个单元格，属性值就书写几,被合并的单元格必须删掉
例子：
合并6 7 10 11单元格
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2" width="50%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td colspan="2" rowspan="2">6</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
</body>
</html>
6.块标签
<span></span>
行级块标签，用于在效果中一行上定义一个块，进行内容显示 （少量信息）
不会自动换行，有多少内容就占多少空间
<div></div>
块级块标签，用子在效果中定义一块，默认占满一行，进行内容的显示（大量信息）
会自动换行
三、HTML的表单标签
1.表单标签
<form></form>标签。
用于在效果中定义一个表单，用于提交用户填写的数据。
action : 将数据提交到何处。默认提交到本页。
本机内网路径: 相对路径 或者 绝对路径
互联网路径:https://www.baidu.com/xxx
method:将数据以何种方式提交。默认为 : get
提交方式可定义: get 或者 post
get 提交方式特点 : 把数据拼接到地址栏上
post 提交方式特点:没有把提交数据拼接到地址栏上。也就是请求体
get和post提交方式区别:
① get提交的参数列表拼接到了地址栏后面
post方式不会拼接地址栏
② get方式提交的数据敏感信息不安全v
post方式提交的数据相对安全
③ get方式提交的数据量有限的。
post方式从理论上提交的数据量无限大。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="demo.html" method="get">
说明：<textarea name="textarea"></textarea>
<input type="submit"/>
</form>
</body>
</html>
2.输入项标签
<input/>标签
表单输入项标签之一，用户可以在该标签上通过填写和选择，进行数据的输入。提交表单后地址栏有参数列表被提交。
若表单输入项需要通过参数列表提交，就必须设置name属性
参数列表的格式为：？参数列表
例如：
参数1=参数值1&参数2=参数值2&参数3=参数值3
单选框，用户只能选择，不能输入。指定value属性。否则提交的都是on
丈本框，用户可以自由输入。不一定指定value属性。
type : 设置该标签的种类
text:文本框。默认
password:密码框。内容为非明文
radio:单选框。假设未为其设置value，则提交的数据为name=on，on表示选中。
checkbox:复选框，在同一组内有复选效果
submit:提交按钮。用于控制表单提交数据
reset:重置按钮。用于将表单输入项恢复到默认状态
file:附件框。用于文件上传。
hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
button:普通按钮。需要和JS事件一起使用
name:单选框、复选框进行数据的分组。 / 设置该标签对应的参数名
value:设置该标签对应的参数值 / 可以作为普通按钮的名字存在
checked:设置单选框/复选框的默认选中状态，例如:checked=“checked”,则该项为默认选中
readonly:设置该标签的参数值只读，用户无法手动更改
disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交！文本框是灰色的
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="hidden" name="UID" value="181335415">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="password" name="password"/><br/>
性别：<input type="radio" name = "sex" value="man" checked="checked"/>男
<input type="radio" name = "sex" value="woman"/>女<br/>
爱好：<input type="checkbox" name = "hobby" value="music"/>音乐
<input type="checkbox" name = "hobby" value="run"/>跑步
<input type="checkbox" name = "hobby" value="game"/>游戏
<input type="checkbox" name = "hobby" value="code"/>编程<br/><br/>
照片：<input type="file"/><br/>
<input type="button" value="普通按钮"/>
<input type="text" value="需要配合JS事件使用" readonly="readonly"><br/><br/>
<input type="submit" value="注册信息"/> <input type="reset" value="清空表消息"/> <input type="text" disabled="disabled" value="注意一旦清除无法恢复!"/>
</form>
</body>
</html>
运行如下图：
地址栏上显示表单提交消息
3.选择框标签
<select></select>
定义一个选择框。
name:设置该标签对应的参数名
multiple:设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
<option></option>
选项标签，用于为一个选择框添加一个选项.
value:设置需要提交的参数值。
selected:设置选项的默认选中状态
注意事项:
option 的内容体一般是用来进行展示，虽然也可以被提交但是太冗长不建议。
参数值应该是option的value属性值。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<select name="address">
<option value="shanghai">上海</option>
<option value="beijing" selected="selected">北京</option>
<option value="zhejiang">浙江</option>
</select>
<br/><br/>
<select name="hobby" multiple="multiple">
<option value="run">跑步</option>
<option value="music">音乐</option>
<option value="read">阅读</option>
</select><br/>
<input type="submit"/>
</form>
</body>
</html>
4.文本域标签
<textarea></textarea>标签
表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入。
name:设置该标签对应的参数名
文本域和文本框区别:
①文本框不能换行，文本域可以。
②文本框参数值是value属性，文本域参数值是标签的内容体
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
说明：<textarea name="textarea"></textarea>
<input type="submit"/>
</form>
</body>
</html>
5.表单提交中文问题
正常提交数据:
?password=123&username=zhangsanu
非正常提交数据:
?password=123#ohheih&dlajfk&dskfklas&username=zhangsanu
URL编码解决方式:特殊符号，中文
例如:&→%26
?password=123#ohheih&dlajfk&dskfklas&username=zhang
编码完:
?password=123#ohheih%26dlajfk%26dskfklas&username=zhang
使用URL编码为了保证表单数据传递时能更好通分出name和value,保证数据传递完整性
例子：
①你好，进行普通的编码，编码成字节数组。【使用的是页面规定的字符集，例如utf-8
②字节数组中的每一个元素，都会从10进制，转为16进制。
③把已经转为16进制的字节数组，以%进行拼接。拼接出的字符串，就是
URL编码后的结果。
例如:你好，用UTF-8编码，编码的字节数组为:
[-28,-67，-96，-27，-91，-67]
URL编码后:
%E4%BD%A0%E5%A5%BD
总结
以上就是今天要讲的内容，本文介绍了0基础HTML的学习，用来复习用。
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
