Web前端~~~~HTML（1）

2023-12-15 14:26:45

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：需要用到的标签如下

<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 &copy; 啦啦商城  版权所有
				</td>
			</tr>
		</table>
	</body>
</html>

图片素材资源链接

https://download.csdn.net/download/weixin_46098676/20387699

码农公寓

1、HTML概述

2、 HTML的语法规范

例一

例二

相关文章