HTML:认识HTML及基本语法

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
云解析DNS,个人版 1个月
简介: HTML:认识HTML及基本语法

1. HTML介绍


HyperText Markup Language 简称HTML意为超文本标记语言

超文本:是指页面内可以包含的图片,链接,声音,视频等内容

标记:可以理解为标签,例如我们去商场买东西,物品有商品标签(价格,材质,型号...)

标记语言中,就提供了许多的标签,不同标签有不同的功能,最终运行时,由浏览器对标签进行解析,最终呈现出不同标签的样子。

2. 关于软件选择和安装

我选择的是 HBuilderX 软件


HBuilderX是HBuilder的升级版,它集成了编辑器和IDE的功能,具有小体积和快速启动的特点;它支持HTML5 Web开发,由DCloud(数字天堂)推出,专为前端开发者设计;HBuilderX还支持APP、小程序开持Vue等前端框架,界面简洁,对字处理提供了高效的支持。


安装教程:  

搜索该网址进入官网 找到并点击HBuilderX图标

点击后跳转到下载界面,选择正式版(.zip)  如果是苹果系统就下载下面的.dmg

下载完成后打开文件位置并进行解压(解压到合适的位置)

找到解压后的HBuilderX文件,点击并找到我们的应用程序(.exe)启动即可.

3.  HTML的基本语法


当我们创建一个html文件,会自动生成下图代码:

代码解析

<!DOCTYPE html>           声明html语言版本  -----  html5


<html> </html>                  html标签是标记语言的根标签


<head> </head>               头标签


<meta charset="utf-8" />   表示按照此编码解析网页,即设置解析网页的字符集


<title> </title>                    标题


<body> </body>                网页的内容

标签结构:

<开始标签> 标签体 </结束标签> 闭合标签(封闭的区间)

<标签名/> 自闭和标签   没有修饰的内容,只是完成某个功能,如 <br/>  表示换行。

标签的属性:

可以通过改变标签的属性设置标签显示的格式,属性必须写在开始标签中

属性格式:属性名=“值”  一个标签中可以写多个属性。


例如:


<body bgcolor="blue">   设置背景颜色

       <font color="red" size="4">百度</font>   设置内容属性

</body>


总之我们用标签描述网页,用浏览器将网页代码解析呈现

写一段简单的代码来解释吧

<!-- 
   声明html语言版本   html5
 -->
<!DOCTYPE html>
 
<!-- 
   html标签是标记语言的根标签
 -->
<html>
  
  <!-- head 头 -->
  <head>
    <meta charset="utf-8" />  <!-- 按照此编码解析网页 设置解析网页的字符集 -->
    <title>百度一下</title>
  </head>
  
  <body>
    <!-- 网页的内容 -->  
    HBuilderX是HBuilder的升级版,它集成了编辑器和IDE的功能,具有小体积和快速启动的特点。  
  </body>
</html>

我们每次写完代码在运行前需要先保存(Crl+s)

在左上角点击运行按钮,选择游览器运行

运行结果

相关文章
|
2月前
html基础语法
【2月更文挑战第26天】html基础语法
28 5
|
2月前
|
移动开发 前端开发 数据安全/隐私保护
HTML的基本语法以及如何使用HTML来创建网页
HTML的基本语法以及如何使用HTML来创建网页
87 0
|
2天前
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
11 1
|
5天前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
12 1
|
2月前
HTML语法规范及实践指南
HTML语法规范及实践指南
17 0
|
2月前
|
开发者
html语法结构
【4月更文挑战第18天】html语法结构
17 1
|
2月前
|
前端开发 开发者
html语法
【4月更文挑战第18天】html语法
16 1
|
2月前
|
移动开发 开发者 HTML5
html的基本语法
【4月更文挑战第1天】html的基本语法
25 3
|
2月前
HTML 链接语法
HTML 链接语法。
33 5
|
2月前
|
前端开发
【HTML专栏1】语法规范、基础结构标签
【HTML专栏1】语法规范、基础结构标签
31 0