本文详细介绍了HTML中常用的表单标签及其属性，如输入框、密码框、单选和多选框等，以及如何使用CSS控制网页样式，包括选择器、层叠样式表的核心基础和与HTML的结合方式。
一、html中常用标签
11.表单标签
作用：可以提交不同的数据到指定的服务器
:表示表单的范围【父标签】 表单标签：包含服务器地址，数据提交的方式【get/post】
表单域：用于采集用户信息
表单按钮：一般按钮，提交按钮，重置【复位】按钮
属性：
action：提交到位置【服务器】
method：提交采用的方式
enctype:很少用，做文件上传的时候会使用这个属性【设置编码格式】
:输入项【子标签】，可以输入内容或者进行选择
属性：type
text:普通输入框
password:密码
radio:单选输入框
a.添加name属性
b.每个单选项的name属性的值需要保持一致
c.实现默认选中：checked=“checked”
d.value，选中之后所代表的值
checkbox:多选输入框
a.添加name属性
b.每个单选项的name属性的值需要保持一致
c.实现默认选中：checked=“checked”
d.value，选中之后所代表的值
file:文件【图片，zip文件等】
hidden:隐藏域【代码中存在，但是在浏览器中不显示】
email:邮箱【会检测邮箱的格式是否正确】
color:颜色【会实现颜色的选择】
date：日期【提供一个万年历，可以实现日期的选择】
button：普通按钮
submit：提交按钮
reset；重置按钮
:表示下拉输入项【菜单】【子标签】
:是select中的选择项【select标签的子标签】
a.name；名称
b.value:值
c.默认选中：selected = “selected”
:文本域【例如：自我介绍等】 【子标签】
cols:列
rows:行
http://127.0.0.1:8020/Day2Code/1.表单标签的使用一.html?sex=on&hobby=on&hobby=on&hobby=on&birth=1993
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <!--注意：不会自动换行--> <!--普通输入框--> 手机号码：<input type="text" name="phoneNum" /><br /> <!--密码输入项--> 创建密码：<input type="password" name="password"/><br /> 姓 名：<input type="text" name="username" /><br /> <!--单项输入框--> <!--name：为了标记是同一类数据--> 性 别：<input type="radio" name="sex" value="nan" />男 <input type="radio" name="sex" value="nv" />女 <br /> <!--多项选择框--> 爱 好：<input type="checkbox" name="hobby" value="l"/>篮球 <input type="checkbox" name="hobby" value="p" />排球 <input type="checkbox" name="hobby" value="b" />棒球 <input type="checkbox" name="hobby" value="bb"/>保龄球 <br /> <!--文件选择框--> 上传头像：<input type="file" /><br /> <!--下拉选择框--> 出生年月：<select name="birth"> <!--value="1990"为了让服务器识别的，后面的1990是为了显示在浏览中的--> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select> <br /> <!--文本域：输入多行内容，cols和rows的作用主要是为了设置文本域的大小--> 自我介绍：<textarea cols="10" rows="4" name="des"></textarea><br /> <!--注册按钮：将上面所有的数据提交到指定服务器--> <!--按钮上的文本默认为提交，可以通过value设置--> <input type="submit" value="注册" /> <!--重置按钮--> <!--按钮上的文本默认为重置，可以通过value设置--> <!--注意和清空的区别：将整个表单恢复到最初的样式--> <input type="reset" /><br /> <!--作为了解--> <!--邮箱--> 邮箱：<input type="email" name="email" /><br /> <!--隐藏域--> <input type="hidden" /> <!--颜色--> 颜色：<input type="color" name="color"/><br /> <!--日期--> 日期：<input type="date" name="date" /> <!--进度条--> <!--value表示开始的位置，默认在中间--> <input type="range" min="0" max="100" name="range" value="10"/> </form> </body> </html>问题一：提交的数据提交到什么地方？
回答：提交到action所表示的服务器中问题二：提交方式采用post和get有什么区别【面试题】
回答：
a.get提交之后所有的数据会暴露在网址中，post不会携带任何数据【携带在请求体中，AJAX】
b.get相对而言是不安全的，post是安全的
c.get请求效率相对较高，post较低
d.get请求对数据的大小有限制，post没有
12.框架标签【了解】
比较少用
注意：使用框架标签的时候，不能写在body标签中，也不能写在外面，使用了框架标签之后，需要将body删除
作用：将一个页面划分为不同的区域，每个区域可以显示一个完整的网页
：划分【父标签】 rows:按照行进行划分
cols:按照列进行划分
:具体显示的网页【子标签】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--列分 <frameset cols="20%,50%,30%"> <frame src="1.表单标签的使用一.html"/> <frame src="1.表单标签的使用一.html"/> <frame src="1.表单标签的使用一.html"/> </frameset> --> <!--行分 <frameset rows="20%,50%,30%"> <frame src="1.表单标签的使用一.html"/> <frame src="1.表单标签的使用一.html"/> <frame src="1.表单标签的使用一.html"/> </frameset>--> <!--混合分--> <frameset rows="20%,*"> <frame src="1.表单标签的使用一.html"/> <frameset cols="40%,*"> <frame src="1.表单标签的使用一.html"/> <frame src="1.表单标签的使用一.html"/> </frameset> </frameset> </html>
二、css简介
全称为Cascading Style Sheet,层叠样式表
作用：控制网页样式，可以将网页样式和标签分离，便于后期维护，提高了代码的可读性【结合html标签进行使用，给标签添加样式】
层叠：使用不同的方式给同一个html标签添加不同的样式，最后将所有的样式层叠到一起，作用与指定的标签
传统的html实现结构和表现的双重任务的缺点:
a.维护困难【为了修改某类标签需要花费大量的时间】
b.标签不足【比如：文字缩进，文字间距等】
c.网页过“胖”
d.定位困难
三、css的核心基础
1.css的语法规则
举例：
需求：描述一个人的特征，列出一张表
张飞{
身高：183cm;
体重：100kg;
性格：闷骚;
民族：汉族；
}
组成：姓名，属性，属性值
使用上述的方式描述一个网页
标题{
字体：宋体；
字号：15像素；
颜色：红色；
装饰：下划线；
}
转换：
h2{
font-family:宋体；
font-size:15px;
color:red;
text-decoration:underline;
}
css的思想:对谁设置，对其中的哪个属性设置，需要设置成什么样的值
css的语法规则：对象，属性和值
注意：在css中，指定了对哪些元素进行设置，称为css的选择器，选择器是css语法的核心
css的语法：
选择器{
属性1：值1；
属性2：值2；
。。。。；
}
2.css的选择器【重点】
2.1标签名称选择器
语法：
标签名称{
}
缺点：可以将一个页面中所有的指定标签设置为同样的样式，在实际应用中是不存在的
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ /*选择器的名称其实就是一个html标签*/ h2{ color: red; } p{ font-size: 10px; } div{ background-color: red; width: 100px; height: 100px; } </style> </head> <body> <!--<h2> <font color="red">标题</font> </h2> <p> <font size="5">段落</font> </p> <h2> <font color="red">标题</font> </h2> <p> <font size="5">段落</font> </p> <h2> <font color="red">标题</font> </h2> <p> <font size="5">段落</font> </p>--> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <div> </div> </body> </html>
2.2类选择器
设置一个页面中特殊的显示
语法：
.类名{
}
说明：类名:自定义，一般采用单词全小写【结合html标签中的属性class】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ /*p{ color: cyan; }*/ /*类选择器*/ .red{ color: red; } .green{ color: green; } .cyan{ color: cyan; } .big{ font-size: 20px; } </style> </head> <body> <!--必须结合class属性进行使用，所有的标签都有一个class属性--> <p class="red">何以解忧？</p> <p class="green">唯有暴富</p> <p class="cyan">做梦去吧</p> <!--同一个类选择器可以应用于多个标签--> <div class="red">213424125</div> <!--在同一个标签中可以同时使用多个类选择器，不同的类选择器之间使用空格隔开--> <!--好处：在实际网站制作中可以减少代码量--> <p class="green big">hello</p> </body> </html>
标签名称选择器和类选择器的综合使用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ p{ font-size: 20px; color: darkgray; } /*；类选择器*/ .special{ color: red; font-size: 15px; } </style> </head> <body> <!--需求：显示一首古诗，除了作者之外，其他的诗句显示一样--> <p>静夜思</p> <p class="special">作者：李白</p> <p>床前明月光</p> <p>床前明月光</p> <p>床前明月光</p> <p>床前明月光</p> </body> </html>
2.3ID选择器
ID选择器和类选择器的使用基本使用，唯一不同的是：结合id属性
语法： #id名称{ } 说明：id名称和类名是相同的，也是自定义，并且一般采用单词全小写代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*ID选择器*/ /*设置文字字体加粗*/ #bold{ font-weight: bold; } #color{ color: red; } </style> </head> <body> <p id="color">轻轻地我来了</p> <p>正如轻轻地我走了</p> <p id="bold">我挥一挥衣袖</p> <p>不带走一片云彩</p> <!-- 同一个id选择器可以同时作用于多个标签，但是不建议这样使用， 在js中，有一个函数document.getElementById("bold"), 可以通过id获取对应的元素对象，每次只能获取一个对象 建议：每个id值尽量对应一个标签 --> <!--不建议使用：错误写法--> <!--<p id="bold">这是一首现代诗</p>--> <!--错误写法：在同一个标签中不能同时使用多个id选择器--> <!--<p id="bold color">252353</p>--> </body> </html>
2.4属性选择器
作用：根据某个标签的指定的属性进行匹配
语法：
选择器[属性名]{
}
选择器[属性名=“属性值”]{
}
注意：一般情况下，此处的属性使用name
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*属性选择器*/ /*此处出现的属性：任何属性都可以*/ p[class]{ color: red; } p[name]{ color: yellow; } /*具体到了某个标签*/ p[name="b"]{ color: cyan; } </style> </head> <body> <p class="a">aaaaaa</p> <p name="b">bbbbbbbb</p> <p name="c">bbbbbbbb</p> </body> </html>
2.5包含选择器
前提：父子标签，先辈后辈标签
语法：
a.查找直接子标签
父标签选择器>子标签选择器{
}
说明：必须是严格意义上的父子标签
b.查找直接子标签或者后辈标签
先辈标签选择器 后辈标签选择器{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含选择器*/ /*直接父子关系*/ /*通过父标签查找子标签*/ /*div>p{ color: red; }*/ /*直接父子标签或者先辈后辈标签*/ div p{ color: red; } #span>p{ } /*注意：在包含选择器中，不管使用>还是空格，前面的选择器可以使用任何选择器*/ </style> </head> <body> <div> <p>第一个段落标签</p> <span id="span"> <p>第三个段落标签</p> </span> </div> <span> <p>第二个段落标签</p> </span> </body> </html>
2.6伪类选择器
其实id选择器，标签名称选择器都可以使用
语法：
选择器；具体的值{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*伪类选择器*/ /*设置鼠标悬浮事件*/ #first:hover{ color: red; } /*作用：可以动态的给一个标签添加内容*/ /*添加头部*/ #first:before{ content: "这是头部"; } /*添加尾部*/ #first:after{ content: "fhafh"; } /*设置第一个字符的样式*/ #first:first-letter{ color: cyan; font-size: 30px; } /*设置第一行字符的样式*/ #first:first-line{ color: cyan; font-size: 30px; } </style> </head> <body> <p id="first">拼搏到无能为力</p> <p>坚持到感动自己</p> </body> </html>
2.7结构选择器
类似于伪类选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*对ul下面的第一个li设置样式*/ /*last-child*/ ul li:first-child{ color: red; } /*掌握*/ /*顺序查找*/ /*对ul下面的某个li设置样式*/ /*注意:子标签的编号从1开始*/ /* * odd:奇数行 * even:偶数行 */ ul li:nth-child(odd){ color: cyan; } /*倒序查找*/ /*ul li:nth-last-child(2){ color: blue; }*/ /*可以设置空标签*/ li:empty{ background-color: green; } /*设置否定标签*/ li:not(#aaa){ font-size: 50px; } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li></li> <li id="aaa">7777</li> </ul> </body> </html>
2.8组合选择器
作用：使用不同的选择器对不同的标签设置相同的样式
语法：
选择器1，选择器2，。。。{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*组合选择器：任何选择器都可以使用，不同选择器之间使用逗号隔开*/ .h1,#p,span{ color: purple; } </style> </head> <body> <h1 class="h1">标题</h1> <p id="p">段落</p> <span>aaaa</span> </body> </html>
3.css和html的结合方式【重点】
3.1行内样式
每个html标签的都有一个style属性，直接通过给html标签设置属性
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p style="background-color: red;font-size: small;">第一个段落</p> </body> </html>
3.2内嵌样式
head标签中使用style标签，在其中书写相应的选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--声明：告诉编译器在style标签中出现的代码即为css代码--> <style type="text/css"> h2{ color: red; } </style> </head> <body> <h2>标题</h2> </body> </html>
3.3链接样式
创建css类型的文件，然后在html文件中使用来进行引用
好处：在不同的html文件中可以同时引用同一个css文件
语法：
说明：type；
css；text/css
js：text/javascript
图片：image/jpg
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--链接样式：可以同时链接多个css文件--> <link href="css/style1.css" type="text/css" rel="stylesheet"/> </head> <body> <h2>标题</h2> <p>段落</p> </body> </html>
3.4导入样式
导入样式和链接样式的功能时一样的，只是语法，运作方式不同
需要使用在style标签中
语法：
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @import url("css/red.css"); /*@import url("css/style1.css");*/ </style> </head> <body> <h2>标题</h2> <p>段落</p> </body> </html>
3.5各种结合方式的优先级
结论一：行内样式，内嵌样式，导入样式三者之间：行内样式优先级最高，导入样式优先级最低【就近原则】
结论二：导入样式和链接样式统称为外部样式，导入样式的优先级高
结论三:如果出现多个style标签的时候，将不再遵循内嵌样式优先级高于导入样式的原则，哪个style标签出现在后面，则适配哪个的样式
结论四：行内样式只对当前标签有效，内嵌样式只对当前的html文件有效，外部样式可以对多个html文件有效
结论五：实际开发中，一般用到其中的一两种，频率最广的是内嵌样式和链接样式
扫一扫
3
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
