Web前端~~~~HTML（1）
作者：互联网
1、HTML概述
HTML: Hyper Text Markup Language 超文本标记语言
超文本： 比普通文本功能更加强大,可以添加各种样式
标记语言：通过一组标签来对内容进行描述，标签格式： <>+ 关键词 是由浏览器来解释执行。
例子：h1、b、i、p、br为关键词、关键词需要用<>将其包裹住。
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p><p>为段落标签
<b>为加粗标签
<i>为斜体标签
<br>为换行标签
<h1>位标题标签，数字可以改为1~6，例如<h6>字体最小，数字超过6后就为普通文本标签（下左为效果，右为代码）
2、 HTML的语法规范
1. 文档声明 （<!DOCTYPE html>）
2. 根标签(<html>)
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息（<head>）
meta:是编码规范 titleWie网页上方的名字
体部分 : 主要来放置我们的HTML页面内容（<body>）
4. 通过标签来对内容进行描述,标签通常都是由开始标签<head>和结束标签</head>组成
5. 标签不区分大小写, 官方建议使用小写
知识点1（列表）
（1）无序列表（ul） 属性type（disc 默认 circle square）
disc效果（不写type时，默认就是disc）展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点总结</title>
</head>
<body>
<ul>
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ul>
</body>
</html>
circle效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点总结</title>
</head>
<body>
<ul type="circle">
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ul>
</body>
</html>
square效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点总结</title>
</head>
<body>
<ul type="square">
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ul>
</body>
</html>
（2）有序列表（ol） 属性type（1（默认）,a ,A,I）start : 指定是起始索引
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点总结</title>
</head>
<body>
<ol>
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点总结</title>
</head>
<body>
<ol type="a" start="2">
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ol>
</body>
</html>
其他属性以此类推即可
知识点2（图片链接）
img 标签:
常用的属性：width : 宽度 height: 高度 src : 指定文件路径 alt: 图片加载失败时的提示内容
效果图
./ 代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径知识点3（网页链接跳转）
点击链接,跳转去指定网站
a 超链接标签
常用的属性: href: 指定要跳转去的链接地址
如果是网络地址需要加上http协议 ,
如果访问的是本网站的html文件,可以直接写文件路径
target : 以什么方式打开
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接跳转</title>
</head>
<body>
<ul>
<li><a href="https://www.csdn.net/"> CSDN</a></li>
<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li>珍爱网</li>
<li>非诚勿扰</li>
</ul>
</body>
</html>
知识点4（表格标签table ）
table标签:
常用的属性: bgcolor : 背景色 width : 宽度 height : 高度 align : 对齐方式
tr 行标签
td 列标签
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1px" bgcolor="yellow" width="400px" align="center">
<tr bgcolor="red" align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td bgcolor="hotpink" align="center">1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>单元格合并（跨行或者跨列操作之后,被占掉的格子需要删除掉 ）
效果图：
colspan : 跨列操作
rowspan : 跨行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1px" width="400px" >
<tr>
<td colspan="2">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr >
<td>31</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td rowspan="2">44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
</table>
</body>
</html>
例一
（一）效果图
（一）步骤分析
step1： 整体看，有一个标题、一个水平分割线、四个段落，其中有个文字有红色
step2：需要用到的标签如下
<h3></h3>
<p></p>
<font></font> 其中font的属性 color size face
扩展内容（标签）
<strong></strong> 跟<b></b>都有加粗字体的作用，但是strong有语意，即用strong标记的文字，会着重读。
<em></em>跟<i></i>也是把字体变成斜体，但是em有语意，即用em标记的文字，会着重读。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息页面</title>
</head>
<body>
<h3>公司简介</h3>
<hr />
<p><font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p><strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想</em>，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
例二
（二）效果图
（二）步骤分析
step1：创建一个8行一列的表格
step2：第一部份: LOGO部分: 嵌套一个一行三列的表格
step3：第二部分: 导航栏部分 : 放置5个超链接
step4：第三部分: 图片（目前不能实现轮播图）
step5：第四部分: 嵌套一个三行7列表格
step6：第五部分: 直接放一张图片
step7：第六部分: 抄第四部分的
step8：第七部分: 放置一张图片
step9：第八部分: 放一堆超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
</head>
<body>
<table border="1px" width="100%" height="3px">
<!--第一部分 -->
<tr>
<td>
<table width="100%">
<td><img src="../网站首页/img/logo2.png"/></td>
<td><img src="../网站首页/img/header.png"/></td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</table>
</td>
</tr>
<!--第二部分 -->
<tr bgcolor="black">
<td height="50px">
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">香烟酒水</font></a>
</td>
</tr>
<!--第三部分 -->
<tr>
<td>
<img width="100%" src="../网站首页/img/1.jpg"/>
</td>
</tr>
<!--第四部分 -->
<tr >
<td>
<table border="1px" width="100%" height="500px" >
<tr>
<td colspan="7" >
<h3 >最新商品 <img src="../网站首页/img/title2.jpg"/></h3>
</td>
</tr>
<tr>
<td rowspan="2" width="206px" height="480px" >
<img src="../网站首页/img/big01.jpg"/>
</td>
<td colspan="3" height="240px" >
<img width="100%" height="100%" src="../网站首页/img/middle01.jpg"/></td>
<td align="center">
<img src="../网站首页/img/small01.jpg"/>
<p>豆浆机</p>
<p><font color="red"> $998</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small02.jpg"/>
<p>显示器</p>
<p><font color="red"> $998</font></p>
</td>
<td align="center" >
<img src="../网站首页/img/small03.jpg"/>
<p>电磁炉</p>
<p><font color="red"> $998</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../网站首页/img/small05.jpg"/>
<p>饮水机</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small06.jpg"/>
<p>洗衣机</p>
<p><font color="red"> $1000</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small09.jpg"/>
<p>微波炉</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small05.jpg"/>
<p>饮水机</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small06.jpg"/>
<p>洗衣机</p>
<p><font color="red"> $1000</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small09.jpg"/>
<p>微波炉</p>
<p><font color="red"> $888</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分 -->
<tr>
<td>
<img width="100%" height="100%" src="../网站首页/img/ad.jpg"/>
</td>
</tr>
<!--第六部分 抄袭第四部分 -->
<tr>
<td>
<table border="1px" width="100%" height="500px" >
<tr>
<td colspan="7" >
<h3 >热门商品 <img src="../网站首页/img/title2.jpg"/></h3>
</td>
</tr>
<tr>
<td rowspan="2" width="206px" height="480px" >
<img src="../网站首页/img/big01.jpg"/>
</td>
<td colspan="3" height="240px" >
<img width="100%" height="100%" src="../网站首页/img/middle01.jpg"/></td>
<td align="center">
<img src="../网站首页/img/small01.jpg"/>
<p>豆浆机</p>
<p><font color="red"> $998</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small02.jpg"/>
<p>显示器</p>
<p><font color="red"> $998</font></p>
</td>
<td align="center" >
<img src="../网站首页/img/small03.jpg"/>
<p>电磁炉</p>
<p><font color="red"> $998</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../网站首页/img/small05.jpg"/>
<p>饮水机</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small06.jpg"/>
<p>洗衣机</p>
<p><font color="red"> $1000</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small09.jpg"/>
<p>微波炉</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small05.jpg"/>
<p>饮水机</p>
<p><font color="red"> $888</font></p>
</td>
<td align="center">
<img src="img/small06.jpg"/>
<p>洗衣机</p>
<p><font color="red"> $1000</font></p>
</td>
<td align="center">
<img src="../网站首页/img/small09.jpg"/>
<p>微波炉</p>
<p><font color="red"> $888</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第七部分 -->
<tr>
<td>
<img width="100%" height="100%" src="img/footer.jpg"/>
</td>
</tr>
<!--第八部分 -->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 啦啦商城 版权所有
</td>
</tr>
</table>
</body>
</html>
图片素材资源链接
https://download.csdn.net/download/weixin_46098676/20387699
标签：知识点,Web,学员,标签,前端,888,998,程序员,HTML 来源： https://blog.csdn.net/weixin_46098676/article/details/118936962