HTML+CSS 轻松入门之HTML基础标签(一)
html 中的注释
<!--内容-->
HTML种标签有很多,大家可以参考手册,接下来我们讲解一些我们常用的标签
首先我们来讲P标签 段落(p)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>大家好</p> </body> </html>
然后我们在浏览器上运行,输出:大家好
看以下代码:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>大家好</p> <p>大家好!</p> </body> </html>
段落会自己换行,所以输出:
大家好
大家好
<meta>-----是head 标签内的一个辅助标签,通常用来设置编码,以及优化推广的关键词关键字等
<br> -------换行
<font>---------给文字格式化
<table>------表格
<span>------行内标签
提示和注释:
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
<h1>到<h6>-----控制字体大小
<div>-------把文档分割为独立的、不同的部分(等学到css 我们会讲解)
<hr>-------被水平线分隔的标题和段落
接下来我们先讲解这些简单的标签
如下代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>大家好<span>123456</span></p> <p>大家好</p> 111111111111111<br>1111111111111111 <!--换行--> <hr> <!--用来和以上隔开,有一条黑色的直线--> <font size='18' color="red">我们都一样</font> <!--font设置字体大小,颜色--> <hr> <h1>中国</h1> <h2>中国</h2> <h3>中国</h3> <h4>中国</h4> <h5>中国</h5> <h6>中国</h6> </body> </html>
大家把代码拷贝到自己的电脑上,创建文件,后缀为.html 然后双击预览
表格
大家请看以下代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <th>美国</th> <th>日本</th> <th>中国</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>
表格的构成是由行和列 准确的说不能叫列,只能叫单元格
以上代码中的<tr>标签代表行 <td>代表单元格 但是我们在预览中是以表格的形式展示,所以称为3行3列
<th> 定义表头单元格,一般用于标题上,例如我们做一个星期的日程表 星期一到星期天,这些字需要加粗等
以上代码运行结果:
美国 日本 中国
123 456 789
123 456 789
这样的表格我们看的有点不习惯,那么我来给表格加边框
以上代码中。我们在table 标签中加入border='1' 然后我们给表格加一个宽度和高度 width="300" height="200"
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="300" height="200"> <tr> <th>美国</th> <th>日本</th> <th>中国</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>