前端开发系列（一）HTML教程（1）

系统管理员 2021-09-26 21:34 409阅读 0赞

# 一、HTML介绍 #

> 超文本标记语言：  
>     超文本：比普通文本更加强大  
>     标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言。

## 1.1、代码初体验，制作我的第一个网页 ##

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>制作我的第一个网页</title>
        </head>
        <body>
            <h1>Hello World</h1>
        </body>
    </html>

运行效果：

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]

## 1.2、认识HTML标签 ##

> 通过代码来演示：  
>

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>认识html标签</title>
        </head>
    
        <body>
            <h1>勇气</h1>
            <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
            <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
            <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
        </body>
    </html>

--------------------

> 运行效果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]

--------------------

> 思考分析：  
> 1、“勇气”是网页内容文章的标题，`<h1></h1>`就是标题标签，它在网页上的代码写成`<h1>勇气</h1>`。  
> 2、“三年级时…我也没勇气参加。” 是网页中文章的段落，`<p></p>`是段落标签。它在网页上的代码写成 `<p>三年级时...我也没勇气参加。</p>`  
> 3、网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成`<img src="1.jpg">`

## 1.3、标签的语法 ##

> 1、标签由英文尖括号 < 和 > 括起来，如`<html>`就是一个标签。  
> 2、html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个 / 。 如：`<p></p>`  
> 3、HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但建议小写，因为大部分程序员都以小写为准。

--------------------

> 通过代码来演示：

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>标签的语法</title>
        </head>
        <body>
            <h1>在本教程中，你将学习如何使用 HTML 来创建站点</h1>
            <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。</p> 
        </body>
    </html>

--------------------

> 运行效果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 2]

## 1.4、认识html文件基本结构 ##

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

--------------------

> 思考分析：  
> 1、`<html></html>`称为根标签，所有的网页标签都在中。  
> 2、`<head>` 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有`<title>、<script>、 <style>、<link>、 <meta>`等标签，头部标签在下一小节中会有详细介绍。  
> 3、在`<body>`和`</body>`标签之间的内容是网页的主要内容，如`<h1>、<p>、<a>、<img>`等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

## 1.5、认识head标签 ##

现在来了解一下标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。下面的标签可用在 head 部分：

> 思考分析：  
> `<title>`标签：在`<title>`和`</title>`标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的 title 标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的 title 。  
> 例如`<title>hello world</title>`  
> `<title>`标签的内容 “hello world” 会在浏览器中的标题栏上显示出来，如下图所示：  
> ![在这里插入图片描述][2019010420133098.png]

## 1.6、了解HTML的代码注释 ##

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>HTML的代码注释</title>
        </head>
        <body>
            
            <div>
                <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p>
            </div>
            
        </body>
    </html>

--------------------

**此篇博客代码下载地址：[HTML教程1代码下载][HTML_1]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/dc4eb6883d3440fca0c5744e780f66aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]: /images/20210923/8631217c93d84ac9b15fb8cbf0f5da86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 2]: /images/20210923/578dade3c15442aa8984e32bc48d7220.png
[2019010420133098.png]: /images/20210923/d8ca97f591fe4d548336c9bf04016a20.png
[HTML_1]: https://github.com/longjiahao666/Web/tree/master/Code1/html/html1
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/6f5f660305214345b46fecb4b3dbc79d.png