初级HTML基础

简介: 初级HTML基础


前言

本文讲解了 HTML 语法规范 HTML 基本结构标签开发工具 HTML 常用标签 HTML 中的注释和特殊字符,

如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力。

以下是本篇文章正文内容

一、HTML 语法规范

什么是HTML

HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术

1.1 基本语法概述

HTML 标签是由尖括号包围的关键词

HTML 标签通常是成对出现的我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。

有些特殊的标签必须是单个标签(极少情况),例如 br ,我们称为单标签。

1.2 标签关系

双标签关系可以分为两类:包含关系和并列关系。

包含关系

<head> 
 <title> </title> 
</head>

并列关系

<head> </head>
<body> </body>

二、HTML 基本结构标签

2.1 第一个 HTML 网页

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

HTML页面也称为 HTML 文档

<html> 
 <head> 
 <title>我的第一个页面</title>
 </head>
 <body>
 你一飞冲天 
 </body>
</html>

HTML 文档的的后缀名必须是 .html 或 .htm,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。此时,用浏览器打开这个网页,我们就可以预览我们写的第一个 HTML 文件了。

2.2 基本结构标签总结

<!DOCTYPE html>
<!--DOC 代表 文档 TYPE type 类型  -->
<!-- 文档声明  
  1. 告诉浏览器页面当前使用的版本是 html5  必须声明在网页开头
  2. 不写文档声明,会导致浏览器 进入怪异模式,导致有些浏览器无法正常解析页面
-->
<html lang="en">
  <!-- lang="en" 叫属性  属性名="属性值"-->
  <!--根标签  一个页面中只有一个根标签  所有内容都要写在这个根标签里-->
  <!--
    lang 对应单词: language 语言  用来定义当前文档显示的语言
    en: 对应单词 :english 英文  表示当前网站是 英文网站
    zh/ zh-CN 对应单词 :chinese 中文 表示当前网站是中文网站    
    设置目的:让搜索引擎知道我们是中文网站还是英文网站,
    搜索时可能将对应语言的页面搜索出来
  -->
  <head>
    <!--head 帮助浏览器来解析页面,不会显示在网页内容中-->
    <meta charset="utf-8" />
    <!--"utf-8" 浏览器和计算机之间互相读取信息时 需要同一个密码本(gb2312、gbk、utf-8)
    而浏览器默认的 密码本是: gb2312 它是属于中国 
       gbk 中国  在简体的基础上增加了繁体     
       utf-8: 国际  全球通用 -->
    <title>
      HTML结构
    </title>
    <!--  title 
      1. 设置浏览器的标题
      2. 搜索引擎会先抓取title里的内容展示给用户,并且这个内容的设置会影响到
      3. 页面在搜索引擎的排名  比如:百度搜索
    -->
  </head>
  <body>
    <!--来显示页面的内容-->
    我是网页的内容
  </body>
</html>

三、开发工具

HTML的IDE工具

(1) DW(Dreamweaver)

(2) HBuilder

(3) Subline

(4) VSCode

(5) WebStorm

(6) 记事本

(7) 其他编程语言的IDE工具

VSCode 的使用

双击打开软件。

新建文件(Ctrl + N )。

保存(Ctrl + S ), 注意移动要保存为 .html 文件

Ctrl + 加号键 ,Ctrl + 减号键 可以放大缩小视图

生成页面骨架结构。输入! 按下 Tab 键。

利用插件在浏览器中预览页面:单击鼠标右键,在弹出窗口中点击“Open In Default Browser”。

VSCode 工具生成骨架标签新增代码

7. <!DOCTYPE> 标签

8. lang 语言

9. charset 字符集

3.1 文档类型声明标签

文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页

注意:

声明位于文档中的最前面的位置,处于 <html> 标签之前。

<!DOCTYPE>不是一个 HTML 标签,它就是 文档类型声明标签。

3.2 lang 语言种类

用来定义当前文档显示的语言。

en定义语言为英语

zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

3.3 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 在<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

 <meta charset=" UTF-8" />

charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符.

注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量

统一写成标准的 “UTF-8”,不要写成 “utf8” 或 “UTF8”。

目录
相关文章
|
安全 网络安全
Metasploit Pro 4.20.0安装与使用
Metasploit Pro 4.20.0安装与使用
447 0
|
存储 Kubernetes Cloud Native
Kubernetes学习笔记-Part.07 Harbor搭建
Part.01 Kubernets与docker Part.02 Docker版本 Part.03 Kubernetes原理 Part.04 资源规划 Part.05 基础环境准备 Part.06 Docker安装 Part.07 Harbor搭建 Part.08 K8s环境安装 Part.09 K8s集群构建 Part.10 容器回退
192 0
Kubernetes学习笔记-Part.07 Harbor搭建
|
Shell 数据安全/隐私保护 Python
Tkinter:文本框Entry
Tkinter:文本框Entry
|
消息中间件 小程序 Java
如何选择最适合你的分布式事务方案
当我们采用服务/微服务架构,对业务进行分拆解耦后,原先在一个单体内,使用本地数据库保证ACID的数据修改,因为跨了多个服务,就不再适用了,就需要引入分布式事务来保证新的原子性。
313 0
如何选择最适合你的分布式事务方案
|
前端开发 Android开发 数据格式
|
3天前
|
人工智能 运维 安全
|
1天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
8天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程|10分钟搞定安装配置
Qwen3-Coder 挑战赛简介:无论你是编程小白还是办公达人,都能通过本教程快速上手 Qwen-Code CLI,利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例,助你提升效率,体验智能编码的乐趣。
767 109