HTML
概念
Hyper Text Markup Language 超文本标记语言,它是最基础的网页开发语言
- 超文本 通过超链接将不同空间的文字信息组织在一起的网状文本
- 标记语言
- 由标签构成的语言.<标签名称> 如 html , xml
- 标记语言不是编程语言
快速入门
语法
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签: 有开始标签和结束标签. 如
<html> </html> - 自闭合标签: 开始标签和结束标签在一起. 如
<br/>
- 围堵标签: 有开始标签和结束标签. 如
- 标签可以嵌套: 需要正确嵌套,不能你中有我,我中有你
- 在开始标签中可以定义属性.属性是由键值对构成,值需要用引号(单双都可)引起来
- html标签不区分大小写,但是建议使用小写
标签
-
文件标签
-
html:html文档的根标签
-
head:头标签.用于指定html文档的属性
-
title:标题标签
-
body:体标签
-
<!DOCTYPE html>:html 5中定义该文档是html文档
-
-
文本标签
-
注释:
<!-- 注释内容 --> -
<h1> to <h6>:标题标签 字体大小逐渐递减 -
<p>:段落标签 -
<br>:换行标签 -
<hr>:展示一条水平线属性:
- color 颜色
- width 宽度
- size 高度
- align 对齐方式
-
center 居中
-
left 左对齐
-
right 右对齐
-
-
<b>:字体加粗 -
<i>:字体斜体 -
<font>:字体标签属性:
-
color 颜色
-
size 大小
-
face 字体
-
-
<center>:文本居中 -
属性定义
- color
- 英文单词: red,green,blue
- rgb(值1,值2,值3): 值的范围:0~255 如: rgb(0,0,255)
- #值1值2值3: 值的范围:00~FF 如: #FF00FF
- width
- 数值:width=‘20’,单位默认是px(像素)
- 数值%:占比相对于父元素的比例
演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!--文本标签:这是一个注释--> <!--br 换行--> 远看山有色,<!--<br/>--><br> 静听水无声.<br> <!--标题标签 h1~h6--> <h1>坚持</h1> <h2>坚持</h2> <h3>坚持</h3> <h4>坚持</h4> <h5>坚持</h5> <h6>坚持</h6> <!--段落标签 p--> <p>1.巩固和加深对Java程序设计课程所学知识的理解，掌握程序设计方法；</p> <p>2.初步掌握软件开发过程的问题分析、系统设计、程序编码、测试等基本方法和技能；</p> <p>3.提高综合运用所学的理论知识和方法，独立分析和解决问题的能力；</p> <p>4.训练用系统的观点和软件开发一般规范进行软件开发，培养软件工作者所应具备的科学的工作方法和作风；</p> <p>5．培养查阅资料，独立思考问题的能力。</p> <!--hr 显示一条水平线--> <hr color="red" width="200" size="10" align="left"/> <hr> <!--加粗 b--> 星期四<br> <b>星期四</b><br> <hr> <!--斜体 i--> 星期四<br> <i>星期四</i><br> <hr> <!--字体标签 font--> <font color="red" size="5" face="楷体">星期四</font> </body> </html>案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司简介</title> </head> <body> <h1>公司简介</h1> <hr color="#ff9933"> <p><font color="red">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。<br> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p> <p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p> <p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p> <p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p> <hr color="#ff9933"> <p align="center"><font color="#808080" size="2">江苏传智播客教育科技股份有限公司<br> 版权所有 Copyright © 2006-2018, All Rights Reserved 苏ICP 备 16007882</font></p> </body> </html>效果展示:
- color
-
-
图片标签
img:展示图片
演示:
<!--展示一张图片 img--> <img src="image/jiangxuan_1.jpg" align="right" alt="境外" width="600" height="500"> <!-- 相对路径 以.开头的路径 ./: 代表当前目录 ./image/1.jpg ../: 代表上一级目录 --> -
列表标签
-
有序列表 ol
-
无序列表 ul
演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--有序列表 ol--> 早晨起床要做的事情 <ol type="1" start="0"> <!-- type可以是A或a,或者罗马数字 start表示起始序号--> <li>睁开眼睛</li> <li>看时间</li> <li>坐起来</li> <li>叠被子</li> <li>下床</li> <li>洗漱</li> </ol> <!--无序列表 ul--> 早晨起床要做的事情 <ul type="disc"> <li>睁开眼睛</li> <li>看时间</li> <li>坐起来</li> <li>叠被子</li> <li>下床</li> <li>洗漱</li> </ul> 早晨起床要做的事情 <ul type="circle"> <li>睁开眼睛</li> <li>看时间</li> <li>坐起来</li> <li>叠被子</li> <li>下床</li> <li>洗漱</li> </ul> 早晨起床要做的事情 <ul type="square"> <li>睁开眼睛</li> <li>看时间</li> <li>坐起来</li> <li>叠被子</li> <li>下床</li> <li>洗漱</li> </ul> </body> </html> -
-
链接标签
a:定义一个超链接
-
属性:
- href: 指定访问资源的URL(统一资源定位符)
- target: 指定打开资源的方式
- _self: 默认值,在当前页面打开
- _blank: 在空白页面打开
演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <!--超链接 a--> <a href="https://www.baidu.com">点我看看会有什么东西</a> <br> <a href="https://www.baidu.com" target="_self">点我看看会有什么东西</a><!--默认在本页面中打开--> <br> <a href="https://www.baidu.com" target="_blank">点我看看会有什么东西</a> <br> <a href="./列表标签.html">列表标签</a> <br> <a href="mailto:1994633893@qq.com">联系我哦</a> <a href="https://www.imooc.com"><img src="image/footer_service.png"></a> </body> </html>
-
-
div和span
- div:每一个div占满一整行,块级标签
- span:文本信息在一行展示,行内标签 内联标签
-
语义化标签: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="30%" cellpadding="0" cellspacing="0" align="center"> <caption>学生成绩表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> <tr align="center"> <td>1</td> <td>小龙女</td> <td>女</td> <td>100</td> </tr> <tr align="center"> <td>2</td> <td>杨过</td> <td>男</td> <td rowspan="2">90</td> </tr> <tr align="center"> <td>3</td> <td>金轮法王</td> <td>男</td> </tr> <tr align="center"> <td>总成绩</td> <td colspan="3">190</td> </tr> </table> </body> </html>效果展示:
-
综合案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网站首页</title>
</head>
<body>
<!--
1.确定使用table来完成布局
2.如果某一行只有一个单元格,则使用<tr><td></td></tr>
3.如果某一行有多个单元格,则使用
<tr>
<td>
<table>
<tr><td></td></tr>
</table>
</td>
</tr>
-->
<table>
<!--第1行-->
<tr>
<td>
<img src="image/top_banner.jpg">
</td>
</tr>
<!--第2行-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="image/logo.jpg">
</td>
<td align="center">
<img src="image/search.png" width="700">
</td>
<td>
<img src="image/hotel_tel.png">
</td>
</tr>
</table>
</td>
</tr>
<!--第3行-->
<tr>
<td>
<table width="100%" bgcolor="#FEC900">
<tr align="center" height="45">
<td><a href="https://www.imooc.com">首页</a></td>
<td><a href="https://www.baidu.com">门票</a></td>
<td><a href="https://www.net">酒店</a></td>
<td><a href="https://www.sina.com.cn">香港车票</a></td>
<td><a href="https://www.tianya.cn">出境游</a></td>
<td><a href="https://www.sohu.com">国内游</a></td>
<td><a href="https://www.qq.com">港澳游</a></td>
<td><a href="https://www.youku.com">抱团定制</a></td>
<td><a href="https://www.360.cn">全球自由行</a></td>
<td><a href="https://www.iqiyi.com">收藏排行榜</a></td>
</tr>
</table>
</td>
</tr>
<!--第4行-->
<tr>
<td>
<img src="image/banner_3.jpg">
</td>
</tr>
<!--第5行-->
<tr>
<td>
<img src="image/icon_5.jpg">
<span>黑马精选</span>
<hr color="#E5C362" size="2">
</td>
</tr>
<!--第6行-->
<tr>
<td>
<table width="100%">
<tr align="center">
<td>
<img src="image/jiangxuan_1.jpg" width="350" height="250">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 899</font></p>
</td>
<td>
<img src="image/jiangxuan_1.jpg" width="350" height="250">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 899</font></p>
</td>
<td>
<img src="image/jiangxuan_1.jpg" width="350" height="250">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 899</font></p>
</td>
<td>
<img src="image/jiangxuan_1.jpg" width="350" height="250">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 899</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第7行-->
<tr>
<td>
<img src="image/icon_6.jpg">
<span>国内游</span>
<hr color="#E5C362" size="2">
</td>
</tr>
<!--第8行-->
<tr>
<td>
<table width="100%">
<tr align="center">
<td rowspan="2">
<img src="image/guonei_1.jpg" width="400" height="625">
</td>
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_2.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第9行-->
<tr>
<td>
<img src="image/icon_7.jpg">
<span>境外游</span>
<hr color="#E5C362" size="2">
</td>
</tr>
<!--第10行-->
<tr>
<td>
<table width="100%">
<tr align="center">
<td rowspan="2">
<img src="image/jiangwai_1.jpg" width="400" height="625">
</td>
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
<td>
<img src="image/jiangxuan_3.jpg" width="300" height="200">
<p align="left">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p align="left"><font color="red">¥ 699</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="image/footer_service.png" width="100%">
</td>
</tr>
<!--第12行-->
<tr bgcolor="#FDC904">
<td>
<p align="center"><font color="#808080" size="2">江苏传智播客教育科技股份有限公司
版权所有Copyright © 2006-2018, All Rights Reserved 苏ICP 备 16007882</font></p>
</td>
</tr>
</table>
</body>
</html>
效果展示:
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
