跳到主要内容【JavaEE01-前端部分】从零入门HTML:从基础到实战,手把手教你写第一个网页 | 极客日志Python
【JavaEE01-前端部分】从零入门HTML:从基础到实战,手把手教你写第一个网页
✅ 适合编程新手,用最通俗的语言讲清HTML核心知识点,搭配原创示例代码,看完就能上手写网页! 一、认识HTML:网页的'骨架语言' 1.1 什么是HTML? HTML的全称是HyperText Markup Language(超文本标记语言),你可以把它理解为**网页的骨架** —— 没有它,网页就是一片空白。 **超文本**:不只是单纯的文字,还能包含图片、视频、链接,甚至是可点击的按钮,…
刀狂29K 浏览 ✅ 本文适合编程新手,用最通俗的语言讲清HTML核心知识点,搭配原创示例代码,看完就能上手写网页!
一、认识HTML:网页的'骨架语言'
1.1 什么是HTML?
HTML的全称是HyperText Markup Language(超文本标记语言),你可以把它理解为网页的骨架 —— 没有它,网页就是一片空白。
- 超文本:不只是单纯的文字,还能包含图片、视频、链接,甚至是可点击的按钮,让内容'活'起来。比如你刷到的带图片的公众号文章、带跳转链接的电商页面,都是'超文本'的体现。
- 标记语言:用提前定义好的'标签'来告诉浏览器'这段内容该怎么显示'。就像你在Word里选中文字点'加粗',Word会给文字加'加粗标记';HTML里的标签,就是给网页内容加的'显示规则'。
1.2 HTML标签:网页的'最小指令单元'
HTML的核心就是标签,所有网页内容都包裹在标签里,它的特点一眼就能懂:
- 📝 标签名放在
< >里,比如<p>、<img>;
- 📝 大部分标签是'成对出现'的:
<标签名>是开始标签(开门),</标签名>是结束标签(关门),内容写在中间;
- 📝 少数标签是'单标签'(只有开门,没有关门),比如换行标签
<br/>;
- 📝 标签可以加'属性':像给标签贴'身份证'或'说明书',比如
<h2>里的id就是属性,用来唯一标识这个标签。
举个简单例子:
<h2id="article-title">我的第一篇HTML笔记</h2><br/>
1.3 HTML文件的基本骨架
任何HTML文件都有固定的'骨架结构',就像盖房子先搭承重墙:
<!DOCTYPEhtml><html><head><title>我的第一个网页</title></head><body> 你好,这是我用HTML写的第一个页面! </body></html>
核心说明:
<html>:根标签,所有内容都包在里面;
<head>:头,网页的'后台配置区',比如<title>定义浏览器标签栏显示的文字;
<body>:身体,网页的'前台展示区',用户能看到的内容都在这。
微信扫一扫,关注极客日志
微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
相关免费在线工具
- curl 转代码
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown 转 HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
- HTML 转 Markdown
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
1.4 标签的层级关系:像'家族树'一样好理解
HTML标签不是乱堆的,有明确的父子、兄弟关系,就像家族里的长辈和同辈:
<html><head><title>我的网页</title></head><body> 网页内容 </body></html>
💡 你可以用Chrome浏览器的F12(开发者工具)→「Elements」标签,直接看到网页的标签层级(也就是常说的DOM树),直观又好懂。
二、HTML开发准备:工欲善其事,必先利其器
2.1 选对工具:VS Codeyyds
手写HTML可以用记事本,但效率极低!新手首选Visual Studio Code(VS Code):
2.2 快速生成HTML骨架
在VS Code里新建.html文件(比如index.html),输入!(英文感叹号),按Enter/Tab键,瞬间生成标准骨架:
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title></head><body></body></html>
<!DOCTYPE html>:告诉浏览器这是HTML5文件;
<meta charset="UTF-8">:设置字符编码,避免中文乱码;
viewport:适配移动端,让网页在手机上显示正常。
三、常用HTML标签:让网页内容丰富起来
3.1 标题标签:h1~h6(重要性递减)
网页的标题有6级,数字越大,字体越小、权重越低(h1一个页面最好只写1个,是页面核心标题):
<h1>网站主标题(比如博客标题)</h1><h2>文章一级标题</h2><h3>文章二级标题</h3><h4>小标题</h4><h5>次要标题</h5><h6>最次标题</h6>
3.2 段落标签:p(区分文本块)
HTML里直接换行/打空格没用,想把文字分成段落,必须用<p>标签:
<p>这是第一段内容:HTML是网页的骨架,学好它是前端入门的第一步。</p><p>这是第二段内容:段落标签会自动给文本上下留空隙,让排版更清晰。</p>
💡 注意:<p>标签的内容不会自动缩进(后续用CSS可以设置),多个空格/换行只会被识别为1个空格。
3.3 换行标签:br/(强制换行)
如果只想换行不想分段(比如诗歌、地址),用单标签<br/>(规范写法,别写<br>):
<p> 床前明月光<br/> 疑是地上霜<br/> 举头望明月<br/> 低头思故乡 </p>
3.4 图片标签:img(插入图片)
<img>是单标签,必须加src属性(图片路径),否则图片显示不出来:
<imgsrc="cat.jpg"alt="可爱的猫咪"width="300"><imgsrc="image/dog.jpg"alt="调皮的小狗"><imgsrc="https://ts1.tc.mm.bing.net/th/id/R-C.8e283246276fad2c01e8d0e300bb4540?rik=umflFIIvM%2f%2b%2b6Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50118%2f7084.jpg_wh1200.jpg&ehk=1HQoa7wYy9xnf0HqsFbQQJAv79HJnBest1U0atuLHSQ%3d&risl=&pid=ImgRaw&r=0"alt="风景图">
这里的话需要注意的是:图片路径的问题,分为相对路径和绝对路径,图片路径也可以是网络路径。
效果:
1)图片路径对的话,就显示的是对应的图片
src:图片路径(相对路径/绝对路径/网络路径);
alt:图片加载失败时显示的文字(无障碍优化);
width/height:设置宽高(改一个就好,另一个等比例缩放,避免图片变形)。
3.5 超链接标签:a(页面跳转)
<a>标签是网页的'桥梁',核心属性是href(跳转地址):
<ahref="https://www.baidu.com"target="_blank">打开百度(新标签页)</a><ahref="about.html">关于我</a><ahref="#">返回顶部</a>
💡 target="_blank":在新标签页打开链接(默认_self,在当前标签页打开)。也就是说这个属性 是代表再开启一个新的页面打开链接。
四、结构化展示:表格标签(table)
表格用来展示规整的数据(比如课程表、成绩单),核心标签:
<table>:整个表格;
<tr>:表格的一行;
<td>:一行里的一个单元格【也就是列】;
<thead>/<tbody>:可选,区分表头和表体,结构更清晰。
<tableborder="1"align="center"cellpadding="10"cellspacing="0"width="400"><thead><tr><td>时间</td><td>周一</td><td>周二</td></tr></thead><tbody><tr><td>上午</td><td>HTML</td><td>CSS</td></tr><tr><td>下午</td><td>JavaScript</td><td>实战</td></tr></tbody></table>
border:表格边框(数字越大越粗);
align:表格整体居中;
cellpadding:内容到单元格边框的距离;
cellspacing:单元格之间的间距(设为0更美观)。
五、交互核心:表单标签(收集用户信息)
表单是比较重要的一个标签,那么其实他的一个最重要的作用就是from和表单控件submit一起配合使用的时候,所提交的数据内容就是from所包裹起来的内容。
举个例子:
<formaction="submit.html"method="get"><label>用户名:</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><label>密码:</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><label>性别:</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><label>爱好:</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><inputtype="button"value="点击提示"onclick="alert('你点我啦!')"><br/><inputtype="submit"value="提交信息"></form> from表单的包裹范围减小 <label>用户名:</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><label>密码:</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><label>性别:</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><formaction="submit.html"method="get"><label>爱好:</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><inputtype="button"value="点击提示"onclick="alert('你点我啦!')"><br/><inputtype="submit"value="提交信息"></form>

表单是网页和用户交互的核心(比如注册、登录、搜索),核心组成:
5.1 form标签(表单域)
form包裹的范围就是submit提交的范围。
包裹所有表单控件,定义数据提交的目标地址:
<formaction="submit.html"method="get"></form>
action:提交的路径;
method:提交的请求方法;
5.2 input标签(核心表单控件)
<input>是'万能控件',通过type属性切换类型:
<label>用户名:</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><label>密码:</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><label>性别:</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><label>爱好:</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><inputtype="button"value="点击提示"onclick="alert('你点我啦!')"><br/><inputtype="submit"value="提交信息">
name:是键值对中的键名key,也就是说,到时候我们的数据是需要提交到后端的,那么你得使用这个变量来存储你的值;然后的话,name值一样的时候同一组数据,比如我们的name="hobby"是同一组数据,那么到时候提交的时候如果是复选框,那么就是提交一组值;
value:是键值对中的键值value,也就是对应上述name属性对应的值,说白了,其实就是键值对,name代表的是键,而value代表的是值;
5.3 select标签(下拉菜单)
<label>所在城市:</label><selectname="city"><optionvalue="beijing">北京</option><optionvalue="shanghai"selected>上海</option><optionvalue="guangzhou">广州</option></select>
5.4 textarea标签(多行文本框)
<label>个人简介:</label><textareaname="intro"rows="3"cols="30"placeholder="请输入个人简介"></textarea>
六、布局神器:div和span(无语义标签)
div和span没有固定样式,纯粹用来'装内容、做布局',是网页布局的核心:
- 🧱
<div>:块级元素,独占一行(大盒子);
- 🧱
<span>:行内元素,不独占一行(小盒子)。
<divclass="user-info"><span>用户名:</span><span>张三</span></div><divclass="user-hobby"><span>爱好:</span><span>编程</span><span>阅读</span></div>
七、实战:制作简单的用户注册页面
把上面的知识点整合,写一个完整的注册页面(原创示例,和参考示例不同):
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>用户注册页面</title></head><body><h1align="center">新手注册</h1><formaction="success.html"method="get"><p><label>用户名:</label><inputtype="text"name="username"placeholder="请输入3-10位字母/数字"required></p><p><label>密码:</label><inputtype="password"name="pwd"placeholder="请输入6-16位密码"required></p><p><label>性别:</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女 </p><p><label>爱好:</label><inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="travel">旅行 </p><p><label>所在城市:</label><selectname="city"><optionvalue="beijing">北京</option><optionvalue="shanghai"selected>上海</option><optionvalue="shenzhen">深圳</option></select></p><p><label>个人简介:</label><textareaname="intro"rows="3"cols="30"placeholder="简单介绍一下自己"></textarea></p><p><inputtype="submit"value="提交注册"><inputtype="reset"value="重置"></p></form></body></html>

<h1>用户注册</h1><table><tr><td>用户名:</td><td><inputtype="text"placeholder="请输入用户名"></td></tr><tr><td>手机号:</td><td><inputtype="number"placeholder="请输入手机号"></td></tr><tr><td>密码:</td><td><inputtype="password"placeholder="请输入密码"></td></tr></table><div><inputtype="submit"value="提交"><span>是否已有账号?</span><ahref="#">登录</a></div>
总结
- HTML是网页的骨架,核心是标签,大部分标签成对出现,部分为单标签,标签可加属性;
- HTML文件有固定骨架,VS Code输入
!可快速生成,<body>写可见内容,<head>写配置;
- 常用标签分三类:内容标签(h1~h6、p、br、img、a)、结构化标签(table)、交互标签(form、input、select、textarea),布局用div/span;
- 表单是用户交互核心,input通过
type切换控件类型,单选框需统一name才能实现'多选一'。
看完这篇,我想老铁已经掌握了HTML的核心知识点,动手写一个注册页面试试吧!