课堂笔记HTML入门笔记

三、常用标签

1.基本标签

标签	含义	说明
br	换行标签	属于非关闭性标签
p	段落标签	属于关闭性标签，属于块状标签，前后的段落之间有明显的距离
h1.h2…h6	标题标签	按照h1到h6逐渐表小，属于块级标签，并且文本会加粗显示
pre	预格式化标签	保留编码时的格式
div	分区标签	常用作容器来使用，一般用于页面布局划分，块级标签
span	范围标签	默认情况没有任何效果，一般用来设置行类的格式
ol、li	有序列表	有顺序的项目列表
ul、li	无序列表	无顺序的项目列表
dl、dt、dd	定义列表	对术语、图片进行描述和定义的列表
hr	水平线标签	属于非关闭性标签，属于块级标签
img	图像标签	属于非关闭性标签，属于块级标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hello<br>html

	<p>
		HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
	</p>
	
	<p>
		超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
	</p>
	<hr>


	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h4>四级标题</h4>
	<h6>六级标题</h6>


</body>
</html>

案例：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<pre>
		HTML从入门到精通
		学员：张杰
	</pre>
	<hr>

	<div style="width:400px;height: 100px;background:red">导航部分</div>
	<div style="width:400px;height: 500px;background:yellow">正文部分</div>
	<div style="width:400px;height: 100px;background:blue">版权部分</div>
	<hr>

	iphone XR,不要8888,不要1888,只要<span style="font-size:50px;color:red">98元</span>


</body>
</html>

案例：
在这里插入图片描述

1.1有序列表

ol：ordered list

li：list item

默认情况下，使用阿拉伯数字，从1开始标记，可以通过属性进行修改

type属性：是设置列表片前的符号标记，取值，数字1（默认）；字母a或A，罗马数字i或I
start属性：是设置起始值，值必须是一个数字

1.2无序列表

ul：unordered list

li：list item

默认使用时为实心圆作为服务好标记，可以通过属性进行修改

type属性：是设置列表片前的符号标记，取值，disc实心圆（默认）、circle空心圆、square正方形、none不显示符号

1.3定义列表

dl：definition list

dt：definition title

dd：definition description

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="1" start="5">
		<li>吃鸡</li>
		<li>王者荣耀</li>
		<li>LOL</li>
		<li>WOW</li>
	</ol>
	<hr>

	<h3>可爱的学生们</h3>
	<ul type="disc">
		<li>张三</li>
		<li>学委</li>
		<li>团支书</li>
	</ul>
	<hr>

	<h3>术语的解释</h3>
	<dl>
		<dt>LOL</dt>
		<dd>它是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd>
		<dd>可以分为PC端和移动端</dd>
		<dt>HTML</dt>
		<dd>是一种用来制作网页的标记语音</dd>
		<dt>JAVA</dt>
		<dd>是一种跨平台编辑语言</dd>
	</dl>
</body>
</html>

案例：
在这里插入图片描述

1.4水平线标签

hr：horizontal

常用的属性：

color颜色

两种写法：

- 第一种
- - 颜色名称：如 red、green、blue、white、pink、orange等
  - 16进制的RGB：Red Green Blue 用法：#RRBGGBB 每种颜色的取值范围0-255，转换为16进制00-FF
  - eg：如何去写？： #FF0000 红色、#00FF00 绿色、#0000FF 蓝色、#000000 黑色、#FFFFFF 白色、#CCCCCC 灰色、#FF7300 橙色
- 第二种
- - size：粗细、数值
  - width：宽度

有两种写法：

像素：绝对值（固定值）

百分比：相对值，相对于该标签所在的父容器的宽度的百分比

- align对齐
  - 取值：center默认 left right

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="#00FF00">
	<hr size="9px" color="yellow">
	<hr color="red" width="400px">
	<hr color="blue" width="50%" size="10">
	<div style="width:600px;height:300px;background:#cccccc">
		<hr color="red" width="50%" align="left">
	</div>
</body>
</html>

案例：
在这里插入图片描述

1.5图像标签

img：image

常见的图片格式：.jpg .png .gif .bmp

常见属性：

src：source指定图片的路径（来源），必选参数

1、如果图片与html源代码在同一个文件夹中，可以直接书写图片的名称

2、习惯上，会将多个图片存放到一个单独的文件夹中，如project\image,此时，需要在图片名称的前面添加路径

路径的分类：

相对路径；

1、表示： ./当前路径；

2、…/当前位置的上一级文件夹；

3、提示：…/image
alt：当图片无法正常显示时提示的信息
title：当鼠标停留在图片上时显示的提示信息
width/height：

1、设置图片的宽度和高度；

2、默认情况下原始尺寸显示；

3、如果只设置其中一个，则另一个按比例自动缩放；

4、如果同时设置宽和高，可能会导致图片变形

5、有两种写法：
- 像素：绝对值（固定值）
- 百分比：相对值，相对于该标签所在的父容器的宽度的百分比

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物：，它的名字叫企鹅">
	<hr>

	<img src="../img/mac.jpg" width="400px" height="100px">
	<hr>

	<img src="../img/mac.jpg" width="50%">
	<hr>

	<div style="width:800px;height:800px;background: red;">
		<img src="../img/mac.jpg" width="50%">
	
	</div>
</body>
</html>

案例：
在这里插入图片描述

2.其他标签

标签	含义	说明
i	斜体	italic
em	强调的内容	在浏览器中显示时一般为斜体
address	地址	在浏览器中显示时一般为斜体，属于块级标签
b	加粗	bold
strong	强调的内容	在浏览器中显示时一般为加粗现象
del	删除线	delete
ins	下划线
sub	下标
sup	上标
bdo	设置文本的方向	通过属性dir=“ltr”(left to right) “rtl”(right to left)从右到左
abbr	设置文字缩写	通过title属性设置当前鼠标停留在文字上时显示的提示信息（span标签也可以实现）
small	相对于当前其他文本的字号减小一号
big	相对于当前基他文本的字号增大一号

我们要说这些标签呐？是为了更好地语义化

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <i>to</i> HTML!
	<hr>
	welcome <em>to</em> HTML!
	<hr>
	welcome to <address>上海市南京东路</address>
	<hr>
	HTML从<b>入门</b>到精通!
	<br>
	HTML从<strong>入门</strong>到精通!
	<hr>
	原价：<del>188元</del>，优惠价，<span style="font-size:40px;color:red">98元</span>
	<br>
	主讲人:<ins>Hector</ins>
	<hr>
	水的分子表达式：H<sub>2</sub>O
	<br>
	2<sup>3</sup>8
	<hr>

	<bdo dir="rtl">welcome to html!</bdo>
	<br>
	<bdo dir="rtl">上海自来水来自海上</bdo>
	<br>

	<abbr title="Hyper Text Language">HTML</abbr>
	<hr>
	<span title="Hyper Text Language">HTML</span>
	<hr>

	HTML从<small>入门</small>到精通
	<br>
	HTML从<big>入门</big>到精通

</body>
</html>

案例：
在这里插入图片描述

3.头部标签

meta定义网页的摘要信息，如字符编码，关键字、描述、作者等信息
title定义网页的标题
style定义内部的CSS样式
link引用外部的CSS样式
script定义或引用脚本
base定义基础路径

什么是基础路径？：就是默认以当前页面文件的所在位置为相对路径的参照

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 设置字符编码 -->
	<meta charset="UTF-8">
	<!-- 设置网页关键字 SEO 网站优化 -->
	<meta name="keywords" content="IT教育,Java开发,WEB前端,Python,Andorid开发....">
	<!-- 设置网页的描述 -->
	<meta name="description" content="做专业的IT教育....">
	<!-- 设置网站的作者 -->
	<meta name="author" content="Hector">
	<!-- 设置网站的跳转 -->
	<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->
	<title>Document</title>
	<style>
		body{
			color:red;
		}

	</style>
	<!-- 引用外部的CSS样式 -->
	<link rel="stylesheet" href="CSS文件的路径">
	<!-- 定义或引用脚本 -->
	<!--<script>
		alert("哈哈");
	</script>-->
	<!-- 定义基础路径 -->
	<base href="../img/">
</head>
<body>
	IT交易，全国计算机等级考试-Hector
	<img src="heihei.gif" alt="">
	<hr>
	<img src="qq.jpg" alt="">
</body>
</html>

案例：
在这里插入图片描述

由于此平台刚刚使用，对于很多东西都不熟悉，所以前面的内容有很多图片都看不到，所以，在下次发布的时候，我会将前面的两章内容一起发布，这次就先发第三章的内容，若我发布的东西，大家有什么意见的话，可以提出，我会加以改正，谢谢！

来源：CSDN

作者：ChengMeng11

链接：https://blog.csdn.net/ChengMeng11/article/details/104580305

标签

科普