HTML常用标签(上)

简介: HTML常用标签(上)

1.HTML的语法规范


HTML标签是由尖括号包围的关键词,例如<html>

HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。

有些特殊的标签必须是单个标签,例如<br />,我们称为单标签


标签的关系


双标签关系可以分为两类:包含关系并列关系

1包含关系
2<head>
3    <title> </title>
4</head>
5
6并列关系
7<haed> </head>
8<body> </body>

2.HTML基本结构标签


每个网页都会有一个基本的结构标签(也称为骨架标签),如下所示。页面内容也是在这些基本标签上书写的。HTML页面也称为HTML文档

<html></html>:HTML标签,页面中最大的标签,称为根标签。

<head></head>: 文档的头部,注意在head标签中必须要设置的标签是title。

<title></title>: 文档的标题,让页面拥有一个属于自己的网页标题。

<body></body>: 元素包含文档的所有内容,页面内容基本都是放在body里面的。


1<html>
2    <head>
3        <title>我的第一个页面</title>
4    </head>
5    <body>
6        白夜追凶
7    </body>
8</html>


3.开发工具


输入!按下Tab键就会生成页面骨架结构。

ctrl + /:注释与取消注释!


4.HTML常用标签


<!DOCTYPE>标签:文档类型的声明标签,作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE>声明位于文档中最前面的位置,处于<html>标签之前。<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。


1<!DOCTYPE html>  // 当前页面采用的是HTML5版本来显示网页!


lang语言:用来定义当前文档显示的语言。en定义语言为英语;zh-CN定义语言为中文。其实,对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文charset字符集:字符集是多个字符的集合,以便计算机能够识别和存储各种文字。在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。charset常用的值有;GB2312、BIG5、GBK、UTF-8等,其中UTF-8被称为万国码,基本包括了全世界所有国家需要用到的字符。


1<meta charset="UTF-8 />

4.1 标签语义


标签的含义,重点是记住每个标签的语义,即这个标签是干嘛的。根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更加清晰


4.2 标题标签<h1>-<h6>[重要]


为了使网页更加具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即<h1>-<h6>。


1<h1>我是一级标题</h1>   // 单词head的缩写,意思是头部、标题。


h标签语义:作为标题使用,并且依据重要性递减。

特点:a.加了标题的文字会变的加粗,字号也会依次变大。b.一个标题独占一行。


1<h1>标题一共六级选</h1>
2<h2>文字加粗一行显</h2>
3<h3>从大到小依次减</h3>
4<h4>从重到轻随之变</h4>
5<h5>语法规范书写后</h5>
6<h6>具体效果刷新见</h6>

4.3 段落和换行标签[重要]


在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分成若干段落。


1<p>我是一个段落标签</p>


p标签语义:可以把HTML文档分割成若干个段落。

特点

a.文本在一个段落中会根据浏览器窗口的大小自动换行。b.段落之间保留空隙。

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />


1<br />  // break的缩写,意思是打断、换行。


br标签语义:强制换行。

特点

a.<br />是一个单标签。

b.<br />标签只是简单的开始新的一行,与段落不一样,段落之间会插入一下垂直的间距。


4.4 文本格式化标签


在网页中,有时候需要为文字设置粗体、斜体或下划线等效果,这时候就需要用到HTML中的文本格式化标签,使得文字以特殊的方式显示。

文本格式化标签语义:突出重要性,比普通文字更重要!


1<strong></strong>或者<b></b>:加粗,更推荐使用<strong>标签加粗,语义更加强烈
2<em></em>或<i></i>:倾斜,更推荐使用<em>标签倾斜,语义更加强烈
3<del></del>或<s></s>:删除线,更推荐使用<del>标签删除,语义更加强烈
4<ins></ins>或<u></u>:下划线,更推荐使用<ins>标签插入,语义更加强烈


4.5 <div>和<span>标签


<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。


1<div>这是头部</div>  // div是divsion的缩写,表示分割,分区;span表示为跨度,跨距。
2<span>今日价格</span>


特点

a.<div>标签是用来布局的,但是现在一行只能放一个<div>,大盒子。b.<span>标签用来布局的,一行上可以放多个<span>,小盒子。


4.6 图像标签与路径[重点]


图像标签:在HTML标签中,<img>标签用于定义HTML页面中的图像。


1<img src="图像URL" />


src<img>标签的必须属性,它用于指定图像文件的路径和文件名

属性:属于这个图像标签<img>的特性。

图像标签<img>的其他属性:


1src  图片路径    必须属性
2alt  文本        替换文本,图像不能正常显示时,需要用该文字对图像进行替换!
3title 文本       提示文本,鼠标放到图像上,可以显示出文字对图片进行描述
4width 像素       设置图片的宽度
5height 像素      设置图片的高度
6border 像素      设置图片的边框粗线


图像标签属性注意点


a.图像标签可以拥有多个属性,必须写在标签名的后面。b.属性之间不分先后顺序的,标签名与属性、属性与属性之间以空格分开。c.属性采取键值对的形式,即key="value"的格式,属性="属性值"。

路径:页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要采用路径的方式来指定图像文件的位置。路径可以分成:

a.相对路径:以引用文件所在的位置作为参考基础,从而建立出的目录路径。即图片相对于HTML页面的位置。相对路径是从代码所在的文件出发,去寻找目标文件,因此这里所说的上一级、下一级和同一级就是图像相对于HTML页面的位置


1同一级路径         图像文件位于HTML文件同一级
2下一级路径   /     图像文件位于HTML文件下一级
3上一级路径   ../   图像文件位于HTML文件上一级


b.绝对路径:目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。


4.7 超链接标签[重点]


在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。


超链接的语法格式:


1<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>  // a是 单词anchor的缩写,意思是锚点


两个重要的属性如下:


a.href:用于指定链接目标的url地址,必须的属性,当标签应用href属性时,它就具有了超链接的功能。b.target:用于指定链接页面的打开方式,其中self为默认值blank为在新窗口中打开方式。链接的分类:

a.外部链接:如<a href="https://www.baidu.com"> 百度 </a>。

b.内部链接:网站内部页面之间的相互链接。直接链接内部页面的名称即可,例如<a href="index.html">首页</a>。

c.空链接:如果当时没有确定链接的目标时,<a href="#">首页</a>。

d.下载链接:如果href里面的地址是一个文件或压缩包,会下载这个文件。

e.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

f.锚点链接:当我们点击链接时,可以快速定位到页面中的某个位置

      在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>。

       找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id="two">第2集介绍</h3>。


5.HTML中的注释和特殊字符


5.1 HTML中的注释


如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。HTML中的注释以"<!--"开头,以"-->"结束。注释标签中的内容是给程序员看的,这个代码是不执行不显示到页面中的。


1<!-- 注释语句 -->  快捷键: ctrl + /


5.2 特殊字符


在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符代替。


1空格     &nbsp;  记忆
 2<        &lt;   记忆
 3>        &gt;   记忆
 4&        &amp;
 5¥        &yen;
 6©        &copy;
 7®        &reg;
 8°        #deg;
 9±        #plusmn;
10×        &times;
11÷        &divide;
12²        &sup2;
13³        $sup3;


6.资料下载


[1] https://github.com/cdlwhm1217096231/HTML_CSS_JavaScript

相关文章
|
24天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
29 0
|
2月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
46 0
|
1月前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
|
10天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
9天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
9天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
22天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
1天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法