初级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”。

目录
相关文章
|
移动开发 JavaScript HTML5
HTML5 基础学习
HTML5 基础学习
55 0
|
1月前
|
Web App开发 前端开发 搜索推荐
HTML一些基础知识点
HTML一些基础知识点
|
1月前
html基础知识学习
html基础知识学习
31 0
|
3月前
|
移动开发 前端开发 搜索推荐
HTML基础知识点
HTML基础知识点
43 2
|
3月前
HTML基础知识学习
HTML基础知识学习
35 1
|
5月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
32 0
前端基础学习(一)HTML入门
|
JavaScript 前端开发
HTML——基础知识点总结
HTML——基础知识点总结
|
前端开发
测开学习篇-html
测开学习篇-html
|
移动开发 HTML5
HTML 基础【快速掌握知识点】
HTML 基础【快速掌握知识点】
123 0
HTML 基础【快速掌握知识点】
|
移动开发 HTML5
HTML5 学习的疑难问题
HTML5 学习的疑难问题
100 0
HTML5 学习的疑难问题