HTML入门第一课

最新推荐文章于 2024-10-02 17:15:49 发布

二白程序员

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量400

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_63511098/article/details/136322156

版权

附加一个入门问题：怎么去开发一个网站？

答：网页三剑客——

html 搭建网页结构

css 修饰网页内容

JavaScript 交互开发

下面记录本人所学HTML基础第一课

一、HTML的概述：

HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言，用于描述超文本中内容的显示方式，比如字体什么颜色，大小等。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

二、编辑器选择

NotePad：记事本。

UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。

Sublime Text：后起之秀，新一代的代码编辑器（用的人很多）。

dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。

vscode：安装包小，启动速度快，拥有一个强大的插件系统，支持多种编程语言和开发工具，而且是免费且开源的编辑器，新手适用。（本人目前选择）

三、基本结构

1、网页结构

<!-- 网页结构快捷键：shift+! -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、文档声明

<!-- 文档类型：html
文档声明，在代码的最开始，跟浏览器约定好，网页开发的文档类型是html
程序员需要按照html文档规范去编写代码，浏览器也按照html规范去编译代码，
防止出现乱码，让开发陷入怪异模式
-->
<!doctype html>
<!-- html标签 根标签 所有内容都要写在根标签内
       一个页面就一个根标签
    -->
<!-- html开始标签，结束标签 -->
<html>
<!-- head标签 主要是配置元信息，它里面的内容，是帮助浏览器编译代码的
    正常情况下，用户是看不到的
    -->

<head></head>
<!-- body标签 书写网页的主体内容，是给用户看的，用户看的所有网页内容
    都写在body标签内 -->

<body>

</body>

</html>

3、最简单的网页结构

<!-- 最简单的网页结构 -->
<!doctype html>
<html>
    <head></head>
    <body>
        <!-- 知识点1： -->
        <!-- 自动生成假中文：jw+数字  默认产生128个汉字 -->
        句程慧第恼俭极，留。
        <!-- 自动生成英文：lorem+数字  -->
    </body>


</html>
<!-- 知识点2： -->
<!-- 元素（标签）之间的关系
    父子关系：直接包含与被包含的关系
             父元素直接包含子元素
             子元素直接被父元素包含
    祖先后代关系：直接或间接包含与被包含的关系，包含父子关系
    兄弟关系：拥有共同的父元素

-->

4、title标签

<!doctype html>
<html>
    <head>
        <!-- title标签，标题标签 -->
        <title>
            百度一下，你就知道
            
        </title>
        <!-- 
        title标签：设置网站的标题
        它更重要的功能：帮助浏览器检索网站  帮助seo推广部门进行网站的推广
           推广部门：
           seo 搜索引擎优化
           sem 竞价推广

         -->

    <body>
        
    </body>



</html>

5、meta标签

<!doctype html>
<html>
    <head>
        <title>网站的标题</title>
        <!-- meta标签，本身没有作用，可以配置属性及属性值，从而帮助浏览器解析 -->
        <!--属性 属性值 是写在开始标签或者自结束标签尖括号内部的 
            charset="utf-8"
                charset 属性 配置字符集，设置密码本
                utf-8 属性值 字符集的一种叫万国码

            编码 将文字、图片、各种音频等都转化成二进制
            解码 将二进制转成对应的文字、图片、音视频
            密码本 编码和解码参考的标准
            乱码 编码和解码的参考标准不一
         -->
        <meta charset="utf-8">
    </head>
    <body>
        
    </body>
</html>
<!--
标签的分类
    1、按形式分：双标签：开始标签和结束标签， eg：html、body、title
    单标签（自结束标签）：开始标签和结束标签就他自己 eg：meta
        <meta>或<meta />
    2、按特点分





 -->