《图解HTML》第三节 HTML简介

由前面两个章节了解到,浏览器如同一个加工厂,在这个加工厂里面,有HTML、CSS、JS三大零件,然后浏览器将这些零件组装成一张张美丽的网页。 HTML负责骨架,CSS负责样式,JS负责行为。 那么HTML是什么呢? HTML是Hyper Text Markup Language(超文本标记语言)的简写,是一种标记语言,而不是一种编程语言,是网页制作所必备的。超文本,本质也是文本。 自HTML3.2之后,由W3C推荐标准,定义了多种类型的元素(div,p...)和众多类型的属性值(id,name...)。 HTML文档基本结构 HTML基本结构图 HTML文档基本结构示例 Document
Hello World
文件类型描述(DOCTYPE) 为了说明文档使用的超文本标记语言标准,所有超文本标记语言文档应该以“文件类型声明”(外语全称加缩写)开头,引用一个文件类型描述或者必要情况下自定义一个文件类型描述。举例来说: html5: html4: 根标签(html) html文档的最高节点标签。 元数据(meta) 元数据(Metadata)是数据的数据信息。 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。 META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。 网页标题(title) title是网页的标题元素包含在head中例如:百度一下你就知道在网页上方的标签中显示:百度一下你就知道,相当于一个关键字搜索引擎可以通过关键字查找到此页面。 主题部分(body) body元素是网页的主体部分,网页的内容都写在里面,包括文本,图像,表单,音频,视频等其他内容。 我们编写网页的头部在head里编写,主体是在body内编写。在head里面可编写的内容大多是固定的,而在主体中的标签却是繁多且灵活组合使用的。 带5标识的,是HTML5新增的标签: HTML标签 标签的分类 如此多的标签,看得眼花缭乱,可以适当的将它们分分类。例如单标签/双标签,块级元素/内联元素,或者根据功能分类。 单标签/双标签 单标签:

双标签: 除去以上的单标签都是双标签 块级元素/内联元素 块级元素定义 总是在新行上开始; 高度,行高以及外边距和内边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。 它可以容纳内联元素和其他块元素 内联元素定义 和其他元素都在一行上; 高,行高及外边距和内边距不可改变; 宽度就是它的文字或图片的宽度,不可改变 内联元素只能容纳文本或者其他内联元素 块级元素有哪些
//定义地址 //定义表格标题
//定义列表中定义条目
//定义文档中的分区或节
//定义列表
//定义列表中的项目
//定义一个框架集
//创建 HTML 表单

//定义最大的标题

// 定义副标题

//定义标题

//定义标题

//定义标题
//定义最小的标题
//创建一条水平线 //元素为 fieldset 元素定义标题
  • //标签定义列表项目 //为那些不支持框架的浏览器显示文本,于 frameset 元素内部 <noscript> //定义在脚本未被执行时的替代内容 <ol> //定义有序列表 <ul> //定义无序列表 <p> //标签定义段落 <pre> //定义预格式化的文本 <table> //标签定义 HTML 表格 <tbody> //标签表格主体(正文) <td> //表格中的标准单元格 <tfoot> //定义表格的页脚(脚注或表注) <th> //定义表头单元格 <thead> //标签定义表格的表头 <tr> //定义表格中的行 内联元素有哪些 <a> //标签可定义锚 <abbr> //表示一个缩写形式 <acronym> //定义只取首字母缩写 <b> //字体加粗 <bdo> //可覆盖默认的文本方向 <big> //大号字体加粗 <br> //换行 <cite> //引用进行定义 <code> // 定义计算机代码文本 <dfn> //定义一个定义项目 <em> //定义为强调的内容 <i> //斜体文本效果 <img> //向网页中嵌入一幅图像 <input> //输入框 <kbd> //定义键盘文本 <label> //标签为 input 元素定义标注(标记) <q> //定义短的引用 <samp> //定义样本文本 <select> // 创建单选或多选菜单 <small> //呈现小号字体效果 <span> //组合文档中的行内元素 <strong> //加粗 <sub> //定义下标文本 <sup> //定义上标文本 <textarea> //多行的文本输入控件 <tt> //打字机或者等宽的文本效果 <var> // 定义变量 根据块级元素/内联元素分类的话,还有一些元素根据内容才能判断元素类型,例如: <button> //按钮 <del> // 定义文档中已被删除的文本 <iframe> //创建包含另外一个文档的内联框架(即行内框架) <ins> //标签定义已经被插入文档中的文本 <map> //客户端图像映射(即热区) <object> //object对象 <script> //客户端脚本 我们可以通过css的display属性对块级元素、行内元素进行转换,也可以设置行内块元素。 行内块元素 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置 在下一章节中会根据不同的功能对标签进行划分,且对标签进行详解。 <p style='opacity:0'><a href='https://www.dsiab.com' style='cursor:unset'>本文章由javascript技术分享原创和收集</a></p></div></div><div class="post-footer" data-v-e0d09ea0><!----><div class="copy-desc" data-v-e0d09ea0><div data-v-e0d09ea0>本文由作者创作或收集,内容引用如有问题请联系站长处理。</div><div data-v-e0d09ea0> 转载请注明原文及出处:<a class="quote" href="https://www.dsiab.com/post/2b62031f-a566-422f-8605-61b7a5857e4d" data-v-e0d09ea0>《图解HTML》第三节 HTML简介</a></div></div></div><div class="postRecommend" style="display:none;" data-v-e0d09ea0><div class="common-title" data-v-a72f5a0e>推荐阅读 <i class="active-line" data-v-a72f5a0e></i></div><ul><!--[--><!--]--></ul></div><div class="comments" data-v-e0d09ea0 data-v-f2b74ff7><div class="add-comment" data-v-f2b74ff7><h3 data-v-f2b74ff7>发表评论<span style="color:gray;font-size:1rem;" data-v-f2b74ff7> (审核通过后显示评论):</span></h3><!----></div><div class="commentsList" style="display:none;" data-v-f2b74ff7><h3 style="text-align:center;" data-v-f2b74ff7>文章评论(0)</h3><!--[--><!--]--></div></div></div></div></div><div id="imageList" style="position:absolute;top:9999px;left:-9999px;" data-v-e0d09ea0><!----></div><!--]--><!--]--></div><div class="side-bar layouts-sideBar" data-v-5fb8840b data-v-e86ddcfe><ul data-v-e86ddcfe><li data-v-e86ddcfe><div class="search" data-v-e86ddcfe><!----></div></li><li data-v-e86ddcfe><div class="_oi1z2s14bx" data-v-e86ddcfe></div></li><div class="_clzacg58dkb" data-v-e86ddcfe></div><li data-v-e86ddcfe><div class="module category" data-v-e86ddcfe><div class="common-title" data-v-e86ddcfe data-v-a72f5a0e>专题推荐 <i class="active-line" data-v-a72f5a0e></i></div><!----></div></li><li data-v-e86ddcfe><div class="module" data-v-e86ddcfe><div class="common-title" data-v-e86ddcfe data-v-a72f5a0e>推荐阅读 <i class="active-line" data-v-a72f5a0e></i></div><ul data-v-e86ddcfe><!--[--><!--]--></ul></div></li></ul></div></div><div class="home-footer" data-v-5fb8840b><div class="site-info"><div><a href="https://nuxt.com/">© 基于nuxt</a></div><div><a href="https://beian.miit.gov.cn/">粤ICP备20013202号</a></div><div><a href="/">© 2020-2025 javascript技术分享</a></div></div><!----></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":469,"_errors":470,"serverRendered":479,"path":480},{"IDsRz2IOoy":3,"574zKRyEAZ":429,"06PyIpggrg":448,"MMOI2QvIba":457,"g3oVWSWIeZ":467,"onzAcKmgiT":435},{"code":4,"msg":5,"data":6},0,"操作成功",{"result":7},[8,13,16,19,22,25,28,31,34,37,40,43,46,49,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,175,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,370,373,377,381,385,389,393,397,401,405,409,413,417,421,425],{"id":9,"name":10,"valid":9,"createdBy":11,"createDate":12},1,"未分类","admin","2022-01-20 23:26:35",{"id":14,"name":15,"valid":9,"createdBy":11,"createDate":12},2,"前端面试",{"id":17,"name":18,"valid":9,"createdBy":11,"createDate":12},3,"开发笔记",{"id":20,"name":21,"valid":9,"createdBy":11,"createDate":12},5,"生活笔记",{"id":23,"name":24,"valid":9,"createdBy":11,"createDate":12},7,"编程开发",{"id":26,"name":27,"valid":9,"createdBy":11,"createDate":12},8,"网络资讯",{"id":29,"name":30,"valid":9,"createdBy":11,"createDate":12},103,"育儿心得",{"id":32,"name":33,"valid":9,"createdBy":11,"createDate":12},111,"佳句精选",{"id":35,"name":36,"valid":9,"createdBy":11,"createDate":12},120,"资源分享",{"id":38,"name":39,"valid":9,"createdBy":11,"createDate":12},122,"教育考试",{"id":41,"name":42,"valid":9,"createdBy":11,"createDate":12},123,"开发教程",{"id":44,"name":45,"valid":9,"createdBy":11,"createDate":12},126,"大事记",{"id":47,"name":48,"valid":9,"createdBy":11,"createDate":12},137,"诗词鉴赏",{"id":50,"name":51,"valid":9,"createdBy":11,"createDate":12},140,"成长记录",{"id":53,"name":10,"valid":9,"createdBy":54,"createDate":55},151,"admin11","2022-08-24 22:26:29",{"id":57,"name":10,"valid":9,"createdBy":58,"createDate":59},155,"1111","2022-08-24 22:45:04",{"id":61,"name":62,"valid":9,"createdBy":58,"createDate":63},156,"123","2022-08-24 22:45:20",{"id":65,"name":10,"valid":9,"createdBy":66,"createDate":67},157,"admin111","2022-08-26 10:48:31",{"id":69,"name":70,"valid":9,"createdBy":11,"createDate":71},160,"网络文学","2022-08-27 21:27:36",{"id":73,"name":10,"valid":9,"createdBy":74,"createDate":75},161,"aasun","2022-08-30 16:16:01",{"id":77,"name":10,"valid":9,"createdBy":78,"createDate":79},162,"fadf","2022-09-04 13:23:58",{"id":81,"name":82,"valid":9,"createdBy":11,"createDate":83},168,"家乡动态","2022-09-13 22:33:10",{"id":85,"name":10,"valid":9,"createdBy":86,"createDate":87},169,"cbyniyga","2022-09-14 11:23:03",{"id":89,"name":10,"valid":9,"createdBy":90,"createDate":91},170,"masks","2022-09-14 13:24:23",{"id":93,"name":10,"valid":9,"createdBy":94,"createDate":95},171,"123123","2022-09-14 19:29:18",{"id":97,"name":10,"valid":9,"createdBy":98,"createDate":99},172,"qwer","2022-09-15 14:35:09",{"id":101,"name":10,"valid":9,"createdBy":102,"createDate":103},173,"qwer1123","2022-09-16 20:16:47",{"id":105,"name":10,"valid":9,"createdBy":106,"createDate":107},174,"aaaa","2022-09-21 10:25:36",{"id":109,"name":10,"valid":9,"createdBy":110,"createDate":111},175,"arthur","2022-09-29 15:46:20",{"id":113,"name":10,"valid":9,"createdBy":114,"createDate":115},180,"jiangmeng","2022-10-19 09:49:28",{"id":117,"name":10,"valid":9,"createdBy":118,"createDate":119},183,"test1","2022-10-27 13:32:49",{"id":121,"name":10,"valid":9,"createdBy":122,"createDate":123},184,"flower","2022-11-02 23:46:28",{"id":125,"name":10,"valid":9,"createdBy":126,"createDate":127},185,"test12","2022-11-21 17:13:44",{"id":129,"name":10,"valid":9,"createdBy":130,"createDate":131},186,"1111111","2022-11-21 22:40:22",{"id":133,"name":10,"valid":9,"createdBy":134,"createDate":135},187,"123456","2022-11-21 22:40:55",{"id":137,"name":10,"valid":9,"createdBy":138,"createDate":139},188,"23423","2022-11-26 16:07:57",{"id":141,"name":10,"valid":9,"createdBy":142,"createDate":143},189,"adlfll","2022-11-26 16:09:56",{"id":145,"name":10,"valid":9,"createdBy":146,"createDate":147},190,"adsf","2022-11-26 16:13:00",{"id":149,"name":10,"valid":9,"createdBy":150,"createDate":151},191,"test111","2022-11-26 16:14:12",{"id":153,"name":10,"valid":9,"createdBy":154,"createDate":155},193,"u1223","2022-12-02 08:37:06",{"id":157,"name":10,"valid":9,"createdBy":158,"createDate":159},195,"ferromagnetic","2022-12-15 15:54:46",{"id":161,"name":10,"valid":9,"createdBy":162,"createDate":163},196,"23444","2022-12-28 15:37:38",{"id":165,"name":10,"valid":9,"createdBy":166,"createDate":167},198,"wer234","2023-02-03 22:56:03",{"id":169,"name":10,"valid":9,"createdBy":170,"createDate":171},199,"234234","2023-02-03 22:57:12",{"id":173,"name":10,"valid":9,"createdBy":138,"createDate":174},200,"2023-02-03 22:57:30",{"id":176,"name":10,"valid":9,"createdBy":54,"createDate":177},201,"2023-02-13 21:11:11",{"id":179,"name":180,"valid":9,"createdBy":11,"createDate":181},202,"光影分享","2023-02-16 23:00:38",{"id":183,"name":184,"valid":9,"createdBy":11,"createDate":185},203,"佳文收藏","2023-03-04 20:45:25",{"id":187,"name":188,"valid":9,"createdBy":11,"createDate":189},205,"其他","2023-04-19 23:08:33",{"id":191,"name":10,"valid":9,"createdBy":192,"createDate":193},206,"234234234","2023-05-18 22:01:00",{"id":195,"name":10,"valid":9,"createdBy":196,"createDate":197},207,"admin33","2023-05-18 22:02:38",{"id":199,"name":10,"valid":9,"createdBy":200,"createDate":201},208,"admin333333","2023-05-18 22:05:03",{"id":203,"name":10,"valid":9,"createdBy":204,"createDate":205},209,"adminvvvvvv","2023-05-18 22:08:50",{"id":207,"name":10,"valid":9,"createdBy":208,"createDate":209},210,"23fewfwefvv","2023-05-18 22:14:13",{"id":211,"name":10,"valid":9,"createdBy":212,"createDate":213},211,"233fwefwe","2023-05-18 22:15:30",{"id":215,"name":10,"valid":9,"createdBy":216,"createDate":217},212,"adfasdfasdf","2023-05-18 22:41:49",{"id":219,"name":10,"valid":9,"createdBy":220,"createDate":221},213,"23423eeee","2023-05-18 22:44:12",{"id":223,"name":10,"valid":9,"createdBy":224,"createDate":225},214,"erwdfzxc","2023-05-18 22:47:18",{"id":227,"name":10,"valid":9,"createdBy":228,"createDate":229},215,"夏季男女对表","2023-05-23 15:24:02",{"id":231,"name":10,"valid":9,"createdBy":232,"createDate":233},219,"zhl77","2023-06-18 16:57:27",{"id":235,"name":10,"valid":9,"createdBy":236,"createDate":237},220,"admin123456","2023-06-26 16:56:23",{"id":239,"name":10,"valid":9,"createdBy":240,"createDate":241},222,"youyou","2023-08-10 17:07:19",{"id":243,"name":10,"valid":9,"createdBy":58,"createDate":244},223,"2023-08-17 11:24:23",{"id":246,"name":10,"valid":9,"createdBy":247,"createDate":248},224,"809630306","2023-08-19 13:01:41",{"id":250,"name":10,"valid":9,"createdBy":251,"createDate":252},225,"test333","2023-08-19 15:18:40",{"id":254,"name":10,"valid":9,"createdBy":255,"createDate":256},226,"demo","2023-08-21 15:28:44",{"id":258,"name":10,"valid":9,"createdBy":259,"createDate":260},227,"1234569","2023-08-28 10:58:32",{"id":262,"name":10,"valid":9,"createdBy":263,"createDate":264},228,"qqqq","2023-09-18 17:50:40",{"id":266,"name":10,"valid":9,"createdBy":267,"createDate":268},229,"test123","2023-09-20 11:23:40",{"id":270,"name":10,"valid":9,"createdBy":271,"createDate":272},231,"zmx123","2023-10-02 16:03:50",{"id":274,"name":10,"valid":9,"createdBy":275,"createDate":276},232,"yinquan","2023-10-10 11:58:33",{"id":278,"name":10,"valid":9,"createdBy":279,"createDate":280},233,"1354541","2023-10-10 14:35:53",{"id":282,"name":10,"valid":9,"createdBy":283,"createDate":284},234,"","2023-10-23 21:09:51",{"id":286,"name":10,"valid":9,"createdBy":287,"createDate":288},235,"asdf","2023-10-23 21:10:26",{"id":290,"name":10,"valid":9,"createdBy":291,"createDate":292},236,"imwujianhao@163.com","2023-10-24 10:24:32",{"id":294,"name":10,"valid":9,"createdBy":295,"createDate":296},237,"ls123456","2023-10-26 21:59:55",{"id":298,"name":10,"valid":9,"createdBy":299,"createDate":300},238,"18165042571","2023-11-06 11:05:45",{"id":302,"name":10,"valid":9,"createdBy":303,"createDate":304},239,"gsoft","2023-11-18 07:44:43",{"id":306,"name":10,"valid":9,"createdBy":307,"createDate":308},240,"tststs","2023-12-10 20:53:50",{"id":310,"name":10,"valid":9,"createdBy":311,"createDate":312},241,"骑牛上班","2023-12-27 14:20:26",{"id":314,"name":315,"valid":9,"createdBy":11,"createDate":316},242,"影视分享","2024-01-02 21:50:02",{"id":318,"name":319,"valid":9,"createdBy":11,"createDate":320},243,"音乐分享","2024-01-02 21:50:08",{"id":322,"name":10,"valid":9,"createdBy":323,"createDate":324},244,"11112222","2024-01-09 16:23:29",{"id":326,"name":10,"valid":9,"createdBy":327,"createDate":328},245,"ssdate","2024-01-17 14:38:21",{"id":330,"name":10,"valid":9,"createdBy":331,"createDate":332},246,"admin666","2024-01-21 15:40:53",{"id":334,"name":10,"valid":9,"createdBy":335,"createDate":336},247,"test51","2024-03-02 14:07:11",{"id":338,"name":10,"valid":9,"createdBy":339,"createDate":340},249,"bf斯金纳","2024-03-14 21:53:53",{"id":342,"name":10,"valid":9,"createdBy":343,"createDate":344},250,"testyear","2024-04-12 21:10:42",{"id":346,"name":347,"valid":9,"createdBy":11,"createDate":348},251,"stable diffuson","2024-04-13 23:00:11",{"id":350,"name":351,"valid":9,"createdBy":11,"createDate":352},252,"每日一图","2024-04-17 21:49:58",{"id":354,"name":355,"valid":9,"createdBy":11,"createDate":356},253,"AI问答","2024-04-23 23:13:47",{"id":358,"name":10,"valid":9,"createdBy":359,"createDate":360},254,"hy9810","2024-04-30 11:23:55",{"id":362,"name":10,"valid":9,"createdBy":363,"createDate":364},256,"444444","2024-05-25 14:47:09",{"id":366,"name":367,"valid":9,"createdBy":368,"createDate":369},257,"我是分类","test","2024-06-04 16:51:00",{"id":371,"name":10,"valid":9,"createdBy":368,"createDate":372},258,"2024-06-10 13:58:35",{"id":374,"name":375,"valid":9,"createdBy":368,"createDate":376},260,"ert","2024-06-10 14:12:08",{"id":378,"name":10,"valid":9,"createdBy":379,"createDate":380},261,"testing","2024-06-19 00:08:44",{"id":382,"name":10,"valid":9,"createdBy":383,"createDate":384},262,"weicong","2024-06-24 21:28:28",{"id":386,"name":387,"valid":9,"createdBy":368,"createDate":388},263,"测试1111","2024-06-26 15:29:56",{"id":390,"name":10,"valid":9,"createdBy":391,"createDate":392},264,"1234","2024-07-08 22:35:39",{"id":394,"name":10,"valid":9,"createdBy":395,"createDate":396},265,"adminadmin","2024-08-07 14:29:16",{"id":398,"name":399,"valid":9,"createdBy":11,"createDate":400},266,"玩车日记","2024-10-13 23:10:34",{"id":402,"name":10,"valid":9,"createdBy":403,"createDate":404},267,"1122","2024-10-31 20:24:40",{"id":406,"name":10,"valid":9,"createdBy":407,"createDate":408},268,"admin_sw","2024-11-01 14:00:32",{"id":410,"name":10,"valid":9,"createdBy":411,"createDate":412},269,"mundane","2024-11-22 15:23:28",{"id":414,"name":415,"valid":9,"createdBy":368,"createDate":416},270,"312312","2024-12-12 17:25:52",{"id":418,"name":419,"valid":9,"createdBy":368,"createDate":420},271,"43243","2024-12-12 17:26:03",{"id":422,"name":10,"valid":9,"createdBy":423,"createDate":424},272,"554022067@qq.com","2024-12-24 13:43:22",{"id":426,"name":10,"valid":9,"createdBy":427,"createDate":428},273,"zj676606191","2025-03-24 09:42:21",{"code":4,"msg":5,"data":430},{"result":431},[432,438,441,445],{"id":433,"name":434,"postId":435,"valid":436,"topicId":435,"createDate":437},9,"从零搭建博客",null,"1","2023-05-29 00:08:30",{"id":26,"name":439,"postId":435,"valid":436,"topicId":435,"createDate":440},"前端开发","2022-10-29 18:53:22",{"id":442,"name":443,"postId":435,"valid":436,"topicId":435,"createDate":444},4,"javascript教程","2022-03-02 17:32:45",{"id":9,"name":446,"postId":435,"valid":436,"topicId":435,"createDate":447},"vue3+ts教程","2022-03-01 22:35:34",{"code":4,"msg":5,"data":449},{"menuList":450,"siteUrl":451,"beianNo":452,"carouselUrl":453,"siteName":454,"carouselEnable":455,"siteDesc":456},"[{\"menuName\":\"首页\",\"menuUrl\":\"/\",\"enabled\":\"Y\",\"imgUrl\":\"首页\",\"desc\":\"/\"},{\"menuName\":\"网站导航\",\"menuUrl\":\"/nav\",\"enabled\":\"Y\",\"imgUrl\":\"网站导航\",\"desc\":\"/nav\"},{\"menuName\":\"关于\",\"menuUrl\":\"/post/13\",\"enabled\":\"Y\",\"imgUrl\":\"关于\",\"desc\":\"/post/13\"},{\"menuName\":\"升级日志\",\"menuUrl\":\"https://gitee.com/wilkwo/nuxt-web-plus/releases\",\"enabled\":\"Y\",\"imgUrl\":\"更新日志\",\"desc\":\"https://gitee.com/wilkwo/nuxt-web-plus/releases\"},{\"menuName\":\"优乐购\",\"menuUrl\":\"/tbk\",\"enabled\":\"N\"},{\"menuName\":\"w3c教程\",\"menuUrl\":\"https://source.dsiab.com/course/w3c\",\"enabled\":\"N\"},{\"menuName\":\"react教程\",\"menuUrl\":\"https://source.dsiab.com/course/react/react.docschina.org/index.html\",\"enabled\":\"N\"},{\"menuName\":\"mysql教程\",\"menuUrl\":\"https://source.dsiab.com/course/mysql/\",\"enabled\":\"N\"}]","https://www.dsiab.com","粤ICP备20013202号","[{\"imgUrl\":\"https://source.dsiab.com/upload/0913ca3e-fb3c-4120-98fe-62bd86cf9b42.jpeg\",\"desc\":\"如何通过pm2部署nuxt3应用?\",\"url\":\"https://www.dsiab.com/post/d435197f-f03f-481b-9c4a-f33d2875d317\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"scrollIntoView 方法不生效如何解决\",\"url\":\"https://www.dsiab.com/post/c8df67f1-c2da-4b27-8659-1cb8ef1bd28d\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"在Vue项目中引入tinymce富文本编辑器\",\"url\":\"https://www.dsiab.com/post/6c7ebba5-2b95-4ef4-baf6-2a8479746432\"},{\"imgUrl\":\"https://source.dsiab.com/upload/cf172b78-9a2b-4ed3-8ae8-18ecaf612d98.jpg\",\"desc\":\"宝塔面板如何部署nuxt项目\",\"url\":\"https://www.dsiab.com/post/3501\"}]","javascript技术分享","N","2020-2023 javascript技术分享",{"code":4,"msg":5,"data":458},{"result":459},{"title":460,"content":461,"createDate":462,"cate":23,"id":463,"uid":464,"page":4,"pageSize":4,"views":465,"comments":4,"wordsNum":4,"cateName":24,"keywords":435,"createBy":11,"nickname":466,"orderBy":435,"order":435,"coverImageUrl":435},"《图解HTML》第三节 HTML简介","由前面两个章节了解到,浏览器如同一个加工厂,在这个加工厂里面,有HTML、CSS、JS三大零件,然后浏览器将这些零件组装成一张张美丽的网页。\nHTML负责骨架,CSS负责样式,JS负责行为。\n那么HTML是什么呢?\nHTML是Hyper Text Markup Language(超文本标记语言)的简写,是一种标记语言,而不是一种编程语言,是网页制作所必备的。超文本,本质也是文本。\n自HTML3.2之后,由W3C推荐标准,定义了多种类型的元素(div,p...)和众多类型的属性值(id,name...)。\nHTML文档基本结构\n\n\n\n\n\nHTML基本结构图\n\nHTML文档基本结构示例\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Document\u003C/title>\n\u003C/head>\n\u003Cbody>\n \u003Cdiv>Hello World\u003C/div>\n\u003C/body>\n\u003C/html>\n\n文件类型描述(DOCTYPE)\n为了说明文档使用的超文本标记语言标准,所有超文本标记语言文档应该以“文件类型声明”(外语全称加缩写\u003C!DOCTYPE>)开头,引用一个文件类型描述或者必要情况下自定义一个文件类型描述。举例来说:\nhtml5:\n\u003C!DOCTYPE HTML>\n\nhtml4:\n\u003C!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"\n \"http://www.w3.org/TR/html4/strict.dtd\">\n\n根标签(html)\nhtml文档的最高节点标签。\n元数据(meta)\n\n元数据(Metadata)是数据的数据信息。\n\u003Cmeta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。\nMETA元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。\n元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。\n\n网页标题(title)\ntitle是网页的标题元素包含在head中例如:\u003Ctitle>百度一下你就知道\u003C/title>在网页上方的标签中显示:百度一下你就知道,相当于一个关键字搜索引擎可以通过关键字查找到此页面。\n主题部分(body)\nbody元素是网页的主体部分,网页的内容都写在里面,包括文本,图像,表单,音频,视频等其他内容。\n我们编写网页的头部在head里编写,主体是在body内编写。在head里面可编写的内容大多是固定的,而在主体中的标签却是繁多且灵活组合使用的。\n带5标识的,是HTML5新增的标签:\n\n\n\n\n\n\nHTML标签\n\n标签的分类\n如此多的标签,看得眼花缭乱,可以适当的将它们分分类。例如单标签/双标签,块级元素/内联元素,或者根据功能分类。\n单标签/双标签\n单标签:\n\u003Cbr>\u003Chr>\u003Cimg>\u003Cinput>\u003Cparam>\u003Cmeta>\u003Clink>\n\n双标签:\n除去以上的单标签都是双标签\n块级元素/内联元素\n块级元素定义\n\n总是在新行上开始;\n高度,行高以及外边距和内边距都可控制;\n宽度缺省是它的容器的100%,除非设定一个宽度。\n它可以容纳内联元素和其他块元素\n\n内联元素定义\n\n和其他元素都在一行上;\n高,行高及外边距和内边距不可改变;\n宽度就是它的文字或图片的宽度,不可改变\n内联元素只能容纳文本或者其他内联元素\n\n块级元素有哪些\n \u003Caddress>//定义地址 \n \u003Ccaption>//定义表格标题 \n \u003Cdd> //定义列表中定义条目 \n \u003Cdiv> //定义文档中的分区或节 \n \u003Cdl> //定义列表 \n \u003Cdt> //定义列表中的项目 \n \u003Cfieldset> //定义一个框架集 \n \u003Cform> //创建 HTML 表单 \n \u003Ch1> //定义最大的标题\n \u003Ch2> // 定义副标题\n \u003Ch3> //定义标题\n \u003Ch4> //定义标题\n \u003Ch5> //定义标题\n \u003Ch6> //定义最小的标题\n \u003Chr> //创建一条水平线\n \u003Clegend> //元素为 fieldset 元素定义标题\n \u003Cli> //标签定义列表项目\n \u003Cnoframes> //为那些不支持框架的浏览器显示文本,于 frameset 元素内部\n \u003Cnoscript> //定义在脚本未被执行时的替代内容\n \u003Col> //定义有序列表\n \u003Cul> //定义无序列表\n \u003Cp> //标签定义段落\n \u003Cpre> //定义预格式化的文本\n \u003Ctable> //标签定义 HTML 表格\n \u003Ctbody> //标签表格主体(正文)\n \u003Ctd> //表格中的标准单元格\n \u003Ctfoot> //定义表格的页脚(脚注或表注)\n \u003Cth> //定义表头单元格\n \u003Cthead> //标签定义表格的表头\n \u003Ctr> //定义表格中的行\n\n内联元素有哪些\n \u003Ca> //标签可定义锚 \n \u003Cabbr> //表示一个缩写形式 \n \u003Cacronym> //定义只取首字母缩写 \n \u003Cb> //字体加粗 \n \u003Cbdo> //可覆盖默认的文本方向 \n \u003Cbig> //大号字体加粗 \n \u003Cbr> //换行 \n \u003Ccite> //引用进行定义 \n \u003Ccode> // 定义计算机代码文本\n \u003Cdfn> //定义一个定义项目\n \u003Cem> //定义为强调的内容\n \u003Ci> //斜体文本效果\n \u003Cimg> //向网页中嵌入一幅图像\n \u003Cinput> //输入框\n \u003Ckbd> //定义键盘文本\n \u003Clabel> //标签为 input 元素定义标注(标记)\n \u003Cq> //定义短的引用\n \u003Csamp> //定义样本文本\n \u003Cselect> // 创建单选或多选菜单\n \u003Csmall> //呈现小号字体效果\n \u003Cspan> //组合文档中的行内元素\n \u003Cstrong> //加粗\n \u003Csub> //定义下标文本\n \u003Csup> //定义上标文本\n \u003Ctextarea> //多行的文本输入控件\n \u003Ctt> //打字机或者等宽的文本效果\n \u003Cvar> // 定义变量\n\n根据块级元素/内联元素分类的话,还有一些元素根据内容才能判断元素类型,例如:\n\u003Cbutton> //按钮\n\u003Cdel> // 定义文档中已被删除的文本\n\u003Ciframe> //创建包含另外一个文档的内联框架(即行内框架)\n\u003Cins> //标签定义已经被插入文档中的文本\n\u003Cmap> //客户端图像映射(即热区)\n\u003Cobject> //object对象\n\u003Cscript> //客户端脚本\n\n我们可以通过css的display属性对块级元素、行内元素进行转换,也可以设置行内块元素。\n行内块元素\n1、和其他元素都在一行上;\n2、元素的高度、宽度、行高以及顶和底边距都可设置\n在下一章节中会根据不同的功能对标签进行划分,且对标签进行详解。\n\u003Cp style='opacity:0'>\u003Ca href='https://www.dsiab.com' style='cursor:unset'>本文章由javascript技术分享原创和收集\u003C/a>\u003C/p>","2020-09-25 06:30:41",3282,"2b62031f-a566-422f-8605-61b7a5857e4d",804,"图恩",{"code":4,"msg":5,"data":468},[],{},{"IDsRz2IOoy":435,"574zKRyEAZ":435,"06PyIpggrg":435,"MMOI2QvIba":435,"g3oVWSWIeZ":435,"onzAcKmgiT":471},["NuxtError",472],{"message":473,"statusCode":474,"statusMessage":475,"data":476}," (500 Internal Server Error (https://admin.dsiab.com/portal-service/pages/getRecommendBySameTags?id=2b62031f-a566-422f-8605-61b7a5857e4d))",500,"Internal Server Error",{"timestamp":477,"status":474,"error":475,"path":478},"2025-05-04T06:58:49.659+00:00","/pages/getRecommendBySameTags",true,"/post/2b62031f-a566-422f-8605-61b7a5857e4d"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.86e33eb6.js" crossorigin></script></body> </html>