Java教程
2022-8-22第一组孙乃宇
本文主要是介绍2022-8-22第一组孙乃宇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
HTML和CSS
什么是HTML
-
HTML是用来描述网页的一种语言
-
HTML叫做超文本标记语言 (Hyper Test MarkerUp Language)
-
HTML不是编程语言，而是一种标记语言
-
标记语言就是一套标记标签
-
HTML使用标记标签来描述网页
网页由谁来解析的？
浏览器
IE
firefox火狐 flash
safari webkit 苹果
chrome webkit blink 谷歌（推荐）业界的标杆
Opera 手机端
UC,360,QQ,搜狗，遨游，百度，2345
HTMl标记标签通常称为HTML tag
HTML标签由成对出现的尖括号包围的关键词，比如<body>
HTML标签通常是成对出现的，有例外，比如<b></b>
标签对中第一个标签是开始标签，第二标签是结束标签
结束标签是由/结束的
开始个结束标签也被称为开放标签和闭合标签
什么是网页
HTML文档描述的就是网页
HTML文档包含HTML的标签和纯文本
HTMl文档就被称为网页
web浏览器的作用就是读取HTML文档，并以网页的形式显示出他们
浏览器不会显示HTML标签，而是使用HTML标签来解释页面的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <base href="http://www.baidu.com" target="_blank"> <title>我是title</title> </head> HTML头部 head元素包含了所有的头部信息元素。 script，link，以及各种meta，title，base title：定义了浏览器工具栏的标题 当网页被收藏夹收藏，显示的标题，默认标题 显示在搜索引擎结构页面的标题 base：描述了基本的连接地址或者是连接目录，作为HTML文档中所有的标签的默认地址 <br> <a href="">哈哈 </a> <hr> link:引用css层叠样式表 style:定义css层叠样式表 <hr> script：既可以定义script脚本，也可以引用script文件 不建议写在head里，写在body的下方 <hr> meta:元数据 指定网页的描述，关键词，文件的最后修改时间，作者。 可以定义搜索引擎的关键词 </body> </html>
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- action:数据的提交后台地址 method:数据的提交地址 get:默认值，会把所有要提交的数据拼接在地址栏 post:封装一个请求体，把数据提交给后台，不会拼接在地址栏 readonly和disabled区别: readonly可以提交到后台的 disabled是不可以提交到后台的 --> <form action="aaa" method="post"> <p>账号：<input type="text" name="username" value="admin" disabled></p> <p>密码：<input type="text" name="password" value=""></p> <p>性别<input type="radio" value="男" name="gender">男 <input type="radio"name="gender" value="女" checked>女 </p> <p>地址： <select name="sheng" id=""> <option value="请选择省">请选择省</option> <option value="吉林省">吉林省</option> <option value="北京市">北京市</option> </select> <select name="shi" id=""> <option value="请选择省">请选择省</option> <option value="吉林省">吉林省</option> <option value="北京市">北京市</option> </select> <select name="qu" id=""> <option value="请选择省">请选择省</option> <option value="吉林省">吉林省</option> <option value="北京市">北京市</option> </select> </p> <p> 爱好 <input type="checkbox" name="hobby" value="read" checked>读书 <input type="checkbox" name="hobby" value="swim">游泳 <input type="checkbox" name="hobby" value="run">跑步 </p> <p> <textarea name="text" id="" cols="30" rows="10"> </textarea> </p> <p> <input type="submit" value="提交"> <input type="reset" value="登录"> <input type="button"value="自定义按钮"> </p> <p> <button type="button"> 注册</button> <button type="submit">重写</button> <button type="reset">自定义</button> <!-- 如果由from，我们就用input 没有from，用button --> </p> <p> <input type="email"> </p> </form> </body> </html>
CSS
什么是css？
css层叠样式表
定义如何显示HTML元素--样式
样式通常存储在样式表中
把样式表添加在HTM中，内容与表现分离
样式和结构分离
外部样式表可以极大的提高工作效率
外部样式表通常存储在css文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 什么是css？ css层叠样式表 定义如何显示HTML元素--样式 样式通常存储在样式表中 把样式表添加在HTM中，内容与表现分离 样式和结构分离 外部样式表可以极大的提高工作效率 外部样式表通常存储在css文件中 --> <p style="">我是p标签</p> <span style="">我是span标签</span> </body> </html>
css选择器
CSS选择器
选择你想要的元素
1.类选择器 class="div" 调用时 用.div
2.标签选择器，每个标签元素的id是唯一不能重复的 id=div 调用时用#div调用
3.标签选择器 p
4.通配符全部选择器 用*{}
页面初始化
5.and选择器 h1,div
6.后代选择器
div p 代表的就是div里面所有的p标签
在使用类选择器选择css样式时，可以选择多个，
中间用空格隔开即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 */
.fontStyle {
color: red;
font-size: 20px;
}
.backgroudStyle {
background-color: yellow;
}
/* id选择器，每个标签元素的id是唯一不能重复 */
#fontStyle2 {
color: blue;
font-size: 30px;
}
/* 标签选择器 */
p {
font-family: "仿宋";
}
/* 通配符，全部选择器
页面初始化
*/
* {
margin:0;
padding: 0;
}
/* 组合选择器 */
h1,div {
font-size: 50px;
}
/* 后代选择器 */
div p {
background-color: red;
}
/* 子选择器 */
div>p {
color: blueviolet;
}
/* 紧跟着div的p元素 */
div + p{
background-color: pink;
}
/* 属性选择器 */
input[name]{
height: 100px;
font-size: 50px;
}
input[name=username] {
color: red;
}
</style>
</head>
<body>
<input type="text" name="username">
<input type="password" name="password">
<!--
CSS选择器
选择你想要的元素
-->
<!-- 在使用类选择器选择css样式时，可以选择多个，中间用空格隔开即可 -->
<p class="fontStyle backgroudStyle">我爱你中国！</p>
<p id="fontStyle2">我爱你长春！！！</p>
<h1>我是h1标签</h1>
<div>我是div标签</div>
<div>
我是div
<p>我是div里的p</p>
<span>
<p>我是div里的span里的p</p>
</span>
</div>
<p>我是div后面的p</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 初始状态 */
a:link {
color: red;
}
/* 鼠标悬停 */
a:hover {
color: green;
}
/* 激活状态 */
a:active{
color: black;
}
/* 访问过的 */
a:visited {
color: yellow;
}
/* 获得焦点 */
input:focus {
height: 100px;
font-size: 50px;
}
</style>
</head>
<body>
<a href="2">超级链接</a>
<input type="text">
</body>
</html>
这篇关于2022-8-22第一组孙乃宇的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
[开源]10.3K+ Star！轻量强大的开源运维平台，超赞！11-22
-
Flutter基础教程：新手入门指南11-21
-
Flutter跨平台教程：新手入门详解11-21
-
Flutter跨平台教程：新手入门与实践指南11-21
-
Flutter列表组件教程：初学者指南11-21
-
Flutter列表组件教程：新手入门指南11-21
-
Flutter入门教程：初学者必看指南11-21
-
Flutter入门教程：从零开始的Flutter开发指南11-21
-
Flutter升级教程：新手必读的升级指南11-21
-
Flutter升级教程：轻松掌握Flutter版本更新11-21
-
Flutter适配教程：轻松掌握屏幕适配技巧11-21
-
Flutter数据存储教程：入门级详解与实战11-21
-
Flutter数据存储教程：轻松入门数据存储11-21
-
Flutter网络编程教程：新手入门必读11-21
-
Flutter网络编程教程：新手入门指南11-21
栏目导航
