文章目录
一、HTML概念
- HTML：超文本标记语言
二、HTML 语言规范
- HTML 语言规范：
<html>
<head>
<title>标题</title>
</head>
<body>
<font color="blue">ZZ</font>
</body>
</html>
注意： <head>里存放说明性内容；
<body>里存放的是给用户看的内容；
- HTML 不用编译，可以直接解析执行，由上到下逐行执行；
- 标签之间的内容称为 内容体；没有内容体的标签称为 空标签，例如：
</br> - HTML 标签不区分大小写；
三、Hbuilder
四、字体标签
<html>
<head>
<title>标题</title>
</head>
<body>
DD<font color="blue">ZZ</font>
</body>
</html>
<font 属性名="属性值">文字内容</font>
size 字号
color 颜色
face 字体
五、格式化标签
- HTML 源码中的换行，解析时会自动丢掉；
<br/>回车换行；<p> </p>段落标签；段前段后自动加空行；
<p align="center">aaa</p> 可设置居中显示
<h1> </h1>，<h2> </h2>…<h6> </h6>标题； 空格；HTML 源码中的多个空格会合并成一个空格显示；<!--HTML注释内容-->HTML 注释内容；
六、图片标签
<img/>
<img src="路径.jpg"/>
src 路径
width 图片宽度（默认单位为 px，即像素）
height 图片高度（默认单位为 px，即像素）
注意： width="400"，400px
width="50%"，是父标签的50%
注意： 内网路径：
相对路径：
绝对路径：
互联网路径：src="http://www.baidu.com/xxx.jpg"
七、列表标签
<ul></ul>无序列表；<li></li>列表条目项标签；<ol></ol>有序列表；
<ul>
<li>dd</li>
<li>zz</li>
</ul>
<ol>
<li>dd</li>
<li>zz</li>
</ol>
八、超链接标签
<a></a>
<a href="http://www.baidu.com">链接</a>
href 链接路径：
外网路径：
内网路径：
九、表格标签
<table></table>定义表格；
border：表格边框粗细；
width：表格宽度；<tr></tr>定义表中一行；<td></td>定义行中单元格；（ td 只能写在行中）；
<th></th>表头单元格；
<table border="1" width="50%">
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>zz</td>
<td>20</td>
</tr>
<tr>
<td>dd</td>
<td>21</td>
</tr>
</table>
- 合并单元格：
colspan：跨列合并；
rowspan：跨行合并；
注意：被合并的单元格需要删掉；
十、块标签
<div></div>适用于大量信息的展示；
块级标签，默认占满一行；会自动换行；<span></span>适用于少量信息展示；
行级标签，一行中的一块；不会自动换行；
十一、表单标签
- 表单作用：用来提交用户输入的数据；提交给服务器的程序；相当于一个web程序的入口。
<form>表单内容</form>定义一个表单；
- action属性：将数据提交到哪里；
- method属性：以何种方式提交数据；
(1) get ：把提交的数据拼接到地址栏；（默认为 get）；
提交敏感信息不安全；
提交的数据量小；
(2) post：没有把提交数据拼接到地址栏；请求体；（尽量使用Post方式提交表单）
相对安全；
理论上提交数据量无限大；
- 定义表单输入项：
<input/>文本框标签；
<select></select>选择标签；
<textarea>文本域标签；
1. <input/> 文本框标签
<form>
用户名：<input type="text"/><br/>
密码： <input type="password"/><br/>
性别： <input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女
<br/>
<input type="submit"/>
</form>
注意：表单点击提交按钮，提交数据时，
?参数列表
参数列表格式：参数1=参数值1&参数2=参数值2&参数3=参数值3
2. <select> 选择标签
<select></select>
multiple 属性为多选框；<option></option>
其内容体一般用于展示，实际传的参数为 value 值；
<form>
<select name="sel">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<input type="submit">
</form>
3. <textarea> 文本域标签
<form>
个人简介：<textarea name="person"></textarea>
<input type="submit">
</form>
4. 提交表单注意事项
（1）提交中文问题
-
为什么要使用 URL 编码？
为了保证表单数据传递时更好的区分 name 和 value；
对 特殊符号、中文 会进行URL编码；
例如： & --> %26 -
URL 编码的表现形式&本质：
例如：你好 --> %E4%BD%A0%E5%A5%BD
过程如下：
①你好，进行普通编码，成字节数组；
例如：utf-8 编码成 [-28, -67, -96, -27, -91, -67]
②字节数组中的每一个元素，从10进制转成16进制；
③把16进制的字节数组，用%进行拼接，拼接出的字符串即为URL编码；