美文网首页
二、HTML语法规范、骨架代码、开发工具VSCode

二、HTML语法规范、骨架代码、开发工具VSCode

作者: honest涛 | 来源:发表于2021-01-30 21:57 被阅读0次

    一、HTML语法规范

    1.1 基本语法概述

    1. HTML标签是由\color{red}{尖括号包围的关键词},例如:\color{red}{<html>}
    2. HTML标签\color{red}{通常是成对出现的},例如:<html>和</html>,我们称为\color{red}{双标签}。标签对中的第一标签是开始标签,第二个标签是结束标签。
    3. 有些特殊的标签必须是单个标签(极少情况),例如<br />,我们称为\color{red}{单标签}

    1.2 标签关系

    双标签关系可以分为两类:\color{red}{包含关系}\color{red}{并列关系}

    <!-- 包含关系-->
    <head>
        <title>Document</title>
    </head>
    
    <!-- 并列关系-->
    <head> </head>
    <body> </body>
    

    二、HTML基本结构标签

    2.1 第一个HTML网页

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        曾经沧海难为水,除却巫山不是云。
    </body>
    </html>
    

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

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

    三、网页开发工具

    VSCode的使用

    1. 双击打开软件。
    2. 新建文件(Ctrl + N)。
    3. 保存(Ctrl + S),注意一定要保存为.html文件
    4. Ctrl + 加号键,Ctrl + 减号键,可以放大缩小视图。
    5. 生成页面骨架结构。输入!按下Tab键盘。
    6. 利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击“Open in Default Browser”。 推荐安装的插件.png
      页面骨架结构代码
    <!-- 
        文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
        这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
        注意:
        1.<!DOCTYPE>声明位于文档中最前面的位置,处于<html>标签之前。
        2.<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。
    -->
    <!DOCTYPE html>
    <!-- 
        用来定义当前文档显示的语言。
        1. en:英语
        2. zh-CN:中文
        简单来说定义为en就是英文网页,定义为zh-CN就是中文网页。
        其实对于文档来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。
        这个属性对浏览器和搜索引擎(百度、谷歌等)还是有作用的。
     -->
    <html lang="en">
    <head>
        <!-- 
            字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。
            在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
            charset 常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了
            全世界所有国家需要用到的字符。
            注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,
            尽量统一写成标准的“UTF-8”,不要写成“utf8”或“UTF8”。
         -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    

    总结

    1. 以上三种代码 vscode 自动生成,基本不需要我们重写。
      2.<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取HTML5版本来显示页面。
      3.<html lang="en"> 告诉浏览器或者搜索引起这是一个英文网站,本页面采取英文来显示。
      4.<meta charset="UTF-8">必须写,采取UTF-8来保存文字,如果不写就会乱码,具体原理后面分析。

    相关文章

      网友评论

          本文标题:二、HTML语法规范、骨架代码、开发工具VSCode

          本文链接:https://www.haomeiwen.com/subject/nniktltx.html