![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
首先老朱一上来就问问了我们
1、什么是PHP
PHP是一种服务器端HTML-嵌入式脚本描述语言（说白了就是服务器脚本）
2、学php为什么要先学html
这就好比一个小孩为什么要先学会走路才能奔跑，HTML说白了就是一个人的脸，脸取决了我能不能多看你几眼。
3、为什么选择PHP开发动态网站
天下武功为快不破，一个字“快”，用PHP开发动态网站可以大大的节省开发的周期。且PHP开源，学习资料也比较多，MVC框架，各种插件，各种库Composer
<!-- 什么都不写,会自动生成html文档结构:<html><head></head><body></body></html> -->
<!-- 双标签不封闭,浏览器是自动添加关闭标签 -->
<!-- html页面中的css样式与js脚本的自动添加位置,是根据body中是否有内容来决定 -->
<!-- 如果body中有内容,就自动添加到body中 -->
<h2>自动获取页面中元素---点击从红色变成绿色</h2>
<h3>自动获取页面中元素---点击从红色变成绿色</h3>
<style type="text/css">
h2 {color:red;} /*写到h2标签的后面仍是有效的*/
</style>
<script type="text/javascript">
// document.querySelector('h2')
document.getElementsByTagName('h2')[0].onclick = function () {
this.style.color = 'green'
}
</script>
<script type="text/javascript">
document.getElementsByTagName('h3')[0].onclick = function () {
this.style.color = 'green'
}
</script>
<hr> <!-- 分隔线 -->
<h2 id="demo">获取文档中id的元素---点击从黄色变成绿色</h2>
<style type="text/css">
#demo {color:yellow;}
</style>
<script type="text/javascript">
/*获取文档中 id="demo" 的元素：*/
document.querySelector('#demo').onclick = function () {
this.style.color = 'green'
}
</script>
<hr> <!-- 分隔线 -->
<h2 style="color:red">贵宾犬</h2>
<!-- 高宽不设置,将会根据宽度自适应 -->
<!-- 标签的四个通用属性:id, class, title, style -->
<img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=ef7c2e3403f79052fb124f7d649abdbf/9922720e0cf3d7cab4136251f81fbe096b63a934.jpg" width="300" style="border-radius: 50%;" title="贵宾犬" class="dog" id="dog1">
<style type="text/css">
.dog {
box-shadow: 3px 3px 3px #888;/*图片阴影*/
}
#dog1:hover {
width:350;
}
</style>
<hr> <!-- 分隔线 -->
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>品1牌</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>苹2果</td>
<td>1部</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534330540919&di=db591ef6e499b452d3c32e91297608f6&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fd62a6059252dd42ab82f83ed083b5bb5c9eab856.jpg" alt=""></td>
<td><a href="https://jd.com">购1买</a></td>
</tr>
<tr>
<td>2</td>
<td>手机</td>
<td>小米</td>
<td>2部</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534328590980&di=2c58fe5c29074bb3f8366241562fdc89&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F838ba61ea8d3fd1f2c82ac983b4e251f94ca5f8c.jpg" alt=""></td>
<td><a href="https://jd.com">购1买</a></td>
</tr>
<tr>
<td>3</td>
<td>手机</td>
<td>华为</td>
<td>3部</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534328841133&di=8d2042bc0f775e4afc18cbce36936f8a&imgtype=0&src=http%3A%2F%2Fstatic.fuwo.com%2Fupload%2Fattachment%2F1603%2F15%2F0d8e6c90ea8b11e5b0b200163e00254c.jpg" alt=""></td>
<td><a href="https://jd.com">购1买</a></td>
</tr>
</table>
<style type="text/css">
table{
width: 700px;
text-align: center;
border-collapse: collapse; /*折叠表格线*/
margin: 10px;
border: 1px solid:black;
}
table caption{
font-size: 2rem;
margin-bottom: 20px;/*设置下边距50px;*/
}
table,th,td {
border: 1px solid red;/*边框1像素颜色#666*/
}
table tr:first-child{
background: lightgreen;
height: 50px;
}
table tr:hover{
background-color: #efefef;
color: coral;
}
table tr td img{
padding: 5px;/*设置内边距10像素*/
border-radius: 20px;/*设置图片周边圆角*/
width: 50px;
height: 50px;
}
table tr a{
text-decoration: none;/*/*清除下划线*/
width: 1.4rem;
height: 0.4rem;
background: white;
padding: 5px;
border: 1px solid black; /*设置1像素实线*/
border-radius: 5px;
background: white;
color:black;
}
table tr a:hover{
background: black;
color: white;
}
</style>点击 "运行实例" 按钮查看在线实例
总结：
看到老朱写了一个简单的js
<h2>这里点击可以改变颜色</h2>
<h2>这里改变不了颜色</h2>
<script type="text/javascript">
// document.querySelector('h2')
document.getElementsByTagName('h2')[0].onclick = function () {
this.style.color = 'green'
}
</script>点击 "运行实例" 按钮查看在线实例
同样是h2 标签，为什么上面的生效了，下面的没有生效，证明js具有唯一性，而且是自上而下的选择
快速记忆
1、margin和padding
margin设置所有外边距属性
padding设置所有内边距属性
可以- top left right bottom
或者快速的 margin：上 右 下 左 或 margin：上 右左 下 或margin：上下 右左
2、单位 ： em相对于父元素，rem相对于根元素
3、border-collapse:collapse 表格线折叠。
4、伪元素 table tr:frist-child 选择表格第一行。
5、border-radius 向元素添加圆角边框。
6、去掉下划线： text-decoration-line：none
7、1像素黑颜色边框：border 1px solid black