HTML基础一（HTML）_河北师范大学官网html模板-CSDN博客

本文链接：https://blog.csdn.net/qq_41496127/article/details/88194916

1.HTML的基本结构：

HTML不是一种编程语言，而是一种标记语言，是一套标签，HTML使用标记标签来描述网页。
（1）标签又分为单标签和双标签：
-----单标签：如下方第四行的meta标签，变量写在尖括号内，在最后加上“/”
-----双标签：必须成对使用，如下方的html、head和body，开始标签和结束标签之间要存放一定的内容，代表标签作用范围，结束标签前要加上“/”

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>网页名</title>
	</head>
	<body>
		Hello World!
	</body>
</html>

（2）在HTML中html、head和body标签必不可少
（3）标签与标签之间是可以嵌套的，但先后书序必须保持一致，内外关系是一定的
（4）可以通过“html + Tab键”快速创建html基本格式
（5）html标签可以拥有属性，帮助标签实现更多功能：
-----属性书写格式：属性名=“变量”
-----属性书写位置：单标签写在尖括号内标签后，双标签写在开始标签的尖括号内标签后
-----例如body标签的bgcolor属性可以改变规定文档的背景颜色，text属性可以改变规定文档中所有文本的颜色

2.HTML的几个常用基础标签：

<html></html>：双标签，是HTML网页文件的开始和结束，分别位于文件的开始和结束位置
<head></head>：双标签，指明HTML网页文件的头部，嵌套于html标签内，位于body标签之上
<title></title>：双标签，在浏览器标题栏显示的文档标题，嵌套于head标签内
<meta>：单标签，定义页面有关信息，如页面编码、关键词、页面描述，必须在head标签内，利用属性值进行设置
<body></body>：双标签，指明HTML网页文件体部，嵌套于html标签内，位于head标签之下
<h1></h1> & <h2></h2> & <h3></h3> & <h4></h4> & <h5></h5> & <h6></h6>：双标签，用于写标题，从左到右字体逐渐减小
<p></p>：双标签，开启一个新的段落并在其前后创建一些空白
<br/>：单标签，实现换行功能
<img/>：单标签，实现在网页中显示一张图片
<a></a>：双标签，从一个网页指向一个目标的链接关系

3.图片标签：< img/ >

（1）img的属性：
src属性指明存储图像的位置，即图片路径
alt属性为图片添加替换文件，就是当图片丢失或者还未加载出来时显示的文本
（2）路径：
绝对路径：
-----本机绝对路径是从盘符开始的完整路径
-----网络绝对路径是网络的可访问地址
相对路径：（规则）
-----图片和网页在同级目录 src="·/图片名"
-----图片在网页的下一级目录 src="目录名称/图片名"
-----图片在网页的上一级（上上一级）目录 src="··/图片名"（src="··/··/图片名"）

4.超链接：< a >< /a >

（1）属性：
href：规定链接目标，即链接的目标URL
target：在何处打开目标（_blank：在新窗口打开； _self：在当前窗口打开（默认））
（2）语法：

<body>	
	以文字作为超链接对象且默认在当前页面显示
	<a href = "http://www.hebtu.edu.cn/">
		<h6>你好，河北师大</h6>
	</a>
	<br/>
	以图片作为超链接对象且在新的页面显示
	<a href = "http://www.hebtu.edu.cn/" target = "_blank">
		<img src ="Hebeishida.jpg" alt = "" />
	</a>
</body>

（3）调用邮箱：

<a href="mailto:767022537@qq.com">点击即可调用邮箱</a>

5.无序列表：< ul >< li >…< /li >< /ul >（unolder line）

（1）无序列表使用 < ul > 标签，每个列表项使用 < li >标签，且均为双标签
（2）每个列表项默认使用粗体圆点标记
（3）列表项内部可以使用段落、换行符、图片、链接以及其他列表等
（4）语法：

<body>
	<h4>资源与环境科学学院</h4>
	<ul>
		<li>地理科学</li>
		<li>地理信息科学</li>
		<li>人文地理与城乡规划</li>
		<li>环境科学</li>
	</ul>
</body>

（5）页面效果：
在这里插入图片描述

6.有序列表：< ol >< li >…< /li >< /ol >（older line）

（1）无序列表使用 < ol > 标签，每个列表项使用 < li >标签，且均为双标签
（2）每个列表项默认使用阿拉伯数字标记
（3）列表项内部可以使用段落、换行符、图片、链接以及其他列表等
（4）语法：

<body>
	<h4>资源与环境科学学院</h4>
	<ol>
		<li>地理科学</li>
		<li>地理信息科学</li>
		<li>人文地理与城乡规划</li>
		<li>环境科学</li>
	</ol>
</body>

（5）页面效果：
在这里插入图片描述

7.注意细节：

（1）使用Sublime Text时如果标签没有彩色显示说明文件后缀不是 html 或 htm ，在保存文件是要加上其中之一
（2）文件名中不要包含特殊符号，比如空格、￥等，不使用中文
（3）所有的标签必须关闭，双标签必须要有开始标签和结束标签
（4）所有标签和其属性的名字都必须使用小写
（5）所有的标签都必须合理嵌套
（6）所有的属性必须赋值，所有的属性值必须用引号括起来
（7）大部分标签都可以通过 “标签名 + Tab键” 迅速打出
（8）超链接不是对已有内容设置超链接，而是新建标签内的文字或图片并为其设置超链接，不要曲解