HTML
1.英文全称: Hyper Text Markup Language,缩写为HTML
2.中文翻译: 超文本标记语言(是用于创建网页的基础标记语言,核心是通过标签描述网页的内容的结构和显示方法,让浏览器能解析并呈现文字、图片、链接等元素)简单来说,它就像是网页的骨架,不负责复杂的样式(靠CSS)或交互功能(靠JavaScript),只是定义“哪里是标题、哪里是段落、哪里是图片或是链接,是所有网页的底层基础。
1. <h1>-<h6> :标题标签(给文字贴标题的标签,h1最大,h6最小)用在网页的主标题和文章小标题 。
用法: <h1>一级标题(网页主标题)
2. <p> :段落标签(给文字贴”段落“的标签,浏览器会自动贴这个标签的文字留出间距,分段显示。用于写文章的正文,介绍文字。
用法: <p>这是一段普通文本内容,自动分段显示。
3. <a>:链接标签(加了这个标签的文字和内容,点击这个就能跳转到其他网页或文件)跳转页面,打开文件。
用法: <a href=" " target="_blank">点击跳百度(新窗口打开)
4. <img> :图片标签(用来在网页里插入图片,需要填图片地址、备用文字这些信息)放风景照,产品图片。
用法: < img src="图片地址" alt="图片加载失败时显示的文字" width="300">
5. <div> :容器标签(贴容器的标签,像个大盒子,能把标题、段落、图片等内容装在一起,方便划分网页区域)把标题+图片装在一起。
用法: <div>这里可以包含标题、段落、图片等多个元素A。
6. <span> :行内标签(只包裹一小段文字(比如让某几个字变红),不会像<p>那样换行)。
用法: <p>普通文字<span style="color:red">红色文字</span></p >
7. <ul>/<li> :无序列表(会生成带圆点的列表,比如购物清单)列兴趣爱好,购物清单。
用法: <ul><li>列表项1</li><li>列表项2</li></ul>
8. <ol>/<li> :有序列表(会生成带数字的列表,比如步骤说明)列操作步骤,教程流程。
用法: <ol><li>第一步</li><li>第二步</li></ol>
9. <br> :换行标签(是给单身标签,强制换行,不用写 <br>)地址换行,诗歌分行。
用法: <p>第一行文字<br>第二行文字</p >
10. <strong> :加粗标签(能让文字变粗,比单纯的<b>标签更有”强调重点“的语义)标注意思,重要提示。
用法: <strong>需要加粗的重点内容</strong>
将以上标签整合成一个完整的简单网页代码,直接文字提取或复制,复制到记事本改后缀为.html就能打开,如图:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的生活小分享</title> <style> /* 页面整体样式 */ body { font-family: "微软雅黑", sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #333; } /* 标题样式 */ h1 { font-size: 28px; color: #222; margin-bottom: 10px; } h2 { font-size: 22px; color: #222; margin: 30px 0 15px; border-bottom: none; } /* 副标题样式 */ .subtitle { color: #666; font-size: 16px; margin-bottom: 20px; } /* 图片样式 */ .scenery-img { width: 100%; height: auto; margin: 10px 0; border: none; } /* 图片说明文字 */ .img-desc { color: #666; font-size: 14px; margin-bottom: 20px; } /* 无序列表(兴趣爱好) */ ul { list-style-type: disc; padding-left: 20px; margin: 10px 0; } ul li { margin: 8px 0; } /* 有序列表(近期计划) */ ol { list-style-type: decimal; padding-left: 20px; margin: 10px 0; } ol li { margin: 8px 0; } /* 链接样式 */ a { color: #0066cc; text-decoration: none; border-bottom: 1px solid #0066cc; } a:hover { color: #004999; border-bottom-color: #004999; } /* 底部文字 */ .mail-text { margin-top: 10px; color: #333; font-size: 16px; } </style> </head> <body> <!-- 主标题 --> <h1>我的生活小分享</h1> <p class="subtitle">记录日常、兴趣与感悟 ⭐</p> <!-- 最近喜欢的风景 --> <h2>最近喜欢的风景</h2> <img src="https://picsum.photos/id/1036/800/400" alt="自然风景图" class="scenery-img"> <p class="img-desc">这是一张随机风景图,实际使用时可替换为自己的图片地址</p> <!-- 我的兴趣爱好 --> <h2>我的兴趣爱好</h2> <ul> <li>阅读(喜欢散文、科普类书籍)</li> <li>运动(跑步、徒步)</li> <li>学习(HTML、设计相关技能)</li> </ul> <!-- 近期计划 --> <h2>近期计划</h2> <ol> <li>完成HTML基础学习</li> <li>周末去郊外徒步</li> <li>读一本一直想读的书</li> </ol> <!-- 链接与邮件 --> <p>想了解更多?<a target="_blank">点击跳转到百度搜索</a></p> <p class="mail-text">也可以 给我发邮件 交流~</p> </body> </html>以上代码因直接复制会导致语法错误以及格式混乱,图片的方法作为参照加以借鉴,具体使用方法放在末尾了(直接复制即可)
使用方法:
1. 复制上面全部代码,粘贴到电脑自带的「记事本」中;
2. 点击记事本顶部「文件」→「另存为」,文件名改为「我的网页.html」,编码选择「UTF-8」,保存到桌面;
3. 双击保存后的文件,即可用浏览器打开查看效果(图片会自动加载,链接可点击跳转)。

優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念,誠(chéng)信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。