HTML
HTML：用于开发网页的一门语言（超文本标记语言），用于开发网页的一门语言。可以通过HTML传输各种形式的数据。
- HTML是一门标记（标记/元素）语言，不是一门编程语言。
- HTML是一门标记语言，是通过标记来组织网页结构的。
- 使用HTML开发的网页文件，是以.html或者.htm为后缀。
- 使用HTML开发的网页文件，由游览器负责解析并显示（显示在游览器中）
- HTML本质上是一个文档（WORD，TXT，PPT，等）
HTML结构详解
<!DOCTYPE html>文档声明，用于声明这是一个HTML网站，并且HTML版本是5.0
<html> 根标签，用于包裹所有的网页内容（包括head和body）
<head> 头部，用于声明网页的基本属性信息（网页使用的编码，网页的标题，引入css/js文件等）
<meta charset="UTF-8"> 网页使用的编码（通常使用utf-8）
<title>Insert title here</title> 指定网页的标题
</head>
<body> 体部分用于存放真正可视化的网页内容
</body>
</html>
html的标签：通过标记来组织网页结构。标签也叫做标记，元素。标签分为开始标签（<head> <body>）和结束标签（</head> </body>）。如果标签内部没有包裹的内容，通常可以写成自闭标签（<meta/>=<meta></meta>）。
html的属性：属性不能独立存在，必须声明在标签上，属性分为属性名和属性值，属性值可以使用单引号或者双引号。<meta charset="UTF-8"> charset属性名，utf-8属性值。
html的注释：格式<! -- 注释内容 -->
html空格和换行： html中多个连续的空白字符（空格，制表符，换行）会解释为一个空格来显示。如果要在网页中做一个换行可以使用<br/>，如果要在网页中做一个空格可以使用 或 代替。
html的图像超链接标签
-
img图像标签：用于在网页中插入图像。
其中src属性用于指定突前的url地址（即照片的所在路径）。
width属性：用于指定图片的宽度，单位可以是px（像素），或者是%（百分比）。
height属性：用于指定图片的高度，单位可以是px（像素），或者是%（百分比）。 -
超链接：< a > 标签用于在网页中创建一个超链接，点击超链接后可以跳转到另外一个文档。
<a href="http://www.baidu.com" target= "_blank">百度</a> <a href="http://www.baidu.com">百度</a>href属性：用于指定点击超链接后将要跳转到的url地址。
target属性：用于指定以何种方式打开超链接。常用取值_self：默认值，在当前窗口中打开超链接。_blank：在新的窗口中打开超链接。 -
表格标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格标签</title> <style> 在style标签内部可以存放css属性或css table{ 选中所有的table元素 border:2px solid red; background:pink; margin-left:auto; 表格左边与游览器左边的距离 margin-right:auot; 表格右边与游览器右边的距离 } td,th{选中所有的td元素 border:2px solid red; border-collpase:collapse; 是边框和内边框重合 padding:5px; 单元格中的字距离单元格边框的距离 } </style> </head> <body> <h1>hello</h1> <table> <tr> 代表行 <th>11</th> 代表单元格 <td>12</td> <td>13</td> 如果把td换成th：代表这个整个表的表头，会自动剧中。 </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> </table> </body> </html>table：用于在网页中定义一个表格。
tr：定义表格中的行。
td：用于定义表格中的单元格。
th：用于定义表格中的单元格（内容会自动居中和文字加粗）。
表单标签：
-
表单的作用：（思考：如果浏览器和服务器通信的过程中，需要向服务器提交一些数据，比如在登陆时，需要向服务器提交用户名或密码，或者在百度搜索时，需要提交搜索的关键词，这些数据时如何发送给浏览器的？）向服务器提交数据，发送数据。
-
通过表单向服务器发送数据：
这里可以通过表单及表单项标签，用户可以通过表单项输入数据，最后通过提交表单向服务器发送数据。 -
通过超链接向服务器发送数据：
http://www.baidu.com ?user=zenk&password=1010
在地址栏中URL地址的后面可以通过问号拼接参数，参数可以有多个，多个参数之间可以使用&并列符。参数（user=zenk）是一个参数，还可以分为参数名（user）和参数值（zenk）。另外参数名可以重复。在回车访问URL对应的服务器时就可以将问号后面拼接的参数一起提交给服务器。
例如：<a href = "http://www.baidu.com ==?user=zenk&password=1010==>百度一下</a> -
表单标签：< form action=“表单的提交服务器地址” method = " "> < /form>
action属性：用于指定将表单中的数据提交到哪一个位置。
method属性（可选）：提交方式如果不指定，默认时GET，常用的还有POSt
form里面通过表格组织结构。
注册表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{
border:2px solid pink;
border-collapse: collapse;
background:lightgrey;
margin-left:auto;
margin-right:auto;
}
td,th{
border: 2px solid black;
border-collapse: collapse;
padding:10px;
}
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>欢迎光临杭州世包国际摄影俱乐部</h1>
<form action = "#" >
<table>
<tr><!-- 第一行用户名 -->
<td>用户名：</td>
<td>
<input type="text" name="username"/> <!-- 普通文本输入框 -->
</td>
</tr>
<tr><!-- 第二行密码 -->
<td>密码：</td>
<td>
<input type="password" name="pwd"/> <!-- 密码输入框 -->
</td>
</tr>
<tr><!-- 第三行用户名 -->
<td>性别：</td>
<td>
<input type="radio" name="gender"/>男<!-- 单选框 -->
<input type="radio" name="gender"/>女
</td>
</tr>
<tr><!-- 第四行爱好 -->
<td>爱好：</td>
<td>
<input type="checkbox" name="like"/>篮球 <!-- 单选框 -->
<input type="checkbox" name="like"/>足球
<input type="checkbox" name="like"/>摄影
</td>
</tr>
<tr><!-- 第五行城市 -->
<td>城市：</td>
<td><!-- 下拉选框 -->
<select name="city"><!-- 定义一个下拉选框 -->
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>杭州</option>
</select>
</td>
</tr>
<tr><!-- 第六行自我描述 -->
<td>摄影体验：</td>
<td><!-- 多行文本输入框 -->
<textarea cols= "50" rows="10" name="description" placeholder="请输入摄影体验......."></textarea>
</td>
</tr>
<tr><!-- 第七行提交按钮 -->
<td colspan = "2" style= "text-align:center"><!-- colspan：指定单元格横跨的列数 / rowspan：指定单元格竖跨的列数-->
<input type="submit"/> <!-- 提交按钮 -->
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
-
在提交表单中，表单数据为什么没有被提交？
在表单中，每一个要提交数据的表单项标签都要具有name属性。如果表单项标签没有name属性，在提交表单时，该项将会被忽略（不能提交数据）。<input type="text" name="username"> <input type="password" name="password"> -
如何让多个单选框只能有一个被选中？
可以设置这多个单选框的name属性值，只要name属性值相同，这多个单选框就是一个组的框，一个组的框中只能有一个被选中！<input type="radio" name="gender">男<!-- 单选框 --> <input type="radio" name="gender">女 -
为什么单选框，复选框选择后提交时的值都是on？
如果单选框或者复选框没有添加value属性，选择任何一个选项在最终提交时的值都是on，这样服务器无法区分用户到底选择的是什么选项。
所以我们需要通过value属性为单选框和复选框设置选项被选中后所提交的值。<!-- 单选框 --> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value= "female">女 <!-- 复选框 --> <input type="checkbox" name="like" value="basketball">篮球 <input type="checkbox" name="like" value="football">足球 <input type="checkbox" name="like" value="dezhou">摄影 -
如何设置单选框或复选框默认选中某一项？
<input type="radio" name="gender" value="male" checked="checked">男只要在单选框或复选框元素上添加一个checked属性，值为checked，就可以让当前选项默认被选中。
-
如何设置下拉选框默认某一框被选中？
只需要在下拉选框中的option标签上添加一个selected属性，值为selected，就可以让当前的option选项默认被选中。<option selected="selected">广州</option> -
下拉选框中option选项上的value属性的作用是什么？
选中某一个option选项，在提交表单时，如果option上没有设置value属性，就会将option标签中的文本作为值进行提交。
如果option上添加了value属性，在提交表单时，就会提交value属性的值。<option value="BJ">北京</option>
表单项标签
- input元素：
- 文本输入框：适用于用户名/昵称/邮箱/验证码等。
<input type="text" name="username"/> - 密码输入框：适用于密码/确定密码。
<input type="password" name="pwd"/> <!-- 密码输入框 --> - 单选框：适用于性别/单选题选项。
<input type="radio" name="gender" value="male" checked="checked"/>男 - 复选框/多选框：适用于爱好等。
<input type="checkbox" name="like" value="basketball" checked="checked">篮球 <!-- 复选框 --> <input type="checkbox" name="like" value="football"/>足球 <input type="checkbox" name="like" value="dezhou"/>摄影 - 普通按钮：普通按钮本身没有功能，可以通过JS为按钮添加行为。
<input type="button" value="提交"> - 提交按钮：用于将表单中的数据提交给服务器。
<input type="submit" value="提交"/>
- 文本输入框：适用于用户名/昵称/邮箱/验证码等。
- select/option元素：
select用于定义一个下拉选框。
option用于定义下拉选框中的选项。<td><!-- 下拉选框 --> <select name="city"><!-- 定义一个下拉选框 --> <option value="BJ">北京</option> <option>上海</option> <option selected="selected">广州</option> <option>杭州</option> </select> </td> - textarea多行文本输入区域：
多行文本输入框适合输入大段文本，例如自我描述，简历等。其中cols属性用于设置输入框的列数（宽度），rows属性用于设置输入框的行数（高度），placeholder属性用于设置框中的提示消息（也可以用于用户名密码邮箱等输入框中）。
提示： 可以在style里面加resize：none，在浏览器中就不可以改变大小了。<tr><!-- 第六行自我描述 --> <td>摄影体验：</td> <td><!-- 多行文本输入框 --> <textarea cols= "50" rows="10" name="description" placeholder="请输入摄影体验......."></textarea> </td> </tr>textarea{ resize:none; }
扫一扫
3326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
