HTML标签2
2019-12-03 本文已影响0人
Dxes
input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--1.表单标签： form
表单标签是专门用来做用户信息收集的标签；是一个容器型的标签，单独用没有意义，一般需要配合表单相关标签来使用。
主要完成数据的提交和重置的功能
表单相关标签：input、textarea、select
action属性 - 数据提交的方法/接口
method属性 - http请求方式（接口类型）
-->
<form action="" method="get">
<!--2.input标签
type属性 - 决定标签的作用
-->
<!--1）text： - 普通的文本输入框
name属性 - 用来区分和提交数据的
value属性 - 就是输入框中的内容
placeholder属性 - 占位符（输入提示信息）
maxlength属性 - 限制输入框内容的长度
-->
<font>用户名：</font><input type="text" name="userName" value="" id="" placeholder="请输入用户名" maxlength="8" />
<br />
<br />
<font>电 话：</font><input type="text" name="tel" value="" id="" placeholder="请输入手机号"/>
<!--2)password - 密码输入框
name属性 - 用来区分和提交数据的
value属性 - 就是输入框中的内容
placeholder属性 - 占位符（输入提示信息）
maxlength属性 - 限制输入框内容的长度
-->
<br />
<br />
<font>密 码：</font><input type="password" name="pw" id="" value="123456" placeholder="密码1-12位" />
<!--3）radio: - 单选按钮
name属性 - 用来区分和提交数据的（注意：同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为checked，对应的按钮默认选中
-->
<br />
<br />
<!--让label标签的for属性和表单标签的id属性保持一致，可以让label和表单标签进行关联-->
<font>性别：</font>  <input type="radio" name="性别" id="1" value="男" checked="checked"/><label for="1">男</label>   
<input type="radio" name="性别" id="2" value="女" /><label for="2">女</label>
<br />
<br />
<!--4）checkbox： - 复选按钮
name属性 - 用来区分和提交数据的（注意：同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为checked，对应的按钮默认选中
-->
<font>兴趣爱好</font> 
<input type="checkbox" name="interest" id="b1" value="篮球" /><label for="b1">篮球</label> 
<input type="checkbox" name="interest" id="b2" value="唱" /><label for="b2">唱</label> 
<input type="checkbox" name="interest" id="b3" value="跳" /><label for="b3">跳</label> 
<input type="checkbox" name="interest" id="b4" value="rap" /><label for="b4">rap</label>
<br />
<br />
<!--5）button： - 普通按钮
value属性 - 按钮上可见的文字
disabled属性 - 设置为disabled，禁用
-->
<input type="button" name="" id="" value="确定" />
<!--button标签，可以将任意类容作为标签-->
<button>确定</button>
<button><img src="img/img/aaa.ico"/></button>
<br />
<br />
<!--submit - 提交按钮
将当前form标签中所有设置name属性值的相关的标签，以name=value的形式对数据进行提交
-->
<input type="submit" name="" id="" value="提交" />
<!--7）reset - 重置按钮
将当前form标签中所有相关标签的状态恢复到初始状态
-->
<input type="reset" name="" id="" value="重置" />
<br />
<input type="color" name="favcolor" id="" value="red" />
<br />
<input type="date" name="bday" id="bday" value="" />
<br />
<input type="file" name="img" id="" value="" />
<br />
<input type="email" name="useremail" id="" value="" placeholder="请输入邮箱"/>
</form>
</body>
</html>
多行文本域和下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本域和下拉菜单</title>
</head>
<body>
<!--1.多行文本域：textarea
name属性 - 区分和提交数据
rows属性 - 控制输入框的高度（宽）
cols属性 - 控制输入框的宽度（列）
placeholder属性 - 占位符（输入提示信息）
maxlength属性 - 最大值
-->
<textarea name="" rows="4" cols="40" placeholder="请输入意见……" maxlength="10"></textarea>
<!--2.下拉菜单：select-option
select标签 - 整个下拉列表
option标签 - 下拉列表中的选项
selected属性 - 值设置为selected，让指定选项处于默认选中状态
-->
<br />
<br />
<select name="city">
<option value="成都">成都市</option>
<option value="南充" selected="selected">南充市</option>
<option value="西宁">西宁市</option>
<option value="重庆">重庆市</option>
<option value="贵阳">贵阳市</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>
<option value="">丰台区</option>
</select>
</body>
</html>
div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span都是无语义标签，主要是用来对网页中的内容进行分块和分组的；
div默认是块级标签，显示的时候只能一个占一行
span默认是行内标签，显示的时候一行可显示多个
-->
</body>
</html>
css基础
<!--
1.什么是css
css又叫成叠样式表，是web标准中的表现标准，主要负责网页中内容的布局和样式
2.写在哪儿
1）内联样式表 - 将css代码写到标签的style属性中
2）内部样式表 - 将css代码写在style标签中
3）外部样式表 - 将css代码写在css文件中；然后在通过link标签在html文件中导入
3.怎么写样式表
1）语法：
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；……}
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/10css文件基础.css"/>
<!--内部样式-->
<style type="text/css">
/*这儿的代码就是css代码*/
#p1{
color: blue;
}
</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的标签以及class是c1的标签
5.后代选择器
将多个选择器用空格隔开作为一个选择器，从第一个选择器开始层层往后找，找到最后一个选择器对应的标签
例如：p #p1 {} - 选中p标签中id是p1的标签
选择器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>我是标题1</h1>
<p>我是段落1</p>
<a href="01.-head标签.html">head</a>
<p>我是段落2</p>-->
<!--============2.class选择器示例============-->
<!--<style type="text/css">
#p1{
font-size: 50px;
color: hotpink;
}
</style>
<h1>我是标题1</h1>
<p>我是段落1</p>
<a href="01.-head标签.html">head</a>
<p id=p1>我是段落2</p>-->
<!--============3.class选择器示例============-->
<!--
<style type="text/css">
.c1{
font-size: 40px;
color:blue;
}
.c2{
background-color: yellow;
}
</style>
<h1 class="c1 c2">我是标题1</h1>
<p class="c2">我是段落1</p>
<a href="01.-head标签.html">head</a>
<img src="img/img/luffy1.png"/>
<p id="p1" class="c1">我是段落2</p>
<input type="tel" name="" id="" value="" />
<a href="" class="c1">我是超链接1</a>-->
<!--============4.群组选择器示例=============-->
<!--<style type="text/css">
p,a{
color: blue;
font-size: 35px;
}
</style>
<h1 class="c1 c2">我是标题1</h1>
<p class="c2">我是段落1</p>
<a href="01.-head标签.html">head</a>
<img src="img/img/luffy1.png"/>
<p id="p1" class="c1">我是段落2</p>
<input type="tel" name="" id="" value="" />
<a href="" class="c1">我是超链接1</a>-->
<!--============5.后代选择器示例=============-->
<!--<style type="text/css">
div p{
color: red;
}
</style>
<p>我是段落1</p>
<div>
<p>我是段落2</p>
</div>
<div id="">
<span id="">
<p>我是段落3</p>
</span>
</div>-->
<!--============6.子代选择器示例=============-->
<!--<style type="text/css">
div>p{
color: red;
}
</style>
<p>我是段落1</p>
<div>
<p>我是段落2</p>
</div>
<div id="">
<span id="">
<p>我是段落3</p>
</span>
</div>
<div id="">
<div id="">
<p>我是段落4</p>
</div>
</div>-->
<!--============7.通配符选择器示例=============-->
<style type="text/css">
*{color: cyan;}
</style>
<h1 class="c1 c2">我是标题1</h1>
<p class="c2">我是段落1</p>
<a href="01.-head标签.html">head</a>
<img src="img/img/luffy1.png"/>
<p id="p1" class="c1">我是段落2</p>
<input type="tel" name="" id="" value="" />
<a href="" class="c1">我是超链接1</a>
</body>
</html>
伪类选择器
<!--
1.什么是伪类选择器
普通选择器选中的是一个标签所有的状态。选中后添加的样式对标签的所有状态有效
伪类选择器选中的是一个标签特定的状态。选中后添加的样式只针对这一个状态有效
2.语法：
普通的选择器：状态{}
1）link - 超链接没有被成功访问的时候对应的状态，只有a标签才有这个状态
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: red;
}
</style>
<a href="https://www.baidu.com">百度</a>
<br />
<!--=======2.visited状态========-->
<style type="text/css">
a:visited{
color: yellow;
}
</style>
<br />
<br />
<!--=======3.hover状态=====-->
<style type="text/css">
#s1:hover{
color: yellowgreen;
}
font:hover{
background-color: yellow;
}
</style>
<span id="s1">
我是span
</span>
<font>我是font</font>
<!--=========4.active状态========-->
<br />
<br />
<style type="text/css">
p:active{
color: peru;
}
img:active{
width: 500x;height: 500px;
}
</style>
<p>我是段落2</p>
<img src="img/img/luffy.jpg"/>
</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;
}
#p1{
color: blue;
}
p{
color: brown;
}
div #p1{
color: yellow;
}
</style>
<div id="">
<p id="p1" class="c1">我是段落1</p>
</div>
</body>
</html>
