Unit01 HTML
HTML 必备知识
项目开发必备知识
一、HTML的历史
- HTML 超文本标记语言,HyperText Maeked Language
- HTML 是一个国际标准,由W3C(免费的公益组织)组织负责
二、HTML网页结构
1.专业术语
-
标记、标签、元素:HTML是一种网页的语言,由一系列的标签语言组成
-
属性:标记可以有属性
1.1 form 表单元素 及相关属性的应用
method 与action配合使用 网页跳转时 选择如何传输 get 与 post两种(推荐post)
select 选择标签
陕西
textarea 文本框文本区域 (标签)
row 宽度(属性)
cols 长度(属性)
br 换行(标签)
placeholder 一个属性 在文本框预输入 (属性)
checkbox 复选框(属性)
action 跳转的地方(属性)
placeholder 文本框内文本预输入
checked 为默认选项 在多个选项或选择情况下 默认显示为该选项
value 在浏览器内显示 让浏览器观看的东西type下的相关函数(已编好的功能) password 密码属性(属性)输入的密码会改变为“....” radio 单选(属性)单选的名字相同时 两个同类型选项相互排斥 submit 提交功能 reset 重置信息功能
1.2 常用标签及属性
$("# “).val() salary = $(”#sal").val();取得文本框用户输入的值
$("# ").html() 取得网页上的该id的内容返回给html();
2. HTML网页文件的拓展名是什么?
. .html或者.htm
3. HTML 不区分大小写
<!--
作者:yangkai
时间:2020-05-23
描述:第一个网页
-->
<!-- 文档类型定义,定义网页的根元素HTML 这是固定的 -->
<!DOCTYPE html>
<html>
<head>
<!-- charset 指定网页上文字的编码是UTF-8,否则容易发生汉字乱码-->
<meta charset="UTF-8">
<title>这是网页标题,会在浏览器标签上显示</title>
</head>
<body>
<!-- 这是网页的主体,内容会显示在网页上-->
</body>
</html>
三、TODO 做一个网页,显示汉字:同学们好!
有浏览器执行,浏览器有哪些? chrom、Firefox、opera、Safair、IE(Edge);
在官网免费下载,做浏览器兼容性测试
- 不同浏览器上,显示效果可能不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TODO 在网页上显示同学们好</title>
</head>
<body>
同学们好!祝大家成功!
</body>
</html>
四、TODO 制作一个注册网页
<!--
作者:yangkai
时间:2020-05-23
描述:TODO 开发注册的网页
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<!--
form 表单元素 <form></form>
method 与action配合使用 网页跳转时 选择如何传输 get 与 post两种(推荐post)
select 选择标签
<select>
<option>陕西<option>
</select>
textarea 文本框文本区域 (标签)
br 换行(标签)
placeholder 一个属性 在文本框预输入 (属性)
checkbox 复选框(属性)
action 跳转的地方(属性)
placeholder 文本框内文本预输入
checked 为默认选项 在多个选项或选择情况下 默认显示为该选项
value 在浏览器内显示 让浏览器观看的东西
type下的相关函数(已编好的功能)
password 密码属性(属性)输入的密码会改变为“....”
radio 单选(属性)单选的名字相同时 两个同类型选项相互排斥
submit 提交功能
reset 重置信息功能
-->
<form action="hello.html" method="get">
用户名<input placeholder="请输入用户名" type="text" name="username" id="username" /><br />
密码<input placeholder="请输入密码" type="password" name="upsw" id="userpsw" /><br />
确认密码<input type="password" name="upsw1" id="userpsw1" /><br />
性别<input type="radio" name="gender" value="male" >男
<input type="radio" checked="" name="gender" value="femal">女
<br />
籍贯<select>
<option>山西</option>
<option>山东</option>
<option>广东</option>
<option selected>黑龙江</option>
</select>
<br />
爱好<input type="checkbox" name="love" value="football" />足球
<input type="checkbox" checked name="love" value="travel" />旅游
<input type="checkbox" name="love" value="sleep" />睡觉
<br />
自我介绍
<textarea cols="30" rows="5">
</textarea>
<br />
<input type="submit" value="注册" />
<input type="reset" value="重制" />
<br />
</form>
</body>
</html>
五、面试题:
- 单选按钮名字不一样会有影响吗?
名字不一样时,可以进行多选。则名字不一样时错误。 - 准确口述(现场面试)
2.1 单选按钮名字不同是什么效果?
名字不同时,单选按钮可以进行并列选择(同类型情况多选)
常用的标签有 radio(单选) checkbox(复选)以及select 内含option的(选择)。
2.2 表单的post和get有什么区别?(超级面试题)
一、指代不同- get:从指定的资源请求数据
- post: 向指定的资源提交要处理的数据
二、安全性不同 - get:GET的安全性较差,因为所发送的数据时URL的一部分。
- post:POST比GET更安全,因为参数不会被保存在浏览器历史或web服务器日志中。POST请求不会被缓存,请求不会保留在浏览器历史记录中,POST不能被收藏为书签,请求对数据长度没有要求。
三、数据限制不同 - get:当发送数据时,GET方法向URL添加数据;URL的长度是受限制的(URL的最大长度是2048个字符)
- post:无限制。
服务器日志中。POST请求不会被缓存,请求不会保留在浏览器历史记录中,POST不能被收藏为书签,请求对数据长度没有要求。
三、数据限制不同 - get:当发送数据时,GET方法向URL添加数据;URL的长度是受限制的(URL的最大长度是2048个字符)
- post:无限制。