1.表单标签和input标签
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单标签：form
作为一个容器，来收集和提交这个标签中的其他相关标签的数据，一般不会单独使用
action：提交路径
method：设置请求（post/get）
-->
<!--
2.input标签
可以单独使用，也可以和form配合使用
type属性“：这个值不一样，input的功能jiubuyiyang
-->
<form action="" method="get">
<!--文本输入框（type:text）密码输入框（type:password）
type - text(铭文输入框)
type - password(密文输入框)
name - 随便命名，用来对输入狂的内容说明
提交数据的时候以name:value形式提交，name会作为发送请求的参数值，value是参数值
value - 文本框之中内容
placeholder - 占位符
maxlength - 限制输入框能输入的最大的字符个数
-->
<input type="text" name="username" value="张三" placecholder="用户名"/>
<input type="text" name="tel" value="565656565656" placecholder="密码"/>
<input maxlength="16" type="password" name="asd77" id="asd77" value="" placeholder="密码"/>
<!--
单选按钮
type:radio
name:注意 ：同一类信息的name要设置成一致，才能做到选一个其他取消选中
value:需要设置值，来告诉选中的按钮对应的值
checked:设置默认选中按钮
-->
<input type="radio" name="sex" value="boy" checked="checked" />男
<input type="radio" name="sex" value="girl" />女
<input type="submit" name="" value="提交" />
<br />
<!--
复选按钮
type:checbox
name:同一类型的数据，应设置为一样
value:需要设置值，来告诉别人选中按钮的对应值
-->
<input type="checkbox" name="hobby" id="" value="" checked="checked" />篮球
<input type="checkbox" name="hobby" id="" value="" />足球
<input type="checkbox" name="hobby" id="" value="" />乒乓球
<!--
普通按钮
type:buttton
value:设置按钮显示文字
-->
<input type="button" name="" id="" value="点我" />
<button>点我</button>
<button><img src="img/" alt="" /></button>
<input type="reset" name="" id="" value="重置" />
</form>
<form action="" method="post">
<input type="color" name="color" id="color" value="" />
<!--<input type="date" name="date" id="date" value="" />-->
<input type="datetime-local" name="" id="" value="" />
<input type="email" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="submit" value=""/>
</form>
</body>
</html>
2.下拉菜单和多行文本
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<!--
下拉菜单：select
name - 提交的时候用来区分不同的数据
value - 提交的时候用
内容 - 显示的部分
selected - 设置默认选中
-->
<select name="city">
<option value="成都" selected="selected">成都</option>
<option value="重庆">重庆</option>
</select>
<!--对下拉列表进行分组-->
<select name="">
<optgroup label="四川省"></optgroup>
<option value="">成都</option>
<option value="">雅安</option>
<option value="">绵阳</option>
<optgroup label="河南省"></optgroup>
<option value="">郑州</option>
<option value="">绵阳</option>
</select>
<!--多行文本域:textarea
输入的内容可以多行显示
rows - 设置一屏最多能显示的行数
cols - 设置一行最多能显示的列数
内容 - 相当于value
-->
<textarea name="" rows="10" cols="20" placeholder="意见..." maxlength="200"></textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
3.div和span
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span标签都是无语义标签，一般用来对网页中的标签进行分组和分块用的
一个div占一行；多个span可以在一行显示
-->
<div id="">
aaa
</div>
<div id="">
bbb
</div>
<span id="">
aaaaaaa
</span>
<span id="">
bbbbbbb
</span>
</body>
</html>
4.css基础
1.什么是css
css就是web标准中的表现标准,专门用来对网页中的标签进行布局和设置样式的一门语言,
目前使用的是css3,又叫样式表
常用的css属性
color - 设置字体颜色
background-color - 设置背景颜色
width - 宽度
height - 高度
css基本语法
选择器{属性1:属性值1; 属性2:属性值2;...}
{} - 固定写法
属性 - 必须是css提供的属性,总共200多个
属性值 - 如果属性的值是用来表示大小数字,后面必须加单位.例如:px,em
css中的颜色值:第一种是英文单词
第二种是:#6位16进制值
第三种是:rgb(r,g,b),rgba(r,g,b,alpha) alpha - 透明度(0-1)
属性和属性值之间用:隔开,多个属性之间 用;隔开
说明:
选择器 - 用来选中需要设置样式的标签
2.怎么使用css
内联样式:将样式表写在标签的style属性中 - 只对当前的标签有效
内部样式:将样式表写在head中style标签 - 只对当前html文件中标签有效
外部样式:将样式表写在外部的css文件中,然后在head中通过link导入 - 对所有html有效
内联样式的优先级最高,内部样式和外部样式谁后写,谁的优先级最高
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--link标签
link标签 - 导入外部文件
rel属性 - 说明导入的文件的功能，stylesheet(添加样式表), icon(设置网页图标)
type属性 - 对导入的文件类型进行说明: 文件类型/文件后缀
href属性 - 导入的文件地址
-->
<!--设置网页图标-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
<!--内部样式-->
<style type="text/css">
/*这儿写的代码是CSS代码*/
p{
/*设置文字颜色*/
color: green;
}
h1{
/*设置背景颜色*/
background-color: sandybrown;
/*设置字体大小*/
font-size: 20px;
}
</style>
<!--导入一个外部样式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基础.css"/>
</head>
<body>
<a href="https://baidu.com">百度一下</a>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
<p>我是一个段落2</p>
<!--内联样式-->
<div id="" style="height: 100px; background-color: red;">
</div>
</body>
</html>
css代码
a{
color: slateblue;
background-color: silver;
}
p{
color: saddlebrown;
}
div{
background-color: green;
}
5.css选择器
选择器{属性1: 属性值1;....}
选择器 - 选中需要添加样式的标签
常用的选择器：元素选择器、id选择器、class选择器、群组选择器、父子选择器、统配符
1.元素选择器: 将标签名作为选择器，选中指定的标签。
用法：标签名{}
2.id选择器: 将标签中的id属性的值作为选择器，选择id值对应的标签
用法：#id值{}
3.class选择器:将标签中的class属性的值作为选择器，选中class值对应的标签
用法：.class值{}
4.群组选择器: 多个选择器用逗号隔开作为一个选择器，同时选中所有选择器对应的标签
a,p{} -- 选中所有的a标签和p标签
.p1, img{} -- 选中所有的img和class值是p1的标签
#p2,#p3,p{} -- 选中所有id值是p2和p3的标签，以及所有的p标签
5.父子选择器：多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层选择器对应的标签
div div p{} -- 选中div里面的div里面的p标签
#d1 a -- 选中id值是d1的标签中的a标签
6.通配符: 将*作为选择器，选中当前网页中所有的标签
*{}
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
/*元素选择器*/
p{
color: darkcyan;
}
/*id选择器
* 选中id值是p3的所有的标签
*/
#p3{
background-color: silver;
}
/*class选择器
* 选中class值是p2的所有标签
*/
.p2{
background-color: yellow;
}
/*群组选择器*/
.p2, #p3{
color: red;
}
/*父子选择器*/
div div a{
font-size: 50px;
}
*{
color: black;
}
</style>
</head>
<body>
<div id="">
<div id="">
<a id="p3" href="https://www.baidu.com">百度一下3</a>
</div>
<p>我是段落1</p>
<p>我是段落11</p>
<a id="p3" href="https://www.baidu.com">百度一下2</a>
</div>
<div id="">
<p class="p2">我是段落2</p>
<p id="p3">我是段落3</p>
<p>我是段落4</p>
</div>
<a id="p3" href="https://www.baidu.com">百度一下1</a>
</body>
</html>
6.伪类选择器
1.伪类选择器
伪类选择器是选中某个标签的不同的状态。可以给不同状态设置不同的样式
a.link
标签:link{} - 选中初始状态 (a标签的初始状态指的是a对应的网址一次都没有访问成功的时候对应的状态)
例如：a:link{}; p:link{}; #a1:link{} .a2:link, #a1:link{}
b.visited: 访问后的状态
c.hover: 鼠标悬停在标签上对应的状态
d.active: 鼠标按住不放对应的状态
注意：使用伪类选择器的时候要遵守爱恨原则（LoVeHAte）,如果不遵守可能会导致某些状态的样式无效
2.选择器的优先级: 权重值越大，优先级越高。如果权重值相同，后写的优先级高
元素选择器权重: 0001 - 1
class选择器权重: 0010 - 2
id选择器权重：0100 - 4
伪类选择器权重：0001 - 1
群组选择器权重：单独看每个选择器的权重
父子选择器权重：所有选择器权重之和
内联样式的优先级是最高的
代码示例
网友评论