* 元素按显示方式分为哪几种, 并举例, 正确描述它们
置换元素：<img><input>
置换元素大多用自闭和标签/空标签来描述，这类元素通常是以行内元素出现
<img src="..."> 以src属性指向引用的外部图片资源
<input type="...">type不同，替换成不同的类型
2.非置换元素：<h1></h1><p></p><span></span><div></div><table></table><ul><li></li><li></li></ul><a href=""></a>
3.块级元素：总是独占一行，两边不允许有其他元素，总是自带换行<div><ul+li><table><p><h1-h6>...
4.行内元素：<span><input><em><strong><a>
一切元素都是框，任何元素都会在页面上占据一定的控件，页面是以框的形式来显示他们，块级框对应的是块级元素，行内框对应的是行内元素，
行内框的宽高，是由它内部内容决定的，块级框的宽高，是由它内部子元素决定的。
一般来说，块级框内，可以嵌套行内框，反过来不可以，但是可以用display改变！
* CSS是什么? 它的主要作用是什么?
层叠样式表，用来设置HTML元素在文档中的布局与现实方式。
将CSS引入到HTML文档中，元素属性：<p style="color:red">php中文网</p>
元素标签：<style>p{ color :red;}</style>
外部资源：<link ref=stylesheet href="style.css">
* 什么是CSS选择器,它的样式声明是哪二部分组成?
选择器：p{}
样式声明：键和值两部分组成
*举例演示CSS简单选择器(全部)
优先级：id>class>tag
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器优先级</title>
<style>
/*元素选择器/标签选择器*/
p{
color: green;
}
/*属性选择器*/
p[class]{
color: lightgray;
}
p[class="red"]{
color: red;
}
p[id="blue"]{
color: blue;
}
/*.red==class="red"*/
/*类选择器/class选择器*/
.red{
background-color: yellow;
}
/*#blue === [id="blue"]*/
#blue{
/*background-color: lightgray;*/
}
/*群组选择器*/
.red,h2 {
background-color: lightcyan;
}
/*通配符选择器*/
html{
font-size: 16px;
}
body *{
font-size: 2rem;
}
</style>
</head>
<body>
<p>定了！12月1日商合杭高铁北段正式开通</p>
<p class="red">定了！12月1日商合杭高铁北段正式开通</p>
<p class="red" id="blue">定了！12月1日商合杭高铁北段正式开通</p>
<h2>今晚加班，公司管饭管打车</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*后代选择器*/
section h2{
color: green;
}
/*父子选择器*/
section>h2{
color: red;
}
/*同级相邻选择器*/
#item + *{
background-color: lightblue;
}
/*同级所有选择器*/
#item ~ *{
background-color: lightcoral;
}
</style>
</head>
<body>
<section>
<div>
<h2>phpstudy V8</h2>
<h2 id="item">php中文网</h2>
<h2>phpstudy V8</h2>
<h2>小皮控制面板</h2>
</div>
<h2>HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*非限定类型的伪类*/
/*选中所有的UL下面的第二个子元素*/
ul > :nth-child(2){
background-color: lightblue;
}
/*选中第一个UL下面的第二个子元素*/
ul:first-child>:nth-child(2){
background-color: lightcoral;
}
/*选中第一个ul中第一个元素*/
ul:first-child >:first-child{
background-color: lightgray;
}
/*选中最后一个子元素中的，类型为P的所有元素*/
ul:last-child >:last-child> p:nth-child(n+1){
background-color: yellow;
}
/*选中第一个UL中最后一个元素*/
ul:first-child >:last-child{
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone X Max 手机一部</li>
<li>SONY A7M3 相机一部</li>
</ul>
</li>
<li>
<h3>工作计划</h3>
<ul>
<li>准备录制前端开发实战课程</li>
<li>Laravel项目开发全程实录</li>
<li>编写前端开发实例大全电子书</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>开发部: 19:00 - 24:00</li>
<li>市 场部: 19:00 - 23:00</li>
<li>销售部: 19:00 - 22:00</li>
</ul>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled{
background-color:beige;
}
input:disabled{
background-color: lightgreen;
}
input:required{
background-color: red;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required placeholder="不得少于6位">
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>
<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
