02.01_HTML的常用标签
- 表单标签
- 作用
标签类型
-
form–父标签
- 作用
- 获取用户输入数据，提交到服务器
- 属性
- action
- 目标服务器地址
- method
- 提交表单的方式：get/post
- action
- 作用
-
input
- 作用
- 属性
- type
- text
- password
- radio
- checkbox
- checked
- file
- reset
- submit
- button
- color
- range
- hidden
- name
- value
- checked
- placeholder
- type
-
select–option
- 作用
- 下拉选项
- 显示的内容
- 属性
- name
- 本组select的名字
- value
- selected
- 默认被选中
- name
- 作用
-
textarea
- 输入文本
- name
- placeholder
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post">
用户名:<input type="text" name="username" placeholder="请输入用户名"/>
<br />
密码:<input type="password" name="password" placeholder="请输入密码"/>
<br />
手机号码:<input type="text" name="phoneNum"/>
<br />
验证码:<input type="text" name="checkCode"/>
<br />
男<input type="radio" name="sex" value="man" checked="checked"/>
女<input type="radio" name="sex" value="woman"/>
<br />
出生日期:<select name="birth_year">
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988" selected="selected">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
</select>年
<select name="birth_month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>月
<select name="birth_day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>日
<br />
头像:<input type="file" name="headshow"/>
<br />
抽烟:<input type="checkbox" name="hobby" id="hobby" value="smoke" checked="checked"/>
喝酒:<input type="checkbox" name="hobby" id="hobby" value="drink"/>
烫头:<input type="checkbox" name="hobby" id="hobby" value="makehair"/>
<br />
喜欢的颜色:<input type="color" name="color"/>
<br />
年龄:<input type="range" name="range" max="100" min="0" value="50" />
<br />
邮箱:<input type="email" name="mail"/>
<br />
<input type="hidden" name="err" value="邮箱错误" />
<br />
搜索:<input type="search" name="search" placeholder="请输入关键字"/>
<br />
<input type="submit" name="submit" id="submit" value="注册" />
<input type="reset" name="reset" value="重置"/>
<br />
自我描述:
<br />
<textarea name="desc" rows="5" cols="30" placeholder="请简单描述自己"></textarea>
</form>
</body>
</html>
- button
- onclick
- 响应用户点击
- 调用方法
- style
- width
- height
- 。。。 。。。
- onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function show(){
for (var i = 10;i<100;i--) {
alert("hahaha")
}
}
</script>
</head>
<body>
<button name="login" onclick="show()" style="width: 200px;height: 100px;border-radius: 50px;">click</button>
</body>
</html>
-
get VS post
- 提交数据：
- get明文提交
- post加密提交
- 数据长度
- get方式提交数据长度有限制
- post方式提交数据长度无限制
- 传输速度
- get速度相对较快
- post相对较慢
- 安全性
- post提交方式相对安全
- 应用场景
- 普通的请求：不涉及数据安全的–可以使用get请求
- 传输密码的敏感数据的时候需要使用post方式
- 有时候需要配合其他解码技术传输数据
- 提交数据：
-
无意标签
- 针对 HTML5 中的那些有明确表示文档结构含义的标签
-
frameset
- 不能放在body内，也不能放在body外----不能喝body同时出现
- 这是一个容器，可以吧html放进来，实现多个页面同时显示
- 属性
- cols
- rows
- 子标签
- frame
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<frameset cols="2,3,5">
<frame src="01.input-text.html"/>
<frame src="02.创建表单.html" />
<frame src="03.form_register.html" />
</frameset>-->
<!--<frameset rows="2,3,5">
<frame src="01.input-text.html"/>
<frame src="02.创建表单.html" />
<frame src="03.form_register.html" />
</frameset>-->
<frameset rows="80%,20%">
<frame src="03.form_register.html" />
<frameset cols="7, 3">
<frame src="01.input-text.html" />
<frame src="02.创建表单.html" />
</frameset>
</frameset>
</html>
02.02_CSS的核心基础
-
CSS：Cascading style sheets 层叠样式表
- 定义
- 是一种用来表现HTML或XML等文件样式的计算机语言
- 作用
- 修饰html标签
- 层叠
- 可以再多个位置对同一个标签进行修饰，作用可以叠加
- 定义
-
标签内修饰 VS 样式表
-
语法规则：
- css三要素：对象–属性–值
- 语法：
- obj{name:value;}
- 注释编写方式和html代码不同： /* 要注释的内容 */
- 代码位置
- 标签内部
- 头部
- 单独的外部文件
02.03_选择器
- 标签名称选择器
- 使用标签名称当做对象名
- p{
- size: 18px;
- color: red;
- … …
- 属性：值
- }
- 使用标签名称当做对象名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
height: 30px;
background-color: cornsilk;
size: a3;
width: 200px;
/*text-align: center;*/
}
</style>
</head>
<body>
<!--
作者：offline
时间：2019-01-08
描述：
<h2>江雪</h2>
<p style="size: a3;width: 200px; text-align: center;">千山鸟飞绝，</p>
<p style="size: a3;width: 200px; text-align: center;">万径人踪灭。</p>
<p style="background-color: burlywood;size: a3;width: 200px; text-align: center;">孤舟蓑笠翁，</p>
<p style="background-color: burlywood;size: a3;width: 200px; text-align: center;">独钓寒江雪。</p>-->
<h2>江雪</h2>
<p>千山鸟飞绝，</p>
<p>万径人踪灭。</p>
<p>孤舟蓑笠翁，</p>
<p>独钓寒江雪。</p>
</body>
</html>
- 类选择器
- 在标签内部定义class=“类名”，类名可以出现多次，表示同一类元素
- 修饰时使用-- .类名–在头部–style标签中调用
- .author{
- size: 18px;
- color: red;
- … …
- 属性：值
- }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: burlywood;
font-size: 18px;
width: 300px;
height: 30px;
}
.author{
background: none;
font-size: 12px;
padding-left: 120px;
}
</style>
</head>
<body>
<!--
画鸡
【作者】唐寅 【朝代】明 译文对照
头上红冠不用裁，满身雪白走将来。
平生不敢轻言语，一叫千门万户开。
-->
<h2>画鸡</h2>
<p class="author">作者】唐寅 【朝代】明 </p>
<p>头上红冠不用裁，</p>
<p>满身雪白走将来。</p>
<p>平生不敢轻言语，</p>
<p>一叫千门万户开。</p>
</body>
</html>
- ID选择器
- 在标签内部定义:id=“p_author”,id名尽量不要重复
- 修饰时使用-- #id名–在头部–style标签中调用
- ID选择器 VS 类选择器
- 定义的方式不同
- 调用的方式不同
- class可以重复表示一类元素
- id尽量不要重复，保证唯一性，js常用getElementById(id名称)查找元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: burlywood;
font-size: 18px;
width: 300px;
height: 30px;
}
#p_author{
background: none;
font-size: 12px;
padding-left: 120px;
}
</style>
</head>
<body>
<!--
渭城曲 / 送元二使安西
【作者】王维 【朝代】唐 译文对照
渭城朝雨浥轻尘，客舍青青柳色新。
劝君更尽一杯酒，西出阳关无故人。
-->
<h2>送元二使安西</h2>
<p id="p_author">【作者】王维 【朝代】唐</p>
<p>渭城朝雨浥轻尘，</p>
<p>客舍青青柳色新。</p>
<p>劝君更尽一杯酒，</p>
<p>西出阳关无故人。</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
