HTML简介及基础标签

182 阅读3分钟

​ 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第9天,点击查看活动详情

目录

一、什么是HTML

二、HTML入门案例

三、HTML的语言特征

四、HTML基础标签

五、HTML转义字符


一、什么是HTML

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

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

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

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

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

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

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

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

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

 二、HTML入门案例

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

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

2、编写HTML结构标签

​编辑

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

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

 4、总结

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

2、HTML结构标签

image.png

3、HTML标签不区分大小写

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

5、HTML语法松散

三、HTML的语言特征

HTML代码由头和体组成

<html>
     <head>
        <title>标题</title>
     </head>
        <body>需要展示给用户看的信息内容</body>
 </html>

 <html>标签就相当于java类大括号
 <head>中存放的都是网页的说明性内容,例如标题

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

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

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

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

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

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

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

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

四、HTML基础标签

image.png

代码示例:

<!--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>

运行结果:

 五、HTML转义字符

image.png