2024年最全HTML 基本开发方式，学会常用的 HTML 标签_html 开发，2024年最新阿里P8亲自讲解

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

9、表格标签 table

是一组标签，

table：表示整个表格
tr：表示一行
td：表示一列
th：表示表头中的一列

通过 html 构造出一个表格，表格表示通讯录

如果不加任何属性，看到的表格，就是一个特别 “原始” 的表格，给 table 标签加一些属性，让这个表格更"像表格"一些

<body>
    <table>
        <tr>
            <td>张三</td>
            <td>101</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>102</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>103</td>
        </tr>

    </table>
</body>

在这里插入图片描述

border 加上边框

width / height 设置表格的尺寸

<table border="2px" width = "500px" hight = "200px">

在这里插入图片描述

使用 th 标签给表格加上表头

<tr>
	<th>姓名</th>
	<th>号码</th>
</tr>

在这里插入图片描述

使用 cellspacing 属性去掉单元格之间的间隙

<table border="2px" width = "500px" height = "300px" cellspacing = "0">

在这里插入图片描述

使用 css 中的 text-align 属性来使表格的内容居中心

在这里插入图片描述

<!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>Table</title>
</head>
<body>
    <style>
 td {
 text-align: center;
 }
 </style>
    <table border="2px" width = "500px" height = "300px" cellspacing = "0">
        <tr>
            <th>姓名</th>
            <th>号码</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>101</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>102</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>103</td>
        </tr>

    </table>
</body>
</html>

这些也是可以通过 CSS 来实现的，实际开发中，很少会直接使用 table 的属性来做，这是历史遗留问题，上古时期，只有 HTML，没有CSS

10、列表标签

<body>
    <h3>无序列表</h3>
    <ul>
        <li>Gwen</li>
        <li>Gwen</li>
        <li>Gwen</li>
    </ul>

    <h3>有序列表</h3>
    <ol>
        <li>Gwen</li>
        <li>Gwen</li>
        <li>Gwen</li>
    </ol>

    <h3>自定义列表</h3>
    <dl>
        <dt>student</dt>
        <dd>Gwen</dd>
        <dd>Gwen</dd>
        <dd>Gwen</dd>
    </dl>
</body>

在这里插入图片描述

其中最常用的就是无序列表，
使用场景已经并不是单纯的，就用本身的这种显示行为了
把多个 “并列关系” 的元素给罗列到一起，这种经常就会使用到 ul，
这里的小圆点，要不要显示，显示成什么，都可以通过 CSS 来修改

11、表单标签 form

input

表单标签是用户和页面之间交互的重要手段，大部分的 html 标签都是给用户 “展示”
表单标签，是让用户来 “输入”
form 表示一个表单标签，借助这个 form 就可以允许用户输入一些信息，并且提交到服务器上，
在 form 里面可以放一些和用户交互的组件，
input 标签，有很多种形态

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

1、文本框

<form>
	<input type="text">
</form>

在这里插入图片描述

2、密码框

也是一个单行文本框，但是这个可以用来输入密码

<input type="password">

在这里插入图片描述

3、单选框

注意：单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果

<input type="radio" name="gender" > 男
<input type="radio" name="gender" checked = "checked"> 女

搭配上 label 的单选框，id 属性。任意 html 元素，都可以指定 id 属性，在一个页面中，id 的取值不能重复(唯一的)

<input type="radio" name = "gender" id = "male"> 
<label for="male">男</label>
<input type="radio" name = "gender" checked = "checked" id = "female"> 
<label for="female">女</label>

下载点击文字，也可以选中

在这里插入图片描述

4、复选框

也可以使用 checked 来表示默认选中。也可以搭配 label 来实现点击文字，就选中元素

<input type="checkbox" checked = "checked"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习

5、普通按钮

<input type="button" value="这是按钮" onclick="alert('hello')">

在这里插入图片描述

onclick 是一个 js 的代码，onclick 表示在点击元素的时候触发，触发的内容就是 “” 里的代码，会被浏览器直接执行，alert 就是弹出一个对话框

第二种写法：

<button onclick="alert('hello')">这是按钮</button>

6、提交按钮

<form action="test.html">
	<input type="text" name="username">
	<input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

7、清空按钮

<form action="test.html">
	<input type="text" name="username">
	<input type="submit" value="提交">
	<input type="reset" value="清空">
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置

8、选择文件

<input type="file">

在这里插入图片描述

点击 “选择文件” 就会弹出一个对话框，就可以选择本地的一个文件，然后浏览器就会打开这个文件
进一步的就可以实现提交 / 上传文件到服务器的效果

select

<body>
    <form>
        <select>
            <option>--请选择年份--</option>
            <option selected = "selected">2001</option> <!--默认选项-->
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>

        </select>
        </form>
</body>

在这里插入图片描述

使用 select 表示一个下拉菜单，每个菜单项是一个option，可以使用 selected 来表示默认的选项是啥

textarea

多行的文本框。
文本域中的内容，就是默认内容，注意，空格也会有影响
rows 和 cols 也都不会直接使用，都是用 css 来改的

<textarea name="" id="" cols="30" rows="10">
            
</textarea>

在这里插入图片描述

12、无语义标签: div & span

出厂频率最高的标签

前面的标签,都是"有语义"的标签，每个标签都有一个明确的角色，最初 HTML 诞生的初衷就是为了表示 “报纸 / 杂志” 这样的媒体
但是随着时代的发展，HTML 已经不仅仅是作为 “报纸"，而是变成了一个 “应用程序”
相比于有语义标签，无语义标签更适合于 “应用程序”

这里的 div 和 span 就可以代替上述绝大部分有语义标签的功能 (但是 form 这一系列是代替不了的.….)
极端来讲，一个网页，可以 90% 的标签都是 div / span (完全可行的，但是这种做法并不常见)

div：默认是一个块级元素 (独占一行)
span：默认是一个行内元素 (不独占一行)

也可以把 div 和 span 想象成一个矩形的盒子，在这个盒子里,，以放各种的页面内容

	<div>
        <span>hello</span>
        <span>hello</span>
    </div>
    <div>
        <span>hello</span>
        <span>hello</span>
    </div>

在这里插入图片描述

Emmet 快捷键

快速输入标签 input[tab]

快速输入多个标签 div*3[tab]

标签带id div#sex[tab]

标签带类名 div.sex[tab]

标签带子元素 ul>li*3[tab]

标签带兄弟元素 span+span

标签带内容 div{hello}

标签带内容(带编号) div{$.hello}

MDN 参考文档

mozilla 是一个开源组织，最大的一个产品就是 firefox 浏览器

HTML（超文本标记语言）

MDN-input

也可以鼠标放在想查看的标签上，点击可以跳转：

在这里插入图片描述

三、综合案例

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>
</head>
<body>
    <h1>我的简历</h1>
    <h2>基本信息</h2>
    <img src="flower.jpg" alt="">
    <p>求职意向：Java 开发工程师</p>
    <p>练习电话：111</p>
    <p>个人邮箱：111@163.com</p>
    <p>
        <a href="https://blog.csdn.net/qq\_56884023?type=blog">我的博客</a>
    </p>
    <p>
        <a href="https://GitHub.com"></a>
    </p>

    <h2>教育背景</h2>
    <ol>
        <li>2000-2005 翻斗小学</li>
        <li>2006-2008 翻斗中学</li>
        <li>2009-2012 翻斗大学</li>
    </ol>

    <h2>专业技能</h2>
    <ul>
        <li>熟练掌握 Java 的基础语法，熟悉面向对象程序设计的基本思想</li>
        <li>熟练掌握常用的数据结构，和集合类，例如顺序表，链表，二叉树，哈希表等</li>
        <li>熟悉 MySQL 数据库，熟悉 MySQL 语句，并且能进行基本的增删改查</li>
        <li>熟悉网络原理和网络编程，例如：TCP、UDP、IP 等常见协议的底层机制</li>
    </ul>
    
    <h2>项目经验</h2>
    <ol>
        <!-- 第一个项目 -->
        <li>
            <h3>留言墙</h3>
            <p>开发时间：2012.9-2013.1</p>
            <p>功能介绍：</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
        <!-- 第二个项目 -->
        <li>
            <h3>学习小助手</h3>
            <p>开发时间：2013.9-2014.1</p>
            <p>功能介绍：</p>
            <ul>
                <li>支持错题检索</li>
                <li>支持同学探讨</li>
            </ul>
        </li>
    </ol>
    
    <h2>个人评价</h2>
    <p>本人学习成绩优异，多次获得学校奖学金</p>
    
</body>
</html>

2、案例二：填写简历信息

在这里插入图片描述

iconfont-阿里巴巴矢量图标库

<!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>
</head>
<body>
    
    <h1>请填写简历信息</h1>

    <table>
        <!-- 1、姓名 -->
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <!-- 2、性别 -->
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name = "gender" id = "male">
                <label for="male">
                    <img src="boy.png" alt="" width="17px"> 男
                </label>
                
                <input type="radio" name = "gender" id = female checked = "checked">
                <label for="female">
                    <img src="girl.png" alt="" width="17px"> 女
                </label>
            </td>
        </tr>
        <!-- 3、选择出生日期 -->
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                </select>
            </td>
        </tr>
        <!-- 4、输入学校 -->
        <tr>
            <td>
                就读学校
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <!-- 5、选择应聘岗位 -->
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" id = "frontend">
                <label for="frontend">前端开发</label>

                <input type="checkbox" id = "backend">
                <label for="backend">后端开发</label>
                
                <input type="checkbox" id = "qa">
                <label for="qa">测试开发</label>
                
                <input type="checkbox" id = "op">
                <label for="op">运维开发</label>
            </td>
        </tr>
        <!-- 6、掌握的技能 -->
        <tr>
            <td>
                掌握的技能
            </td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <!-- 7、项目经历 -->
        <tr>
            <td>
                项目经历
            </td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <!-- 8、确认要求 -->
        <tr>
            <!-- 这个 td 空着，占个位置 -->
            <td></td>
            <td>
                <input type="checkbox" id = "confirm">
                <label for="confirm">我已仔细阅读过公司招聘要求</label>
            </td>
        </tr>
        <tr>
            <!-- 这个 td 空着，占个位置 -->
            <td></td>
            <td>
                <h3>请应聘者确认：</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽快取公司实习</li>
                    <li>能够接收公司的加班文化</li>
                </ul>
            </td>
        </tr>


![img](https://img-blog.csdnimg.cn/img_convert/cb1257229ff68097945a0683c4ac35a4.png)
![img](https://img-blog.csdnimg.cn/img_convert/8a8ffa2f17df1fd21932bda6254977d8.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**


            <td></td>
            <td>
                <input type="checkbox" id = "confirm">
                <label for="confirm">我已仔细阅读过公司招聘要求</label>
            </td>
        </tr>
        <tr>
            <!-- 这个 td 空着，占个位置 -->
            <td></td>
            <td>
                <h3>请应聘者确认：</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽快取公司实习</li>
                    <li>能够接收公司的加班文化</li>
                </ul>
            </td>
        </tr>


[外链图片转存中...(img-23EwFv4c-1715603027295)]
[外链图片转存中...(img-SHzvvZEG-1715603027295)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**