前端技术（1）— HTML5 实战详解

科技2026-02-02 3

文章目录

1.基本概念2.网页基本标签3.图像标签4.链接标签5.行内元素和块元素6.列表7.表格8.视频和音频9.页面结构分析10.iframe内联框架11.表单语法

1.基本概念

HTML：Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

2.网页基本标签

标题标签段落标签换行标签水平线标签字体样式标签注释和特殊符号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body>  <h1>断章</h1> <h4>卞之琳</h4>   <p>你站在桥上看风景，</p> <p>看风景人在楼上看你。</p> <p>明月装饰了你的窗子，</p> <p>你装饰了别人的梦</p>  <hr/> <h1>回答</h1>  卑鄙是卑鄙者的通行证，<br/> 高尚是高尚者的墓志铭，<br/> <hr/>  <h1>字体样式标签</h1> 粗体：<strong>i love you </strong> 斜体：<em>i love you </em> <br/>  空格<br/> 空    格<br/> 大于：><br/> 小于：<<br/> 版权符号:©suc<br/> </body> </html>

3.图像标签

常见图像格式：JPG、GIF、PNG、BMP

< img src="path" alt="text" title= "text" width="x" height="y"/> src:图像地址alt：图像的替代文字title：鼠标悬停提示文字width：图像宽度height：图像高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293"> </body> </html>

4.链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a> href:链接路径（必填）target：链接在哪个窗口打开。 _ blank :在新标签中打开_ self：在自己网页中打开锚链接：页面间跳转功能性链接：邮件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body>  <a name="top">顶部</a> <a href="2.基本标签.html" target="_blank">点击跳转到网页1</a><br/> <a href="https://www.baidu.com" target="_self">百度</a><br/> <a href="https://baike.baidu.com/item/%E6%B3%B0%E5%8B%92%C2%B7%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9/8472307?fromtitle=%E6%B3%B0%E5%8B%92%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9&fromid=23688107&fr=aladdin"> <img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293"> </a><br/>  <a href="#top">回到顶部</a><br/> <a name="down">down</a><br>  <a href="mailto:suc@mail.ustc.edu.cn">邮件</a><br/> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1938950036&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1938950036:53" alt="点击我" title="点击我"/></a></body> </html>

5.行内元素和块元素

块元素：无论内容多少，该元素独占一行

行元素：内容撑开宽度，左右都是行内元素的可以排在一行

6.列表

列表就是信息资源的一种展示形式，他可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。列表主要分为有序列表、无序列表、自定义列表。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body>  <ol> <li>Python</li> <li>Java</li> <li>C/C++</li> <li>GO</li> </ol> <hr>  <ul> <li>Python</li> <li>Java</li> <li>C/C++</li> <li>GO</li> </ul> <hr>  <dl> <dt>语言</dt> <dd>Python</dd> <dd>Java</dd> <dd>C++</dd> <dt>城市</dt> <dd>上海</dd> <dd>苏州</dd> <dd>杭州</dd> </dl> </body> </html>

7.表格

优点：简单通用，结构稳定

基本结构：单元格、行、列、跨行、跨列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1px"> <tr>  <td colspan="3">1-1</td> </tr> <tr>  <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html>

8.视频和音频

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素</title> </head> <body>  <video src="../resources/video/暴走大事件.mp4" controls height="300"></video> <audio src="../resources/audio/一生所爱.mp3" controls></audio> </body> </html>

9.页面结构分析

元素名描述header标题头部区域的内容（用于页面或页面中的一块区域）footer标记脚部区域的内容（用于整个页面或页面的一块区域）sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用（常用于侧边栏）nav导航类辅助内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>

10.iframe内联框架

11.表单语法

action:表单提交的位置，可以是网站，也可以是一个请求处理地址method:post,get提交方式 get:方式提交：我们可以在url中看到我们提交的信息，不安全，高效post:比较安全，传输大文件

表单的应用

隐藏域：hidden

只读：readonly

禁用：disabled

表单的初级验证

placeholder ：提示信息required：非空判断pattern：正则表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个网页.html" method="get">  <p>名字<input type="text" name="username" placeholder="请输入用户名" required></p>  <p>密码<input type="password" name="pwd"></p>  <p>性别: <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p>  <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby" checked>游戏 </p>  <p> <input type="button" name="btn1" value="确定"> </p> <p> <input type="image" src="../resources/image/02.jpg" width="200"> </p>  <p>国家: <select name="列表名称" > <option value="China">中国</option> <option value="USA" selected>美国</option> <option value="UK">英国</option> <option value="Japan">日本</option> </select> </p>  <p>邮箱: <input type="email" name="email" required> </p>  <p>URL: <input type="url" name="url" required> </p>  <p>数字: <input type="number" name="num" max="100" min="0" step="10"> </p>  <p>音量: <input type="range" name="voice" max="100" min="0" step="2"> </p>  <p>搜索: <input type="search" name="search"> </p>  <p> <label for="mark">增强:</label> <input type="text" id="mark"> </p>  <p>反馈： <textarea name="textarea" cols="25" rows="5">文本内容</textarea> </p>  <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <p> <input type="submit"> <input type="reset" value="清空"> </p> </form> </body> </html>

Processed: 0.013, SQL: 10