【HTML】解锁 HTML ：从零开始打造网页世界

举报
Yui_ 发表于 2024/12/06 16:33:32 2024/12/06
【摘要】 掌握 HTML 是每一位前端开发者的必备技能，它是你进入网页开发世界的第一步，也是构建丰富、动态网页应用的坚实基础。

在了解HTML前，我们先来了解下什么是前端吧。

1.什么是前端

前端是指构建用户在网页或应用程序中直接看到和交互的部分的开发领域。它主要涉及用户界面（UI）的设计和实现，目的是让用户能够以直观的方式与网站或应用程序进行交互。

1.1 前端的主要组成部分

  1. HTML（HyperText Markup Language）
  • 作用：用于定义网页的内容和结构。
  • 类比：HTML就像房屋的框架，决定网页上有那些元素（如标题、段落、图片、表单等）。
  1. CSS（Cascading Style Sheets）
  • 作用：用于控制网页的外观和样式，如颜色、字体、布局等。
  • 类比：CSS就像房屋的装饰，决定网页看起来是否美观。
  1. JavaScript
  • 作用：让网页具备动态行为（如响应用户操作、动画效果、实时数据交互等）。
  • 类比：JavaScript就像房屋的电器系统，为房子带来交互性。
    本文的目标只涉及到HTML的讲解，CSS/JavaScript会在后续更新。

2. HTML

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言，用于描述网页的结构和内容。它的主要作用是通过一系列标签和元素，定义网页上各种内容的类型和布局，例如文字、图片、视频、表格等。
HTML是由”标签构成的“

2.1 HTML的基础结构

下面我将使用HTML输出一个"Hello world"。

<html>
    <head>
        <title>这是网页标题</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

这里我使用的编辑器为vscode。运行后会打开浏览器，下面我们来看看运行效果：
image.png

可以看到，Hello World已经被打印出来了。怎么样是不是又学会一门语言的hello world。
下面笔者会开始解释这段代码的各个组成成分的含义。

  • html标签是整个html文件的根标签同时也是最顶层的标签。
  • head标签中写页面的属性。
  • body标签写的是页面显示的内容。
  • title标签写的是页面的标题。
    关于标签
  1. 标签名需要放到<>中。
  2. 大部分的标签成对出现，<xxx>为开始标签，</xxx>为结束标签。
  3. 少部分标签只要开始标签，这种标签被称为单标签。
  4. 开始标签盒结束标签间，写的是标签内容
  5. 开始标签中可能会携带属性。已后续会学到的<img>为例子：
    <img src=“xxx.jpg”>，src就是属性且是img标签必须带有的属性。

2.2 标签层次属性

标签的层次关系就类似于树的关系，对于标签也是存在和树一样的父子关系和兄弟关系

<html>
    <head>
        <title>这是网页标题</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

还是以这段代码为例子，其中<html>就是<head>的父亲，<head>就是<body>的兄弟。
在浏览器中我们可以启动开发者模式来查看：
image.png

标签间的结构关系，构成了一个DOM(Document Object Mode)树
image.png

有读者肯定要问了，这个什么DOM有什么作用吗，还专门取得名字，直接叫树就好了呗。
其实还是有点作用的，用官话来讲，它的好处有：

  • 结构化表示文档，便于开发者以程序的方式理解于操作。
  • 后续可以配合JavaScript以编程的方式操作HTML文档。
  • 支持跨设备的响应式体验，配合CSS和JavaScript，通过操作DOM树调整页面结构，适配不同设备或屏幕尺寸。
    当然你也可以把它理解为一本书：
    假设你有一本书，HTML 是写书的语言，每一页都写满了文字（内容），有标题、有段落、有图片。DOM 树 就是一本书的“目录”加“全文检索”，通过它你能快速找到书里的每个标题、段落，甚至是某个图片的位置。

2.3 快速生成代码框架

动画.gif

如果你使用vscode来编写html代码，可以使用!+回车键进行，自动生成代码的主体框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

下面是细节讲解，仅作了解：

  1. <!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  2. <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  3. <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • name="viewport"其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
  • content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

3. HTML常见标签

3.1 注释

如何语言都是有注释的。
html的注释风格为：

<!--我喜欢你-->

开始注释按住ctrl+/
注意，即使你注释了，在浏览器的开发者模式也是可以看见的哦。所以可不能在注释里骂人。

3.2 标题标签 h1~h6

html的标题一个有6个，也就是6个等级。h1到h6，数字越大，标题越小。

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <h1>关注永雏塔菲~</h1>
        <h2>关注永雏塔菲~</h2>
        <h3>关注永雏塔菲~</h3>
        <h4>关注永雏塔菲~</h4>
        <h5>关注永雏塔菲~</h5>
        <h6>关注永雏塔菲~</h6>
    </body>
</html>

下面看看效果：
image.png

3.3 段落标签 p

如果你需要输出大量的文本内容，文章不进行分段的话，可读性便会大大下降。如果我直接把大量文本复制到body里会发现，输出后都挤在一起了，即使复制前存在着段落区分。
body内容为维基百科介绍

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        《百年孤独》（西班牙语：Cien años de soledad），是哥伦比亚作家加夫列尔·加西亚·马尔克斯的作品，“魔幻现实主义”的代表作，在世界上享有盛誉。作者也因此获得1982年诺贝尔文学奖，瑞典皇家学院的颁奖理由是：“像其他重要的拉丁美洲作家一样，马尔克斯永远为弱小贫穷者请命，而反抗内部的压迫与外来的剥削。”
《百年孤独》发表于1967年，小说以虚构市镇马孔多（Macondo）的荣衰作为拉丁美洲百年沧桑的缩影。以奇诡的手法反映了殖民、独裁、斗争和流血的历史，以及遗忘和孤独的主题。故事讲述一个光怪陆离的布恩迪亚（Buendía）家族在一百年间，六代人因权力与情欲的轮回上演兴衰起落，第一代的老布恩迪亚在晚年被绑在树上过日子，乌尔苏拉是布恩迪亚家的女主人，一直在背后默默支持着家人，但她又充满正义感，她的孙子阿尔卡蒂奥在马孔多以暴力统治人民时，挺身而出为人民打抱不平。最后一个子孙——奥雷里亚诺的儿子在刚出生时被蚂蚁吃掉，奥雷里亚诺在看完吉卜赛人（梅尔基亚德斯）的预言遗稿后，随着马孔多一起消失了。智利作家聂鲁达称赞《百年孤独》是“继塞万提斯的《堂吉诃德》之后最伟大的西班牙语作品”。
    </body>
</html>

image.png

为了将段落分段，将使用标签<p>

<html>
    <head>
        <title>test</title>
    </head>
    <body>
    <p>《百年孤独》（西班牙语：Cien años de soledad），是哥伦比亚作家加夫列尔·加西亚·马尔克斯的作品，“魔幻现实主义”的代表作，在世界上享有盛誉。作者也因此获得1982年诺贝尔文学奖，瑞典皇家学院的颁奖理由是：“像其他重要的拉丁美洲作家一样，马尔克斯永远为弱小贫穷者请命，而反抗内部的压迫与外来的剥削。”</p>
<p>《百年孤独》发表于1967年，小说以虚构市镇马孔多（Macondo）的荣衰作为拉丁美洲百年沧桑的缩影。以奇诡的手法反映了殖民、独裁、斗争和流血的历史，以及遗忘和孤独的主题。故事讲述一个光怪陆离的布恩迪亚（Buendía）家族在一百年间，六代人因权力与情欲的轮回上演兴衰起落，第一代的老布恩迪亚在晚年被绑在树上过日子，乌尔苏拉是布恩迪亚家的女主人，一直在背后默默支持着家人，但她又充满正义感，她的孙子阿尔卡蒂奥在马孔多以暴力统治人民时，挺身而出为人民打抱不平。最后一个子孙——奥雷里亚诺的儿子在刚出生时被蚂蚁吃掉，奥雷里亚诺在看完吉卜赛人（梅尔基亚德斯）的预言遗稿后，随着马孔多一起消失了。智利作家聂鲁达称赞《百年孤独》是“继塞万提斯的《堂吉诃德》之后最伟大的西班牙语作品”。</p>
    </body>
</html>

分段后的效果：
image.png

注意：

  1. p 标签之间存在一个空隙
  2. 当前的 p 标签描述的段落, 前面还没有缩进.
  3. 自动根据浏览器宽度来决定排版.
  4. html 内容首尾处的换行, 空格均无效.
  5. 在 html 中文字之间输入的多个空格只相当于一个空格.
  6. html 中直接输入换行不会真的换行, 而是相当于一个空格.

3.4 换行标签 br

注意：

  • br是一个单标签，不需要结束标签。写作<br/>
  • 在我们使用时可以发现，换行后的行间距趋于正常。
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        哈哈哈哈哈哈<br/>哈哈哈哈哈哈哈哈哈哈哈<br/>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br/>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </body>
</html>

image.png

3.5 格式化标签

  1. 加粗：string标签或者b标签。
  2. 倾斜：em标签和i标签。
  3. 删除线：del标签就饿s标签。
  4. 下划线：ins标签和u标签。
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <strong>strong加粗</strong>
        <b>b加粗</b>

        <em>em倾斜</em>
        <i>i倾斜</i>

        <del>del删除</del>
        <s>u</s>
        
        <ins>ins下划线</ins>
        <u>u下划线</u>
    </body>
</html>

效果：
image.png

在实际开发中，以CSS方式为主。

3.6 图片标签 img

img标签必需带有属性src，src的功能是表示图片路径。此外img也是一个单标签。
先来试试吧


<html>
    <head>
        <title>test</title>
    </head>
    <body>
        这里有一张图片：
        <img src="微信图片_20240402143314.jpg">
    </body>
</html>

image.png

src所接路径可以是绝对路径也可以是相对路径，如果就在当前目录可以直接写文件名。
img的其他属性：

  • alt：替换文本，当图片不能正常显示的时候会显示一个一个替换文字（一般写图片加载失败）。
  • title：提示文本，当鼠标放在图片上，会显示所写提示文本。
  • width/height：控制宽/高度。（高度和宽带可选一个进行修改，图片会等比例修改）
  • border：显示边框：参数是边框宽度的像素。
 <img src="微信图片_20240402143314.jpg" alt="图片加载失败" title="yamada" width="200px" height="100px" border="1px">

读者可以运行看看。
注意：

  1. 属性的顺序无所谓，但不能写在标签上面

3.7 超链接标签 a

必须具备的属性有href,表示点击后跳转的网页。
其他属性：target 表示打开方式，默认是_self在当前页面打开，如果_blank表示用新的标签页打开。

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <a href="https://blog.csdn.net/2303_79015671?spm=1011.2444.3001.5343" target="_blank">博客主页</a>
    </body>
</html>

3.7.1 链接的几种形式

  • 外部链接：href引用其他网站的地址。
  • 内部链接：网站内部页面之间的链接，写相对路径即可。
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <!-- 网页1 -->
         我是网页1
         <a href="test08.html">点我跳转test08.html</a>
    </body>
</html>
  • 空链接：使用#在href中占位。
<a href="#">空</a>
  • 下载链接：herf对应的路径是一个文件（可以使用zip文件）
<a href="xxxx.zip">下载文件</a>
  • 网页元素链接：可以够图片等任何元素添加链接，点击元素后跳转
<a href="https://blog.csdn.net/2303_79015671?spm=1011.2444.3001.5343">
<img src="xxx.jpg">
</a>

3.8 表格标签

基本使用：

  1. table标签：表示整个表格。
  2. tr：表示表格的一行。
  3. td：表示一个单元格。
  4. th：表示表头单元格，会居中加粗
  5. thead：表格的头部区域（注意和th区分，范围比th大）。
  6. tbody：表格得到主体区域
    table包含tr，tr包含td或者th。
    下面笔者就利用上面的标签来实现一个表格：
<heml>
    <head>
        <title></title>
    </head>
    <body>
        <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" heigth="500">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>yui</td>
                    <td>女</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>yamada</td>
                    <td>女</td>
                    <td>15</td>
                </tr>
            </tbody>
            
        </table>
    </body>
</heml>

效果图：
image.png

其中table标签中的属性，读者可以一个一个加进去分别查看效果。
以下下是table属性的介绍：

  1. align：是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
  2. border：表示边框，1表示有边框，数字越大边框越粗。
  3. cellpadding：内容距离距离边框的距离，默认为1像素。
  4. cellspacing：单元格之间的距离，默认为2像素。
  5. width/height：设置表格尺寸。
    合并单元格
  • 跨行合并：rowspan="n"
  • 跨列合并：colspan="n"
    n表示合并的行/列数。
    以下是跨行合并演示：
    image.png

3.9 列表标签

平常我看到的热搜排列，在HTML就就是用列表标签取实现的。
列表标签可以是布局整齐好看。
其中列表标签也分为好几种：

  • 无序列表：ul、li
  • 有序列表：ol、li
  • 自定义列表：dl：总标签dt：小标签dd：围绕标题来说明
    就使用频率来讲，无序列表和自定义列表要高于有序列表。
    下面笔者会同时实现这3中列表，读者可以自行比较。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>高松灯</li>
        <li>千早爱音</li>
        <li>长崎素世</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>高松灯</li>
        <li>千早爱音</li>
        <li>长崎素世</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>Mygo</dt>
        <dd>高松灯</dd>
        <dd>千早爱音</dd>
        <dd>长崎素世</dd>
    </dl>
</body>
</html>

效果图：
image.png

其中自定义标签可以添加属性type="a/A/i/I/1"，默认情况为1。读者可以自行测试每种效果。
注意：

  • 元素之间是并列关系。
  • ul/ol只能放li，dl中只能放dt和dd。
  • li中可以放其他标签。
  • 列表带有自己的样式，可以使用CSS修改。

3.10 表单标签

在网页中我们总会遇见输入数据的情况，表单就是用于让用户输入信息的重要途经。
表单标签又可以分为两个部分：

  • 表单域：包含表单元素的区域，重点是form标签。
  • 表单控件：输入框，提交按钮重点是input标签。

3.10.1 from标签

因为需要配合JavaScript使用，后续更新。

3.10.2 input标签

作用：各种输入控件，单行文本框，按钮，单选框，复选框。

  • type：用来标定功能类型，button checkbox text file image password radio等等。
  • name：用于给input命名，尤其对于单选按钮，具有相同的name才能多选一。
  • value：input的默认值。
  • check：默认被选中，（用于单选和多选按钮）。
  • maxlength：设定最大长度。
    文本框：
用户名：<input type="text" name="username" placeholder="请输入用户名">

密码框：

密码：<input type="password" name="password" placeholder="请输入密码">

单选框：

原神：
<input type="radio" name="action" checked="checked" value="Yes">启动
<input type="radio" name="action" value="No">关闭

注意：
name的作用是将单选框组合，确保同一组只能选择一个选项。
checked的作用是默认选择，value是选择后传递的值。
复选框：

柚子社的作品你游玩过那些？
<input type="checkbox"> 千恋万花 <input type="checkbox"> 魔女的夜宴 <input type="checkbox">星光咖啡馆与死神之蝶<input type="checkbox">天使★纷扰<input type="checkbox">PARQUET<input type="checkbox">RIDDLE JOKER

普通按钮：

<input type="button" value="我真的能控制你">

目前点击是没有反应的，后续会配合JavaScript使用。
选择文件：

<input type="file">

点击选择文件，会弹出文件选择窗口，选择文件。
下面就这些代码的组合演示图：
image.png

3.11 label标签

搭配input使用，点击label也能选中对应的单选/复选框，提高用户使用体验。

  • for属性：指定当前label和那个相同的id的input标签对应。
<input id = "Yes" type="radio" name="action" value="Yes">
<label for="Yes">启动</label>

实现的界面效果和原来一样，不同的是点击启动也可以实现选中的功能。

3.12 select标签

功能：下拉菜单

<select>
	<option>--请选择出生年份--</option>
	<option>1991</option>
	<option>1992</option>
	<option>1993</option>
	<option>1994</option>

效果图：
image.png

3.13 无语义标签：div&span

div标签，division的缩写，含义是分割。
span标签，含义是跨度。
当然还是要看功能：

  • div 是独占一行的。
  • span 不独占一行。
<div>
	<span>关注星瞳送溜溜梅~</span>
	<span>关注星瞳送溜溜梅~</span>
	<span>关注星瞳送溜溜梅~</span>
</div>
<div>
	<span>关注星瞳送溜溜梅~</span>
	<span>关注星瞳送溜溜梅~</span>
	<span>关注星瞳送溜溜梅~</span>
</div>

效果图：
image.png

4.总结

掌握 HTML 是每一位前端开发者的必备技能，它是你进入网页开发世界的第一步，也是构建丰富、动态网页应用的坚实基础。希望文章对你有帮助。
文章涉及代码都在：gitee

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML JavaScript 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入