HTML 入门学习2

最新推荐文章于 2024-03-28 21:46:24 发布

begin 专注

最新推荐文章于 2024-03-28 21:46:24 发布

阅读量156

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_61718994/article/details/120683402

版权

学习内容：

列表（无序列表，有序列表）；表单

学习笔记：

列表：

定义列表：标记<dl></dl>

基本语法:

<dl>
    <dt>名称<dd>说明
    <dt>名称<dd>说明
    <dt>名称<dd>说明
    ...
</dl>

<dt>标记定义了组成列表项目名称部分，此标记只在<dl>标记中使用

<dd>用于解释说明<dt>标记定义的项目名称，此标记同样只在<dl>标记中使用

无序列表：

标记<ul></ul>

基本语法

<ul>
  <li>项目名称</li>
  <li>项目名称</li>
  <li>项目名称</li>
  ...
</ul>

<ul>标记之间必须使用成对<li></li>标记添加列表项

代码实例：

type=" "指定汉字前面的样式

circle是圈圈

square是方块

disc是小圆点

有序列表：

标记<ol></ol>

基本语法

<ol>
  <li>项目名称</li>
  <li>项目名称</li>
  <li>项目名称</li>
  ...
</ol>

<ol>标记之间同样必须使用成对<li></li>标记添加列表项

代码实例

有序列表与无序列表的区别是有序列表的列表项前面有序号，而无序列表的则没有

有序列表中也可用type来指定样式

表单（form）：

表单概述：表单用来发送请求，并且携带数据给服务器。

表单和超链接具有共同的特征，都可以向服务器发送请求。只不过超链接是直接发送请求，不能填写数据。而用户表单提交的时候，不但可以发送请求，而且请求中还可以携带用户输入的数据。

表单最主要的作用是收集用户的信息。

表单标记语法<form></form>

表单标记的部分属性及说明：

name 设置表单名称

method 设置表单发送的方法，可以是“post”或者“get”

action 设置表单处理程序（这个属性和超链接中的href属性相同，都需要填写url）

enctype 设置表单编码方式

target 设置表单显示目标

重点：表单最终提交的时候，表单项的name属性非常重要，有name的才会提交，没有name的不会提交。并且浏览器向服务器提交数据的格式是：

url?name=value&name=value&name=value&name=value&name=value（这是W3C指定的格式）

信息输入<input>标记

基本语法

在<input>标记中，name属性显示插入的控件名称，type属性显示插入的控件类型

type属性的属性值

属性值	描述
button	定义可点击按钮（常用于Javascript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，字符被掩码
radio	定义单选按钮
reset	定义重置按钮，清除表单所有数据
submit	定义提交按钮，可把表单发送到服务器
text	定义文本框，默认长度为20字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<form action="http://localhost:80/crm/register">
			用户名:<input type="text"name="username"/>
			<br>
			密码:<input type="password"name="userpwd"/>
			<br>
			性别:
			<input type="radio"name="sex"value="1"checked/>男
			<input type="radio"name="sex"value="0"/>女
			<br>
			兴趣:
			<input type="checkbox"name="hobby"value="p">打羽毛球
			<input type="checkbox"name="hobby"value="b">打篮球
			<input type="checkbox"name="hobby"value="s">唱歌
			<input type="checkbox"name="hobby"value="g"checked>玩游戏
			<input type="checkbox"name="hobby"value="l">睡觉
			<input type="checkbox"name="hobby"value="e"checked>吃零食
			<br>
			学历:
			<select name="xueli">
				<option value="gz">高中</option>
				<option value="zk">专科</option>
				<option value="bk" selected>本科</option>
				<option value="ss">硕士</option>
				<option value="bs">博士</option>
				</select>
			<br>
			简介:
			<textarea rows="20" cols="80" name="jianjie">
				
			</textarea>
			<br>
			<input type="submit"value="注册">
			<input type="reset" value="重置">
		</form>
	</body>
</html>