HTML基础
-
概念：是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本
- 超文本使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
- 标记语言
- 由标签构成的语言。
- <标签名称> 如： html、xml
- 标记语言不是编程语言
- 由标签构成的语言。
- 超文本
- Hyper Text Markup Language 超文本标记语言
-
快速入门：
-
语法：
- HTML文档的后缀名：.html or .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
<html> </html> - 自闭合标签：开始标签和结束标签在一起。如
<br>或者<br/> - 标签可以嵌套：
- 需要正确的嵌套，不能我中有你，你中有我
- 正确示范：
<a><b></b></a> - 错误示范：
<a><b></a></b>
- 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来。
<tr bgcolor="#ffd700" align="center" height="40"> - html的标签不区分大小写，但是建议使用小写
- 围堵标签：有开始标签和结束标签。如
-
代码：
-
<html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <FONT color='red'>Hello World</font><br/> <font color='green'>Hello World</font> </body> </html>
-
-
-
标签学习
-
文件标签：构成html最基本的标签
- html：html文档的根标签
- head：头标签。用于指定html文档的一些属性。引入外部的资源
- title：标题标签
- body：体标签
<!DOCTYPE html>html5中定义该文档是html文档
-
文本标签：和文本有关的标签
-
注释：
<!-- 我是注释的内容 --> -
<h1>to<h6>：标题标签 -
<p>：段落标签 -
<br>：换行标签 -
<hr>：展示一条水平线- 属性：
- color：颜色
- width：宽度
- size：高度
- align：对齐方式
- center：居中
- left：向左对齐
- right：向右对齐
- 属性：
-
<b>：字体加粗 -
<i>：字体斜体 -
<font>：字体标签。在html5中已经过时 -
<center>：文本居中。在html5中已经过时- 属性：
- color：颜色
- size：大小
- face：字体
- 属性：
-
属性的定义：
- color：
- 英文单词：red，green，blue
- rgb(值1，值2，值3)：值的范围：0~255 如：rgb(0,0,255)
- #值1值2值3：值的范围：00~FF之间。如：#FF00FF （现在的主流）
- width
- 数值：width=‘20’，数值的单位默认是px（像素）
- 数值%：占比相对于父元素的比例
- color：
-
代码（公司简介）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司简介</title> </head> <body> <header> <div> <h1>公司简介</h1> </div> </header> <hr> <p> <font color="red">"中关村黑马程序员训练营"</font> 是由 <b> <i> 传智播客 </i> </b> 联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。<br> </p> <p> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。 </p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。 </p> <hr> <footer> <div> <center> <font color="gray">江苏传智播客教育科技股份有限公司<br>版权所有Copyright©2006-2018, All Rights Reserved 苏ICP备16007882</font> </center> </div> </footer> </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：
- 属性
- type：指定开始的序号，例如a就是从a开始abcd，A就是ABCD，1就是1234
- start：从第几个开始，如6就是从6开始算6789
- 属性
- li：
- ol：
-
无序列表：
- ul：
- li：
-
代码：
<!--有序列表--> 一天中要做的事情 <ol type="1" start="6"> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ol> <hr> <!-- 无序列表 --> 一天中要做的事情 <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li>
-
-
链接标签：
-
a：定义一个超链接
- 属性：
- href：指定访问资源的URL（统一资源定位符）
- target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
- 属性：
-
代码
我要去环游世界啦！ <br> <a href="https://www.google.com" target="_blank">google</a> <br> <a href="https://www.google.com" target="_self">google</a> <br> <a href="./文本标签演示.html">HTML访问</a> <br> <a href="文本标签演示.html"><img src="./image/jiangxuan_4.jpg" width="284" height="165" alt="精选4"></a>
-
-
div和span：
- div：每一个div占满一整行。块级标签
- span：文本信息在一行展示，行内标签 内联标签
-
语义化标签：html中为了提高程序的可读性，提供了一些标签。
<header>：页眉<footer>：页脚
-
表格标签：
-
table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
-
tr：定义行
-
td：定义单元格
-
th：定义表头单元格
- colspan：合并列
- rowspan：合并行
-
<caption>：表格标题 -
<thead>：表示表格的头部分。只要是头，最后内容就一定在最前面 -
<tbody>：表示表格的体部分。只要是体，最后内容就一定在中间 -
<tfoot>：表示表格的脚部分。只要是尾，最后内容就一定在最后 -
代码：
<table border="1" width="30%" align="center" bgcolor="aqua"> <caption>学生信息表</caption> <tr> <!-- <td>编号</td>--> <!-- <td>姓名</td>--> <!-- <td>成绩</td>--> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>1</td> <td>张三</td> <td>28</td> </tr> <tr> <td>2</td> <td>李四</td> <td>45</td> </tr> </table> <hr> <table border="1" width="30%" align="center" bgcolor="aqua"> <thead> <caption>学生信息表</caption> <tr> <!-- <td>编号</td>--> <!-- <td>姓名</td>--> <!-- <td>成绩</td>--> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> <tr bgcolor="red" align="center"> <td>1</td> <td>张三</td> <td>28</td> </tr> <tr> <td>2</td> <td>李四</td> <td>45</td> </tr> </tbody> <tfoot> <tr> <td>3</td> <td>王五</td> <td>10</td> </tr> </tfoot> </table> <hr> <table border="1" width="30%" align="center" bgcolor="aqua"> <caption>学生信息表</caption> <tr> <th rowspan="2">编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr bgcolor="red" align="center"> <td>张三</td> <td>28</td> </tr> <tr> <td>3</td> <td colspan="2">王五</td> </tr> </table>
-
-
由基础html做一个案例：旅游网站首页
-
确定使用table来完成布局
-
如果某一行只有一个单元格，则使用
<tr><td></td></tr> -
如果某一行有多个单元格，则使用：
<tr> <td> <table> <tr> <td> </td> </tr> </table> </td> </tr>4.代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Holm旅游网</title> </head> <body> <table align="center" width="100"> <!--第1行--> <tr> <td> <img src="image/top_banner.jpg"> </td> </tr> <!--第2行--> <tr> <td> <table align="center" width="100"> <tr> <td> <img src="image/logo.jpg"> </td> <td> <img src="image/search.png"> </td> <td> <img src="image/hotel_tel.png"> </td> </tr> </table> </td> </tr> <!--第3行--> <tr> <td> <table bgcolor="#ffd700" width="100%" align="center"> <tr height="35" align="center"> <td> <a href="">首页</a> </td> <td> <a href="">门票</a> </td> <td> <a href="">酒店</a> </td> <td> <a href="">香港车票</a> </td> <td> <a href="">出境游</a> </td> <td> <a href="">国内游</a> </td> <td> <a href="">港澳游</a> </td> <td> <a href="">抱团定制</a> </td> <td> <a href="">全球自由行</a> </td> <td> <a href="">收藏排行榜</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"> 黑马精选 <hr color="#ffd700" width="98%"> </td> </tr> <!--第6行--> <tr> <td> <table align="center" width="95%"> <tr align="center"> <td> <img src="image/jiangxuan_1.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥899</font> </td> </tr> </table> </td> </tr> <!--第7行--> <tr> <td> <img src="image/icon_6.jpg"> 国内游 <hr color="#ffd700" width="98%"> </td> </tr> <!--第8行--> <tr> <td> <table> <tr> <td rowspan="2"> <img src="image/guonei_1.jpg"> </td> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> </tr> </table> </td> </tr> <!--第9行--> <tr> <td> <img src="image/icon_7.jpg"> 境外游 <hr color="#ffd700" width="98%"> </td> </tr> <!--第10行--> <tr> <td> <table> <tr> <td rowspan="2"> <img src="image/jiangwai_1.jpg"> </td> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_3.jpg"> <p> 上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机 </p> <font color="red">¥699</font> </td> </tr> </table> </td> </tr> <!--第11行--> <tr> <td> <table bgcolor="#696969" width="100%"> <tr> <td> <img src="image/icon_1.jpg" align="right"> </td> <td> <font color="#f0ffff"><b>产品齐全</b></font> <br> <font color="gray" size="2">产品全自主选、随心买</font> </td> <td> <img src="image/icon_2.jpg" align="right"> </td> <td> <font color="#f0ffff"><b>便利快捷</b></font> <br> <font color="gray" size="2">24小时不打烊、随时买</font> </td> <td> <img src="image/icon_3.jpg" align="right"> </td> <td> <font color="#f0ffff"><b>安全支付</b></font> <br> <font color="gray" size="2">知名支付工具、放心买</font> </td> <td> <img src="image/icon_4.jpg" align="right"> </td> <td> <font color="#f0ffff"><b>贴心服务</b></font> <br> <font color="gray" size="2">客服全年无休、安心买</font> </td> </tr> </table> </td> </tr> <!--第12行--> <tr bgcolor="#ffd700" align="center" height="40"> <td> <font color="gray" size="2">江苏传智播客教育科技股份有限公司 版权所有Copyright©2006-2018, All Rights Reserved 苏ICP备16007882</font> </td> </tr> </table> </body> </html>
-
-
扫一扫
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
