<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.form标签(表单标签)
专门用来进行用户信息收集的一个标签,一般要结合表单相关的标签来使用才有意义。
表单相关的标签:input;select;textarea等
主要提供form中子标签的内容的提交和重置功能
action 属性: 提交的相对路径(接口)
method 属性: 提交的方式(post/get)
-->
<!--form action="" method="post"-->
<!--2.input标签
input标签是表单相关标签,可以在form标签中使用,也可以单独使用
2) type
input标签会英文type的不同,功能完全不一样
3) name
name -- 区分;提交(相当于字典的key)
要不要给这个属性赋值,主要看:1.是否需要区分不同的内容;2.是否需要提交这个input标签的值
4)value
value的意义会根据type值得不同而不一样,但是做表单提交的时候,提交的都是value的值。
-->
<form action="" method="get">
<!--1)可以作为文本输入款 -- text
value属性 --- 给这个属性赋值是在设置输入款的默认值;修改输入框中的内容会改变这个属性的值
placeholder属性 -- 输入款为空的时候的默认显示信息
maxlength 属性 --- 限制输入款最大字符串长度
-->
<font><strong>账号:</strong></font>
<input type="text" name="tel" value="" placeholder="请输入电话号码" maxlength="6"/><br />
<!--input type="submit" value="提交"/-->
<!--2.密码输入款
password
value属性 --- 给这个属性赋值是在设置输入款的默认值;修改输入框中的内容会改变这个属性的值
placeholder属性 -- 输入款为空的时候的默认显示信息
maxlength 属性 --- 限制输入款最大字符串长度
-->
<font>密码:</font>
<input type="password" name="pw" id="" value="123456" placeholder="密码" maxlength="10" /><br />
<!--3.单选按钮
name 属性 --- 如果多个选项是一组数据必须保证他们的name属性值一样,才能做到多个选项单选
value 属性 --- 在radio中 只能用来提交,不会显示,需要提交的话必须输入值
checked 属性 --- 给这个属性赋值为checked让按钮处于默认状态
label的for属性 input的 id属性保持一致,让label和input关联
-->
<font>性别</font>
<input type="radio" name="sex" id="男" value="男" checked="checked"/><label for="男">男</label>
<input type="radio" name="sex" id="女" value="女"/><label for="女">女</label>
<br />
<!--4.复选按钮
checkbox
-->
<font>兴趣:</font>
<input type="checkbox" name="interest" id="in1" value="餐饮" /><label for="in1">餐饮</label>
<input type="checkbox" name="interest" id="in2" value="旅游" /><label for="in2">旅游</label>
<input type="checkbox" name="interest" id="in3" value="游戏" /><label for="in3">游戏</label>
<br />
<!--5.普通按钮
value属性 --- 按钮上显示的内容
补充: button 标签 不是input标签了
-->
<input type="button" name="" id="" value="登录" />
<button>登录</button>
<br />
<button><img src="img/aaa.ico"/></button>
<br />
<input type="submit" value="提交"/>
<!--6.重置按钮 -- reset
重置当前重置按钮所在的form标签中所有相关标签里面
-->
<br />
<input type="reset" name="" id="" value="重置"/>
<!--7.提交按钮 -- submit
以‘name=value’值得方式提交当前form
-->
<input type="color" name="" id="" value="" />
<input type="search" name="" id="" value="" />
<input type="file" name="file" id="" value="" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--下拉菜单
select标签 -- 整个下拉列表
option标签 -- 列表中的选项
optgroup标签 -- 一个列表选项分组,通过label属性值来设置分组名
只是在显示上对选项进行分区,不影响提交值
-->
<form action="" method="get">
<select name="province">
<option value="四川省">四川省</option>
<option value="湖南省">湖南省</option>
<option value="湖北省">湖北省</option>
<option value="福建省">福建省</option>
</select>
<select name="city">
<option value="成都">成都</option>
<option value="内江">内江</option>
<option value="眉山">眉山</option>
<option value="乐山">乐山</option>
</select>
<br />
<select name="city2">
<optgroupl abel="四川省">四川省</optgroup>
<option value="成都">成都</option>
<option value="内江">内江</option>
<option value="眉山">眉山</option>
<option value="乐山">乐山</option>
<optgroup label="广东省"></optgroup>
<option value="广州">广州</option>
<option value="佛山">佛山</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
</select>
<br />
<!--2.多行文本域 -- textarea
提供一个可以换行输入的输入框
name -- 区分;提交(相当于字典的key)
要不要给这个属性赋值,主要看:
1.是否需要区分不同的内容;
2.是否需要提交这个input标签的值
rows -- 行数,用来影响输入框的默认高度
cols -- 列数,用来影响输入框的默认宽度
maxlength -- 输入的最大长度
autofocus -- 值设置为autofocus,页面刷新和加载的时候自动成为焦点
-->
<textarea autofocus="autofocus" name="" rows="10" cols="100" maxlength="10" placeholder="默认值"></textarea>
<br />
<input type="submit" value="提交"/>
<input type="reset" name="重置" id="重置" value="重置" />
</form
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div标签和span标签 都是无语义标签,
使用div一般用于网页中的内容分块和分组
-->
<div id="">
<a href="http://www.baidu.com" target="_blank" ">百度一下</a>
</div>
<div id="">
<a href="http://www.baidu.com">百度一下</a>
</div>
<span id="">
<a href="http://www.baidu.com" target="_blank" ">百度一下</a>
</span>
<span id="">
<a href="http://www.baidu.com">百度一下</a>
</span>
</body>
</html>
<!--
1.什么是css
css又叫样式表(层叠样式表),是web标准中的表现标准,专门用来针对网页中内容的布局和样式
现在最新版本是css3,绝大部分使用的。
2.怎么写样式表
a. 语法
选择器{属性:属性值;属性2:属性值2;属性3:属性值3}
b.说明
选择器 --- 选中需要设计样式的标签;在内联样式表中选择器需要省略
{} --- 固定写法
属性 --- 属性是以“属性:属性值”的形式成对出现,多个属性之间用分号隔开
值 --- 如果是数字表示大小,数字后面必须加单位:px(像素)、em(空格数)
颜色值:颜色的英文单词、#十六进制的颜色值、rgb(r,g,b)、rgba(r,g,b,透明度)
rgb颜色:红绿蓝,范围都是0~255
红色:(255,0,0) == #ff0000 ==red
绿色:(0,255,0) == #00ff00 == green
黑色:(0,0,0) == #000000 == black
白色:(255,255,255) == #ffffff == white
透明度 --- 0(透明)~ 1(完全不透明)
3.写在哪里
内联样式表、内部样式表、外部样式表
1、内联样式表
将样式写在标签的style属性中
只作用于一个固定的标签
2、内部样式
将样式写在style标签中(一般写在head标签里)
作用于当前html文件
3、外部样式表
将样式写在css文件中,然后再html中通过link标签导入
可以作用于所有的html中的所有标签
复用性:外部>内部>内联
优先级: 内联样式表的优先级不管什么时候都是最高的、内部和外部,谁后写谁高(后写的会覆盖之前写的)
4.常见属性
color --- 设置 标签中字体颜色
background-color --- 设置标签的背景颜色
font-size --- 字体大小
width --- 标签宽度
height --- 标签高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
/*这个是css写注释的方式*/
div{color: orange;background-color: aquamarine
}
h1{color: blanchedalmond;background-color: blueviolet}
</style>
<!--3.外部样式表-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
</head>
<body>
<!--内联样式-->
<p style="color: red;font-size: 60px;">hello</p>
<div id="">
我是div
</div>
<h1>
我是h1
</h1>
</body>
</html>
<!--选择器:
1.什么是选择器
通过选择器选中标签
2.选择器的写法
1)元素选择器(标签选择器)
直接将标签名作为选择器 --- 选中当前html页面中所有对应的标签
例如: a{} --- 选中当前html当中所有a标签
2)id选择器
(所有的标签都有一个id属性,值是自己设置,但是要保证一个html中id的值唯一)
将标签的id属性的值 前面加#作为选择器 --- 选中id属性值是指定值得标签
例如:#a --- 选中html中,id值是a的标签
3)类选择器(class选择器)
(一个标签中class属性值可以有多个,每个值之间用空格隔开,且不需要唯一,可以有多个相同值得class属性)
将标签的class属性的值 前面加.作为选择器 --- 选中class属性是指定值的标签
例如: .a --- 选中html当中所有class值是a的标签
4)通配符
直接将*作为选择器 --- 选中当前html中所有的标签(就是全选)
5)群组选择器
将多个单独的选择器用逗号隔开来作为一个选择器 --- 把每个独立的选择器对应的标签全部选中
例如: p,a{} --- 选中所有的p、a标签
div,#a{} --- 选中所有的div标签和id值是a的标签
#p1,.c1,.c2{} --- 选中id值是p1的标签和class值是c1和c2的所有的标签
6)后代选择器
将多个选择器用空格隔开来作为一个选择器
例如:div p{} --- 选中所有div标签中的p标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="">超链接1</a>
<div id="">
<a href="">超链接1</a>
<div id="">
<a href="">超链接1</a>
</div>
</div>
</body>
</html>
<!--
1.伪类选择器
普通选择器选中的是html中不同的标签;伪类选择器选中的是标签中不同状态
2.语法
普通选择器:状态{属性1:属性值;属性2:属性值2;....}
状态:
1.link --- 初始状态,对于a标签来说,link对应的状态是a标签中的链接重来没有成功访问过(一般之在a标签中设置)
2.visited --- 超链接被成功访问过的状态(一般也是作用于a标签)
3.hover --- 鼠标悬停在标签上的状态 (不止针对超链接,标签也常用)
4.active --- 鼠标按住标签不放的时候对应的状态(超链接和按钮用的比较多)
3.选择器的权重值(权重越大优先级越高,但是内联样式表的优先级永远最高)
元素选择器的权重:0001 == 1
伪类选择器的权重:0001 == 1
class选择器的权重: 0010 == 2
id选择器 的权重: 0100 == 4
群组选择器的权重:看单独每个选择器的权重
后代选择器的权重:所有选择器的权重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>