HTML基础标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 头部，页面背景上的设置 --> 5 <meta charset="utf-8"> 6 <!-- meta元标签 --> 7 <!-- charset编码格式 --> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <title>Hello,world</title> 10 </head> 11 <body> 12 <div>无实意标签</div> 13 <p>段落</p> 14 <span>无实意标签</span> 15 <img src="https://www.wahaotu.com/uploads/allimg/202009/1601466985405594.jpg"> 16 <ul type="circle"><!-- 无序列表 --> 17 18 <li>aaa</li> 19 <li>bbb</li> 20 <li>ccc</li> 21 </ul> 22 <ol type="I"> 23 <li>aaa</li> 24 <li>bbb</li> 25 <li>ccc</li> 26 27 </ol> 28 <input type="text" name=""> 29 <input type="number" name=""> 30 <input type="password" name=""> 31 性别: 32 <!-- 单选框 --><input type="radio" name="gender">男 33 <input type="radio" name="gender">女<br> 34 <!-- 复选框 --> 35 <input type="checkbox" name=""> 36 <!-- a 标签是超级链接 --><a href="https://www.baidu.com"> 百度一下</a> 37 38 <h1>1级标签</h1> 39 <h2>2级标签</h2> 40 <h3>3级标签</h3> 41 <h4>4级标签</h4> 42 <h5>5级标签</h5> 43 <h6>6级标签</h6> 44 </body> 45 </html>
css基础
css层叠样式表 特点:1.继承性 2. 层叠性(可被覆盖)
行内样式表，极差，不允许使用
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title></title>
7
8 <link rel="stylesheet" type="text/css" href="css/main.css">
9 <!-- 外部样式表/链入样式表 -->
10 <style type="text/css">
11 /* 头部样式表*/
12 ul{
13 background: lightgreen;
14 }
15 li{
16 color: blue;
17 }
18 div{
19 background: lightgreen;
20 }
21 </style>
22 </head>
23 <body>
24 <div style="width:100px; height: 100px; background: lightblue;"> </div>
25 <ul>
26
27 <li class="xiaoHong">aaaaaa</li>
28
29 <li>bbbbbb</li>
30 <li id="xiaoMing">cccccc</li>
31 <li class="xiaoHong">dddddd</li>
32
33 <li>eeeeee</li>
34 </ul>
35 </body>
36 </html>
css代码
/*class类名选择器*/ /*css优先级*/ /*1.后来者居上，越往后越说了算 2.行内样式优先级>头部样式>=外部样式 3.越精确越说了算id>class>标签 4.!important优先级最最高，但是不到迫不得已不要用 5.*/
li{
color: red;
}
/*标签选择器*/
#xiaoMing{
color:pink;
}
/*id选择器 ，id唯一且不重复。*/
.xiaoHong{
color: lightblue ;
}
命名法
驼峰命名法
xiaoMing小驼峰命名法 XiaoMing大驼峰命名法
下划线命名法 xiao_ming
xiao-ming
表现与结构分离
表现:css
结构:html
css常用属性
width:宽度；
height: 高度；
background：背景(是一个复合属性)
background-color
background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width: 500px;
height: 500px;
/*background-color: lightblue;*/
background: url(https://ts1.cn.mm.bing.net/th?id=OIP-C.5OQ1UC4qRDudD0FFKPcB9QHaEB&w=169&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2) no-repeat;
color: red;
font-size: 20px;
font-weight: 700px;
text-indent: 40px;
/*chrome默认字体16px,最小支持字体12px,*/
/*background-repeat: no-repeat;*/
/*background-repeat-x: no-repeat;*/
}
#div2{
width: 300px;
height: 50px;
background: lightblue;
text-align: center;
line-height: 50px;
/*单行垂直居中*/
}
</style>
</head>
<body>
<div id="div1">
窗前明月光，举头望明月，低头思故乡，
窗前明月光，举头望明月，低头思故乡，
窗前明月光，举头望明月，低头思故乡
窗前明月光，举头望明月，低头思故乡
</div> <div id="div2"> 滕王高阁临江渚 </div> </body> </html>