HTML基础标签（一）

最新推荐文章于 2021-06-24 15:22:18 发布

im୧

最新推荐文章于 2021-06-24 15:22:18 发布

阅读量126

点赞数 1

分类专栏：笔记 html 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_53568450/article/details/115406256

版权

笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的工作原理、主要结构和常用标签。内容涵盖标题、段落、换行、文本格式化、文本样式、文本语义、特殊字符、下标、图像、超链接、页面背景设置、滚动标签等，旨在帮助初学者掌握HTML的基本用法。

摘要由CSDN通过智能技术生成

主要对HTML的基础知识和初学常用的标签进行总结。

1.HTML介绍

网站中的一页我们一般称之为网页，以.html或.htm结尾，故称其为HTML文件。
HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是超文本标记语言，是构成Web页面的基本元素,是一种规范,一种标准。 HTML不是一种编程语言,而是一种描述性的标记语言。
我们现在用的是2014年发布的HTML5。

2.HTML工作原理

HTML是部署在服务器上的文本文件；
根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML；
浏览器解释执行HTML，从而显示内容；
HTML部署在服务器上，运行在浏览器上。

3.HTML主要结构

代码如下：

<!DOCTYPE html> <!--于文档中的最前面的位置，处于 <html> 标签之前，不是 HTML 标签，它是文档类型声明标签。-->
<html lang="en"> <!--zh-CN定义采用语言为中文-->//HTML 文件开始
<head>//文件头开始
    <meta charset="UTF-8"> <!--必须写.采取UTE-8来保存文字-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //用于定义页面元信息
    <title>标题</title>
</head>//文件头结束
<body>//文件体开始
	...
</body>//文件体结束
</html>//HTML 文件结束

4.常用标签

4.1标题标签

<h#>…</h#>；
#表示从1、2、3、4、5、6；
标题级别h1最大，依次减小，h6最小

<h1>内容</h1>
	...
<h6>内容</h6>

标题元素让文本以醒目的方式显示，字体加粗变大，往往用于文章的标题

4.2段落标签

如果有大段文字的情况下,用p标签进行分段

<p>
    第一段文字.....
</p>
<p>
    第二段文字.....
</p>

4.3换行标签

<br/>

单标签，可以省略 /

4.4分割线

<hr color="颜色" size="粗细" width="宽度"/>

4.5文本格式化标签

<b>加粗</b>
<strong>加粗、并且具有语义化效果</strong>
<i>倾斜</i>
<em>倾斜、并且具有语义化效果</em>
<del>倾斜</del>
<em>倾斜、并且具有语义化效果</em>
<u>下划线</u>
<ins>下划线</ins>  推荐使用

4.6文本样式标签

<font size="字体大小" color="字体颜色" face="字形"> 内容 </font>  
可以设置内容的字体大小、颜色、字形

4.7文本语义标签

(1)高亮显示

   <mark> 内容 </mark>

(2)引用标签

   <cite> 内容 </cite>

4.8特殊字符

	(1)空格：&nbsp;     --  浏览器不识别空格字符，因此需要使用&nbsp;
	
	(2)小于： &lt;
	
	(3)大于：&gt;

	(4)版权符号：&copy;
	
	(5)注册商标：&reg;
	
	(6)摄氏温度：&deg;
	
	(7)乘号：&times;
	
	(8)除号：&divide;
	
	(9)平方：&sup2;
	
	(10)立方：&sup3;

4.9下标标签

<sub> 内容 </sub>

4.10图像标签

<img src="图像文件全名" />

例如：

<img src="./images/6.png" />

路径：

(1)相对路径：从文件当前位置开始的路径

例如：

   demo/004.html

(2)绝对路径：从磁盘根目录开始的路径

例如：

   E:\\前端\\2021-4-3\\demo\\004.html`、

反斜杠(’’)：在windows操作系统中以双反斜杠(’\’)作为路径分隔符

斜杠(’/’)：是Linux操作系统下的路径分隔符

 E:/前端/2021-4-3/demo/004.html

‘./’ ：当前目录(当前文件夹)

图像标签的属性：

 <img src="图像的名称" alt="图像加载异常时的提示信息" 
  width="宽度" height="高度" border="边框线" 
   vspace="垂直间距" hspace="水平间距"/>

4.11超链接标签

<a></a> ,可以进行页面跳转

(1)文字超链接：

   <a href="网页的地址"> 文字 </a>

(2)图像超链接

   <a href="网页的地址">
		<img src="图像名" />
	</a>

4.12设置页面背景

(1)设置页面背景颜色:

<body bgcolor="颜色值">

(2)设置背景图像:

  <body background="图像名">

4.13滚动标签

(1)图像滚动：

 <marquee behavior="500" direction="down">
	<img src="./images/7.png" width="500" height="280">
 </marquee>

direction：表示滚动的方向，值可以是left，right，up，down，默认为left
behavior：表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop：表示循环的次数，值是正整数，默认为无限循环 scrollamount：表示运动速度，值是正整数，默认为6
scrolldelay：表示停顿时间，值是正整数，默认为0，单位是毫秒

(2)文字滚动

 <marquee behavior="500" direction="down">
	 <font color="" size="" face="">滚动的文字</font>
 </marquee>

im୧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签（一）

HTML基础知识点总结1.HTML介绍2.HTML工作原理3.HTML主要结构4.常用标签4.1标题标签4.2段落标签4.3换行标签4.4文本格式化标签如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结创建一个表格设定内容居中、居左、居右主要对HTML的基础知识和初学常用的标签进行总结。1.HTML介绍网站中的一页我们一般称之为网页，以.html
复制链接

扫一扫