其他分享
首页 > 其他分享> > Web前端~~~~HTML(1)

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 &copy; 啦啦商城  版权所有
				</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