HTML简介及基础标签

简介: HTML简介及基础标签

一、什么是HTML

HTML是一门语言,所有的网页都是用HTML这么语言编写的


HTML(HyperText Markup Language):超文本标记语言


超文本:超越文本的限制,比普通文本更强大,除了文字信息,还可以定义图片、音频、视频等内容。


标记语言:标记语言时一套标记标签,由标签构成的语言,HTML使用标记标签来描述网页。


HTML运行在浏览器上,HTML标签由浏览器来解析


HTML标签都是预定义好的。例如:使用<img>展示图片


W3C标准:网页主要由三部分组成


结构:HTML 表现:CSS 行为:JavaScript

前端技术参考手册:HTML 系列教程 (w3school.com.cn)

https://www.w3school.com.cn/h.asp

二、HTML入门案例

1、新建文本文件,将后缀名改为.html

ffe53c69a71b4829a8345152aeedeb4c.png

新建完改了后缀名,就是显示默认的浏览器样式


2、编写HTML结构标签

e4d665e633cf402e9537f21582069e93.png

用记事本方式打开即可,然后编写此案例。可以在<body>中定义文字,也可以修改文字的颜色属性。


3、保存之后,双击点开结果

6cbe3fb3c5d6448283e5b8ca54879172.png

4、总结


1、HTML文件以.htm或.html为扩展名


2、HTML结构标签

标签 描述
<HTML> 定义HTML文档
<head> 定义关于文档的信息
<title> 定义文档的标题
<body> 定义文档的主体

3、HTML标签不区分大小写


4、HTML标签属性值单双引号皆可


5、HTML语法松散

三、HTML的语言特征

HTML代码由头和体组成
<html>
       <head>
              <title>标题</title>
       </head>
       <body>需要展示给用户看的信息内容</body>
</html>
<html>标签就相当于java类大括号
<head>中存放的都是网页的说明性内容,例如标题

HTML文件的扩展名为html(新的)或者htm (老的)


HTML文件由浏览器直接解析执行,无需编译,直接由上到下依次解析执行


HTML标签通常由开始标签和结束标签组成,例如<font>内容体</font>


开始标签和结束标签之间的内容叫做内容体


HTML没有内容体的标签叫做空标签,经由一个标签组成。例如:<br/>自关闭


HTML标签不区分大小写,为了方便阅读,建议使用小写


HTML标签是有属性的,格式为:属性名=”属性值”,属性值用引号引起,引号包括单引号和双引号,建议使用双引号


HTML标签建议包裹嵌套,不建议交叉嵌套

四、HTML基础标签

标签 描述
<h1> - <h6> 定义标题,h1最大,h6最小
<font> 定义文本的字体、字体尺寸,字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
<center> 定义文本居中
<p> 定义段落
<br> 定义换行
<hr> 定义水平线

代码示例:

<!--html5的标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr>
<!--
    html 表示颜色
        1、英文单词:red,pink,blue...
        2、rgb(值1,值2,值3):值的取值范围:0-255 reg(255,0,0)
        3、#值1值2值3:值的范围:00-FF
-->
<font face="楷体" size="5" color="#ff0000">夏志121</font>
<hr>
1.水寒江静,满目青山,载月明归。——黄庭坚《诉衷情》<br>
2.烟水茫茫,千里斜阳暮。山无数。乱红如雨。——秦观《点绛唇·桃源》
<hr>
<p>
 1.水寒江静,满目青山,载月明归。——黄庭坚《诉衷情》
</p>
<p>
2.烟水茫茫,千里斜阳暮。山无数。乱红如雨。——秦观《点绛唇·桃源》
</p>
<hr>
人生自古谁无死<br>
<b>人生自古谁无死</b><br>
<i>人生自古谁无死</i><br>
<u>人生自古谁无死</u><br>
<hr color="blue">
<center>
<b>人生自古谁无死</b>
</center>
</body>
</html>

运行结果:

eb8495a2e4f04a70912ee67bf362ae62.png

五、HTML转义字符

  HTML源代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其他特殊字符
&quot; 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&nbsp 不断行空白
目录
相关文章
|
3月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
94 5
|
2月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
102 49
|
5月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
79 0
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
72 5
|
2月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
存储 移动开发 前端开发
|
3月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
70 2
|
3月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
54 1
|
4月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
291 1
|
4月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
501 1