HTML
2022-08-09 本文已影响0人
薛落花随泪绽放
一.基本结构
注释
ctrl + / 注释
注释：是代码的解释文本，被注释的内容 或者 代码程序不会执行
注释的作用：
1、为了让他人或者自己阅读代码更加方便，便于更好的理解代码
2、将代码注释，代码不会执行，可以方便的删除、还原代码
3、可以初学者的笔记使用
ctrl + z 撤销
ctrl + y 反撤销
通过查看百度首页源代码，可以知道一个页面是由一些标签组成的
标签是成对出现的
<html></html> 是一对标签
<html> 是开始标签
</html> 是结束标签：结束标签多了一个 /
也有一些标签不是成对的：<img> <br> <hr> <input>
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
版本标记：说明当前文档采用的标准是html5的标准
html标签是页面的根标签
tab 向后缩进4个空格
shift+tab 向前缩进4个空格
缩进：是为了保持代码结构，整体保持美观，提升阅读体验
二.样式表
CSS 层叠样式表：改变HTML文档样式的计算机语言
层叠：样式的优先级，当样式属性产生冲突的时候，以优先级高的为准
内联样式
内联样式，也叫行内样式
<div style="color: blue; font-size: 40px;">你好 世界</div>
image.png
外联样式
link标签引入外部文件
rel: 说明引入的文件类型， stylesheet 样式表
href: 资源路径
| <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Document</title> |
| | <link rel="stylesheet" href="[a.css](a.css)"> |
| | </head> |
| | <body> |
| | <div>你好 世界！</div> |
| | </body> |
| | </html> |
/* css文件 */
/* 样式表 */
div{
color: orange;
font-size: 60px;
}
image.png
三.基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS选择器：通过选择器可以找到页面上的标签，来设置标签的样式 */
/* 1、标签：找到页面上名字为div的所有标签 */
div{
color: blue;
}
/* 2、空格 包含关系：找到div内部所有的span标签 */
div span{
color: purple;
}
/* 3、> 父子关系：找到div的直接子元素，中间不能其他任何元素 */
div>span{
color: orange;
}
/* 4、类名：通过类名找到标签：用法：在类名前加 . */
.color-red{
color: red;
}
.font30{
font-size: 30px;
}
/* 5、id：通过id找到标签，在id名前加 # */
#p1{
color: mediumspringgreen;
}
.p1{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<!-- span 标签 用来显示文字内容 -->
<!-- p设置显示段落内容 -->
<div>
Hello world!
<span>HELLO</span>
</div>
<!-- class 给标签设置类名：类名就像是标签的别名，
1、一个标签可以有多个类名，类名之间用空格隔开
2、在同一个文档中，不同的标签，类名可以重复 -->
<!-- 类名的重复：作用在于在一个页面中把多个不同标签相同的样式写在同一个类名中，方便在整个页面使用 -->
<div class="color-red font30">
你好 世界！
<p>
<span>
你好！
</span>
</p>
</div>
<span class="color-red">你好</span>
<!-- id：给标签设置id，id就像身份证号，在同一个页面中是唯一的 -->
<p id="p1" class="p1">段落</p>
</body>
</html>
image.png
四.定宽居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="金西振">
<title></title>
<style>
body{
/* body有默认外边距 */
/* 设置外边距为0 */
margin: 0;
}
/* 定宽居中：1、设置固定的宽度，2、设置左右外边距为auto */
.container{
width: 890px;
/* 两个值：分别表示 上下 左右外边距 */
margin: 0 auto;
/* 设置标签的宽度 */
/* width: 100px; */
/* 设置标签的高度 */
/* height: 100px; */
}
.box{
/* 设置背景颜色 */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container box">
你好
</div>
</body>
</html>
image.png
