HTML-----初识HTML和网页基本标签

最新推荐文章于 2025-10-13 18:27:35 发布

原创最新推荐文章于 2025-10-13 18:27:35 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML，即超文本标记语言，以及HTML5的优势，如各大浏览器厂商的支持、跨平台和W3C标准。同时，概述了W3C组织及其在中国的网站，并列举了常见的IDE，如记事本、Dreamweaver、IDEA等。此外，文章还讲解了HTML的基本结构，包括标题、段落、换行、水平线、字体样式和注释等基础标签的使用。

初识HTML

HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文件，图片，音频，视频，动画等
HTML5：HTML目前已发展到了HTML5
HTML5的优势
- 世界知名浏览器（微软、Google、苹果等）厂商的支持
- 市场的需求
- 跨平台
W3C标准
- W3C：World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
- 国际网站：http://www.w3.org/
- 在中国的网站：http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
常见IDE（继承开发工具）
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- VSCode
- …

网页基本标签

HTML基本结构

<!--DOCTYOE:告诉浏览器要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta：描述性标签，一般用来描述网站的一些信息-->
<!--meta：一般用来做SEO（Search Engine Optimization：搜索引擎）-->
    <meta charset="UTF-8">
    <meta name="keywords" content="没有阳光也一样快乐的blog">
    <meta name="description" content="开心学java">
<!--title：网页标题-->
    <title>没有阳光也一样快乐</title>
</head>
<!--body：代表网页的主体-->
<body>
路漫漫其修远兮，吾将上下而求索
</body>
</html>

<!--注：<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>意为用 / 来关闭空元素-->

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lableTest</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

<!--段落标签-->
<p>君不见，黄河之水天上来，奔流到海bai不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
君不见，黄河之水天上来，奔流到海bai不复回。<br/>
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br/>
人生得意须尽欢，莫使金樽空对月。<br/>
天生我材必有用，千金散尽还复来。<br/>
烹羊宰牛且为乐，会须一饮三百杯。<br/>
岑夫子，丹丘生，将进酒，杯莫停。<br/>
与君歌一曲，请君为我倾耳听。<br/>
钟鼓馔玉不足贵，但愿长醉不复醒。<br/>
古来圣贤皆寂寞，惟有饮者留其名。<br/>
陈王昔时宴平乐，斗酒十千恣欢谑。<br/>
主人何为言少钱，径须沽取对君酌。<br/>
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。<br/>

<hr/>
<!--粗体和斜体标签-->
粗体：<strong>李白斗酒诗百篇</strong>
斜体：<em>天子呼来不上船，自称臣是酒中仙</em>

<br/>
<!--特殊符号-->
空 格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
<!--大写，小写等：&+字母-->
&gt;
&lt;
</body>
</html>