原创

html的学习

一、 HTML介绍

  1. 什么是HTML? 超文本:比普通文本功能更加强大 标记语言:使用一组标签对内容进行描述的一门语言,它不是变成语言。
  2. 为什么要学习HTML?
  3. HTML怎么使用? 语法和规范: ① 所有的html文件后缀名是以.html或者htm结尾的,建议使用,html结尾。 ② 整个html文件分别由头部分和体部分 ③ html标签都是由开始标签和结束标签组成(
    )没有内容,直接在开始位置结束。TIPS:例如表示开始,表示结。 ④ html标签忽略大小写,建议大家使用小写。
  4. HTML相关标签的学习 4.1标题标签
  1.  标题标签使用<hn></hn>(n从1->6逐渐变小)
    
  2.  特点:加粗加黑显示,单独占用一行。与其他行有一定的行间距。
     TIPS:如何注释:<!--标题标签-->
    
    4.2水平线标签: <hr/>标签在HTML页面中创建一条水平分割线,用于定义内容中的主题变化。 size属性:水平线的高度,单位像素。 noshade属性:没有阴影,取值:noshade。表示显示纯色。 例如:
<!--水平线-->
		<hr/>
			<hr size =”5”/>
<hr noshade =”noshade”/>

4.3段落标签 段落标签:<p>(加上一段文字)</p> 4.4字体标签 在一段字体前面加上<font></font>

<body>
	<font color="darkred" size ="1" face="楷体">今天天气真好</font><br /> 
	<font color="darkred" size ="2"face="宋体">今天天气真好</font> <br /> 
	<font color="darkred" size ="3">今天天气真好</font> <br /> 
	<font color="darkred" size ="4">今天天气真好</font> <br /> 
</body>
	TIPS:<b>(加粗的字体)</b>        <i>(需要斜体的字体)</i>
		其中<br />可视为换行

案例一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站信息显示页面</title>
	</head>
	<body>
		<!--创建一个标签-->
		<h2>公司简介</h2>
		<!--创建一条横线-->
		<hr />
		<!--创建段落-->
		<p>
		<font size="5" color="red" face="楷体">"***企业集团"</font>是由***一手创立的。里面成员主要有<b>***和***。</b>
		</p>
		<p>
		创建原因主要是<i>教育</i>。
		</p>
	</body

二、 网站图片信息显示页面

  1. 图片标签 单独使用没有任何效果 图片的位置信息:src 案例:
<body>
	<img src ='../../img/logo2.png' width="260px"height="45px" alt="logo图片"/>
	<img src="../../img/课堂演示图片汇总/header.png" width="300px" height="45px" alt ="header">
</body>
	TIPS:①其中src之后的图片需要从对应的文件夹中复制到本项目中的img文件中,且输入src可自动提供相关的图片显示。src:指的是图片显示的路径(位置)
		绝对路径:E:\Users\ThinkPad\Desktop\WEB01_HTML\资料\WEB01\image
		相对路径:
			①同一级:直接写文件名称或者./文件名称
			②上一级:../文件名称
			③下一级:写上目录名称/文件名称  
②之后需要规定width 和height的属性,其为像素。
③alt之后的属性,表示当图片无法正常显示之后,浏览器所做的页面显示,也是给程序员的一种提示。
  1. 列表标签

    ①有序列表:
    	<ol type="各种样式如罗马字符,阿拉伯数字等" 
    	 start="开始的顺序可以从234等排序" reversed="reversed"
    	 (倒序)>
    		<li></li>
    	</ol>
    
例如:
<body>
		<ol start="5" reversed="reversed" type="I">
			<li>CSDN</li>
			<li>百度</li>
			<li>京东</li>
		</ol>
		</body>
	②无序列表:
		<ul type="方框 圆圈等">
			<li></li>
		</ul>
例如:
<body>
	<ul type ="square">
	<li>CSDN</li>
	<li>百度</li>
	<li>京东</li>
	</ul>
	</body>
  1. 超链接标签

    <a href="" target=""></a>
    href:指定跳转的位置
    target:指定跳转页面显示的位置
    (取值:_self 、_blank ,self表示只在自身页面发生跳转,
    blank表示重新跳转一个页面开始进行跳转)
    
例如:
<body>
	<ul>
		<li><a href="../案例一:网站信息显示页面/网站信息显示页面.html">阿里巴巴</a></li>
		<li><a href="http://www.baidu.com">huawei</a></li>
		<li><a href="#">tecent</a></li>
		<li><a href="#">iflytel</a></li>
	</ul>
	</body>

三、 网站首页显示页面

  1. 表格标签

表格标签使用的是<table></table>

<table> 
<tr>
	<td></td>
</tr>
</table>

TIPS:<tr></tr>表示行,<td></td>表示列 案例:

<body>
		<!--cellspacing:设置边框与边框的间距。cellpadding:设置边框与内容的间距-->
		<table border="1px" width="450px" height="150px" align="center" bgcolor="red" cellpadding="0px" cellspacing="0px">
			<tr height="50px" bgcolor="yellow">
				<td>11</td>
				<td><font size="6">12</font></td>
				<td>13</td>				
			</tr>
				<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>				
			</tr>
				<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>				
			</tr>
		</table>
	</body>

效果如下:

11 12 13
21 22 23
31 32 33

TIPS:每个单位需要携带单位即像素,且border表示设置边框将内容包裹住,width表示表格的宽度,height表示高度。aligh表示在网页的位置。如center居中,bgcolor表示背景颜色。cellspacing:设置边框与边框的间距。cellpadding:设置边框与内容的间距。tr 行中也可以设置单独设置属性。

  1. 表格标签的跨行跨列操作

    跨行:rowspan 跨列:colspan 案例:

<body>
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellspacing="0px">
			<tr>
				<td colspan="2" align="center">
					<img src="../../img/课堂演示图片汇总/1.jpg" height="100%" width="100%" />
				</td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">
					<table border="1px" align="center" width="100%" height="100%" >
						<tr>
							<td>11</td>
							<td>12</td>
							<td>13</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
							<td>23</td>
						</tr>
						<tr>
							<td>31</td>
							<td>32</td>
							<td>33</td>
						</tr>
					</table>
				</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>			
			</tr>
		</table>
	</body>

图示: TIPS:①height=“100%” width=”100%” 表示该内容占整个表格的百分之百。②写表格的时候,养成习惯。一行一列全部写出来。其次,跨行跨列之后需要删除被占用的表格。 3. 案例网站首页的分析 第一步:创建一个八行一列的表格 第二步:实现第一行(镶嵌一个一行三列的表格,然后分别对单元格的内容进行填充) 第三步:实现第二行(暂时使用字体标签结合超链接标签完成导航栏,需要设置当前单元格的背景为黑色) 第四步:实现第三行(直接放置一张图片) 第五步:实现第四行(镶嵌一个三行七列的表格) 第六步:实现第五行(放置一章广告图片) 第七步:实现第六行(复制第四行代码) 第八步:实现第七行(放置一张广告图片) 第九步:实现第八行(使用字体标签和超链接标签完成友情链接和版权信息)

四、 网站后台系统页面显示 1.框架结构标签(<frameset>)

案例一:<html>
	<head>
		<meta charset="UTF-8">
		<title>框架集标签</title>
	</head>
		<frameset cols="25%,*" >
		<frame src="left.html" />	
		<frame src="right.html" />
		</frameset>

</html>

TIPS:①其中body部分需要删除。其次需要在同一目录新建两个html文件,分别为left.html和right.html。左右两个需要用到body部分。② cols部分只使用一个引号,其次,后面的✳号可以自动计算。即所占百分比剩余的部分。

案例二:
第一部分:主页面部分
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站系统后台显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,* ">
			<frame src="left.html" />
			<frame name ="right" />
		</frameset>
	</frameset>
</html>
第二部分:
TOP部分:
<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p align="center"><font color="burlywood" size="5">欢迎进入**管理系统</font></p>
	</body>
LEFT部分:
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">成员信息</a><br />
		<a href="#">成员管理</a><br />
		<a href="#">活动详情</a><br />
		<a href="#">创办信息</a><br />
	</body>
</html>
RIGHT部分:
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr>
				<td width="50%">家庭地位</td>
				<td width="50%">用户名称</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
			</tr>
		</table>
	</body>
</html>

页面详情: TIPS:<frame name ="right" /> 右部门一开始进行隐藏。且注意首页部门划分三个方面,先分上下两个界面,再分下部分的左右界面。

HTML
  • 作者:桂大叔 (联系作者)
  • 发表时间:2021-05-26 21:33
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 公众号转载:请在文末添加作者公众号二维码
  • 评论