HTML语法总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
z-index:1;
}
/*.greybk {*/
/* background-color:rgba(0,0,0,0.5);*/
/* position:fixed;*/
/* top:0;*/
/* left:0;*/
/* right:0;*/
/* bottom:0;*/
/* z-index:2;*/
/*}*/
.index{
width:200px;
height:200px;
opacity:50%;
color:green;
background-color:white;
/*content:"asdfghjkl";*/
position:relative;
z-index:99;
}
.e1 a{
color:white;
text-decoration:none;
}
.posfix{
position:fixed;
top:150px;
left:50px;
width:200px;
height:150px;
color:orange;
border:2px solid indigo;
background-color:khaki;
line-height:75px;
text-align:center;
opacity:50%;
}
.posabso{
position:absolute;
top:50px;
left:250px;
width:200px;
height:150px;
color:green;
background-color:lightcoral;
border:2px dotted red;
opacity:30%
}
.posrela{
position:relative;
top:20px;
left:20px;
width:200px;
height:150px;
border:2px solid blue;
background-color:pink;
opacity:30%
}
.overf{
font-family: "Arial Black", arial-black, cursive;
overflow:auto;
/*overflow:hidden;*/
/*overflow:scroll*/
/*overflow:visible*/
width:250px;
height:150px;
}
.header-img{
width:200px;
height:100px;
background-color:blanchedalmond;
}
.header-img>img{
width:100%; /*让img标签按照外层div标签的宽度来显示*/
border-radius:50%;
}
.d1{
width:300px;
height:100px;
border:2px solid greenyellow;
padding-top:10px; /*上边距*/
padding-left:5px; /*左边距*/
background-color:green;
}
.d2{
/*margin-top:100px;*/
/*margin-left:50px;*/
margin:100px 5px 6px 3px; /*上右下左*/
border:2px dotted blue;
width:300px;
height:200px;
padding-top:10px;
padding-left:5px;
}
.d3{
width:200px;
height:150px;
float:left;
background-color:gray;
/*clear:both;*/
}
.d4{
width:200px;
height:150px;
float:right;
background-color:lemonchiffon;
clear:left;
}
.cc{
margin-top:100px;
margin-left:100px;
}
.c1{
margin-bottom:100px;
width:200px;
height:150px;
border:2px solid darkslategrey;
}
.c2{
margin-top:100px;
width:200px;
height:150px;
border:2px solid cyan;
margin-left:100px;
}
div:first-letter{
color:green;
font-size:36px;
}
div:before{
content:"%";
color:pink;
}
p:after{
content:'嘿嘿';
color:darkgoldenrod;
}
/*伪元素选择器*/
p:first-letter{ /*p标签第一个字装饰*/
font-size:24px;
color:red;
}
p:before{
content:"$";
color:blue;
}
a:link{ /*未访问过的超链接*/
color:#ff0000;
}
a:visited{ /*已经访问过的超链接*/
color:green;
}
a:hover{ /*鼠标按着时显示黄色*/
color:yellow;
}
/**{ !*通用选择器*!*/
/* color:rgb(0,0,0);*/
/*}*/
#dazhuang {
color: rgb(255, 0, 0);
}
#xiaoli {
color: rgb(0, 255, 255);
}
.both { /*优先级 < * */
color: rgb(0, 255, 0);
}
dl {
background-color: rgba(164, 154, 52, 0.3);
color: red;
}
div > p { /*儿子选择器：选择所有父级是<div>元素的<p>元素*/
font-family: "Arial Black", arial-black, cursive;
color: green;
}
div + p { /*毗邻选择器：选择所有紧挨着div元素之后的p元素*/
margin: 5px;
color: blue;
}
/*div p{!*后代选择器：找到div标签后代里面所有的p标签 优先级 > div>p*!*/
/* color:yellow;*/
/*}*/
div ~ p { /*弟弟选择器：找到的是同级的后面的所有兄弟标签 优先级 > div p > div>p */
color: chocolate;
}
div[title$='hello'] { /*找到所有title以hello结尾的元素*/
background-color: sienna;
color: blue;
}
div[title*='hello'] { /*找到所有title属性中含有hello元素*/
background-color: sienna;
color: blue;
}
div[title~='hello'] { /*有多个值用空格分开，其中一个值为hello*/
background-color: sienna;
color: blue;
}
div[title^='hello'] { /*以hello为开头*/
background-color: sienna;
color: blue;
}
div[type=text] { /*type优先级高于title*/
background-color: red;
}
</style>
</head>
<body>
<script>
alert('你满18岁了没有?')
</script>
<div class="greybk"></div>
<a name="top"></a>
<div class="index">这是一个有z-index的div标签</div>
<div class="e1"><a href="https://www.mi.com/index.html">none的超链接</a></div>
<div class="posfix">
我是固定位置fixed的div标签
</div>
<div class="posabso">
我是绝对定位absolute的div
</div>
<div class="posrela">
我是相对位置relative的div
</div>
<div class="header-img">
<img src="2.jpg" alt="加载中" title="动漫少女" width="200" height="200">
</div>
<a href="#top">回到顶部</a>
<p class="overf">display block是什么意思？怎么用？-css教程-PHP中文网
https://www.php.cn/css-tutorial-412196.html
2019-11-23 · css中display属性的详解 这篇文章中
我们已经说过了display:block属性的意思了，简单的
来说就是设置display:block就是将元素显示为块级元素
。. 看完了display:block的意思后，如果你还是不太了解</p>
<div class="d3">d3-float-one</div>
<div class="d4">d4-float-two</div>
<div class="cc">
<div class="c1">c1</div>
<div class="c2">c2</div>
</div>
<div class="d1">这是一个含有border的div标签</div>
<div class="d2">这是一个含有margin的div标签</div>
<div title="helloooohello" type="text">
含有title标签的div
<br>
hhh
</div>
<p title="">含有title的p标签</p>
<div class="both">
账号<input type="text" name="title">
<br>
<span id="title">我是div下id为title的span</span><br>
<a href="https://www.bilibili.com/video/BV1wA411T7At" id="title">我是id为title的超链接</a>
<span><p>我是div下span下的p标签</p></span>
<div id="xiangyang">台词
<p>我是div下div下的p标签一号</p>
<p>我是div下div下的p标签二号</p>
</div>
<div id="dazhuang">他好</div>
<div id="xiaoli">我也好！</div>
<span id="dazhuang">大家都好</span>
<a href="https://www.bilibili.com/video/BV1wA411T7At" id="dazhaung">我是dazhuang的超链接</a>
<p>我是div下的p标签一号</p>
<p>我是div下的p标签二号</p>
</div>
<p>我是p标签一号</p>
<p>我是p标签二号</p>
<p>我是p标签三号</p>
<img alt="检测到你的老婆在附近，已自动屏蔽此图" height="200" src="2.jpg" title="动漫少女" width="200">
<a href="https://zwfw.mps.gov.cn/" target="_balnk">查看高清图片</a>
<textarea cols="30" disabled id="memo" name="name" rows="10">
评论
</textarea>
<a href="#top">回到顶部</a>
<form accept-charset="UTF-8" action="http://127.0.0.1:8001" name="oneself" target="_self">
<select id="" multiple name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广东</option>
</select>
<br>
<label for="username">
账号：<input name="username" readonly type="text" value="123">
</label>
<label for="username">
密码：<input name="password" type="password">
</label>
<br>
<input name="sex" readonly type="radio" value="1">男
<input checked="checked" name="sex" type="radio" value="2">女
<input name="hobby" type="checkbox" value="1">喝酒
<input checked name="hobby" type="checkbox" value="2">吃肉
<input name="hobby" type="checkbox" value="3">打豆豆
<br>
<input name="date" type="date">日期
<span>    </span>
<button>提交</button>
</form>
<a href="#top">回到顶部</a>
<table border="10" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小猫</td>
<td>female</td>
<td>玩小老鼠</td>
</tr>
<tr>
<td>2</td>
<td>小老鼠</td>
<td>male</td>
<td>玩小狗</td>
</tr>
<tr>
<td>3</td>
<td>小狗</td>
<td>male</td>
<td>玩小猫</td>
</tr>
</tbody>
</table>
<dl>
<dt>菜单1</dt>
<dd>水煮龙虾</dd>
<dt>菜单2</dt>
<dd>爆炒鱼丸</dd>
</dl>
<span>hello哥来了</span>
</body>
</html>
此上为html的总结，学习虽苦终得甘，愿我们一起加油
浙公网安备 33010602011771号