网站导航
> 技术文档 > HTML 基础

HTML 基础

网友: 技术文档 2025-07-26 21:01:06

标题目录

  • 基本概念
  • 注释
  • 常用快捷键
  • 转义符号
  • 文本相关标签
  • 分区元素
  • URL 路径
    • 相对路径
    • 绝对路径
  • 表格
  • 超链接
  • 表单
  • 音视频插入
  • 图片的类型
  • 总结

基本概念

  • HTML（Hyper Text Markup Language）超文本标记语言，负责网页的内容
  • 超文本： 除了文本以外，我们还可以向网页中插入图片、超链接、表格、表单、音频、视频等
  • HTML 由大量的标记/标签构成，分为：
    • 双标记标签：
    • 单标记标签：
      或
      ，两种写法都可以
  • 完整的网页结构： 
       我是网页标题  第一个网页的内容
  • HTML 文件的后缀名是 .html 或 .htm，会按顺序从上往下、从左往右依次解析执行
  • HTML 属性
    属性：也称为特征，描述标签某一方面的特点
    html 有很多的属性和值，用来修改元素的样式和状态
    写法：
    要求：
    1. 属性的声明必须在开始标签中
    2. 一个元素可以有多个属性，多个属性不区分先后顺序，使用空格隔开即可
    3. 属性值要包裹在双引号中
    4. 单值属性：只有一个与属性名同名值，值可以省略不写，如 readonly 只读 disabled禁用

注释

  1. 用来解释代码且不会执行的文本
  2. 注释格式：
  3. 快捷键： Ctrl+/ 添加注释，再按一次取消注释
  4. 注释不能嵌套注释，也不可以写在标签里！

常用快捷键

  • Ctrl + D  复制当前行
  • Ctrl + Y 删除当前行
  • Home 光标移至行首
  • End 光标移至行尾
  • Shift + Enter 光标在任意位置都可以向下添加一个空白行
  • Shift + Alt + 上下键 快速上下调整当前行的位置
  • 选中多行 Tab 统一设置缩进
  • Shift + Tab 回退缩进

转义符号

字符 命名实体 数字实体 说明       不间断空格（防止自动换行） < < < 小于号（标签开始符） > > > 大于号（标签结束符） & & & 和号（用于转义其他实体） \" " " 双引号（在属性值中使用） ’ ' ' 单引号（在属性值中使用）

文本相关标签

  • 加粗文字      加粗文字
  • 斜体文字        斜体文字
  • 下划线文字  下划线文字
  • 删除线文字   删除线文字
  • n级标题    n为1到 6 独占一行，字体加粗，有垂直行间距

  • 段落

                 独占一行，有垂直行间距

  •                           独占一行的灰色水平分割线

空格折叠现象：连续的多个空格或换行会折叠成一个空格显示，使用
换行
生成假文：输入 lorem 按 Tab 补全即可

分区元素

分区标签：可以理解为一个区域，对多个具有相同或相似结构的标签进行统一管理

  •           行内分区：独占一行 div作为典型代表,默认宽度为父级宽度的100%,高度为0靠内容撑起来

  •     块级分区：不换行,用于选中一行中的一部分内容

HTML5 新增了一些带有语义的分区标签

  • 定义网页或一个区域的头部

  • 定义网页的导航部分

  • 定义网页的主要内容

  • 定义网页的一个区块或章节

  • 定义网页中独立完整的内容，比如博客文章或新闻报道

  • 定义网页的侧边栏或者附属信息

  • 定义网页或一个区域的页脚部分
    HTML 基础

顶部条
导航栏
侧边栏
主体
文章
尾部
头部
主体
文章
区域
页脚

其实在用户看来是没有区别的，只不过这样会大大提高代码的可读性与模块复用性、也有利于检索

URL 路径

URL（Uniform Resource Locator）统一资源定位符，俗称路径，用来标识资源的位置

相对路径

  1. 从当前 html 文件的位置出发去找资源
  2. 如果 html 与资源在同一个目录下，直接写资源的名字，如：1.png
  3. 如果资源在 html 的下一级目录，先写目录名再写目录里的资源，如：img/2.png
  4. 如果资源在 html 的上一级目录，先回到上一级再找资源，如： . ./3.png

绝对路径

从根目录处开始找资源，不需要当前文件的位置

  1. 优点：节省本地服务器的存储空间
  2. 缺点：资源不稳定，如果远程服务器删除此资源，本地服务器就引用不到了，且并不安全
  3. 网络资源：从协议开始，如：
    https://cn.bing.com/images/search?q=%e5%9b%be%e7%89%87&id=457EC80FCD5EE9AB67B2B3E8F5624312D6F6400B&FORM=IACFIR

表格

  •   表示整个表格 包含表格的全部内容

  •              表示表格中的一行 table row

  •            表示表格中的一个单元格 table datacell
    单元格是真正存放数据的地方，一行有几个单元格，表示一行有几列

  • 表格的标题

  • 行/列的标题 文字加粗居中显示

表格属性：

  • border=“1px” 给表格添加边框
  • style=“border-collapse: collapse” 表格默认的边框是带有间距的，想去掉可以加这句代码
    合并单元格（写在 td 里，被合并的单元格一定得删掉！）
  • colspan=\"n\"跨列 从当前单元格开始，向右合并 n 个单元格（n 也包含当前单元格）
  • rowspan=\"n\"跨行 从当前单元格开始，向下合并 n 个单元格（n 也包含当前单元格）

代码示例：

 购物车 
 商品编号 商品名称 商品价格 
 
 1 荣耀X60 2601 
 
 2 三折叠 怎么折都有面 27399 
 
 总价 30000

效果：
HTML 基础

超链接

标签用于向页面插入超链接

  • href 表示要链接的资源路径
  • 超链接可以链接网络与内部资源，还可以链接图片
  • 通过 a 标签包裹 img 标签可以实现图片超链接
  • 锚点：先给对应的 html 内容添加 id，再通过#id 值选中，即可跳转到锚点位置，#表示直接跳转到页面顶部
跳转到今日的第2个页面跳转到今日的第4个页面百度首页TMOOC首页即将打开一张图片 HTML 基础
西游记
快速跳转至第1章快速跳转至第2章快速跳转至第3章
第一章 石猴出世
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
第二章 蓬莱学艺
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
第三章 龙宫借宝
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
快速跳转至页面顶部

表单

表单提供了一些可视化的输入控件，会自动收集整理用户输入的内容，并提交给服务器
表示表单的开始与结束

属性 描述 action=“url” 向哪个地址提交数据，如果不写会提交给当前页面，也可以写一个#号占位 type 控件类型 name 控件名 value 可以设置输入框的默认值，如果是按钮，则设置的是按钮上显示的文本 placeholder 提示占位文本 maxlength 设置输入的最大长度 readonly 设置文本控件只读，能看不能改，数据可以提交 disabled 设置控件为禁用(控件变为灰色的了,且数据不可以提交) checked 单/多选框使用此属性可以设置指定选项被默认选中 
 文本输入框 密码框 单选框 注意设置name与value属性！多选框 注意设置name与value属性！日期文件颜色范围

按钮的另外一种写法：

下拉选框： selected 可以设置默认选中

 北京 上海

label 关联控件：用于 form 中文本和控件的关联，单击文本如同单击控件

多行文本域：用于输入多行文本内容，常用于留言板意见栏等

  • resize：none 不允许拖拽修改多行文本域的大小
  • rows 设置行数(高度) cols设置列数(宽度)但这两个属性不推荐后期可以用CSS做

总体代码：

     姓名1: 
 姓名2: 
  姓名3: 
  姓名4: 
 姓名5: 
  姓名6: 
 
 密码: 
  性别: 男 女 
 爱好: 吃饭 睡觉 打游戏 学Java 
 生日: 
 颜色: 
 范围: 
 文件: 
 喜欢的城市: 北京 上海 长春 广州  
    
    
  留言板:

必须掌握：

题目 答案 value加在输入框上，是设置什么? 设置显示的默认值,用户输入的值也保存在value属性中 value加在按钮上，是设置什么? 设置按钮上显示的文字 value加在单选/多选/下拉选框选项上,是设置什么? 设置选中当前选项时提交的值 只读/禁用属性是什么?有什么区别? readonly disabled 都是单值属性，都只允许看，不允许编辑，但禁用无法提交值 怎么设置单选/多选选项的默认选中? checked单值属性 怎么设置下拉选框选项的默认选中? selected单值属性 写单选时，必须要写的两个属性是什么? name：将所有选项分到同一组；value：不然提交的是on

音视频插入

音频标签

  • src= “插入资源的路径”
  • controls 显示播放控件 单值属性
  • muted 设置静音，必须设置静音才能自动播放 单值属性
  • autoplay 自动播放 单值属性
  • loop 循环播放 单值属性

图片的类型

  • 最常用的图片展示格式----JPG/JPEG
  • 透明图层展示格式----PNG
  • 表情包常用到的格式----GIF
  • 修图师常用的格式----PSD
  • 打印文档常用图片格式----TIFF
  • 画图工具和windows系统常用图片格式----BMP
  • 谷歌新出的图片格式----WEBP

总结

  1. - 定义 HTML 文档的根元素
  2. - 包含文档的元数据（如字符编码、页面标题、样式、脚本等）
  3. - 包含文档的可见内容（文本、图像、链接、表单等）
  4. - 提供关于 HTML 文档的元数据（如字符编码、页面描述、关键词等）
  5. - 定义 HTML 文档的标题（显示在浏览器标签页上）</li> <li><b> - 定义粗体文本（不强调重要性）</li> <li><s> - 定义不再准确或相关的文本（显示为删除线）</li> <li><i> - 定义斜体文本（通常用于术语、外语短语等）</li> <li><u> - 定义下划线文本（通常用于拼写错误的文本或需要关注的文本）</li> <li><mark> - 定义需要标记或高亮显示的文本</li> <li> - 插入换行符（强制换行）</li> <li> <hr> - 插入水平线（用于分隔内容）</li> <li> <h1>-</p> <h6> - 定义 HTML 标题（</p> <h1> 最高级别，</p> <h6> 最低级别）</li> <li> <p> - 定义段落</li> <li> <ul> - 定义无序列表（使用项目符号）</li> <li> <ol> - 定义有序列表（使用数字或字母）</li> <li> <li> - 定义列表项（用于 <ul> 或 </p> <ol> 中）</li> <li><span> - 定义行内容器（用于样式化行内部分文本）</li> <li> <div> - 定义块级容器（用于分组和样式化内容）</li> <li> <header> - 定义文档或章节的页眉（通常包含导航栏、标题等）</li> <li> <nav> - 定义导航链接区域</li> <li> - 定义文档的主要内容（不包含重复内容，如侧边栏、页眉、页脚等）</li> <li> <footer> - 定义文档或章节的页脚（通常包含版权信息、联系信息等）</li> <li> <aside> - 定义与主要内容相关但次要的内容（如侧边栏、广告等）</li> <li> <article> - 定义独立的、自包含的内容（如博客文章、论坛帖子等）</li> <li><img> - 插入图像</li> <li><a> - 定义超链接（用于导航到其他页面或资源）</li> <li> <table> - 定义表格</li> <li> <tr> - 定义表格行</li> <li> <th> - 定义表格表头单元格</li> <li> <td> - 定义表格数据单元格</li> <li> <caption> - 定义表格标题</li> <li> - 定义 HTML 表单（用于用户输入）</li> <li> - 定义表单输入字段（文本框、密码框、复选框、单选按钮等）</li> <li><button> - 定义可点击按钮</li> <li> - 定义下拉列表</li> <li> - 定义下拉列表中的选项</li> <li><textarea> - 定义多行文本输入框</li> <li><label> - 定义表单控件的标签（用于提高可用性）</li> <li><audio> - 嵌入音频内容</li> <li><video> - 嵌入视频内容</li> </ol> <p><a href="http://www.nxtx.org/" target="_blank">宁夏同心网</a></p> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="http://www.csdndoc.com/tag/dy-9" rel="tag">定义</a> <a href="http://www.csdndoc.com/tag/sx-2" rel="tag">属性</a> <a href="http://www.csdndoc.com/tag/bq" rel="tag">标签</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="http://www.csdndoc.com/thread/4545.html" rel="prev">手语式映射：Kinova Gen3 力控机械臂自适应控制的研究与应用</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="http://www.csdndoc.com/thread/4547.html" rel="next">设计模式——责任链模式</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="http://www.pcgg.com.cn/jw/58805.html">剑网3寻宝去哪儿</a></li> <li><a href="http://www.pcgg.com.cn/fzscjh/49334.html">方舟生存进化蜂房</a></li> <li><a href="http://www.pcgg.com.cn/lol/19368.html">英雄联盟手游怎么重新绑定身份证</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/9141.html">和平精英怎样调属于自己的灵敏度</a></li> <li><a href="http://www.pcgg.com.cn/lol/27953.html">英雄联盟皮肤买错区了怎么联系客服</a></li> <li><a href="http://www.pcgg.com.cn/gl/5248.html">原神10把璃月地灵龛在哪</a></li> <li><a href="http://www.pcgg.com.cn/lol/33285.html">win7玩lol怎么提高fps</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/13054.html">和平精英游戏仓库在哪里看</a></li> <li><a href="http://www.pcgg.com.cn/aedfh/36916.html">艾尔登法环3联机内容</a></li> <li><a href="http://www.pcgg.com.cn/lol/25734.html">在哪里看lol世界赛</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="http://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br /> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="http://www.pcgg.com.cn/lol/19779.html">lol用多少dpi</a></li> <li><a href="http://www.pcgg.com.cn/lol/26964.html">lol装备手机哪里看</a></li> <li><a href="http://www.pcgg.com.cn/lol/32396.html">lol云顶龙族怎么玩</a></li> <li><a href="http://www.pcgg.com.cn/lol/23293.html">英雄联盟下载的补丁能删吗</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/8737.html">和平精英有情侣头像框吗(和平精英情侣头像可爱)</a></li> <li><a href="http://www.pcgg.com.cn/lol/29402.html">英雄联盟新手教程在哪进入</a></li> <li><a href="http://www.pcgg.com.cn/lol/22401.html">lol聊天框怎么放大缩小</a></li> <li><a href="http://www.pcgg.com.cn/lol/33314.html">英雄联盟下载多大</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/6631.html">2022年和平精英灵敏度最稳(2030年和平精英最稳灵敏度)</a></li> <li><a href="http://www.pcgg.com.cn/gl/2936.html">原神解除尾的封印怎么开</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a> </p> <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p> <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div> <!--gototop--> <div id="tbox"> <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>