百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

程序员都必掌握的前端教程之HTML基础教程(上)

xsobi 2024-11-27 22:26 1 浏览

从本篇文章开始成哥将带大家一起学习一下前端的基础知识,我们先讲解前端的基础HTML与CSS,这个讲完我们将讲解VUE前端框架,最后我们再讲讲Ant Design的VUE前端框架,从而形成前端一个系列的教程,下面就开始我们今天的内容吧!

01 HTML简介

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。

使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件"翻译"成可以识别的信息,即现在所见到的网页。HTML 不需要编译,可以直接由浏览器执行,非常方便开发时调试。

02 HTML实例

我们现在创建一个典型的HTML结构具体如下:

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML实例</title>  
6. </head>  
7. <body>  
8.   <h1>我是标题</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html> 

如上页面中各个标签代表的意思如下:

1)<!DOCTYPE html>是文档声明头,它告诉游览器当前处理的内容是HTML页面

2)html是 HTML 页面的根元素,用于标识HTML内容的开始与结束

3) head是HTML页面的头,包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8,title为文档的标题

4)body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题,p是body内容中定义的段落

我们现在通过游览器打开编写的HTML内容,具体内容如下

在HTML中的内容可以通过以下格式进行内容注释具体如下:

03 HTML标签、元素、属性、实体编码与事件

(1)HTML标签

HTML 标签是 HTML 语言中最基本的单位,HTML 标签是 HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签具有如下特点:

1)标签一般是成对出现的 如:<div></div>;也有空标签 如:<br />

2)标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)

3)标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母

标签的示列如下:

标签按照<>的对数可以分为如下两类分别为双标签与单标签,下面我们具体来了解一下这两类标签。

1)双标签

双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下:

1. <标记名></标记名>

常见的双标签有如下几种:

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 块级元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超链接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>  

2)单标签

单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:

1. <标记名/>

常见的单标签有如下几种:

1. <!-- 换行标签 -->  
2. <br />  
3.   
4. <!-- 分隔线标签 -->  
5. <hr />  
6.   
7. <!-- 图片标签 -->  
8. <img />  

(2)HTML元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码,如<p>段落</p>。元素可以进行嵌套具体如下:

1. <div>  
2.   <h1>我是标题</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>  

(3)HTML属性

属性为 HTML 元素提供附加信息,可分为全局属性(即所有元素均可使用的属性,如id,class等)和元素属性(部分元素可使用的属性,例如<a href="http://www.baidu.com">搜索</a>),属性通常由属性名="属性值"构成,存在于开始标签中,示列如下:

(4)HTML实体编码

对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码",如< <> >空格 。

(5)HTML事件

通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色,事件可以分为多类比多鼠标点击、鼠标聚焦等,下面我看看看一个事件编写示列:

04 HTML常用标签示列

(1)h标签

h 标签有六种分别为h1、h2、h3、h4、h5、h6,这六个分别对应六种样式的标题,我们现在来编写这六种h标签,演示代码如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1标题</h1>  
9.   <h2>H2标题</h2>  
10.   <h3>H3标题</h3>  
11.   <h4>H4标题</h4>  
12.   <h5>H5标题</h5>  
13.   <h6>H6标题</h6>  
14. </body>  
15. </html>  

我们来运行该HTML文件,来看看这六种h标签有什么样式差异,从示列中可以发现h1标签字体最大然后依次减小。

(2)p标签

p 标签是文本标签,现在我们来编写一段含有p标签的html文本,然后运行了看看p标签的样式具体操作如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>标题一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>标题二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>  

(3)a标签

a标签是超链接标签,点击a标签可以跳转到其设置的网站,具体示列如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">点我跳转到百度页面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">点我跳转到腾讯页面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>  

(4)div标签

div标签是一个块级元素,它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子,我们可以为这个盒子设置各种各样属性(如高度、宽度、颜色等),下面我们编写一个div标签并设置其长为300px,宽度为200px,同时给其一个背景颜色,具体如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>  

(5)列表标签

列表作为网页设计的重要内容之一,能够用来制作导航栏和新闻列表等。HTML 列表分为:有序列表(ol),无序列表(ul)以及自定义列表(dl)

1)有序列表ul

有序列表的顺序是有序的,默认情况下会以数字来排列,但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列,我们现在来写一个示列,具体如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表,以默认方式数字排列 -->  
10.   <p>有序列表默认方式数字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表,以大写字母排列 -->  
18.   <p>有序列表大写字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>  

2)无序列表ol

无序列表的顺序是无序的,不会按照某个值来排序,无序列表中每个列表前默认都有一个实心圆,也可以通过type属性来设置成空心圆或者小方块,无序列表示列如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>无序列表默认type样式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>无序列表方块样式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>  

3)自定义列表dl

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始,其列表内容是以<dd> 开始,自定义列表前面没有任何标识,其具体示例如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定义列表</p>  
10.   <dl>  
11.     <dt>东岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>华山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>  

(6)其它标签

1)换行标签<br/>

在HTML中如果想给内容进行换行可以使用换行标签,具体示列如下:

2)分割线标签<hr/>

<hr/> 标签用于在 HTML创建一条分割线,具体示列如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是张三</p>  
10.   <!-- 分割线标签 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>  

05 总结

至此我们《HTML基础教程上篇》就讲完了,下篇内容主要讲解HTML样式、HTML表单、Tabel等,敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦!

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇,和你一同成长。

文章推荐:

相关推荐

好用的云函数!后端低代码接口开发,零基础编写API接口

前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数,人人都能编写和发布自己的API接口

你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...

极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七,Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...