目录
文件标签：构成html最基本的标签
html
- html文档的根标签
head
- 头标签。用于指定html文档的一些属性。引入外部的资源
title
- 标题标签
body
- 体标签
<!DOCTYPE html>
- html5中定义该文档是html文档
文本标签：和文本有关的标签
<!-- 注释内容 -->
- 注释
<h1> to <h6>
- 标题标签
- h1~h6:字体大小逐渐递减
<p>
- 段落标签
<br>
- 换行标签
<hr>
- 展示一条水平线
- 属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
- center：居中
- left：左对齐
- right：右对齐
<b>
- 字体加粗
<i>
- 字体斜体
<font>
- 字体标签
- 属性：
- color：颜色
- size：大小
- face：字体
<center>
- 文本居中
<!-- hr 显示一条水平线--> <hr color="red" width="200" size="10" align="left"/> <hr> <!-- 加粗 b--> 白日依山尽<br> <b>白日依山尽</b> <hr> <!-- 斜体 i --> 白日依山尽<br> <i>白日依山尽</i> <!-- 字体标签 font--> <hr> <font color="red" size="5" face="楷体">白日依山尽</font> <br> <font color="#3626F1" size="5" face="楷体">黑马程序员</font> <br> <hr color="red" width="50%" size="10" align="left"/> <center> <font color="red" size="5" face="楷体">白日依山尽</font> <br> </center>属性定义
color
- 1. 英文单词：red,green,blue
- 2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
- 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
width
- 1. 数值：width='20' ,数值的单位，默认是 px(像素)
- 2. 数值%：占比相对于父元素的比例
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马程序员简介</title> </head> <body> <h1> 公司简介 </h1> <hr color="#ffd700"> <p> <font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN </p> <p> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地 </p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 </p> <p> 一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享. </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> 江苏传智播客教育科技股份有限公司<br> 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 </center> </font> </body> </html>图片标签：img：展示图片
- 属性：
- src：指定图片的位置
- 代码：
<!--展示一张图片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/> <!-- 相对路径 * 以.开头的路径 * ./：代表当前目录 ./image/1.jpg * ../:代表上一级目录 --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg">列表标签
有序列表 ol
li
无序列表 ul
li
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--有序列表 ol--> 早上起床干的事情 <ol type="A" start="5"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ol> <!-- 无序列表 ul--> 早上起床干的事情 <ul type="disc"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> 早上起床干的事情 <ul type="square"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> 早上起床干的事情 <ul type="circle"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul> </body> </html>链接标签
- a: 定义一个超链接
- 属性：
href
- 指定访问资源的URL(统一资源定位符)
target
- 指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
<!--超链接 a--> <a href="http://www.itcast.cn">点我</a> <br> <a href="http://www.itcast.cn" target="_self">点我</a> <br> <a href="http://www.itcast.cn" target="_blank">点我</a> <br> <a href="./5_列表标签.html">列表标签</a><br> <a href="mailto:[email protected]">联系我们</a> <br> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>div和span
div 每一个div占满一整行。块级标签。 span 文本信息在一行展示，行内标签 内联标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块标签</title> </head> <body> <!-- div:每一个div占满一整行。块级标签 span：文本信息在一行展示，行内标签 内联标签 --> <span>黑马程序员</span> <span>传智播客</span> <hr> <div>黑马程序员</div> <div>传智播客</div> </body> </html>语义化标签
- html5中为了提高程序的可读性，提供了一些标签。
- <header>：页眉
- <footer>：页脚
表格标签
table
- 定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr
- 定义行
- bgcolor：背景色
- align：对齐方式
td
- 定义单元格
- colspan：合并列
- rowspan：合并行
th
- 定义表头单元格
<caption>
- 表格标题
<thead>
- 表示表格的头部分
<tbody>
- 表示表格的体部分
<tfoot>
- 表示表格的脚部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <!-- <td>编号</td> <td>姓名</td> <td>成绩</td>--> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>1</td> <td>小龙女</td> <td>100</td> </tr> <tr> <td>2</td> <td>杨过</td> <td>50</td> </tr> </table> <hr> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <thead> <caption>学生信息表</caption> <tr> <!-- <td>编号</td> <td>姓名</td> <td>成绩</td>--> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> <tr bgcolor="#7fffd4" align="center"> <td>1</td> <td>小龙女</td> <td>100</td> </tr> <tr> <td>2</td> <td>杨过</td> <td>50</td> </tr> </tbody> <tfoot> <tr> <td>3</td> <td>尹志平</td> <td>10</td> </tr> </tfoot> </table> <hr> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <th rowspan="2">编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>小龙女</td> <td>100</td> </tr> <tr> <td>2</td> <td colspan="2">杨过</td> </tr> </table> <hr> </body> </html>案例：旅游网站首页
- 1. 确定使用table来完成布局
- 2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
- 3. 如果某一行有多个单元格，则使用
<tr> <td> <table></table> </td> </tr><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑马旅游网</title> </head> <body> <!--采用table来完成布局--> <!--最外层的table，用于整个页面的布局--> <table width="100%" align="center"> <!-- 第1行 --> <tr> <td> <img src="image/top_banner.jpg" width="100%" alt=""> </td> </tr> <!-- 第2行 --> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="image/logo.jpg" alt=""> </td> <td> <img src="image/search.png" alt=""> </td> <td> <img src="image/hotel_tel.png" alt=""> </td> </tr> </table> </td> </tr> <!-- 第3行 --> <tr> <td> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45" > <td> <a href="">首页</a> </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> <td> 门票 </td> </tr> </table> </td> </tr> <!-- 第4行 轮播图 --> <tr> <td> <img src="image/banner_3.jpg" alt="" width="100%"> </td> </tr> <!-- 第5行 黑马精选--> <tr> <td> <img src="image/icon_5.jpg" alt=""> 黑马精选 <hr color="#ffd700" > </td> </tr> <!-- 第6行 --> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> </tr> </table> </td> </tr> <!-- 第7行 国内游 --> <tr> <td> <img src="image/icon_6.jpg" alt=""> 国内游 <hr color="#ffd700" > </td> </tr> <!-- 第8行 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/guonei_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_2.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- 第9行 境外游 --> <tr> <td> <img src="image/icon_7.jpg" alt=""> 境外游 <hr color="#ffd700" > </td> </tr> <!-- 第10行 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/jiangwai_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_3.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- 第11行 --> <tr> <td> <img src="image/footer_service.png" alt="" width="100%"> </td> </tr> <!-- 第12行 --> <tr> <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2"> 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 </font> </td> </tr> </table> </body> </html>
- 【注】：参考黑马HTML教程
HTML笔记：常用标签小结
猜你喜欢
转载自blog.csdn.net/baidu_41388533/article/details/108451301
今日推荐
周排行