HTML知识点学习（一）

最新推荐文章于 2024-07-25 11:52:08 发布

poggioxay

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量161

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/m0_55854679/article/details/118676240

版权

文章目录

Lesson1-周一（7.12）

Lesson1-周一（7.12）

问题总结

html代码较复杂，需要多敲有耐心
代码还是需要多敲来加强记忆

项目开发流程

在这里插入图片描述

一、Markdown学习

Markdown是用于写软件文档，有自己的语法，且浏览器能够识别markdown代码
一般用于写专业软件文档、github或者gitee上写文档、日常做笔记写总结

二、HTML介绍

什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
目前最新版本：HTML5，简称H5
其中，HTML代码由浏览器来解析，目前主流的五大浏览器：Chorme、Firefox、Safari、Opera、Edge
HTML语言无论在哪里均不区分大小写

为什么用HTML（HTML的作用）

使用 HTML 来建立自己的 WEB 站点

谁要用HTML

后端开发人员、web前端开发工程师、网页美工

哪里用HTML

用在网页上，搭建网页结构或者元素

HTML标准

由W3C（国际万维组织）制定的国际标准，但W3C不是强制标准，每个浏览器对他的支持程度均不相同，而且HTML语法较宽松，浏览器是执行网页代码的

HTML表单开发

HTML 表单用于收集不同类型的用户输入，将数据发给服务器。
其中input为标记，type、name、value等等为标记的属性

<!--DOCTYPE指的是;文档类型定义，定义了网页的根元素是html-->
<!DOCTYPE html>
<html>
	<head>  
		<!--带尖括号的为标记，均成对出现-->
		<!--设置UTF-8编码，防止网页上的汉字乱码-->
		<meta charset="UTF-8">
		<title>中北大学毕业设计管理系统-用户注册</title>
	</head>
	<body>
		<form  action="receive.html"> <!--点击注册则跳转到receive.html的页面-->
			用户名<input type="text" placeholder="请输入用户名">
			<br>   <!--表示换行  全程 break row-->
			密码<input type="password"><br>
			性别<input type="radio" name="gender">男
			<input type="radio" name="gender">女
			<br>
			籍贯<select> <!--下拉选择 -->
				<option>山西大同</option>
				<option>山西临汾</option>
			</select><br>
			爱好<input type="checkbox">旅游    <!--复选框，可多选，可不选-->
			<input type="checkbox">游泳  <br>
			自我介绍<textarea  rows="5" cols="50">  <!--5行50列-->
				文本域：郭泳妍				
			</textarea>
			<br>
			上传简历<input type="file"><br>
			<input type="submit" value="注册">
			<input type="reset" value="清空重填">
		</form>
	</body>
</html>

receive.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			接受表单传来的数据
		接收registUser.html网页的数据
	</body>
</html>

表单怎么写
form表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置

<html>
	<head>
	</head>
	<body>
		<form>
		</form>
	</body>
</html>

文本框怎么写 type="text"
密码框怎么写 type="password"

密码<input type="password" name="userpsw" id="userpsw" placeholder="请输入密码"><br>

id：是唯一的标识符，不允许有重复值，可以通过它的值来获得对应的html标签对象，相当于人的身份证具有唯一性。
name：控件的名字，一个控件是否设置它的 name属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name属性。相当于人的姓名，可以重名。name 属性规定 input 元素的名称，多与后台开发代码交互使用，所取名称为输入的文本框的名字。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

单选按钮怎么写 type="radio"

性别<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女<br>

若男女两栏的name值不同，则会变成多选，因此，使用单选按钮时，应保证name值相同。

用户名<input type="text" placeholder="请输入用户名" value="中北大学">  //value值被自动填入文本框中

value：控件中携带的值。
在这里插入图片描述

性别<input checked type="radio" name="gender">男
<input type="radio" name="gender">女

在type前加上checked，男被默认选中
在这里插入图片描述

下拉选择怎么写

籍贯<select> <!--下拉选择 -->
<option>山西大同</option>
<option selected>山西临汾</option>
</select><br>

option后面加上selected，则该标签被默认选中
在这里插入图片描述

复选框怎么写 type="checkbox"

爱好<input  checked name="intrest" type="checkbox">旅游    <!--复选框，可多选，可不选-->
<input name="intrest" type="checkbox">游泳  <br>

name前加checked，同理旅游为默认选项
在这里插入图片描述

文本域怎么写

<textarea rows=" ",cols=" ">
</textarea>

文件上传怎么写 type="file"
提交按钮怎么写 type="submit" value="注册"
重置按钮怎么写 type="reset" value="清空重填"
如何跳转网页 <form action="receive.html">
action指的是表单数据发给谁，此处是发给了receive.html，method指的是发送方式为post；以下是个空的表单，里面没有内容

<form action="receive.html" method="post">

普通按钮，按下去没反应

<button>点我</button>

<input type="button" value="普通按钮">

提醒

不要背代码！！！通过多写来保持永久记忆
学编程的最佳方式：多写！！！
理解的基础上进行记忆，理解的越多，死记的越少
每日提交在根目录下

课后任务

12306的注册页面
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>中国铁路12306账号注册</title>
	</head>
	<body>
		<form action=" ">
			用户名<input type="text" placeholder="用户名设置成功后不可修改">6-30位字母、数字或”_“,字母开头
			<br>
			登录密码<input type="password" placeholder="6-20位字母、数字或符号">
			<br>
			确认密码<input type="password" placeholder="再次输入您的登录密码">
			<br>
			证件类型<select>
				<option>中国居民身份证</option>
				<option>港澳居民来往内地通行证</option>
				<option>台湾居民来往大陆通行证</option>
				<option>护照</option>
			</select>
			<br>
			<input type="radio" name="license type">中国居民身份证<br>
			<input type="radio" name="license type">外国人永久居留身份证<br>
			<input type="radio" name="license type">港澳台居民居住证<br>
		        姓名<input type="text" placeholder="请输入姓名">姓名填写规则（用于身份核验，请正确填写）<br>
		        证件号码<input type="text" placeholder="请输入您的证件号码">（用于身份核验，请正确填写）<br>
		        邮箱<input type="text" placeholder="请正确填写邮箱地址"><br>
		        手机号（+86）:<input type="text" placeholder="请输入您的手机号码">请正确填写手机号码，稍后将向该手机号发送验证码<br>
		   	旅客类型<select>
		    	<option>成人</option>
		    	<option>儿童</option>
		    	<option>学生</option>
		    	<option>残疾军人、伤残人民警察</option>
		    </select>
		    <br>
		    <input type="radio" name="typedef">我已阅读并同意遵守 《中国铁路客户服务中心网站服务条款》 《隐私权政策》
		    <input type="submit" value="下一步">
		</form>>
	</body>
</html>

poggioxay

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML知识点学习（一）

Lesson1-周一（7.12）问题总结html代码较复杂，需要多敲有耐心代码还是需要多敲来加强记忆项目开发流程一、Markdown学习Markdown是用于写软件文档，有自己的语法，且浏览器能够识别markdown代码一般用于写专业软件文档、github或者gitee上写文档、日常做笔记写总结二、HTML介绍什么是HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。目前最新版本：HTML5，简称
复制链接

扫一扫