html标签和CSS样式
2021/9/3 23:09:06
本文主要是介绍html标签和CSS样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
文章目录
- 一、继续学习html标签
- 1.1表单标签
- 1.2frameset标签
- 二、CSS的三种引入方式
- 2.1行内样式
- 2.2内联样式
- 2.3外联样式
- 三、CSS的选择器
- 3.1标签选择器
- 3.2class选择器
- 总结
一、继续学习html标签
1.1表单标签
登录，注册输入框都是表单标签
form 双边标签 有一个子标签是input标签
input是一个单边标签
form标签和input标签主要是干什么的？
是用来提交数据的，这个通过input输入框给别的页面提交数据的
url：是一个网址，也叫统一资源定位符
一个网址就是一个资源，如www.baidu.com这就是一个资源。是通过这个网址找到百度的页面。下载电影，迅雷下载，给你一个网址。这个网址进行下载这个电影资源
url组成部分：
协议+域名（ip）+端口号+文件+ 参数
http://www.baidu.com:80/index.html?username=goudan&password=123456
参数：是问号后面的东西，这个就是input输入框中向另外一个页面带过去的数据
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单标签</title> </head> <body> <!-- form标签属性 action：提交数据到哪？是一个网址 http://127.0.0.1:8848/code/test.html?username=admin&password=11111 method:提交方式 默认的是get的提交方式 有两种方式：get post get：（开发中查询） 1.不安全，所以不用登录注册，密码是url直接显示了 2.传输效率高，所以才查询 3.通过get请求方式查看你的信息 4.在url和可以看到咱们的参数 5.传输的数据是有限制的，在url中，2kb左右 post：（开发中增删改） 1.假装很安全 2.传输慢 3.数据大小没有限制 4.在地址栏中看不到传输的数据，但是程序员可以看到 method="post" enctype="multipart/form-data" 上传文件所必须的两个重要的属性，为什么要多写，文件是以流的形式传输，平常的信息是字符串 现在文件是流，mutipart多个表单数据 --> <!-- <form action="test.html" method="get"> --> <form action="test.html" method="post" enctype="multipart/form-data"> <!-- input 属性 type：决定了输入框的样式 属性值：很多 text：明文 password：密文 subit 提交按钮 value：值 name：一定要写，如果不写的话，就无法提交数据到另外一个页面 --> 账号：<input type="text" name="username"/><br /> <!-- 密码是用*******来代替的 --> 密码：<input type="password" name="password"/><br /> <!-- 提交按钮 submit --> <!-- 默认是提交这两个字，但是加上value属性后，就可以变成你自定义的按钮 --> <input type="submit" value="登录"/> <!-- 重置按钮 reset 可以恢复到以前没有数据的状态 --> <input type="reset" value="重置" /><br /> <!-- 单选框 radio 加完name属性以后，我们就只能单选 如果不写value的话，就无法判断传给另外一个页面的值是什么 --> 性别：<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女"/>女<br /> <!-- 复选框 checkbox name和value的值也不能少，因为要传输数据到另外一个页面 --> 爱好：<input type="checkbox" name="hobby" value="唱歌"/>唱歌 <input type="checkbox" name="hobby" value="跳舞"/>跳舞 <input type="checkbox" name="hobby" value="rap"/>rap <input type="checkbox" name="hobby" value="打篮球"/>打篮球 <br /> <!-- 日期文本框 date --> <input type="date" name="birthday" /><br /> <input type="datetime" name="datetime" /><br /> <!-- 上传文件框 file 注意事项：上传文件的时候，必须使用post请求 form表单还有一个属性：enctype=:"muiltipart/form-data" 这两个属性都要有 --> <input type="file" name="file" /><br /> <!-- 隐藏文本 hidden 开发中会用 不会在我们的页面上显示，但是可以通过name属性和value属性 带数据到另外一个页面上 --> <input type="hidden" name="hid" value="soga" /><br /> <!-- 下拉列表 两个标签组成的，一个是select标签，另外一个是子标签option name属性必须写 --> <select name="city" size="6"> <option value="0312">郑州</option> <option value="0311">信阳</option> <option value="0345">洛阳</option> <option value="0323">安阳</option> <option value="0324">开封</option> <option value="0325">新乡</option> <option value="0327">驻马店</option> <option value="0328">周口</option> <option value="0329">三门峡</option> </select><br /> <br /> <!-- 文本编辑器 以后会有封装好的 --> 履历：<textarea name="info"> </textarea> </form> </body> </html>
结果如下（示例）：
1.2frameset标签
一个页面再套一个页面
【注意事项】：如果使用了framset就不能使用body标签
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!--一个页面再套一个页面 framset标签 --> <!-- 用了framset就不能使用了body了 --> <!-- framset有两个属性 rows：把一个网页分成上下份 cols：把一个网页分成左右两份 noresize：禁止页面拖动 frame: 子标签 --> <frameset cols="200px, *"> <frame src="http://www.taobao.com" /> <frameset rows="200px, *"> <frame src="test.html"/> <frame src="1表单标签.html" /> </frameset> </frameset> </html>
结果如下（示例）：
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com" target="fsb">百度</a><br /> <a href="http://www.taobao.com" target="fsb">淘宝</a><br / <a href="http://www.sohu.com" target="fsb">搜狐</a><br> <a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>you.html</title> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zuo.html</title> </head> <body> <a href="http://www.baidu.com" target="fsb">百度</a><br /> <a href="http://www.taobao.com" target="fsb">淘宝</a><br / <a href="http://www.sohu.com" target="fsb">搜狐</a><br> <a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a> </body> </html>
结果如下如下（示例）：
二、CSS的三种引入方式
一个网页页面由html，css，javascript组成
html相当于一个简陋的骨架，css相当于对这个股价进行化妆修饰的
css 层叠样式表 cascading style sheets
CSS三种引入方式：①行内样式②内联样式③外联样式
使用CSS的目的：为了修饰标签的，让标签更好看
2.1行内样式
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 行内样式的写法，目的是为了修饰div标签的 学过的每一个标签，都有这个属性叫style style属性值写的是css语法格式 css语法格式： 属性1:属性值1;属性2:属性值2;属性3:属性值3; eg:border：边框大小 子属性 solid：边框颜色 width：宽度 height：高度 background-color：背景颜色 color：字体颜色 --> <div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;"> 一望无际的沙漠里，简直就是一个极度喧嚣的世界，一幕幕优美的画面和热闹的舞台剧总是在轮番 登场，令人心醉神怡。可是，它们的生存，却给人们留下了太多、太深、太久远的启示和忠告。不信? 你看，在沙漠里，有一种植物叫胡杨，它是沙漠地区特有的珍贵森林资源，因其超顽强的生命力，还被 人们赞誉为“长着千年不死，死后千年不倒，倒地千年不腐”的英雄树。为了近观胡杨的独特风范，我 和我的同伴曾走向塔克拉玛干沙漠的深处，在那荒凉的戈壁滩里，映入眼帘的是晶莹剔透的飞沙，迎接 我们的是难忍的饥渴和孤独，以及炽热的煎熬，动物、植被的残骸四处呈现，而胡杨则展现出与天地抗 争的勇气和执着!它们顽强的生命，实在是悲壮又令人惊叹!还有一种叫百岁兰的植物，它一生只生长两 片叶子，但每一片叶子都可以活到百余年甚至上千年的时间;当然，譬如仙人掌、梭梭、红柳树……无不 让人惊奇和赞颂! </div> </body> </html>
结果如下（示例）：
2.2内联样式
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式的写法</title>
<!-- 内联样式的写法是在head标签中，有一个子标签叫style
在style标签中去写CSS样式去修饰标签
-->
<style>
/* 这个是css里面的注释，和html不一样 */
/* 首先找到被修饰的标签，然后写大括号，在大括号里面写css语法格式 */
div{
width: 6.25rem;
height: 6.25rem;
background-color: darkgoldenrod;
}
/* 修饰p标签 */
p{
width: 18.75rem;
height: 18.75rem;
background-color: gold;
}
/* 修饰span标签 */
span{
/* 专门讲一下颜色表示方式
1.html规定好的颜色的英文单词
2.十六进制的表示形式 0-F
R G B
00 00 00 黑色
FF 00 00 红色
00 FF 00 绿色
00 00 ff 蓝色
十六进制组成了好好的颜色
一般用吸色器把颜色吸出来*/
color:#E1251B;
}
</style>
</head>
<body>
<div>
仰天大笑出门去，我辈岂是蓬蒿人
</div>
<p>离开你一百个星期，我回到了这里，寻找我们爱过的证据，
没有人愿意提起，玫瑰花它的过去，今天这里的主题，我把它叫做回忆
</p>
<div>
</div>
<span>
天生我材必有用，千金散尽还复来。
</span>
</body>
</html>
结果如下（示例）：
2.3外联样式
首先在当前html文件所在的文件夹里面创建一个名为test.css的CSS文件
文件内容为：
footer{
width: 12.5rem;
height: 12.5rem;
background-color: tomato;
color: #7FFFD4;
}
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入外部的css文件 在head头里面写一个link标签，目的是为了引入外部的css文件 属性： rel：连接文件的类型 样式表 type：css文件类型 href：外部的css所在路径 --> <link rel="stylesheet" type="text/css" href="./test.css"/> </head> <body> <!-- 外联样式 在文件的外部写一个后缀为css的文件 引入到我们的当前页面中 --> <footer>东风不与周郎便，铜雀春深锁二乔</footer> </body> </html>
结果如下（示例）：
三、CSS的选择器
目的：为了找到这个被修饰的标签的。
如果连标签都找不到，何谈修饰？好比你买了化妆品，要给你女朋友化妆，。突然想到自己没有女朋友。很扎心。首先找到女朋友，对她进行化妆
1.标签选择器
2.class选择器
3.id选择器
4.层级选择器
5.组合选择器
6.通配选择器
7.伪类选择器
3.1标签选择器
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<!-- 内联样式的写法 -->
<!-- 标签选择器，通过标签的名字获取找到标签的 -->
<style>
/* span就是html标签的名字
对span的内容进行修饰
*/
span{
color: red;
}
div{
color: yellow;
}
footer{
color: blue;
}
</style>
</head>
<body>
<span>蓦然回首，那人却在灯火阑珊处</span>
<div>借问酒家何处有，牧童遥指杏花村</div>
<div></div>
<footer>风萧萧兮易水寒，壮士一去兮不复返</footer>
</body>
</html>
结果如下（示例）：
3.2class选择器
每一个标签都有一个class属性
给class起一个属性的名字，咱们可以通过这个=属性值可以找到这个标签
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class选择器
是在标签中写一个class属性
属性值是自己定义的
通过.属性值 在{}中找到当前标签进行修饰
*/
.nb{
color: red;
}
.sb{
color: blue;
}
.qb{
color: #7FFFD4;
}
</style>
</head>
<body>
<!-- 任何一个标签都有class属性
class的属性值可以随便写
class可以写多个值，中间使用空格隔开
例如：
<div class="wwb wabf nb">
<!-- class有三个值：
1.wwb
2.wabf
3.nb
这是我自己定义的三个属性值
-->
<div class="wwb wabf nb">君不见黄河之水天上来，奔流到海不复回</div>
<div class="sb">烹羊宰牛且为乐，会须一饮三百杯</div>
<p class="qb">
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
</p>
</body>
</html>
结果如下（示例）：
总结
提示：这里对文章进行总结：没有想好总结
这篇关于html标签和CSS样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15AntDesign项目实战：新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战：新手指南
- 2024-11-14ESLint课程：初学者指南
- 2024-11-14Form.List 动态表单课程：新手入门教程
- 2024-11-14Redux课程：新手入门完全指南
- 2024-11-13MobX 使用入门教程：轻松掌握前端状态管理
- 2024-11-12前端编程资料：新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料：适合新手与初级用户的简单教程
- 2024-11-12前端入门资料：新手必读指南
