前端——HTML

最新推荐文章于 2023-12-05 01:36:46 发布

LiLiLiLaLa

最新推荐文章于 2023-12-05 01:36:46 发布

阅读量8.1k

点赞数 7

分类专栏：前端文章标签： HTML标签 HTML语法规范 HTML标签使用及示例

本文链接：https://blog.csdn.net/LiLiLiLaLa/article/details/89340476

版权

本文详细介绍了前端开发中的HTML基础知识，包括HTML标签的使用、语法规范和语义化。内容涵盖HTML简介、文本标签、头部标签、注释、语义化、文档类型、图像、链接、表单元素等，旨在帮助读者全面掌握HTML网页制作的基本技能。

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

1.前端三门技术

学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：

HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等
CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等
JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等

使用工具：HBuilder

首先来写一个简单的HTML代码：

<html>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph</p>
	</body>
</html>

在这里插入图片描述
通过如上可以发现，HTML是网页内容的具体载体。接下来我们写一个CSS代码：

<html>
	<head>
		<meta charset="utf-8">
		<style type = "text/css">
			body {
   color:red}
			h1 {
   color:#00ff00}
			p.ex {
   color:rgb(0,0,225)}
		</style>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My First Paragraph.在body选择器中定义了本页面的默认文本颜色。</p>
		<p class = "ex">该段落定义了class = "ex"，使得段落中的文本是蓝色的。</p>
	</body>
</html>

在这里插入图片描述
第一个JavaScript代码如下：

<html>
	<body>
		
		<script type = "text/javascript">
			document.write("Hello my first JavaScript code!")
		</script>
		
	</body>
</html>

在这里插入图片描述

2.HTML标签（上）

2.1.HTML简介

2.1.1.HTML简介

HTML是由于创建网页的语言。我们通过使用HTML标记标签创建HTML文档来创建网页。HTML代表超文本标记语言，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如<html>、<body>，标签通常成对出现，例如<html>和</html>。
一对中的第一个标签是开始标签，第二个是结束标签，我们也可以称之为起始标签和闭合标签。

2.1.2.HTML元素

I like <code>web</code> and CSS.

起始标签是<code>，结束标签是</code>。标签之间是元素内容，即web，标签和内容一起形成代码元素。

元素告诉浏览器您的内容。元素的效果应用于元素内容，每个HTML标签都有不同的特定的含义
元素名称不区分大小写。HTML标签不区分大小写，浏览器会识别<code>和<CODE>，甚至能识别<CoDe>，<H1>和<h1>是一样的，但是建议小写
HTML定义了在HTML文档中实现各种角色的不同类型元素。

2.1.3.HTML文件结构

一个HTML文件是有自己的固定结构的

<html>
	<head>...</head>
	<body>...</body>
</html>

代码讲解：

<html></html>成为根标签，所有的网页标签都在<html></html>中
<head></head>标签由于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来

2.1.4.HTML注释

HTML注释：代码注释不仅能方便程序员回忆代码用途明晰思路，也可以让其他人快速读懂你的代码，方便合作开发，语法如下：

<!--注释内容-->

2.1.5.HTML语义化

语义化：通俗的说就是明白每个标签的用途（在什么情况下使用这个标签合适），你如网页的文章标题就得用标题标签。
语义化的作用：

更容易被搜索引擎收录
更容易让屏幕阅读器读出内容

2.1.6.HTML文档类型

\<!DOCTYPE>

作用：帮助浏览器正确地显示页面

Web世界存在许多不同的文档，只要了解文档类型，浏览器才能正确地显示文档。HTML也有许多不同的版本，只有明白页面中使用的确切的HTML版本，浏览器才能完全正确地显示出HTML页面，这就是<!DOCTYPE>的用处。它不是HTML标签，而是为浏览器提供一种信息。注意：

必须放在HTML文档的第一行
声明不是HTML标签

常用声明如下：

HTML 5：

<!DOCTYPE html>

HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML乱码解决：当页面出现乱码时，在在<head></head>标签之间添加:“\<meta charset="utf-8">”

2.2.HTML文本标签

2.2.1.段落标签<p>

如果想在网页上显示文章，这是便需要<p>标签了，把文章的段落放到<p>标签中，语法如下：

<p>段落文本</p>
浏览器会自动地在段落前后添加空行
不要忘记结束标签，即使忘记结束标签，大多数浏览器也会正确的将HTML显示出来，但是还是不推荐忘记结束标签
使用文本标签示例代码如下：

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>这是段落一</p>
		<p>这是段落二</p>
		<p>这是段落三</p>
	</body>
</html>

在这里插入图片描述
!!!注意：

按照规范，不允许省略结束标签，防止出现意想不到的结果或错误
对于HTML，无法通过在HTML代码中添加额外的空格或换行改变输出结果，当页面显示时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格，示例如下：

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		春眠不觉晓
		    处处闻啼鸟
		    
		    夜来风雨声
		     花落知多少
	</body>
</html>

在这里插入图片描述

2.2.2.标题标签<hx>

在HTML文档中，标题（Heading）很重要，标题是通过<h1>到<h6>等标签进行定义的，\<h1>定义最大标题，\<h6>定义最小标题，观察各级标签：

<html>
	<body>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
	</body>
</html>

在这里插入图片描述
!!!注意：

浏览器会自动的在标签后添加空行
默认情况下，HTML会自动的在块级元素前后添加一个额外的空行，比如段落、标题元素前后
确保将HTML heading标签只用于标题，不仅仅是为了产生粗体或大号的文本而使用标题，应该将h1作为最主标题，其后依次类推

2.2.3.强调标签<em>、<strong>

有了段落标签和标题，现在如果想在一段话中特别强调某几个字，这时可以使用\<em>和\<strong>标签，但是而二者在强调的语气上存在区别：

<em>：表示强调，在浏览器中用斜体表示
<strong>：表示更强烈的强调，在浏览器中用加粗表示

使用标签范例：

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<em>em标签</em>
		<strong>strong标签</strong>
	</body>
</html>

在这里插入图片描述
<em>、<strong>和<span>的区别：

<em>和<strong>标签是为了强调一段话中的关键字时使用，他们的语义是强调
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css样式

2.2.4.引用标签<q>、<blockquote>

2.2.4.1.短引用

<q>用于短引用
语法：\<q>引用文本\</q>
浏览器通常会为<q>元素包围""
这里的<q>标签真正关键地不是它默认给元素包围双引号，如果仅仅是如此完全可以手动从键盘输入，真正关键的是他的语义：引入别人的话

使用范例：

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<!--浏览器通常会在q元素周围包围引号-->
		<p>以下为文本引用<q>引用文本</q></p>
	</body>
</html>

在这里插入图片描述

2.2.4.2.长引用

<blockquote>用于长引用
语法：\<blockquote>引用文本\</blockquote>
浏览器对\<blockquote>标签的解析是缩进样式

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>以下为百度百科对于JavaScript的定义 <blockquote>JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</blockquote></p>
	</body>
</html>

在这里插入图片描述

2.2.5.换行标签与分割线标签

2.2.5.1.换行标签

如果希望不产生一个新的段落的情况下进行换行，请使用\<br/>标签，<br/>标签作用相当于world文档中的回车，使用范例如下：

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			To break<br/>lines<br/>in a
		</p>
	</body>
</html>

在这里插入图片描述
!!!注意：是<br>还是<br/>？
这二者很相似，但是在XHTML、XML以及未来的HTML版本中，不允许使用没有结束标签（闭合标签）的HTML元素，即使使用<br>在所有浏览器中都没有显示问题，但是使用\<br/>是更长远的保障

2.2.5.2.分割线标签

\<hr/>标签和\<br>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。使用范例如下：

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			Java从<br/>入门
			<hr/>
			到精通
		</p>
	</body>
</html>

在这里插入图片描述
\<hr/>标签在浏览器的默认样式线条比较粗，颜色为灰色，可能会觉得不够美观，在学习CSS后可以对其进行修改。

2.2.6.特殊字符

空格： 
注意：“;”必不可少

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			春眠不觉晓<br/>
			&nbsp;&nbsp;处处闻啼鸟<br/>
		</p>
	</body>
</html>

在这里插入图片描述
其他特殊字符：

属性	显示结果	描述
®	®	已注册
©	©	版权
&trade	™	商标

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			注册:&reg;<br/>
			版权:&copy;<br/>
			商标:&trade;<br/>
		</p>
	</body>
</html>

在这里插入图片描述

2.3.address标签

address标签，为网页加入地址信息
语法：\<address>地址信息\</address>
在浏览器显示样式为斜体，如果不喜欢斜体 -，可以在后续学习中对其进行修改

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<address>陕西省西安市XX区XX号

最低0.47元/天解锁文章

LiLiLiLaLa

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
14
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录