【前端】HTML

哦虎！2026-10-12 10:27

第一章 HTML

文章目录

  • [第一章 HTML](#第一章 HTML)
  • 前言
  • 一、简要
    • [1. HTML作用](#1. HTML作用)
    • [2. HTML文件基本结构](#2. HTML文件基本结构)
  • [二. 小技巧](#二. 小技巧)
  • [三. 常见标签](#三. 常见标签)
  • [四. 表格标签table](#四. 表格标签table)
  • [五. 表单标签](#五. 表单标签)
    • [1. input 文本框](#1. input 文本框)
    • [2. password 密码框](#2. password 密码框)
    • [3. radio 单选框](#3. radio 单选框)
    • [4. label 绑定单标签](#4. label 绑定单标签)
    • [5. checkbox 复选框](#5. checkbox 复选框)
    • [6. textare 文本域](#6. textare 文本域)
    • [7. button 按钮](#7. button 按钮)
    • [8. form 数据打包容器](#8. form 数据打包容器)
    • [9. checked 设置默认选项](#9. checked 设置默认选项)
    • [10. select 下拉选项](#10. select 下拉选项)
  • [六. 无语义标签](#六. 无语义标签)
  • [七 . 用户登录网页](#七 . 用户登录网页)
  • 总结

前言

今天选前端技术----HTML , 超文本标记语言 , 正常文本就是存文字 , 这个好啊 , 照片啥的都行 , 前端要用的东西有HTML , CSS , JS

一、简要

CS 客户端 / 服务器模式

BS 浏览器 / 服务器模式

1. HTML作用

HTML负责页面有什么

CSS负责内容的排版样式

JS负责交互

2. HTML文件基本结构

html标签是整个html文件的根标签(最顶层标签)

head标签中写页面的属性.

body标签中写的是页面上显示的内容

title标签中写的是页面的标题.

二. 小技巧

1.vscode

  1. 它不会自动保存，记得保存
  2. ! 后按tab或者enter , 直接生成html格式
  3. alt+shift+↑多行复制
  4. 注释注释，ctrl+/注释标签
  5. 标签不用写尖括号，写完标签直接回车就有了

2.浏览器

  1. 看成品 , 点击文件夹里代码文件直接就进去了，是浏览器页面
  2. 浏览器鲁棒性很强，就是有一个地方不规范但他还能理解
  3. 有时候运行代码和我们写的不一样，运行之后网页右键看源代码，看看一不一样
  4. ctrl+f5强制刷新
  5. 浏览器F12调试页面 , 右边小箭头点击可以定位

三. 常见标签

1.标题标签h

从h1到h6

html 复制代码 
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>

效果

2.段落标签p

vscode输入Lorem直接随机生成一段话

html 复制代码 
<p>文本</p>

注意

  1. 换行与多个空格没有用 , 只相当于一个空格
  2. 缩进什么的是css来处理
  3. 换行标签要用到单独的标签

3. 换行标签br

他是单标签 , 在结尾写

或者

html 复制代码 
<p >ri sit neque.</p><br>
<p >ri sit neque.</p>
<p >ri sit neque.</p>

效果

4.图片标签img

img里有两个属性 : 源src , 目标alte

src : 填照片绝对路径或者相对路径 , 相对路径是以当前文件所在位置为基准，.../是上一级目录 , ./是指当前目录

同时它也可以放网页的某个图片链接

代码那一页 , 鼠标放到那里停留一会点击 , 可以借阅
实际开发项目中相对路径比较多，有需要的可以放在同一目录下 , 方便上传

alt : 写入文字，如果图片不能加载会显示文字

html 复制代码 
<img src="./一张图片.jpg" alt="一张老虎图片">

效果图

我们可以调宽度 width，高度 height

单位px，指像素

html 复制代码 
<img width ="36px" height="24px" src="./一张图片.jpg" alt="一张老虎图片">

效果图

一般设置其中一个就可以，会等比例缩放

html 复制代码 
<img width ="12px" src="./一张图片.jpg" alt="一张老虎图片">

效果图

可以设置边框border

html 复制代码 
<img width ="140px" height="120px"  border="90px" src="./一张图片.jpg" alt="一张老虎图片">

效果图

注意

属性之间不分先后，属性不能写到标签之前，属性之间可以是换行或者空格，属性用键值对表示

5. 超链接a

提示里只有a：(带冒号的)才是a标签

href后面放超链接，也可以是内部网页，尽量用相对路径来写，文件放进去就是下载的意思了

HTML 复制代码 
<a href="http://baidu.com">百度</a>

效果演示

点击后跳转

空链接，直接写#，表示占位,项目中演示作用

HTML 复制代码 
<a href="#">百度</a>

属性 target，设置以哪种方式打开，black是空白页面 , 也就是它会新开一个页面

HTML 复制代码 
<a href="http://baidu.com" target="black">百度</a>

四. 表格标签table

表格中有行和列 :

tr表示一行 ;

td表示一个单元格，也就是列 .

table包含tr，tr包含td , 是父子关系

如果我们想用三行两列呢 , 输入

复制代码 
table>tr*3>td*2

回车后就变成(这里用的编译软件为vscode)

HTML 复制代码 
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

但打开网页发现空白 , 因为默认没有边框 , 添加边框 , 还是用border

HTML 复制代码 
<table border>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

效果 (华夫饼一样呢)

能否将缝隙删掉?

可以的 ,单元格之间有空隙，去掉

cellspacing ="0"

HTML 复制代码 
<table border cellspacing="0" width="90px" height="90px" >

效果

cellpadding: 内容距离边框的距离, 默认 1 像素

能否加入提示词呢?像姓名 , 班级...

用placehoder属性 , 它需要放到input标签里面

HTML 复制代码 
<table border width="90px" height="90px" cellspacing="0">
    <tr  >
        <td><input type="text" placeholder="姓名"></td>
        <td><input type="text" placeholder="班级"></td>
    </tr>
    <tr>
        <td>张三</td>
        <td>1班</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2班</td>
    </tr>
</table>

效果 ( 展示的时候有失误 , 第二行第二列请用眼部直觉替换成1班 )

当然 , 这个带提示词的地方现在像是一个输入框(就是)

表格居中align="center"

HTML 复制代码 
<table border cellspacing="0" align="center" width="90px" height="90px">
    <tr>
        <td><input type="text" placeholder="姓名"></td>
        <td><input type="text" placeholder="班级"></td>
    </tr>
    <tr>
        <td>张三</td>
        <td><1班/td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2班</td>
    </tr>
</table>

效果 ( 展示的时候有失误 , 第二行第二列请用眼部直觉替换成1班 )

这些其实是CSS

合并单元格

  1. 列合并，左边右边合并，在左边td那里 colspan="2"，合并两个单元格
HTML 复制代码 
<table border cellspacing="0" align="center" width="90px" height="90px">
    <tr>
        <td><input type="text" placeholder="姓名"></td>
        <td><input type="text" placeholder="班级"></td>
    </tr>
    <tr>
        <td colspan="2">张三</td>
        <td>1班</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2班</td>
    </tr>
</table>

效果图

错版了!!!

被合并的地方不能写东西!!!

改

HTML 复制代码 
<table border cellspacing="0" align="center"  height="90px">
    <tr>
        <td><input type="text" placeholder="姓名"></td>
        <td><input type="text" placeholder="班级"></td>
    </tr>
    <tr>
        <td colspan="2">张三</td>
        <td ></td>

    </tr>
    <tr>
        <td >李四</td>
        <td>2班</td>
    </tr>
</table>

效果图

  1. 行合并，上和下，上边td那里写rowspan
HTML 复制代码 
<table border cellspacing="0" align="center"  height="90px">
    <tr>
        <td><input type="text" placeholder="姓名"></td>
        <td><input type="text" placeholder="班级"></td>
    </tr>
    <tr>
        <td colspan="2">张三</td>
    </tr>
    <tr>
        <td >李四</td>
        <td>2班</td>
    </tr>
</table>

效果图

五. 表单标签

1. input 文本框

让用户输入信息的，有交互按钮两个部分，表单域，表单控件表单控件所在区域表单域表单域input后面带：

  1. text , 文本框
HTML 复制代码 
<input type="text"><br>

效果图

2. password 密码框

HTML 复制代码 
<input type="text">

效果图

3. radio 单选框

需要设置，让他们名字一样，代码知道是一组 , 才能进行单选

HTML 复制代码 
<input type="radio" name="1">羽毛球
<input type="radio" name="1">乒乓球
<input type="radio" name="1">足球
<input type="radio" name="1">羽毛球

效果图

一个现象 , 只能点击圆纽才能选上 , 那如何点击文字也可以选择上

需要让选项和文本捆绑在一起

4. label 绑定单标签

还要用到id，理论上这个input里的id和整个网页文档都不能重复

HTML 复制代码 
<input type="radio" name="1" id="2"><label for="2">羽毛球</label> 
<input type="radio" name="1" id="3"><label for="3">乒乓球</label> 
<input type="radio" name="1" id="4"><label for="4">足球</label> 
<input type="radio" name="1" id="5"><label for="5">排球</label>

效果图

5. checkbox 复选框

HTML 复制代码 
<input type="checkbox" name="6">羽毛球
<input type="checkbox" name="6">乒乓球
<input type="checkbox" name="6">足球
<input type="checkbox" name="6">排球

效果图

6. textare 文本域

无语义标签本身没有含义，只用来包裹内容、做布局样式；当没有合适的语义标签的时候，就用它们替代。

textare，就像写简介的 , 空格有效

HTML 复制代码 
<textarea name="" id="">wooooo ~    四个空格呦呦呦~~~</textarea>

效果

rows cols , 可以用这两个属性设置可见行数和字符数

7. button 按钮

HTML 复制代码 
<button>提交</button>

button和input submit是一样作用哦

效果图

我想通过这个按钮把数据传入后端

8. form 数据打包容器

form action=......，省略号里面写另一个接口或者页面，也就是要提交到的页面 , method 填get或者post

注意: form标签要包裹住按钮 !

HTML 复制代码 
<form action="Submit.html" method="get">

<input type="radio" name="1" id="2" ><label for="2">羽毛球</label> 
<input type="radio" name="1" id="3" ><label for="3">乒乓球</label> 
<input type="radio" name="1" id="4" ><label for="4">足球</label> 
<input type="radio" name="1" id="5" ><label for="5">排球</label> 

<br><br>

<input type="checkbox" name="6">羽毛球
<input type="checkbox" name="6">乒乓球
<input type="checkbox" name="6">足球
<input type="checkbox" name="6">排球

<br>
<br>

<button>提交</button>

</form>

点击提交 , 跳转后发现上面地址栏URL没有真正接收数据

因为我们没有写name , 表单提交不会把这个数据传给服务器！

name此处变成命名传输数据的类型

value是给传输的数据命名的 , 一个组里面不要一样

id是给前端的

现在我们只给单选添加value , 看看效果怎么样

HTML 复制代码 
<form action="Submit.html" method="get">

<input type="radio" name="1" id="2" value="羽毛球"><label for="2">羽毛球</label> 
<input type="radio" name="1" id="3" value="乒乓球"><label for="3">乒乓球</label> 
<input type="radio" name="1" id="4" value="足球"><label for="4">足球</label> 
<input type="radio" name="1" id="5" value="排球"><label for="5">排球</label> 

<br><br>

<input type="checkbox" name="6">羽毛球
<input type="checkbox" name="6">乒乓球
<input type="checkbox" name="6">足球
<input type="checkbox" name="6">排球

<br>
<br>

<button>提交</button>

</form>

效果

看 , 多选没有value , 提交显示on

9. checked 设置默认选项

HTML 复制代码 
<input type="radio" name="1" id="2" checked><label for="2">羽毛球</label>

刷新完就是选上的

10. select 下拉选项

用option标签，提交还是用到name，value

HTML 复制代码 
<select name="喜欢" id="">
    <option value="足球">足球</option>
    <option value="排球">排球</option>
    <option value="乒乓球">乒乓球</option>
</select>

六. 无语义标签

像包装盒子

div大盒子 块级元素，独占一行

span小盒子 行级元素，不独占一行

select是块级元素 , 不会独占一行

场景

HTML 复制代码 
<select name="喜欢" id="">
    <option value="足球">足球</option>
    <option value="排球">排球</option>
    <option value="乒乓球">乒乓球</option>
</select>

<textarea name="" id="">wooooo ~    四个空格呦呦呦~~~</textarea>

效果

纯文本文字建议用span包起来，方便后续去加样式，css

HTML 复制代码 
<div>
<select name="喜欢" id="">
    <option value="足球">足球</option>
    <option value="排球">排球</option>
    <option value="乒乓球">乒乓球</option>
</select>
</div>

<span>
<textarea name="" id="">wooooo ~    四个空格呦呦呦~~~</textarea>
</span>

效果

七 . 用户登录网页

HTML 复制代码 
<body>
    <h1>用户注册</h1>

    用户名:
    <input type="text" placeholder="请输入用户名"><br>
    手机号码:
    <input type="text" placeholder="请输入手机号码"><br>
    密码:
    <input type="password" placeholder="请输入密码"><br>

    <button>注册</button>
    已有帐号?
    <a href="#">登录</a>

</body>

效果

唉呦嘿 , 着不对齐有点丑啊

稍等 , 可以用table解决

HTML 复制代码 
<body>

    <h1>用户注册</h1>

    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" placeholder="请输入用户名"><br></td>
        </tr>
        <tr>
            <td>手机号码:</td>
            <td><input type="text" placeholder="请输入手机号码"><br></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" placeholder="请输入密码"><br></td>
        </tr>
    </table>

    <button>注册</button>
    已有帐号?
    <a href="#">登录</a>

</body>

效果

总结

阿西 , 中间那些JavaEE的博客只写了大体草稿 , 还没有整理 , 真是蜀掉^^

不过`今天整理完了这个还是蛮开心的^^

相关推荐
FY@-@2 小时前
Shell 脚本编程：条件判断与循环
linux·运维·前端
Source.Liu2 小时前
【A11】拆分前端，实现多页面方案
前端·rust
涛涛ing2 小时前
Navigation API正式Baseline：那个让无数前端头疼的History API，终于可以退休了
前端
Hilaku3 小时前
为什么我劝应届生不要去创业公司写前端？
前端·javascript·程序员
郑州光合科技余经理3 小时前
出海外卖平台：支付对接为什么要和下单收款分开
android·java·开发语言·前端·后端·php·ai编程
data analyse 4563 小时前
前端自建访问统计，访客标识怎么设计才稳？Cookie、本地存储与设备指纹的取舍
前端·数据分析
终端安全笔记3 小时前
配置锁状态那一栏查的是什么：报告里几项各自指向什么风险
android·前端·安全·ios
恋猫de小郭3 小时前
Kotlin Toolchain 0.13，JetBrains 推荐 KMP 都切换到到全新工具链
android·前端·flutter
我是人✓3 小时前
Java面向对象核心特性深度解析
java·前端·算法
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Telegram APK 下载安装完整指南 — 2026年最新