html语法基础
h1#idid${itme$}*3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="猫">
<meta name="description" content="炫耀猫">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
<div>
<p>asdasd</p>
<p>asdasdad </p>
</div>
<p>
<strong>bao</strong> 我的猫咪脾气暴
</p>
<em>12</em>
<p>12</p>
<div>12</div>
<div><img alt="神秘博士第十二季:新年特辑" src="/zb_users/upload/2019/01/20190102215050_22304.jpg"></div>
<img src="/mmsource/images/2013/12/26/3e522bf5401d491cb66734236ebf2533.jpg">
<p>as<br>djk</p>
<p class="maomi">mybadcat</p>
<p id="maomi2">my</p>
<a href="https://blog.csdn.net/datou0529/article/details/80822604">1212</a>
<br>
<a href="http://www.qq.com">qqs</a> -->
<!-- biaoti -->
<h1>yi</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<!-- duan luo -->
<p>duanluo</p>
<!-- liebiao -->
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<!-- you xu lie biao -->
<ol>
<!-- li{asdad $}*6 -->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>asd 1</li>
<li>asd 2</li>
<li>asd 3</li>
<li>asd 4</li>
<li>asd 5</li>
<li>asd 6</li>
</ol>
<a href="https://www.baidu.com/s?tn=80035161_2_dg&wd=html+ui%E5%BA%93" target="_blank">qq</a>
<img src="3942de5374363d1.j1pg" alt="加载失败" title="121212">
<strong>strong</strong>
<br>
<em>em</em>
<!-- 表格 -->
<table border="1">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<table border="2">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<table border="3">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<table border="4">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<table border="5">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<table border="6">
<tr>
<td>11 11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<input type="text" name="" id="">
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<span>span</span>
<span>span2</span>
<br>
<span>
<div>12</div>
</span>
<span><div>34</div></span>
</body>
</html>
css语法基础
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 优先级:就近原则 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS基础</title>
<!-- 在head里写 内部样式 -->
<style>
p {
font-weight: bold;
font-style: italic;
color: blue;
font-size: 56px;
}
</style>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="csstest.css">
</head>
<body>
<h1>h1</h1>
<p><strong>
ppp</strong></p>
<p>
<b>
<font color="red" size="56">12</font>
</b>
</p>
<!-- css:层叠样式表 -->
<!-- 内联样式 -->
<p style="color: brown;">
duanluo2
</p>
<!-- id选择器 -->
<p id="qwe">asdad</p>
<ul id="ul1">
<li id="qw1">item 1</li>
<li id="qw2" class="leitest">item 2</li>
<li id="qw3" class="leitest">item 3</li>
</ul>
<div id="div1">
div1123
</div>
<div id="div2">
div2
</div>
<p id="ppp">
段落
</p>
<!-- 字体 -->
<div id="div12">
wenbenasdasd
</div>
<!-- 边框 -->
<div id="qwe23">
wqwqw
</div>
<ul id="ul12">
<li id="li1">item1</li>
<li id="li2">item2</li>
<li id="li3">item3</li>
</ul>
</body>
</html>
css
p{
font-style: italic;
}
#qwe{
font-size: large;
}
.leitest{
background-color: aqua;
}
#div1{
width: 220px;
height: 100px;
background-color: aquamarine;
text-align: center;
line-height: 50px;
}#div2{
width: 2200px;
height: 100px;
background-image: url(3942de5374363d1.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y:center;
}
#ppp{
width: 200px;
height: 100px;
background: #803232;
text-indent: 20px;
}
#div12
{
font-size: 48px;
font-style: italic;
font-weight: bold;
}
#qwe23
{
font-size: 48px;
font-style: italic;
font-weight: bold;
background-color: #fff;
border:1px solid cadetblue;
}
#ul12{
list-style: lower-alpha;
}
css盒模型
html
<!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="cssboxer.css">
<style>
#div1{
background-color: aquamarine;
}
/* #divasd{
} */
</style>
</head>
<body>
<div id="div1">545454</div>
<div id="div2">2 3 3 </div>
<div id="div3">656as234d5</div>
</body>
</html>
css
#div1{
background: crimson;
border: 5px solid black;
padding: 10px;
}
#div2{
background: blue;
margin: 20px;
}
#div3{
width: 200px;
height: 200px;
background: brown;
border:blue 5px solid;
padding: 5px;
}
css定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css定位</title>
<style>
/* div,h1,p{
width: 200px;
height: 100px;
background: aquamarine;
display: inline-block;/*inline-block可以*/
/*}*/
/* 块级元素垂直分布,可以设置宽高 行级元素不可以设计宽高 */
/* a,span{
width: 200px;
height: 100px;
/* display: block; */
/* background: blue;
} */
#a {
background: blue;
}
#b {
background: chartreuse;
/* 相对定位 相对于初始位置 初始空间不释放
position: relative;
left: 50px;
top: 50px; */
/* 绝对定位 相对于最近的已定位的父元素 偏移 ,body本身视为已定位*/
position: absolute;
left: 50px;
top: 50px;
/* 固定定位(fixed) */
/* 固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。 */
/* 固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需使用margin、border、padding。 */
}
#c {
background: crimson;
}
div{
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 块元素 -->
<!-- <div id="div1">div</div>
<h1>h1</h1>
<p>p</p> -->
<!-- 行元素 -->
<!-- <a href="">lianjie</a>
<span>span</span> -->
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div></div>
</body>
</html>
css浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css fudong</title>
<style>
/* div{
width: 600px;
height: 200px;
/* display: inline-block; */
/* display这样会出现空 */
/* float: left; */
/* } */
/* #a{
background: crimson;
/* float: right; */
/* } */
/* #b{
background: darkblue;
}
#c{
background: darkgreen;
} */
#menu{
list-style: none;
}
#menu li{
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<!-- <div id="a">a</div> -->
<!-- <div id="b">b</div> -->
<!-- <div id="c">c</div> -->
<ul id="menu">
<li id="li1">
<a href="" id="12">item1</a></li>
<li id="li2">item2</li>
<li id="li3">item3</li>
<li id="li4">item4</li>
</ul>
</body>
</html>