标签：知识点 Web 学员 标签 前端 888 998 程序员 HTML
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。