实例
<!DOCTYPE html>
<html>
<head>
<title>tabel及li标签的学习</title>
<meta charset="utf-8">
<style type="text/css">
table{
margin: 20px auto;
border-collapse:collapse; /*折叠表格线,不设置的话表格的线条会是双线条*/
}
table tr,th,td {
border:1px solid black;
}
table caption{
font-family: 黑体;
font-size: 28px;
padding: 5px;
}
table tr th{
text-align: center;
padding:8px;
font-size: 15px;
font-weight: bolder;
background: #eee;
}
/*table tr:first-child { table的第一行tr
background-color: lightgreen;
}*/
table tr td{
text-align: center;
padding:8px;
}
table tr:hover{
background: #ccc;
}
table tr td a{
text-decoration-line: none;
border: 0.8px solid #222;
border-radius: 10px;
padding:3px;
background: orange;
}
table tr td a:hover{
background: pink;
}
</style>
</head>
<body>
<h3>学习PHP为什么必须要掌握HTML</h3>
<p>PHP是用来动态生成HTML代码的，PHP程序的运行结果就是HTML，所以要学习PHP必须要掌握HTML</p>
<p>前端开发只要是指静态页面的编写，前段的HTML代码由浏览器负责解释和运行，主要用到三个工具：HTML，CSS，JavaScript；<br>后端主要是服务器端，运行正在服务器中，例如PHP，由服务器上的特殊程序来运行。</p>
<h3>为什么选择PHP开发动态网站</h3>
<p>PHP流行的原因，就是一个字：快，上手快，开发快，迭代快（更新快）<br>PHP可以进行原生态开发.国内流行的框架是ThinkPHP，国外流行的框架是laravel<br>框架就是开发规范</p>
<p>标签的重要性：标签是用来描述元素的工具，标签与语义相关联</p>
<p>双标签与单标签<br>
非可替换元素：可直接写在HTML代码中，直接由浏览器渲染出来 p a h1-h6 li<br>
可替换元素：来自源码的外部，通过标签的属性引用图片，文件，富文本等 link img javascript<br>
单标签可引入可替换元素</p>
<p>属性是用来描述标签的，标签的四个公共属性</p>
<ul>
<li>style内联样式</li>
<li>id标识唯一元素</li>
<li>class标识同类元素</li>
<li>title提示信息</li>
</ul>
<hr>
<table>
<caption>PHP必读书单</caption> <!-- caption表格标题 -->
<tr>
<th>序号</th> <!-- <tr>表格表头 -->
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>封面</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>HTML+CSS布局</td>
<td>张老师</td>
<td>人民出版社</td>
<td><img src="images/html.png" width="100px" height="100px" title="HTML+CSS布局"></td>
<td>￥60</td>
<td><a href="">购 买</a></td>
</tr>
<tr>
<td>2</td>
<td>PHP从入门到精通</td>
<td>李老师</td>
<td>教育出版社</td>
<td><img src="images/php.png" width="100px" height="100px" title="PHP从入门到精通"></td></td>
<td>￥60</td>
<td><a href="">购 买</a></td>
</tr>
<tr>
<td>3</td>
<td>PHP框架学习</td>
<td>明日老师</td>
<td>明日科技出版社</td>
<td><img src="images/php.png" width="100px" height="100px" title="PHP框架学习"></td></td>
<td>￥60</td>
<td><a href="">购 买</a></td>
</tr>
<tr>
<td>4</td>
<td>MYSQl</td>
<td>张老师</td>
<td>人民出版社</td>
<td><img src="images/mysql.png" width="100px" height="100px" title="MYSQl"></td></td>
<td>￥60</td>
<td><a href="">购 买</a></td>
</tr>
</table>
</body>
</html>运行结果
点击 "运行实例" 按钮查看在线实例
