Python前端-1-html基础
·
前端
-
本章学习知识点
- 记住关键字，然后用vscode直接补充就行
- 记原理，代码可以用ai生成，细微调试就行
一、HTML 基础知识点
1.1、基础语法
-
注释
HTML 注释不会在页面显示，用于标注代码含义，支持单行 / 多行注释，格式为
<!-- 注释内容 --><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>注释示例</title> </head> <body> <!-- 单行注释：这是页面头部 --> <h1>HTML注释演示</h1> <!-- 多行注释： 1. 该模块是页面主体内容 2. 包含文本和图片展示 --> <p>页面可见内容</p> </body> </html> -
标签分类
HTML 标签分为单标签（自闭合标签）和双标签（成对标签），是构成 HTML 页面的基本单位。
<head> <meta charset="UTF-8"> <title>标签分类示例</title> </head> <body> <!-- 单标签：无需闭合，常用的有img、br、hr、meta、link等 --> <img src="https://picsum.photos/200/100" alt="示例图片"> <!-- 图片标签 --> <br> <!-- 换行标签 --> <hr> <!-- 分隔线标签 --> <!-- 双标签：必须成对出现，包含开始标签和结束标签 --> <h2>这是双标签示例</h2> <p>这是一个段落标签，属于双标签</p> <div>这是div容器，也是双标签</div> </body> -
标签属性
属性是标签的附加信息，格式为
属性名="属性值"，写在开始标签内，用于定义标签的特征（如尺寸、路径、样式等）。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标签属性示例</title> </head> <body> <!-- 图片标签：src（路径）、alt（替代文本）、width/height（尺寸） --> <img src="https://picsum.photos/300/200" alt="风景图" width="300" height="200"> <!-- 表格标签：width/height（尺寸）、border（边框,数字越大边框越粗） --> <table width="400" height="200" border="1"> <tr><td>表格单元格</td></tr> </table> <!-- 链接标签：href（跳转地址）、target（打开方式） --> <a href="https://www.baidu.com" target="_blank">百度链接</a> <!-- target 不写就是原页面打开, _blank 打开新页 --> </body> </html> -
语法规范
-
标签嵌套时需用缩进（通常 2/4 个空格），增强可读性；
-
标签名 / 属性名不区分大小写，但行业规范建议统一用小写；
-
属性值建议用双引号包裹（单引号也可，无引号不推荐）。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>语法规范示例</title> </head> <body> <!-- 正确嵌套+缩进：div内嵌套p和span --> <div class="container"> <p>这是缩进后的段落 <span style="color: red;">红色文本</span></p> </div> <!-- 不推荐写法（无缩进、大写标签）：仅作对比，也能用就是不符合规范 --> <!-- <DIV><P>不规范的写法</P></DIV> --> </body> </html>
-
-
特殊字符（实体）
HTML 中部分字符（如 <、>、空格）需用实体符号表示，避免与标签语法冲突，常用实体如下：
实体符号 对应字符 说明 空格 非换行空格 < < 小于号 > > 大于号 & & 和号 © © 版权符号 ¥ ¥ 人民币符号 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实体符号示例</title> </head> <body> <p>空格示例：HTML 基础（3个空格）</p> <p>符号示例：<div> 标签 & © 2026 版权所有</p> <p>价格示例：¥99.99</p> </body> </html>
1.2、HTML 页面核心结构标签
-
页面主体结构
HTML 页面的核心骨架由
<html>、<head>、<body>三个双标签构成，各司其职：-
<html>：根标签，包裹整个页面所有内容； -
<head>：头部标签，存放页面元信息（如编码、标题、样式），不显示在页面正文； -
<body>：主体标签，存放页面可见内容（文本、图片、按钮等）。vscode 新建个 文件名.html, 输入 html:5 回本 自动会补齐， 如果没有用ai搜一下找个插件一安就ok <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
-
-
head 标签内常用子标签
标签 作用 <title>定义网页标题（显示在浏览器标签） <meta>定义网页元信息（编码、关键字、描述、适配等） <style>内嵌 CSS 样式（定义页面样式） <link>外部引入资源（如 CSS 文件、网页图标） <script>内嵌 / 引入 JavaScript 脚本（实现交互逻辑） <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 1. 编码设置（必写，避免乱码） --> <meta charset="UTF-8"> <!-- 2. 适配移动端（H5常用） --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 3. 网页标题 --> <title>Head标签示例</title> <!-- 4. SEO相关 --> <meta name="keywords" content="HTML,head标签,示例"> <meta name="description" content="演示HTML中head标签的常用子标签用法"> <!-- 5. 引入网页图标 --> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"> <!-- 6. 内嵌CSS样式 --> <style> body { color: #333; font-size: 16px; } h1 { color: #0088ff; } </style> <!-- 7. 内嵌JS脚本 --> <script> console.log("这是head内的JS脚本"); </script> </head> <body> <h1>Head标签演示页面</h1> <p>查看浏览器标签栏的图标和标题，验证head标签效果</p> </body> </html> <!-- console.log 打开f12 控制台就可以看到抛出的日志 -->
1.3、格式排版与文本标签
-
格式排版标签
用于控制页面内容的排版结构（标题、段落、换行、分隔等）。
标签 作用 <h1>-<h6>标题标签（h1 最大，h6 最小，自带加粗和换行，一个页面建议只一个 h1） <p>段落标签（自带上下间距，自动换行） <pre>预格式化标签（保留文本原有换行、空格，常用于显示代码） <br>强制换行标签（单标签，无间距） <hr>分隔线标签（单标签，绘制水平分隔线） <div>块级容器标签（无默认样式，用于布局分组） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>排版标签示例</title> </head> <body> <h1>一级标题（最大）</h1> <h3>三级标题</h3> <h6>六级标题（最小）</h6> <hr> <!-- 分隔线 --> <p>这是第一个段落，段落标签会自动换行并保留上下间距。</p> <p>这是第二个段落<br>用br标签强制换行的内容</p> <!-- br换行 --> <pre> 预格式化标签： 保留原始格式，包括换行和空格 常用于显示代码： function test() { console.log("hello"); } </pre> <div style="border: 1px solid #ccc; padding: 10px;"> div容器：用于布局分组，这是一个带边框的div </div> </body> </html> -
文本样式标签
用于修饰文本的显示效果（强调、标记、上下标、删除 / 新增等）。
标签 作用 <em>强调文本（默认斜体，语义优先） <strong>重点强调文本（默认粗体，语义优先） <mark>标记文本（默认黄色背景） <sup>上标文本（如数学平方、指数） <sub>下标文本（如化学分子式） <ins>插入 / 新增文本（默认下划线） <del>删除文本（默认中划线） <ruby>/<rt>拼音标注（H5 新增，用于汉字注音） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本标签示例</title> </head> <body> <p>强调文本： <em> em斜体强调</em> <strong> strong粗体</strong></p> <p>标记文本： <mark>mark黄色背景的标记内容</mark></p> <p>数学符号: 100<sup>2</sup>（100的平方） | 8<sub>2</sub>（下标）</p> <p>化学分子式：H<sub>2</sub>O（水） | CO<sub>2</sub>（二氧化碳）</p> <p>价格展示：¥<del>199</del>（原价） | ¥<ins>99</ins>（现价）</p> <p>拼音标注： <ruby> 饕餮 <rt>tāo tiè</rt> </ruby> | <ruby> 哪吒 <rt>né zhā</rt> </ruby> </p> </body> </html>
二、功能标签
2.1、表单标签（input/button/select）
-
表单是前端与用户交互的核心，用于收集用户输入（如登录、注册、信息提交），核心标签包括
<form>、<input>、<button>、<select>、<textarea>等。-
参数说明
标签 / 属性 作用 <form>表单容器，包裹所有表单元素， action（提交地址）、method（提交方式：get/post）<input>单行输入框，通过 type属性切换类型（text/password/radio/checkbox/email 等）<select>/<option>下拉选择框， <option>是下拉选项，selected属性默认选中<textarea>多行文本输入框， rows（行数）、cols（列数）控制大小<button>按钮， type属性：submit（提交表单）、button（普通按钮）、reset（重置表单）label标签关联， for属性绑定input的id，点击文字可聚焦输入框（提升体验）
-
2.1.1、input
-
input [type=text] 单行文本输入框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input 表单提交示例</title> <style> input { padding: 8px; width: 200px; margin-right: 10px; } button { padding: 8px 15px; cursor: pointer; } </style> </head> <body> <h3>input[type=text] 表单提交</h3> <!-- 仅包含input的独立表单 --> <form id="inputForm" action="#" method="get"> <label>用户名：</label> <input type="text" name="username" placeholder="请输入用户名" required> <button type="submit">提交</button> </form> <script> // 获取表单 const inputForm = document.getElementById('inputForm'); // 监听提交事件 inputForm.onsubmit = function(e) { e.preventDefault(); // 阻止默认跳转 // 获取输入值 const username = this.username.value; // 弹窗展示 + 控制台打印 alert(`提交的用户名：${username}`); console.log('input表单提交数据：', { username: username }); } </script> </body> </html> -
input [type=password] 密码输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>密码输入框</title> <style> input { padding: 8px; width: 300px; border: 1px solid #ccc;} </style> </head> <body> <h3>input[type=password] 密码输入框</h3> <p>输入内容自动隐藏为圆点</p> <form id="inputForm" action="#" method="get"> <label>密码</label> <input name="password" type="password" placeholder="请输入密码" required maxlength="16"> <button type="submit">提交</button> </form> <script> const inputForm = document.getElementById('inputForm') inputForm.onsubmit = function (e) { e.preventDefault() const password = inputForm.password.value alert(`密码为：${password}`) console.log('input表单提交数据：', { password: password }); } </script> </body> </html> -
input [type=radio] 单选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>input[type=radio] 示例</title> </head> <body> <h3>input[type=radio] 单选框</h3> <p>核心：name相同为一组，互斥选择；checked为默认选中</p> <form action="#" method="get" id="inputFrom"> <input type="radio" name="gender" id="male" value="男" checked> <label for="male">男</label> <input type="radio" name="gender" id="female" value="女"> <label for="female">女</label> <button type="submit">提交</button> </form> <script> var inputFrom = document.getElementById('inputFrom'); inputFrom.onsubmit = function(e) { e.preventDefault(); var gender = inputFrom.gender.value; alert('性别：' + gender); } </script> </body> </html> -
input [type=checkbox] 复选框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input[type=checkbox] 多选项示例</title> <style> /* 简单样式，让选项排版更清晰 */ .checkbox-group { margin: 20px 0; padding: 15px; border: 1px solid #eee; width: 300px; } .checkbox-item { display: block; /* 每个选项独占一行 */ margin: 10px 0; } </style> </head> <body> <h3>input[type=checkbox] 复选框（多选项示例）</h3> <p>核心规则：<strong>name属性值相同的复选框为同一组</strong>，可同时选中多个；checked表示默认选中</p> <form action="#" method="get" id="inputFrom"> <div class="checkbox-group"> <p>请选择你的兴趣爱好（可多选）：</p> <!-- 第1个选项：编程（默认选中） --> <div class="checkbox-item"> <input type="checkbox" name="hobby" id="code" value="编程" checked> <label for="code">编程</label> </div> <!-- 第2个选项：阅读 --> <div class="checkbox-item"> <input type="checkbox" name="hobby" id="read" value="阅读"> <label for="read">阅读</label> </div> <!-- 第3个选项：运动（默认选中） --> <div class="checkbox-item"> <input type="checkbox" name="hobby" id="sport" value="运动" checked> <label for="sport">运动</label> </div> <!-- 第4个选项：旅行 --> <div class="checkbox-item"> <input type="checkbox" name="hobby" id="travel" value="旅行"> <label for="travel">旅行</label> </div> <!-- 第5个选项：摄影 --> <div class="checkbox-item"> <input type="checkbox" name="hobby" id="photo" value="摄影"> <label for="photo">摄影</label> </div> </div> <button type="submit">提交</button> </form> <script> var inputFrom = document.getElementById('inputFrom'); inputFrom.onsubmit = function (e) { e.preventDefault(); // 阻止表单提交 const hobbys = []; // 2. 查找所有被选中的爱好复选框，遍历每一个 this.querySelectorAll('input[name="hobby"]:checked').forEach(item => { // 3. 把当前选中项的value值放进数组 hobbys.push(item.value); }); // 4. 弹窗展示：用顿号连接数组，若无选中则显示“未选择任何爱好” alert(`提交的爱好：${hobbys.join('、') || '未选择任何爱好'}`); console.log(hobbys); } </script> </body> </html> # (2) ['编程', '运动']- value 属性的意义
value是复选框被选中后，提交表单时传递给后台的「实际值」；- 比如选中「编程」，后台收到的是
hobby=编程；同时选中「编程」和「运动」，后台收到hobby=编程&hobby=运动。 其实就是同一属性可以获取多次
- label 的 for 属性（提升体验）
label的for值和复选框的id值一致 → 点击文字（比如「阅读」）也能选中 / 取消复选框，不用精准点小方框，用户体验更好。
- 复选框多选项的核心是同一组 name 值相同，不同组 name 值不同；
checked控制默认选中状态，value是提交的实际数据；
- value 属性的意义
2.1.2、select + option
-
示例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>select 下拉选择框示例</title> <style> select{ width: 200px; height: 30px; padding: 5px; border: 1px solid #ccc; } </style> </head> <body> <h3>select + option 下拉选择框</h3> <p>核心：disabled+selected设置默认占位；option的value为提交值</p> <form action="#" method="get" class="inputForm"> <select name="city"> <option value="" disabled selected>请选择</option> <option value="beijing">北京</option> <option value="sz">深圳</option> </select> <button type="submit">提交</button> </form> <script> var inputForm = document.querySelector('.inputForm'); inputForm.onsubmit = function(e){ e.preventDefault(); // 获取选中的城市值 var city = this.city.value; // 获取选中的城市文本 const cityText = this.city.options[this.city.selectedIndex].text; alert(`提交的城市值：${city}，城市名称：${cityText}`); console.log('select表单提交数据：', { city: city, cityText: cityText }); } </script> </body> </html>
2.1.3、textarea
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>textarea 多行文本示例</title> <style> textarea { padding: 8px; width: 300px; height: 100px; border: 1px solid #ccc; border-radius: 4px; resize: none; /* 禁止拖拽调整大小 */ } </style> </head> <body> <h3>textarea 多行文本输入框</h3> <p>核心属性：rows（行数）、cols（列数）、maxlength（最大长度）</p> <form action="#" method="get" id="inputForm"> <textarea placeholder="请输入个人简介" rows="4" cols="50" maxlength="200" name="intro"></textarea> <button type="submit">提交</button> </form> <script> var inputForm = document.getElementById('inputForm') inputForm.onsubmit = function(e) { e.preventDefault(); // 获取多行文本值 var informa = this.intro.value; alert(informa); } console.log(inputForm) </script> </body> </html>
2.2、媒体标签（img/audio/video）
用于在页面中嵌入图片、音频、视频，是丰富页面内容的核心标签。
| 标签 | 核心属性 |
|---|---|
<img> | src（资源地址）、alt（加载失败时的替代文本，必写）、width/height（尺寸） |
<audio> | src（音频地址）、controls（显示播放控件）、autoplay（自动播放，多数浏览器禁用）、loop（循环播放） |
<video> | 同<audio>，新增width/height（视频尺寸）、poster（视频封面） |
2.2.1、img
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>img 图片标签示例</title> <style> img { border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } </style> </head> <body> <h3>img 图片标签</h3> <p>核心属性：src（地址）、alt（替代文本）、width/height（尺寸）</p> <img src="https://picsum.photos/400/200" alt="风景图（加载失败时显示）" width="400" height="200"> </body> </html>
2.2.2、audio 音频标签
-
示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>audio 音频标签示例</title> </head> <body> <h3>audio 音频标签</h3> <p>核心属性：controls（播放控件）、loop（循环）、src（音频地址）</p> <audio src="https://music.163.com/song/media/outer/url?id=1395427750.mp3" controls loop> 您的浏览器不支持音频播放！ </audio> <!-- 读取本地 --> <audio src="ringing_short.mp3" controls loop> 您的浏览器不支持音频播放 </audio> </body> </html>
2.2.3、video 视频标签
-
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>video 视频标签示例</title> </head> <body> <h3>video 视频标签</h3> <p>核心属性：controls（控件）、poster（封面）、width/height（尺寸）</p> <video src="https://www.w3school.com.cn/i/movie.ogg" height="225" width="400" controls poster="https://picsum.photos/400/225">您的浏览器不支持视频播放！ </video> </body> </html>
2.3、语义化标签（nav/article/section 等）
语义化标签是 HTML5 新增的「有含义的标签」，替代纯<div>布局，让页面结构更清晰（对搜索引擎 / 开发者更友好）。
| 标签 | 作用 |
|---|---|
<nav> | 导航栏区域（页面顶部 / 侧边的导航链接） |
<header> | 页面 / 区块的头部（包含标题、logo、导航） |
<footer> | 页面 / 区块的底部（包含版权、联系方式、备案信息） |
<article> | 独立的文章 / 内容块（如博客文章、新闻内容） |
<section> | 页面的一个章节 / 区块（比 div 有语义，比 article 范围小） |
<aside> | 侧边栏区域（如文章的相关推荐、广告） |
2.3.1、nav 导航标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>nav 导航标签示例</title> <style> nav { background: #333; padding: 10px; } nav a { color: white; text-decoration: none; margin: 0 10px; } nav a:hover { color: #409eff; } </style> </head> <body> <h3>nav 导航标签（仅用于核心导航）</h3> <nav> <a href="#">首页</a> <a href="#">文章</a> <a href="#">关于我</a> </nav> </body> </html>
2.3.2、article 文章标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>article 文章标签示例</title> <style> article { width: 500px; padding: 20px; border: 1px solid #eee; border-radius: 8px; } </style> </head> <body> <h3>article 文章标签（独立内容块）</h3> <article> <h4>HTML语义化的好处</h4> <p>语义化标签让页面结构更清晰，利于SEO和维护...</p> <p>发布时间：2026-03-05</p> </article> </body> </html>
2.3.3、section 章节标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>section 章节标签示例</title> <style> section { margin: 10px 0; padding: 10px; border-bottom: 1px dashed #eee; } </style> </head> <body> <h3>section 章节标签（文章内的章节）</h3> <article> <section> <h4>1. 什么是语义化？</h4> <p>有明确含义的HTML标签...</p> </section> <section> <h4>2. 常用语义化标签</h4> <p>nav、article、section等...</p> </section> </article> </body> </html>
2.3.4、aside 侧边栏标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>aside 侧边栏标签示例</title> <style> aside { width: 200px; padding: 10px; background: #f8f9fa; border-radius: 4px; } </style> </head> <body> <h3>aside 侧边栏标签（辅助内容）</h3> <aside> <h4>热门推荐</h4> <ul> <li>CSS Flex布局教程</li> <li>JS DOM操作入门</li> </ul> </aside> </body> </html>
2.3.5、header 头部标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>header 头部标签示例</title> <style> header { background: #2c3e50; color: white; padding: 20px; text-align: center; } </style> </head> <body> <h3>header 头部标签（页面/区块头部）</h3> <header> <h1>我的个人博客</h1> <p>专注前端技术分享</p> </header> </body> </html>
2.3.6、footer 底部标签
-
示例1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>footer 底部标签示例</title> <style> footer { background: #2c3e50; color: white; padding: 10px; text-align: center; margin-top: 20px; } </style> </head> <body> <h3>footer 底部标签（页面/区块底部）</h3> <footer> <p>© 2026 我的博客 版权所有</p> </footer> </body> </html>
2.4、表格标签（table/tr/td/th）
表格用于展示结构化数据（如成绩、履历、商品规格），核心标签包括<table>（表格容器）、<tr>（行）、<td>（单元格）、<th>（表头单元格，默认加粗居中），还有<thead>（表头区）、<tbody>（内容区）、<tfoot>（表尾区）等语义化子标签。
| 标签 | 作用 |
|---|---|
<table> | 表格容器，核心属性：border（边框宽度）、width/height（尺寸）、cellspacing（单元格间距） |
<tr> | 表格行，包裹<td>/<th>，无核心属性 |
<td> | 普通单元格，colspan（跨列）、rowspan（跨行）实现单元格合并 |
<th> | 表头单元格，默认加粗居中，scope（定义表头作用域：row/col） |
<thead>/<tbody>/<tfoot> | 表格分区，让结构更清晰，便于 CSS/JS 单独控制（语义化推荐使用） |
2.4.1、table 表格容器
-
tr\td写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>table 表格容器示例</title> <style> table { border: 1px solid red; width: 300px; border-collapse: collapse;} td { border: 1px solid #ccc; padding: 8px; text-align: center; } </style> </head> <body> <h3>table 表格容器示例</h3> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> </table> </body> </html>border-collapse: collapse核心作用是合并表格单元格的边框，消除双线条和间隙；
-
th 表头单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>th 表头单元格示例</title> <style> table { border-collapse: collapse; border: 1px solid red; width: 300px;} th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } /* th { background: #f5f5f5; font-weight: bold; } */ </style> </head> <body> <h3>th 表头单元格示例</h3> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>18</td> </tr> <tr> <td>李四</td> <td>19</td> </tr> </table> </body> </html> -
colspan 跨列属性
-
示例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>colspan 跨列示例</title> <style> table { border: 1px solid red; border-collapse: collapse;} th, td { border: 1px solid red; padding: 5px; text-align: center;} </style> </head> <body> <h3>colspan 跨列示例</h3> <table> <tr> <th>姓名</th> <th colspan="2">年龄</th> </tr> <tr> <td>张三</td> <td>占位1</td> <td>占位2</td> </tr> </table> </body> </html> --------------- |姓名| 年龄 | --------------- |张三|占位1|占位2|
-
-
rowspan 跨列属性
-
示例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rowspan 跨行示例</title> <style> table { border: 1px solid #ccc; border-collapse: collapse;} th, td { border: 1px solid #ccc; padding: 5px; } </style> </head> <body> <h3>rowspan 跨行示例</h3> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>籍贯</th> <th colspan="2">爱好</th> <th rowspan="2">照片</th> </tr> <tr> <th>张三</th> <th>男</th> <th>18</th> <th>北京</th> <th >打篮球</th> <th>football</th> </tr> </table> </body> </html> -------------------------------------------------- |姓名 |性别 | 年龄 |籍贯| 爱好 | 照片| |张三 | 男 | 18 |北京| 打篮球 football | | ---------------------------------------------------
-
三、总结
- HTML 核心语法：标签分单 / 双标签，属性需写在开始标签内，注释用
<!-- -->，特殊字符需用实体表示； - 页面结构：
<html>为根标签，<head>存元信息，<body>存可见内容，<meta charset="UTF-8">必写避免乱码； - 常用标签：排版标签（h1-h6/p/br/hr/div）控制布局，文本标签（strong/mark/sup/sub 等）修饰文本样式，语义优先于样式。
这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容，并连接云服务、办公空间等稀缺资源，助你专注创造，无忧运营。
更多推荐
8
0- 0
已为社区贡献3条内容
所有评论(0)