<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单标签：from
表单标签是专门用来做用户信息收集的标签，是一个容器型的标签，单独用没有意义，
一般需要配合表单相关的标签来使用。
主要完成数据提交和重置的功能
表单相关标签：input、textarea、select
action属性 - 数据提交的方法/接口
method属性 - http请求方式（接口类型）
-->
<form action="" method="get">
<!--2.input标签
type属性 - 决定标签的作用
-->
<!--1）text 普通文本输入框
name属性 - 用来分区和提交数据
value属性 - 输入框中的内容
placeholder属性- 占位符（输入提示属性）
maxlength属性 - 限制输入框内容的长度
-->
用户名：<input type="text" name="userName" id="" value="" placeholder="请输入用户名" maxlength="8"/>
<br />
<br />
<input type="text" name="tel" id="" value="" />
<!--2）password - 密码输入框
-->
<br /><br />
密码：<input type="password" name="" placeholder="密码"/>
<!--3）radio - 单选按钮
name属性 - 用来分区和提交数据 （同一组选项name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为checked 对应按钮会被默认选中
-->
<!--让label标签的for属性和表单标签id属性保持一致，可以让label和表单标签关联-->
<input type="radio" name="name" id="1" value="男" checked="checked"/><label for="1">男</label>
<input type="radio" name="name" id="2" value="女" /><label for="2">女</label>
<!--4）checkbox - 复选按钮
-->
<br /><br />
<input type="checkbox" name="" id="3" value="篮球" /><label for="3">篮球</label>
<!--5）button - 普通按钮
value属性 - 按钮上可见的文字
-->
<br /><br />
<input type="button" name="" id="" value="确定" />
<button>确定</button>
<!--6）submit 提交按钮
将当前form中所有设置name属性值的相关的标签以name = value的形式进行提交
-->
<input type="submit" value="提交"/>
<!--7）reset重置按钮
将当前form标签中所有相关标签状态恢复到初始状态
-->
<input type="reset" name="" id="" value="" />
<form/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.多行文本域：textarea
name属性 - 区分和提交数据
rows属性 - 行数，控制输入框的高度
cols属性 - 列数，控制输入框的宽度
-->
<textarea name="" rows="4" cols="100" placeholder="请输入建议..."></textarea>
<!--2.下拉菜单：select-option
select标签 - 整个下拉列表
option标签 - 下拉列表中的选项
selected属性 - 值设置为selected 让指定选项处于默认选中状态
-->
<select name="city">
<option value="成都市">成都</option>
<option value="重庆市">重庆</option>
<option value="贵阳市">贵阳</option>
<option value="北京市">北京</option>
<option value="三和市" selected="selected">三和</option>
</select>
<select name="">
<!--可以通过添加optgroup标签并设置label属性来对同一个下拉菜单中的选项分组-->
<optgroup label="成都市"></optgroup>
<option value="">武侯区</option>
<option value="">成华区</option>
<option value="">金牛区</option>
<option value="">高薪区</option>
<option value="">锦江区</option>
<optgroup label="北京市"></optgroup>
<option value="">海淀区</option>
<option value="">丰台区</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span都是无语义标签，主要是用来对网页的内容进行分块和分组的
div默认是块级标签，显示的时候只能一个占行
span默认是行内标签，现实的时候一行可显示多个
-->
</body>
</html>
<!--
1.什么是css
css又叫层叠样式表，是web标准中的表现标准，主要负责网页中内容的布局和样式
2.写在哪
1）内联样式表 - 将css代码写到标签的style属性中
2) 内部样式表 - 将css代码写到style标签中
3) 外部样式表 - 将css代码写在css文件中，然后通过link标签在html中导入
3.怎么写样式表
1）语法：
选择器{属性1：属性值1；属性2：属性值2...}
2) 说明
选择器 - 选中需要添加样式的标签
{} - 固定写法
注意：如果是内联样式 选择器{}可以省略
属性 - 属性名和属性值用冒号连接，属性和属性之间用分号隔开
学css就是学css中的属性和功能
注意：如果属性值是表示大小的数字，必须加单位：px（像素）em（空格）;
也可以使用百分比（相对父标签的）
3）常用属性
color - 设置文字颜色
background-color - 设置背景颜色
font-size - 字体大小
width - 宽
height - 高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/10-CSS基础.css"/>
<!--内部样式-->
<style type="text/css">
/*这儿代码就是css代码*/
#p1{
color: blueviolet;
}
</style>
</head>
<body>
<!--内联样式-->
<p style="color: red;">我是段落1</p>
<p id="p1">我是段落2</p>
</body>
</html>
<!--
CSS中的选择器就是用来选中标签的
1.元素（标签）选择器
直接将标签名作为选择器，选中当前页面中所有的指定标签
例如：p{} - 选中当前页面中所有的p标签
2.id选择器
将id属性名前加#作为一个选择器，选中的是当前页面中id属性值是指定值的标签
注意：id是唯一
例如：#p1{} - 选中id值是p1的标签
3.class选择器
将class属性前加.作为一个选择器，选中当前页面中所有class值是指定值的标签
注意：同一个class在一个页面中可以有多个；同一个标签可以拥有多个class
例如：.c1{} - 选中class值是c1的标签
4.群组选择器
将多个选择器用逗号隔开作为一个选择器，选中每个选择器选中所有标签。
例如：p,#p1,.c1{} - 选中所有的p标签和id是p1的标签以及所有classc1的标签
5.后代选择器
将多个选择器用空格隔开作为一个选择器，从第一个选择器开始层层往后找，
找到最后一个选择器对应的标签
例如：p #p1{} - 选中p标签中类型是c1的标签
选择器1 选择器2{} - 选中选择器1中的选择器2
注意：2是1的后代就行
6.子代选择器
将多个选择器用>隔开 作为一个选择器
例如：div>p{} - 选中div标中的p标签（p必须是div标签的子标签）
7.通配符
将*作为选择器，选中当前页面中所有的标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=============1.元素选择器示例============-->
<style type="text/css">
p{
color: yellowgreen;
}
</style>
<h1></h1>
<p>我是段落1</p>
<a href="01-head标签.html">head</a>
<p>我是段落2</p>
<!--================2.id选择器============-->
<style type="text/css">
#p2{
font-size: 50px;
color: pink;
}
</style>
<h1>111</h1>
<p>我是段落1</p>
<a href="01-head标签.html">head</a>
<p id="p2">我是段落2</p>
<!--===============3.class标签示例==============-->
<!--<style type="text/css">
.c1{
color: darkkhaki;
font-size: 80px;
}
</style>-->
<h1 class='c1'>8848至尊体验</h1>
<p>我是段落1</p>
<a href="01-head标签.html">head</a>
<p id="p3" class="c1">我是段落2</p>
<a href="" class="c1">我是超链接1</a>
<!--===============4.群组标签示例==============-->
<style type="text/css">
p,.c1{
color: darkkhaki;
}
</style>
<h1 class='c1'>8848至尊体验</h1>
<p>我是段落1</p>
<a href="01-head标签.html">head</a>
<p class="c1">我是段落2</p>
<a href="" class="c1">我是超链接1</a>
</body>
</html>
<!--
1.什么是伪类选择器
普通选择器选中的是一个标签所有的状态，选中后添加的样式对标签的所有状态有效
伪类选择器选中的是一个标签指定的状态
2.语法：
普通选择器：状态{}
1)link - 超链接没有被成功访问的时候对应的状态
2）visited - 链接已经被成功访问过的状态，只有a标签才有
3）hover - 鼠标悬停在标签上的状态，所有标签都可以用
4)active - 鼠标按住标签不放的状态，所有标签可以用
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=====1.link状态========-->
<style type="text/css">
a:link{
color: darkorange;
}
</style>
<a href="https://www.qq.com">QQ</a>
<!--=============hover状态===========-->
<style type="text/css">
#s1:hover{
color: darkgreen;
}
font:active{
color: palegreen;
}
</style>
<span id="s1">
我是span
</span>
<font>我是font</font>
</body>
</html>
<!--
不同选择器的权重不一样，权重越大，优先级越高
元素选择器：0001 == 1
class选择器：0010 == 2
id选择器：0100 ==4
群组选择器：看单独选择器的权重
后代或者子代选择器：各个单独的选择器的和
伪类选择器：0001 ==1
注意：1.如果权重值相同，后写的优先级比先写的高
2.除非特殊说明，内联样式表的优先级最高
3.属性后如果添加了！important，那么这个属性一定会有效
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.c1{
color: red !important;
}
#p1{
color: greenyellow;
}
div #p1{
color: deepskyblue;
}
</style>
<div id="">
<p id="p1" class="c1">
我是段落1
</p>
</div>
</body>
</html>
html基础·input·多行文本·下拉菜单·div·span·css·选择器·伪类·选择器权
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 选择器 1. 元素选择器(标签选择器)：标签名 选中所有的标签名对应的标签例:所有a标签 2.id选择器：#id属...
- a标签伪类选择器 a:link{color: #FF0000}/* 未访问的链接 */a:visited{colo...
