初学HTML，自己的第一个网页

最新推荐文章于 2024-11-06 16:04:23 发布

原创最新推荐文章于 2024-11-06 16:04:23 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #servlet

本文介绍了HTML的基本概念，包括其作为描述网页结构的语言的角色，元素的组成和属性，文档结构如DOCTYPE、html、head和body标签，以及一些常见元素如标题、段落、超链接和图像的用法。此外，还提到了HTML实体和创建第一个网页的例子，适合初学者入门。

官方参考：W3C HTML & CSS

一、什么是HTML

HTML 是描述网页结构的语言。全称"Hyper Text Markup Language"（超文本标记语言）

HTML是描述网页结构的语言。提供以下方法：

发布带有标题、文本、表格、列表、照片等的在线文档。
单击按钮即可通过超文本链接检索在线信息。
设计与远程服务进行交易的表格，用于搜索信息、进行预订、订购产品等。
电子表格、视频剪辑、声音剪辑和其他应用程序。

在 HTML 中，使用标记来描述页面的结构。语言标签内容的元素，如“段落”、“列表”、“表格”等。

二、元素（element）

元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：

-局部属性：某些元素特有的属性

-全局属性：所有元素通用

有的元素没有结束标记，这样的元素叫做:空元素，元素不能相互嵌套。错误示范：

<div>
     <p>
</div>
     </p>

元素分为父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

三、文档结构

<!DOCTYPE html>

文档说明，当前使用的HTML标准是HTML5。没有文档说明，将导致浏览器进入怪异渲染模式。

<html lang="en">
</html>

根元素，一个页面只能有一个，该元素是所有其他元素的父元素或祖先元素。

lang属性：language，全局属性，元素内部使用文字由哪一种自然语言书写而成。

<head>
</head>

文档头，文档头内部的内容，不会显示到页面上。

<meta charset="UTF-8">

文档的元数据：附加信息。charset:指定网页内容编码。UTF-8是unicode编码的一个版本。

<title>Document</title>

网页标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

头部结构。

<body>
</body>

文档体，页面上所有要参与显示的元素。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
</body>

简单的文档完整结构。（推荐编译器：Visual Studio Code）

四、一些简单元素

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

h1~h6：表示一级标题到六级标题。

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

段落，paragraphs。

<a href=""></a>

a元素，超链接。

href属性：hyper reference(引用)，通常表示跳转地址。分为普通地址和锚链接。

<img src="" alt="">

image缩写，空元素。图像的名称和尺寸是以属性的形式提供的。

src属性：source，图像的文件地址。

alt属性：当图片资源失效时，将使用该属性的文字替代图片。

<ul>
    <li></li>
    <li></li>
</ul>

无序列表

<ol>
    <li></li>
    <li></li>
</ol>

有序列表

<div>
</div>

容器元素：该元素代表一个块区域，内部用于放置其他元素，没有语义。

五、HTML实体

实体字符，HTML Entity，通常用于在页面中显示一些特殊符号。

&lt;小于符号
&gt;大于符号
&nbsp;空格符号,non-breaking space
&copy;版权符号,©
&amp;&符号
&frac 分子 + 分母;分数符号

六、第一个网页

初学HTML时做的第一个“网页”

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是我的第一个网页</title>
</head>
<body>
     <!--超链接-->
     <title>Document</title>
     <br>
     <a href="https://lol.qq.com/main.shtml" title="edu">英雄联盟</a>
     <h1 title="this is my first page">
        第一个网页
     </h1>
     <img src="jpg/LoL_icon.svg.jpg" alt="">
</body>
</html>