01-第一章 HTML语言
其余web文章参考：web学习目录
<div>&<span>
<div>是块元素（盒模型），而 <span> 则是行内元素,span并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图
以如下代码为例：
<html>
<head>
<title>
</title>
<meta charset ="utf-8" />
</head>
<body>
<h1>引入图片</h1>
<h1>我的名字叫<span style = "color: red;">我是烫头小能手</span></h1>
<div style = "text-align: center;">
<img src ="./img/smallcat.jpg" width ="" height ="99" border ="0" >
</div>
</body>
</html>
效果如下图所示：我是烫头小能手变成一级标题+红色字体，图片居中
img显示图片
<img>是单标签，src表示插入图片的来源、图片的位置
<img>后面插入图片的路径
<html>
<head>
<title>
</title>
<meta charset = "utf-8">
</head>
<body>
<img src="http://192.168.2.133/html/style/img/smallcat.jpg" width="" height="99" border="0">
<!-- 这是绝对路径-->
<img src="./style/img/venus.png">
<!-- 这是相对路径 ./表示当前目录下-->
<!-- 如果宽度和高度有一个不写，就会自适应另外一个-->
<!-- img是单标签-->
</body>
</html>
a标签href超链接
a标签定义超链接，用于从一个页面链接到另外一个界面
a元素最重要的属性是href属性，它指定链接的目标
在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的。
如下代码：_blank表示从新的窗口打开
<html>
<!-- 用来测试超链接跳转-->
<head>
<title>测试href</title>
<meta charset = "utf-8" />
</head>
<body>
<a href = "https://www.baidu.com/" target="_blank" >
百度
</a><br />
<!-- targer内容为空则不跳转-->
<a href = "https://www.bilibili.com/" target ="" >
bilibili
</a><br />
</body>
</html>
<!-- br是自动换行-->
表单
从web1.0网页主要像用户展示信息，到web2.0需要用户向服务器提交数据
本节主要介绍html页面常用的代码，后续用到来这里检索即可
表单的应用场景
先上传源代码，一般建议复制到vscode里面看
<html>
<head>
<title>提交表单</title>
<meta charset="utf-8" />
</head>
<body>
<h1>用户注册</h1>
<!--
enctype定义数据类型，我是谁，这个地方写错了在上传图片的时候可能光传一个图片名字，不传内容
method如果用get，图片很大，十几K，URL放不下
action是把数据提交到哪个文件，#代表自己
target跳转到新的界面
<br/>是换行标签
用户名后面输入的框框就叫表单元素，用input标签
input后面的type=text叫做单行文本框
type=password叫做密码框
type=submit提交
即type的类型决定了框框的类型
男、女那里指定value是因为传给服务器的都是on
textarea是文本域，因为有多行文本，文本域要顶格去写
clos是列，rows是高
-->
<form
enctype="multipart/form-data"
method="post"
action="#"
target="_blank"
>
<table border="2">
<tr>
<td style="text-align: right;width: ;">用户名：</td>
<td><input type="text" name="useradmin"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">密码：</td>
<td><input type="password" name="pass1"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">确定密码：</td>
<td><input type="password" name="pass2"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">性别：</td>
<td><input name="sex" type="radio" value="male"/>男<input name="sex" type="radio" value="female"/>女<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">爱好：</td>
<td><input type="checkbox" name="hobby1" value="eat"/>吃饭
<input type="checkbox" name="hobby2" value="sleep"/>睡觉
<input type="checkbox" name="hobby3" value="paly"/>打豆豆<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">生日：</td>
<td><input name="year"/>年
<select name="month">
<option value="0">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="……">……</option>
</select>月
<input name="day"/>日<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">注册协议：</td>
<td><textarea name="protocol" cols="80" rows="20">
欢迎注册，你同意了本协议
1.好好吃饭
2.好好睡觉
3.好好打豆豆
</textarea><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">头像上传：</td>
<td><input type="file" name="img"><br /></td>
</tr>
</table>
<input type="submit" name="submit" value="注册" />
<input type="button" name="button" value="普通按钮" />
<input type="reset" name="reset" value="重置" />
</form>
</body>
</html>
分别对网页里面的关键字进行描述
| 属性 | 说明 |
|---|---|
| enctype | 提交数据的形式，application/x-www-form-urlencode一般用这个，multipart/form-data是上传文件时候使用的，不然只会上传文件的名字，不会上传文件的内容 |
| method | 提交方式； 默认是 GET 方法，参数在URL 中，显示（在URL 中可见）提交； URL 的长度是有限制的，不可能使用URL 上传大量数据； POST 方法，无长度限制，可以上传大文件（几M 的头像，附件等等）。 |
| action | 表单信息提交的页面； 默认情况下或者其值为 # ，代表提交信息到当前页，也就是本页面； 一般是一个URL 地址，这个URL 地址可以是本网站地址，也可以其他网站地址； 当提交表单的时候，实际上就是发起了一个HTTP 请求，就是浏览器直接访问action 属性所指向的页面。 |
| target | 是否在新的标签页打开目标地址； self ，默认值 ； _blank ，在新的标签页打开。 |
| input | 用户名后面输入的框框就叫表单元素，用input标签 |
| type="text" | input后面的:type=text叫做单行文本框 type=password叫做密码框 type = "radio"是单选框 type="checkbox"是复选框 type=submit提交……总之不同的type类型会显示不同的“框框”效果 |
| name | id | name 属性用于对提交到服务器后的表单数据进行标识 注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 如果不设置name，最直观的感受就是在文本框输入用户名密码提交后，文本框会清空，数据也提交不上去 |
| value | 代表表单元素（控件）的（默认）值，如果没有此属性，需要从用户获得。 男、女那里指定value是因为选择男或者女传给服务器的都是on |
详细代码说明
下拉列表:
<select name="month">
<option value="0">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="……">……</option>
</select>月
文本域:
<td><textarea name="protocol" cols="80" rows="20">
欢迎注册，你同意了本协议
1.好好吃饭
2.好好睡觉
3.好好打豆豆
</textarea><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">头像上传：</td>
<td><input type="file" name="img"><br /></td>
</tr>
<!-- 因为有多行文本，文本域要顶格去写 -->
<!-- cols:文本区域的列数，变相的设置宽度
rows:文本区域的行数，变相的设置高度
-->
按钮：
<input type = "button" value = "普通按钮">
<input type = "reset" value = "重置按钮"><br />
<input type = "submit" value = "提交按钮">
