牧..

HTML - 扫盲

文章目录

1. 前言
2. HTML
- 2.1 下载 vscode
3 HTML 常见标签
- 3.1 注释标签
- 3.2 标题标签
- 3.3 段落标签
- 3.4 换行标签
- 3.5 格式化标签
- - 1. 加粗
  - 2. 倾斜
  - 3. 下划线
- 3.6 图片标签
- 3.7 超链接标签
- 3.8 表格标签
- 3.9 列表标签
4. 表单标签
- - 4.1 from 标签
  - 4.2 input 标签
  - 4.3 select 标签
  - 4.4 textarea标签
5. 无语义标签
6. 案例
- 6.1 代码案例1
- 6.2 代码案例 2

1. 前言

到此网络原理我们就看完了，接下来就需要进入一个新的阶段，也就是正对 web 展开学习 .

这里进行web 开发，具体来说就是搭建一个网站 .

下面就来学习一下前端的知识，对它扫个盲 .

前端开发主要使用三个编程语言 :

HTML
CSS
java Script

这里 HTML 和 CSS 这两个语言就不是通常意义的编程语言，通常的编程语言，是能表述逻辑的，而这俩表达不了逻辑 .

这俩东西知识表达了一些 “属性” , 描述一个东西是啥样子的，而不能描述这个东西干了啥 .

具体来说 :

HTML 描述了网页的骨架 (页面里有啥没啥)

CSS 描述了网页的样式（形容词）

好比你看到一个非常好看的妹子，你和室友说，这里要如何表示妹子好看呢？肤白貌美大长腿，樱桃小嘴等这些形容词就叫做样式 .

通过 HTML 和 CSS 就可以将我们的页面给描述出来，但是它是静态的，是无法和用户交互是缺少灵魂。

而我们的 JS 就是描述了网页的行为 (如何和用户交互)

有了 js 我们的网页就可以是动态的 .

这里 HTML 就像人的骨一样， CSS 就是皮，而 js 就是魂 .

了解：

JS 是当前前端开发最主要的语言，统治地位已经 20 年了 , 这里最开始是 java 搞这个事情 (java 最开始做前端) 后来被微软被刺 ,

然后 java 跌落神坛 JS 乘机上位 .

现在 JS 也有一些挑战者其中威胁最大的 TS （TypeScript）正是微软搞得 .

TS 之父正是 c# 之父， TS 和 JS 的关系就是 C++ 和 C 的关系 (兼容) .

前端程序猿纷纷倒戈，投入 TS 的环抱，时至今日， TS 的市场份额，应该应该已经超过 6 成了 (其实已经超过 JS) 包括很多大厂的知名产品都使用 TS 重构了 .

除此之外还有一伙人，谷歌因为安卓这里使用 java 吃了官司，怀恨在心于是搞下一代移动系统搞了 Dart 语言 (Flutter 框架) , 这里谷歌野心很大想要制霸全平台，

当前客户端的形态 1.网页， 2. PC 程序， 3. 移动端程序。谷歌的 Dart 就希望将这些平台都能制霸，这一套程序写出的代码，能在各个平台都能运行，

因此 Dart 就成为了 JS 的竞争者但是很遗憾这个东西估计就够呛了 (谷歌 Dart 团队裁员了，意味着这个团队变得更边缘了，在加上 charGPT的威胁 ,

釜底抽薪的威胁到了谷歌多年的垄断地位）

再然后：前端这么火， C++ , Python , Go , Rust … 是否眼馋这块肥肉呢？？？显然是的 !!！

这些大佬们联合起来搞了个 web asm (浏览器上的汇编) , CPU 认得是汇编，这里不管是啥语言只要转成 webasm 此时就可以在浏览器上运行了，就可以进行前端开发了 , 当前阶段这个东西还不够成熟，目前还难以威胁到 JS 的地位 .

下面正式开始学习 HTML

2. HTML

HTML 描述网页的骨架，是非常有特点的标签化的语言 .

下面通过写一个 hello word 来感受一下 .

这里我们直接创建一个.html 文件，通过记事本来写

稍微说一下：

上面我们是通过记事本来编写代码，通过浏览器来运行程序的 .

这里的开发开发和运行是完全独立的两个东西，我们之前写的java 代码一直是写完代码就通过绿色的三角进行运行，这里就可能导致我们搞混来 .

开发：是在程序猿的电脑上完成的写代码的过程，

运行：则是在用户的电脑上完成具体的程序跑起来的过程 .

换句话来说：一次开发， N次运行（我们写好的程序发布在网上，有 1 w 个人下载，此时我们的这个程序就可能在这 1 w 个人的电脑里运行多次），

这里对于初学者来说，我们自己开发的程序，只有我们自己在运行，尤其是运行操作都被集成到开发者工具中（idea 写程序点三角号，

就运行了）此时就会误以为开发和运行是在一起的 .

我们刚刚写的 HTML 是直接在浏览器中运行，浏览器就相当于 JVM 这样的角色，我们 java 代码运行在 JVM 上， HTML 包括 CSS ， JS 都是运行在浏览器上

2.1 下载 vscode

下面继续：这里使用的是记事本完成代码的编写，显然不是一个好的选着，并没有啥代码补全等功能 , 降低了我们的开发效率 .

这里就来介绍一下，当前前端开发，使用的开发环境最主流的两个 :

JB 系列： IDEA 如果是专业版(教育版) 本身就是支持前端的 , 或者使用 JB 提供的 WebStorm .
使用 VSCode 他是完全免费的，接下来的 HTML ， CSS ， JS 我都会使用它 .

除了上面这两个之外，还有很多选择比如 dw , sublime , text ，vim 等 .

vscode 下载 : http://t.csdn.cn/FNXnW

使用 vscode

这里 vscode 和 idea 相比，更简单， idea用的时候，需要先创建一个项目，创建过程中要配置很多东西 .

vscode 则没有 “项目” 这个概念 ,都是使用目录来组织的 , 就可以选择一个你当前想要代码的目录，打开这个目录 (打开目录就相当于以这个目录作为项目目录)

图一：

图二：运行代码

vscode 常用插件：

这里我们就通过 vscode 又完成了一遍 helloworld ，下面来研究一下代码的特点 .

html 代码是通过标签来组织的，形如用尖括号组织的，成对出现的这个东西就是标签 (tag) , 也可以叫做元素 (element)
一个标签通常是成对出现的 , 开始标签 , 结束标签 , 这俩之间，是标签的内容 .
标签是可以嵌套的，一个标签的内容可以是其他一个或者多个标签 , 此时这样的标签构成一个 “树形结构” .

可以在开始标签中，给标签赋予属性 (Attribute) 属性相当于是键值对 , 可以又一个或者多个 .

HTML 基本的语法结构，就是这几个简单的规则

下面我们就来了解当前HTML 中都支持那些标签，每个标签是干啥的，每个标签有那些关键属性 .

3 HTML 常见标签

html 这是一个 html 文件最顶层标签，树根节点

head 存放了这个页面的一些属性（元素据 , meta data）

body 存放了这个页面包含那些内容

这里通过一个例子来区分一下属性和内容 ,

比如 : 我有个文本文件，

这个文件的内容 : hello world

这个文件的属性：文件的大小，文件的创建者，文件的修改时间，文件的默认打开程序 …

下面继续：之前不是说过通过 ！快捷方式生成了一个模板吗，下面就来解释一下这个模板的一些标签 :

3.1 注释标签

代码的注释： HTML 注释标签和一般语言的注释，差别很大 .

3.2 标题标签

标题标签有 6 个， h1 最大最粗， h6 最小最细 . h1 - h6 从大变小

简单演示一下 :

3.3 段落标签

段落标签 : p 标签

演示 :

3.4 换行标签

换行标签 : br

演示：

3.5 格式化标签

这里格式化标签有几个：

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

下面一个一个说

1. 加粗

演示： strong 标签和 b 标签

2. 倾斜

演示 : em 标签和 i 标签

3. 下划线

演示 : ins 标签和 u 标签

3.6 图片标签

图片标签： img

图片，可以使用img标签来表示图片。

img 是一个单标签。（不需要结束标签）

img 里面可以写很多的属性，最核心的属性就是 src ，通过 src 描述图片的路径 (可以是相对路径，也可以是绝对路径，还可以是网络路径)

演示：

这里来说说 img 标签中的其他属性

图一：

图二：

3.7 超链接标签

超链接标签： a 标签

3.8 表格标签

3.9 列表标签

4. 表单标签

4.1 from 标签

from 标签

使用 from 标签进行前后端交互，把页面上，用户进行的操作/输入提交到服务器上 (这里展示展开，后面学习了 HTTP 协议再说)

4.2 input 标签

input 标签有很多形态，能够表现成各种用户来输入的组件 .

演示：

图二：

图三：

4.3 select 标签

select 标签，起到的效果是“下拉菜单/下拉框”

4.4 textarea标签

textarea标签：多行编辑框

上述这些标签也可以称为是 “控件” ，构成一个图形化界面的基本要素 .

5. 无语义标签

到此 HTML 一些常用的标签就看完了，如果对HTML 的其他标签感兴趣可以去 MDN文档查看：或者： HTML5 简介 (w3school.com.cn)

6. 案例

下面通过两个简单的代码案例，来熟悉一下上面这些标签 .

6.1 代码案例1

完成效果：

纯属恶搞 , 勿当真

附上代码：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历title>

    <style>
        
        
        #root {
            /* 设置宽度 */
            width: 600px;
            /* 设置高度 */
            height: 1750px;
            /* 设置 边框 */
            border-style: solid
        }
    style>
head>

<body>
    <div id="root">
        <h1>xxx的个人简介h1>

        <h2>基本信息h2>

        <img src="../imgs/cxk.jpg" width="400px">

        
        <div>
            求职意向: 个人练习生
        div>
        <br />

        
        <div>
            联系电话: xxxxxxx
        div>
        <br />

        <div>
            邮箱: xxxxxxx
        div>
        <br />
        
        <a href="#">我的 Giteea>
        <br /><br />
        <a href="#">我的博客a>
        <h2>教育背景h2>

        <ol>
            <li>1990 - 1996 翻斗幼儿园li>
            <li>1996 - 2002 小葵花小学li>
            <li>2002 - 2005 m78中学li>
            <li>2005 - 2007 练习两年半li>
        ol>

        <h2>专业技能h2>
        <ul>
            <li>唱li>
            <li>跳li>
            <li>rapli>
            <li>篮球li>
        ul>
        <h2>我的经历h2>

        <ol>
            <li>
                <h3>练习两年半h3>
                <p>开始时间: 2005 - 2007p>
                <div>经历介绍div>
                <ul>
                    <li>早上打篮球li>
                    <li>晚上唱跳rapli>
                ul>
            li>
            <li>
                <h3>学习如何寄律师函h3>
                <p>开始时间: 2007 - 2008p>
                <div>经历介绍div>
                <ul>
                    <li>一秒八张li>
                    <li>你干嘛li>
                ul>
            li>
        ol>


        <h2>个人评价h2>
        <p>
            我 是一个 爱打篮球的 坤坤噢
        p>
    div>

body>

html>

这里添加了 css 样式 (为了添加边框好看一点) ，如果不懂可以不写

6.2 代码案例 2

完成效果：

这里可以通过 iconfont-阿里巴巴矢量图标库找两张图（小图标）