(3-1) Html

[00. 前置知识](#00. 前置知识)

[01.Web 开发](#01.Web 开发)

[02. Web 应用开发涉及到的技术](#02. Web 应用开发涉及到的技术)

03.为什么学前端

04.前端的学习路线

[04.1 慕课网](#04.1 慕课网)

[04.2 vue实现后台管理系统](#04.2 vue实现后台管理系统)

[1. Html](#1. Html)

[1.1 概述](#1.1 概述)

[1.2 编写 html 文件](#1.2 编写 html 文件)

[1.3 html 骨架标签](#1.3 html 骨架标签)

[（1）字符集设置](#（1）字符集设置)

[（2）文件标签](#（2）文件标签)

[（3）语言设置](#（3）语言设置)

（4）移动端适配设置

[1.4 html 的big demo](#1.4 html 的big demo)

（1）实现code

（2）实现效果

00. 前置知识

01.Web 开发

02. Web 应用开发涉及到的技术

03.为什么学前端

04.前端的学习路线

04.1 慕课网

04.2 vue实现后台管理系统

1. Html

1.1 概述

1.2 编写 html 文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vb的html文件</title>
</head>
<body>
    hello phdvb!
</body>
</html>

1.3 html 骨架标签

（1）字符集设置

（2）文件标签

（3）语言设置

（4）移动端适配设置

复制代码

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1.4 html 的big demo

（1）实现code

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 align="center">phdvb</h1>
    <p align="center">
        <a href="#baseInfo">1.基本信息</a>    
        <a href="#perIntro">2.人物生平</a>    
        <a href="#classic">3.人物生平</a>    
        <a href="#goods">4.所获奖项</a>    
    </p>

    <h3 id="baseInfo">1.基本信息</h3>
    <hr/>
    <p align="center">
          phdvb老师（又名：<b>正经正直正义的老师</b>），男，于xxxx年xx月xx日，出生于<i>陕西省宝鸡市渭滨区</i>，是一位热爱it教育事业的好老师，他的毕生理想就是成为中国最优秀的it教育老师之一。
    </p>
    <br/>
    <h3 id="perIntro">&ltp&gt2.人物生平&ltq&gt</h3>
    <hr/>
    <p>
          xxxx年xx月 -- xxxx年xx月，就读于清华(池)大学。与<strong><em><a href="https://baike.baidu.com/item/%E9%A9%AC%E4%BA%91/6252" target="_blank">马云</a>、<a href="https://baike.baidu.com/item/%E9%A9%AC%E5%8C%96%E8%85%BE/124988" target="_self">马化腾</a>、<ins>王健林</ins>、许家印</em></strong>等都不是同学，也不认识他们。但黄老师有成为中国最优秀的it培训老师之外的另一个理想，就是成为陕西省宝鸡市渭滨区黄家庄首富的恢宏理想。
    </p>
    <p>
         &nbsp&nbsp&nbsp&nbspxxxx年xx月，从清华<font size="1">(池)大学毕业以后</font>，<s>黄老师进入了中国醉付盛名的互联网科技公司</s> -- 宝东团科技股份有限公司，并且很快成为了公司的主力。负责打扫办公室，为各位大佬程序员端茶倒水等重要工作。
    </p>
    <p>
          在执行一次扫地任务过程中，黄老师发现项目经理的代码不管怎么样都调试不过。在认真观察了两秒钟之后，他默默的跟项目经理说："这里少了一个分号"。项目经理在震惊之余，迅速加上分号并调试通过。完成调试后的项目经理当即拜黄老师为师，并邀请他加入项目组，成为项目经理的经理。从此以后，黄老师成为了一名正式程序员。
    </p>
    <p>
          xxxx年xx月，黄老师离开了宝东团公司与好友<a href="./zhu.html" target="_parent">朱老师</a>、<a href="./yang.html" target="_top">杨老师</a>、牛老师一起创建了"xx科技教育股份有限公司"，专业提供教育产品。
    </p>

    <p align="center">
        <img src="./img/1.jpg" alt="正经正直正义的老师" width="600">
    </p>
    <br>

    <h3 id="classic">3.主要著作</h3>
    <hr>
    <table border="1" align="center" cellspacing="0" cellpadding="5" width="500">

        <thead>
            <tr bgcolor="#f0f8ff">
                <td></td>
                <td>书名</td>
                <td>出版社</td>
                <td>出版日期</td>
            </tr>
        </thead>
<!--        <tr >-->
<!--            <td>编号</td>-->
<!--            <td>书名</td>-->
<!--            <td>出版社</td>-->
<!--            <td>出版日期</td>-->
<!--        </tr>-->
        <tr>
            <td>1</td>
            <td>Java</td>
            <td>Java出版社</td>
            <td>2024出版日期</td>
        </tr>
        <tr>
            <td>2</td>
            <td>云计算</td>
            <td>云计算出版社</td>
            <td>2025出版日期</td>
        </tr>
        <tr>
            <td>3</td>
            <td>数通</td>
            <td>数通出版社</td>
            <td>2025出版日期</td>
        </tr>
    </table>
    <br>
    <h3 id="goods">4.所获奖项</h3>
    <hr>
    <ul>
        <li>xxxx年xx月，陕西省宝鸡市渭滨区黄家庄小学一年级一班<b>最靓的仔</b>称号</li>
        <li>xxxx年xx月，清华<font size="1">(池)</font>大学搓澡大赛金牌</li>
        <li>xxxx年xx月，宝东团公司最佳扫地奖</li>
    </ul>
    <br>

    <h3 id="commitInfo">5.提交信息</h3>

    <form action="#" method="post">
        <input type="hidden" name="rid" value="10">
        账号: <input type="text" name="username" value="admin" placeholder="root" maxlength="10" readonly disabled="disabled" /><br>
        密码: <input type="password" name="pwd" value="123123" placeholder="123456" /><br>
        性别: <input type="radio" name="gender" value="1"/>男
        <input type="radio" name="gender" value="2" />女
        <input type="radio" name="gender" value="3" />未知<br>
        爱好: <input type="checkbox" name="hobby[]" value="e" />吃
        <input type="checkbox" name="hobby[]" value="d" />喝
        <input type="checkbox" name="hobby[]" value="p" />玩
        <input type="checkbox" name="hobby[]" value="h" />乐<br>
        头像: <input type="file" multiple="multiple" /><br>
        地址: <select name="addr">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select><br>
        简介: <textarea name="sign" cols="30" rows="20"></textarea><br>
        <input type="button" value="普通按钮" />
        <input type="reset" value="重置表单按钮">
        <input type="submit" />
    </form>
    <br>
    <br>
    <br>
    <hr>
    <form action="">
        <table cellpadding="5">
            <tr>
                <td>用户名</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>密&emsp;码</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>评&emsp;论</td>
                <td><textarea name="" id="" cols="100" rows="10"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><input type="submit" value="发表"></td>
            </tr>
        </table>
    </form>
    <br>
    <br>
</body>
</html>

00. 前置知识

01.Web 开发

02. Web 应用开发涉及到的技术

03.为什么学前端

04.前端的学习路线

04.1 慕课网

04.2 vue实现后台管理系统

1. Html

1.1 概述

1.2 编写 html 文件

1.3 html 骨架标签

（1） 字符集设置

（2） 文件标签

（3） 语言设置

（4）移动端适配设置

1.4 html 的big demo

（1）实现code

（2）实现效果

（1）字符集设置

（2）文件标签

（3）语言设置