2023年6月20日发(作者：)
⾏内标签与块级标签、form标签、wrapper⽹页布局--html基本知识（学习笔记）最近，⼜回顾学习了html的⼀些基本知识，在此mark⼀下：⼀、块级标签、⾏内标签与⾃闭合标签 ①块级标签：占据⼀整⾏，⾼度、⾏⾼、内边距和外边距都可以改变，宽度和游览器的宽度⼀样，和内容⽆关，可以容纳块级标签和其他⾏内标签； ②⾏内标签：只占内容宽度⼤⼩、⾼度、⾏⾼，内边距和外边距是可以部分可以改变的。 ⾏内元素⼀般是内容的容器，⽽块级元素⼀般是其他容器的容器。因此，⾏内元素适合显⽰具体的内容，⽽块级元素适合做布局。常⽤的⾏内元素和块级元素如下：
级别⾏内元素块级元素元素a,b,strong,span,img,label,button,input,select,textareaheader,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer ⼀般情况下，⾏内元素只包含内容和其他⾏内元素，宽度和长度依据内容⽽定，不可以设置，可以和其他元素和平共处⼀⾏；⽽块级元素可以包含⾏内元素和其他块级元素，且占据⽗元素的整个空间，可以设置width和height属性，游览器通常会在块级元素前后另起⼀个新⾏。 之所以，说“⼀般情况”，是因为元素的级别不是⼀成不变的，游览器是按照规范规定的元素的默认级别来显⽰，但是，也可以通过"display"的属性来改变其级别。 常⽤的display值 常⽤的display可能的值如下：
值inlineblockinline-blocktabletable-celltable-rowtable-column说明以⾏内元素⾏为展⽰以块级元素⾏为展⽰⾏内元素和块级元素特性兼⽽有之，既不会占满⽗元素，⼜可以设置width和height属性以表格的形式展⽰以表格单元格的形式展⽰以表格⾏的形式展⽰以表格列的形式展⽰flexCSS3 新增，虽然处于CR阶段，但是很多现代浏览器已经⽀持⽆前缀的该特性，IE从11开始部分⽀持。类似块级元素，但是可以⽤于制作⾃适应布局类似⾏内元素，但是可以⽤于制作⾃适应布局CSS3 新增，⽬前处于“实验阶段（Experimental）”,只是得到了IE11和edge的部分⽀持inline-flexgrid 注：flex属性因其在WEB端的兼容性不是很好，但是，在移动端⽀持良好，利⽤flex布局可以更好的制作出⾃适应布局，解决移动端各种⼿机屏幕的适应问题。 块级元素与overflow 块级元素当没有明确指定width和height值时，块级元素尺⼨由内容确定，当指定了width和height的值时，内容超出规定的尺⼨就会溢出，元素的尺⼨并不会随着内容改变。这时候，使⽤overflow可以指定内容超出时的⾏为，当然，overflow只对块级元素起作⽤，指定当内容超出块级容器的时候，块级元素该如何处理内容的显⽰。overflow可能的值如下表⽰：
值visiblehiddenscrollauto说明默认值，如果内容超出容器尺⼨，不做任何处理超出的内容被截断并隐藏⽆论内容是否超出，总是显⽰滚动条。可以控制只显⽰⼀个⽅向的滚动条，这时应该设置 overflow-x 和 overflow-y内容没有超出时，不显⽰滚动条；内容超出时，显⽰滚动条，且如果只有⼀个⽅向超出，那么只显⽰该⽅向上的滚动条 相关实例： hello world
this is a
this is a article 1 this is a article 2 地址详情 ⼤标题是什么
link font size large font.div1{ height: 100px; background: #6DC5DC; } .rowLabel{ background: yellow; display: block; } [data-myself] { background: red; } function fillFont(obj) { var name = ribute("data-myself"); alert(TML + '' + name); } 在游览器显⽰如下：⼆、form标签
⼆分之⼀ html5
hello world
在游览器显⽰如下：三、基本⽹页布局 随着H5的使⽤，WEB标签的语义化，可以利⽤标签更明了的显⽰⽹页的基本布局了。 HTML5中的⼀些新标签列举：
标签描述定义注释。 定义⽂档类型。定义超链接。定义缩写。HTML 5 中不⽀持。定义⾸字母缩写。定义地址元素。HTML 5 中不⽀持。定义 applet。定义图像映射中的区域。定义 article。定义页⾯内容之外的内容。定义声⾳内容。定义粗体⽂本。定义页⾯中所有链接的基准 URL。HTML 5 中不⽀持。请使⽤ CSS 代替。定义⽂本的⽂本⽅向，使其脱离其周围⽂本的⽅向设置。定义⽂本显⽰的⽅向。HTML 5 中不⽀持。定义⼤号⽂本。定义长的引⽤。定义 body 元素。插⼊换⾏符。定义按钮。定义图形。定义表格标题。HTML 5 中不⽀持。定义居中的⽂本。定义引⽤。定义计算机代码⽂本。定义表格列的属性。定义表格列的分组。定义命令按钮。定义下拉列表。定义定义的描述。定义删除⽂本。定义元素的细节。定义定义项⽬。HTML 5 中不⽀持。定义⽬录列表。定义⽂档中的⼀个部分。定义定义列表。定义定义的项⽬。定义强调⽂本。定义外部交互内容或插件。定义 fieldset。定义 figure 元素的标题。定义媒介内容的分组，以及它们的标题。HTML 5 中不⽀持。定义 section 或 page 的页脚。定义表单。HTML 5 中不⽀持。定义⼦窗⼝（框架）。HTML 5 中不⽀持。定义框架的集。定义标题 1 到标题 6。定义关于⽂档的信息。定义 section 或 page 的页眉。定义有关⽂档中的 section 的信息。定义⽔平线。定义 html ⽂档。定义斜体⽂本。定义⾏内的⼦窗⼝（框架）。定义图像。定义输⼊域。定义插⼊⽂本。定义⽣成密钥。HTML 5 中不⽀持。定义单⾏的输⼊域。定义键盘⽂本。定义表单控件的标注。定义 fieldset 中的标题。定义列表的项⽬。定义资源引⽤。定义图像映射。定义有记号的⽂本。定义菜单列表。定义元信息。定义预定义范围内的度量。定义导航链接。HTML 5 中不⽀持。定义 noframe 部分。定义 noscript 部分。定义嵌⼊对象。定义有序列表。定义选项组。定义下拉列表中的选项。定义输出的⼀些类型。定义段落。为对象定义参数。定义预格式化⽂本。定义任何类型的任务的进度。定义短的引⽤。定义若浏览器不⽀持 ruby 元素显⽰的内容。定义 ruby 注释的解释。定义 ruby 注释。HTML 5 中不⽀持。定义加删除线的⽂本。定义样本计算机代码。定义脚本。定义 section。定义可选列表。将旁注 (side comments) 呈现为⼩型⽂本。定义媒介源。定义⽂档中的 section。HTML 5 中不⽀持。定义加删除线的⽂本。定义强调⽂本。定义样式定义。定义下标⽂本。定义 details 元素的标题。定义上标⽂本。定义表格。定义表格的主体。定义表格单元。定义 textarea。定义表格的脚注。定义表头。定义表头。定义⽇期/时间。定义⽂档的标题。定义表格⾏。定义⽤在媒体播放器中的⽂本轨道。HTML 5 中不⽀持。定义打字机⽂本。HTML 5 中不⽀持。定义下划线⽂本。定义⽆序列表。定义变量。定义视频。
<![CDATA[HTML 5 中不⽀持。定义预格式⽂本。 随便插⼊⼀下，WEB的语义化的理解，WEB语义化分为三个阶段，⽽H5的出现正好处于第三阶段： ①最初，游览器和W3C组织推出了h1~h6、thead、ul、ol等HTML标签，⽤于在WEB页⾯中组织对应的内容，如⽹页标题、表头、⽆序、有序列表，以达到⽅便协作及传播互联⽹内容。这样，机器可以读懂内容，同时利于SEO。搜索引擎利⽤这些语义化标签抓取内容，⼜鉴于搜索引擎的巨⼤流量推荐，WEB前端不得不考虑SEO，从⽽两者实现有益的循环，共同推进着语义化标签的使⽤； ②起初的HTML语义化标签，不能满⾜WEB的发展，不⾜以实现对WEB页⾯各个部分的功能或位置描述，WEB⼈员利⽤HTML标签的id和class属性，进⼀步对HTML标签进⾏描述，如对页脚HTML标签添加"id=footer"或者"class=footer"的属性，来弥补不⾜，同时在不同的前端⼈员与后端⼈员间实现交流； ③W3C组织意识到之前HTML版本的不⾜，推出的HTML5进⼀步推进了WEB语义化的发展，采⽤了如footer、section等语义化标签，来弥补采⽤"id=footer"或者"class=footer"的不⾜，以推动了WEB的发展。 相关实例的基本布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sematic</title> <link rel="stylesheet" type="text/css" href=""> <link href="./" type="image/x-icon"></head><body><div id="wrapper"> <header class="siteHeader"> <h1>页⾯的头，⼀号字体</h1> </header> <aside class="navSideBar"> <h2>左边栏2号字体</h2> <ul> <li><a href="#aa">header标签的使⽤</a></li> <li><a href="#bb">aside变迁的使⽤</a></li> <li><a href="#cc">nav标签的使⽤</a></li> <li><a href="#dd">section标签的使⽤</a></li> <li><a href="#ee">article标签的使⽤</a></li> <li><a href="#ff">footer标签的使⽤</a></li> </ul> <article class="artSideBar"> <h2>关于我们</h2> <p>这是⼀个简短的描述。这是⼀个简短的描述。 简短的描述。这是⼀个简短的描述。这是⼀个简短的描述。</p> </article> </aside> <main class="content"> <article> <nav> <a href="#">Home</a> <a href="#">Previous</a> <a href="#">Details</a> <a href="#">Next</a> </nav> <header class="artHeader"> <h2 name="cc">欢迎来到前端⼤讲堂</h2> <h3>副标题： ⽀持所有的 EcmaScript 6 的浏览器</h3> <p class="byline">by ****</p> </header> <section class="artSection"> <section class="artSection"><p></p><p> “Usability” is a construct conceived by the human–computer interaction (HCI) community to denote a desired quality of interactive systems and products. Despite 远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定分⽀的时候，需要指定远程分⽀的名字远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定 远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定分⽀的时候，需要指定远程分⽀的名字远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取</p> </section> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> </article> </main> <footer> <p class="disclaimer">版权所有，未经允许不得转载</p> <p> <a href="#">关于我们</a> <a href="#">练习我们</a> <a href="#">帮助</a> </p> </footer></div></body></html>在游览器显⽰如下：四、总结与思考 利⽤这次回顾总结html基本知识的机会，随便⼜复习了⼀遍H5的新标签，同时，了解了⼀下WEB语义化的发展，对⽹页新标签的使⽤有了新的了解。 如⽂章哪⾥有问题，欢迎⼤家留⾔，进⾏指正，谢谢！参考博客：HTML⾏内元素与块级元素参考博客：如何理解WEB语义化？ 版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。</p><p><p></p></img></p><p>2023年6月20日发(作者：)</p><p></p><p></img></p><p>⾏内标签与块级标签、form标签、wrapper⽹页布局--html基本知识（学习笔记）最近，⼜回顾学习了html的⼀些基本知识，在此mark⼀下：⼀、块级标签、⾏内标签与⾃闭合标签 ①块级标签：占据⼀整⾏，⾼度、⾏⾼、内边距和外边距都可以改变，宽度和游览器的宽度⼀样，和内容⽆关，可以容纳块级标签和其他⾏内标签； ②⾏内标签：只占内容宽度⼤⼩、⾼度、⾏⾼，内边距和外边距是可以部分可以改变的。 ⾏内元素⼀般是内容的容器，⽽块级元素⼀般是其他容器的容器。因此，⾏内元素适合显⽰具体的内容，⽽块级元素适合做布局。常⽤的⾏内元素和块级元素如下： </p><p>级别⾏内元素块级元素元素a,b,strong,span,img,label,button,input,select,textareaheader,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer ⼀般情况下，⾏内元素只包含内容和其他⾏内元素，宽度和长度依据内容⽽定，不可以设置，可以和其他元素和平共处⼀⾏；⽽块级元素可以包含⾏内元素和其他块级元素，且占据⽗元素的整个空间，可以设置width和height属性，游览器通常会在块级元素前后另起⼀个新⾏。 之所以，说“⼀般情况”，是因为元素的级别不是⼀成不变的，游览器是按照规范规定的元素的默认级别来显⽰，但是，也可以通过"display"的属性来改变其级别。 常⽤的display值 常⽤的display可能的值如下： </p><p>值inlineblockinline-blocktabletable-celltable-rowtable-column说明以⾏内元素⾏为展⽰以块级元素⾏为展⽰⾏内元素和块级元素特性兼⽽有之，既不会占满⽗元素，⼜可以设置width和height属性以表格的形式展⽰以表格单元格的形式展⽰以表格⾏的形式展⽰以表格列的形式展⽰flexCSS3 新增，虽然处于CR阶段，但是很多现代浏览器已经⽀持⽆前缀的该特性，IE从11开始部分⽀持。类似块级元素，但是可以⽤于制作⾃适应布局类似⾏内元素，但是可以⽤于制作⾃适应布局CSS3 新增，⽬前处于“实验阶段（Experimental）”,只是得到了IE11和edge的部分⽀持inline-flexgrid 注：flex属性因其在WEB端的兼容性不是很好，但是，在移动端⽀持良好，利⽤flex布局可以更好的制作出⾃适应布局，解决移动端各种⼿机屏幕的适应问题。 块级元素与overflow 块级元素当没有明确指定width和height值时，块级元素尺⼨由内容确定，当指定了width和height的值时，内容超出规定的尺⼨就会溢出，元素的尺⼨并不会随着内容改变。这时候，使⽤overflow可以指定内容超出时的⾏为，当然，overflow只对块级元素起作⽤，指定当内容超出块级容器的时候，块级元素该如何处理内容的显⽰。overflow可能的值如下表⽰： </p><p>值visiblehiddenscrollauto说明默认值，如果内容超出容器尺⼨，不做任何处理超出的内容被截断并隐藏⽆论内容是否超出，总是显⽰滚动条。可以控制只显⽰⼀个⽅向的滚动条，这时应该设置 overflow-x 和 overflow-y内容没有超出时，不显⽰滚动条；内容超出时，显⽰滚动条，且如果只有⼀个⽅向超出，那么只显⽰该⽅向上的滚动条 相关实例：<!-- 块级标签： 占据⼀整⾏， ⾼度，⾏⾼，内边距和外边距都可以改变 宽度和浏览器的宽度⼀样，和内容⽆关 可以容纳块级标签和其他⾏内标签 ⾏内标签： 只占内容宽度⼤⼩， ⾼度，⾏⾼，内边距和外边是部分可以改变 --> <span class="rowLabel">hello world</span> <div class="div1"></div> <!--闭合标签--> <div onclick="fillFont(this)" data-myself="div element">this is a </div> <article>this is a article 1</article> <article>this is a article 2</article> <!--⾃闭合标签,在HTML5标准中并⾮要求⼀定/闭合，xhtml中要求--> <!--block element：默认独占⼀⾏的--> <address style="display:inline">地址详情</address> <h1 style="display:inline">⼤标题是什么</h1> <!--inline element--> <a style="display:block">link</a> <dfn style="display:block">font size</dfn> <big style="display:block">large font</big>.div1{ height: 100px; background: #6DC5DC; } .rowLabel{ background: yellow; display: block; } [data-myself] { background: red; } function fillFont(obj) { var name = ribute("data-myself"); alert(TML + '' + name); } 在游览器显⽰如下：⼆、form标签 <form>标签，⽤于创建供⽤户输⼊的HTML表单。form元素包含⼀个或多个表单元素，⽐如：button,input,keygen,object,output,select,textarea. HTML4.01与HTML5之间的差异 HTML5拥有⼀些新的属性，同时不再⽀持HTML4.01中的某些属性。 属性 </p><p>属性acceptaccept-charsetaction值描述HTML 5 中不⽀持。规定服务器可处理的表单数据字符集。规定当提交表单时向何处发送表单数据。MIME_typecharset_listURLonautocompleteoff规定是否启⽤表单的⾃动完成功能。enctype见说明规定在发送表单数据之前如何对其进⾏编码。getmethodpost规定⽤于发送 form-data 的 HTTP ⽅法。namenovalidateform_namenovalidate规定表单的名称。如果使⽤该属性，则提交表单时不进⾏验证。_blank_selftarget_parent_top规定在何处打开 action URL。framename 说明enctype属性可能的值：application/x-www-form-urlencoded,multipart/form-data,text/plain. 相关实例： <mark>form 标签</mark> <form action="" method="post"> <!-- email:--> </p><p> <input type="email" name="user_email" autocomplete="off"> </p><p> <!-- url: --> <input type="url" name="user_url" autocomplete="off"> </p><p> <!-- number: --> <input type="number" min="0" max="20" name="user_num" step="5"> </p><p> <!-- range: --> <input type="range" name="r" min="1" max="5"> </p><p> <!-- datatime-local:--> </p><p> <input type="datetime-local" name="user_date"> </p><p> <input type="search" placeholder="请输⼊" name="user_search"> <input type="button" value="确定"> </p><p> <!-- selected, checked html5 新⽤法 --> <input type="radio" checked> </p><p> <select name="s" id="sl"> <option value="o">demo1</option> <option value="s" selected>demo2</option> <option value="v">demo3</option> </select> </p><p> <!--- datalist: --> <input type="search" list="list1"> <datalist id="list1"> <option value="1" label="w1"></option> <option value="2" label="w2"></option> <option value="3" label="w3"></option> </datalist> </p><p> <input type="submit"> </form> <meter value="5" min="0" max="10">⼆分之⼀</meter> </p><p> <details style="display: inline;"> <summary>html5</summary> hello world </details> </p><p>在游览器显⽰如下：三、基本⽹页布局 随着H5的使⽤，WEB标签的语义化，可以利⽤标签更明了的显⽰⽹页的基本布局了。 HTML5中的⼀些新标签列举： </p><p>标签描述定义注释。 定义⽂档类型。定义超链接。定义缩写。HTML 5 中不⽀持。定义⾸字母缩写。定义地址元素。HTML 5 中不⽀持。定义 applet。定义图像映射中的区域。定义 article。定义页⾯内容之外的内容。定义声⾳内容。定义粗体⽂本。定义页⾯中所有链接的基准 URL。HTML 5 中不⽀持。请使⽤ CSS 代替。定义⽂本的⽂本⽅向，使其脱离其周围⽂本的⽅向设置。定义⽂本显⽰的⽅向。HTML 5 中不⽀持。定义⼤号⽂本。定义长的引⽤。定义 body 元素。插⼊换⾏符。定义按钮。定义图形。定义表格标题。HTML 5 中不⽀持。定义居中的⽂本。定义引⽤。定义计算机代码⽂本。定义表格列的属性。定义表格列的分组。定义命令按钮。定义下拉列表。定义定义的描述。定义删除⽂本。定义元素的细节。定义定义项⽬。HTML 5 中不⽀持。定义⽬录列表。定义⽂档中的⼀个部分。定义定义列表。定义定义的项⽬。定义强调⽂本。定义外部交互内容或插件。定义 fieldset。定义 figure 元素的标题。定义媒介内容的分组，以及它们的标题。HTML 5 中不⽀持。定义 section 或 page 的页脚。定义表单。HTML 5 中不⽀持。定义⼦窗⼝（框架）。HTML 5 中不⽀持。定义框架的集。定义标题 1 到标题 6。定义关于⽂档的信息。定义 section 或 page 的页眉。定义有关⽂档中的 section 的信息。定义⽔平线。定义 html ⽂档。定义斜体⽂本。定义⾏内的⼦窗⼝（框架）。定义图像。定义输⼊域。定义插⼊⽂本。定义⽣成密钥。<isindex>HTML 5 中不⽀持。定义单⾏的输⼊域。定义键盘⽂本。定义表单控件的标注。定义 fieldset 中的标题。定义列表的项⽬。定义资源引⽤。定义图像映射。定义有记号的⽂本。定义菜单列表。定义元信息。定义预定义范围内的度量。定义导航链接。HTML 5 中不⽀持。定义 noframe 部分。定义 noscript 部分。定义嵌⼊对象。定义有序列表。定义选项组。定义下拉列表中的选项。定义输出的⼀些类型。定义段落。为对象定义参数。定义预格式化⽂本。定义任何类型的任务的进度。定义短的引⽤。定义若浏览器不⽀持 ruby 元素显⽰的内容。定义 ruby 注释的解释。定义 ruby 注释。HTML 5 中不⽀持。定义加删除线的⽂本。定义样本计算机代码。定义脚本。定义 section。定义可选列表。将旁注 (side comments) 呈现为⼩型⽂本。定义媒介源。定义⽂档中的 section。HTML 5 中不⽀持。定义加删除线的⽂本。定义强调⽂本。定义样式定义。定义下标⽂本。定义 details 元素的标题。定义上标⽂本。定义表格。定义表格的主体。定义表格单元。定义 textarea。定义表格的脚注。定义表头。定义表头。定义⽇期/时间。定义⽂档的标题。定义表格⾏。定义⽤在媒体播放器中的⽂本轨道。HTML 5 中不⽀持。定义打字机⽂本。HTML 5 中不⽀持。定义下划线⽂本。定义⽆序列表。定义变量。定义视频。<xmp>HTML 5 中不⽀持。定义预格式⽂本。 随便插⼊⼀下，WEB的语义化的理解，WEB语义化分为三个阶段，⽽H5的出现正好处于第三阶段： ①最初，游览器和W3C组织推出了h1~h6、thead、ul、ol等HTML标签，⽤于在WEB页⾯中组织对应的内容，如⽹页标题、表头、⽆序、有序列表，以达到⽅便协作及传播互联⽹内容。这样，机器可以读懂内容，同时利于SEO。搜索引擎利⽤这些语义化标签抓取内容，⼜鉴于搜索引擎的巨⼤流量推荐，WEB前端不得不考虑SEO，从⽽两者实现有益的循环，共同推进着语义化标签的使⽤； ②起初的HTML语义化标签，不能满⾜WEB的发展，不⾜以实现对WEB页⾯各个部分的功能或位置描述，WEB⼈员利⽤HTML标签的id和class属性，进⼀步对HTML标签进⾏描述，如对页脚HTML标签添加"id=footer"或者"class=footer"的属性，来弥补不⾜，同时在不同的前端⼈员与后端⼈员间实现交流； ③W3C组织意识到之前HTML版本的不⾜，推出的HTML5进⼀步推进了WEB语义化的发展，采⽤了如footer、section等语义化标签，来弥补采⽤"id=footer"或者"class=footer"的不⾜，以推动了WEB的发展。 相关实例的基本布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sematic</title> <link rel="stylesheet" type="text/css" href=""> <link href="./" type="image/x-icon"></head><body><div id="wrapper"> <header class="siteHeader"> <h1>页⾯的头，⼀号字体</h1> </header> <aside class="navSideBar"> <h2>左边栏2号字体</h2> <ul> <li><a href="#aa">header标签的使⽤</a></li> <li><a href="#bb">aside变迁的使⽤</a></li> <li><a href="#cc">nav标签的使⽤</a></li> <li><a href="#dd">section标签的使⽤</a></li> <li><a href="#ee">article标签的使⽤</a></li> <li><a href="#ff">footer标签的使⽤</a></li> </ul> <article class="artSideBar"> <h2>关于我们</h2> <p>这是⼀个简短的描述。这是⼀个简短的描述。 简短的描述。这是⼀个简短的描述。这是⼀个简短的描述。</p> </article> </aside> <main class="content"> <article> <nav> <a href="#">Home</a> <a href="#">Previous</a> <a href="#">Details</a> <a href="#">Next</a> </nav> <header class="artHeader"> <h2 name="cc">欢迎来到前端⼤讲堂</h2> <h3>副标题： ⽀持所有的 EcmaScript 6 的浏览器</h3> <p class="byline">by ****</p> </header> <section class="artSection"> <section class="artSection"><p></p><p> “Usability” is a construct conceived by the human–computer interaction (HCI) community to denote a desired quality of interactive systems and products. Despite 远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定分⽀的时候，需要指定远程分⽀的名字远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定 远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取特定分⽀的时候，需要指定远程分⽀的名字远程分⽀和本地分⽀需要区分好，所以，在从服务器上拉取</p> </section> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> </article> </main> <footer> <p class="disclaimer">版权所有，未经允许不得转载</p> <p> <a href="#">关于我们</a> <a href="#">练习我们</a> <a href="#">帮助</a> </p> </footer></div></body></html>在游览器显⽰如下：四、总结与思考 利⽤这次回顾总结html基本知识的机会，随便⼜复习了⼀遍H5的新标签，同时，了解了⼀下WEB语义化的发展，对⽹页新标签的使⽤有了新的了解。 如⽂章哪⾥有问题，欢迎⼤家留⾔，进⾏指正，谢谢！参考博客：HTML⾏内元素与块级元素参考博客：如何理解WEB语义化？ 版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。</p><p><p></p></img></p></div></article></div><div class="torson info"><div><span>本文发布于:2023-06-20，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://torson.com.cn/news/1687260765a400.html" title="行内标签与块级标签、form标签、wrapper网页布局--html基本知识...">http://torson.com.cn/news/1687260765a400.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/3.html" target="_blank">html滚动条样式</a></span></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论
<span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/400.html?safe_token=4vA2JgaQbwnldfl0tdFgm5IwNhZKh2duVJHlcXufuaaSaZLJriLDNQY1waZy6WQk44taQvUUpAuqyVjlktC09w_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea></div></div><div class="torson psumbit"><input name="sumbit" type="submit" tabindex="6" value="发布" class="button" /></div></form></div><div class="torson commentlist"><div class="torson comment-tab"><div class="torson come-comt">评论列表<span id="comment_count">（有<span id="infocommentnumarea" style="color:#c81111">0</span>条评论）</span></div></div><ul class="diy-comment"></ul></div></div></div><div class="torson mainr"><div class="widget widget_previous"><h4 class="bar">最近发表</h4><ul><li><a href="/news/1687254156a167.html"title='element踩坑小记一(el-row宽度溢出)' aria-label='element踩坑小记一(el-row宽度溢出)'>element踩坑小记一(el-row宽度溢出)</a></li><li><a href="/news/1687258832a325.html"title='修复elementui修改了el-table组件的滚动条样式后出现的问题' aria-label='修复elementui修改了el-table组件的滚动条样式后出现的问题'>修复elementui修改了el-table组件的滚动条样式后出现的问题</a></li><li><a href="/news/1687263480a482.html"title='html表格内容自动换行符,html表格内容自动换行' aria-label='html表格内容自动换行符,html表格内容自动换行'>html表格内容自动换行符,html表格内容自动换行</a></li><li><a href="/news/1687265837a552.html"title='java工作总结(精选12篇)' aria-label='java工作总结(精选12篇)'>java工作总结(精选12篇)</a></li><li><a href="/news/1687274264a832.html"title='java反射调用get方法' aria-label='java反射调用get方法'>java反射调用get方法</a></li><li><a href="/news/1687276467a897.html"title='HTML,CSS,JS学习笔记' aria-label='HTML,CSS,JS学习笔记'>HTML,CSS,JS学习笔记</a></li><li><a href="/news/1687279009a994.html"title='Python爬虫,批量获取知网文献信息' aria-label='Python爬虫,批量获取知网文献信息'>Python爬虫,批量获取知网文献信息</a></li><li><a href="/news/1687282624a1091.html"title='ant-design实现主题暗黑主题和亮色主题的切换(实现网站黑白皮肤)' aria-label='ant-design实现主题暗黑主题和亮色主题的切换(实现网站黑白皮肤)'>ant-design实现主题暗黑主题和亮色主题的切换(实现网站黑白皮肤)</a></li><li><a href="/news/1687287703a1101.html"title='Flash软件说明' aria-label='Flash软件说明'>Flash软件说明</a></li><li><a href="/news/1687289124a1147.html"title='win8+win7+Android-x86 安卓WIN7双系统' aria-label='win8+win7+Android-x86 安卓WIN7双系统'>win8+win7+Android-x86 安卓WIN7双系统</a></li><li><a href="/news/1687315791a1739.html"title='JQuery应用实例学习(强烈推荐)转载' aria-label='JQuery应用实例学习(强烈推荐)转载'>JQuery应用实例学习(强烈推荐)转载</a></li><li><a href="/news/1687324610a2018.html"title='margin测试的原理' aria-label='margin测试的原理'>margin测试的原理</a></li><li><a href="/news/1687324704a2022.html"title='WEB前端开发必备之浏览器兼容性处理方法大全' aria-label='WEB前端开发必备之浏览器兼容性处理方法大全'>WEB前端开发必备之浏览器兼容性处理方法大全</a></li><li><a href="/news/1687331578a2235.html"title='查询接口的测试用例' aria-label='查询接口的测试用例'>查询接口的测试用例</a></li><li><a href="/news/1687335760a2374.html"title='VS2017离线下载及安装方式' aria-label='VS2017离线下载及安装方式'>VS2017离线下载及安装方式</a></li><li><a href="/news/1687336542a2387.html"title='VS2008编译C语言程序详细步骤' aria-label='VS2008编译C语言程序详细步骤'>VS2008编译C语言程序详细步骤</a></li><li><a href="/news/1687337076a2401.html"title='bat命令大全清理系统垃圾更简单' aria-label='bat命令大全清理系统垃圾更简单'>bat命令大全清理系统垃圾更简单</a></li><li><a href="/news/1687337217a2408.html"title='浪潮存储与虚拟服务器连接失败,浪潮' aria-label='浪潮存储与虚拟服务器连接失败,浪潮'>浪潮存储与虚拟服务器连接失败,浪潮</a></li><li><a href="/news/1687337477a2431.html"title='java中接口可以继承接口吗？' aria-label='java中接口可以继承接口吗？'>java中接口可以继承接口吗？</a></li><li><a href="/news/1687339551a2597.html"title='XManager5ssh远程登录服务器工具xshell ，服务器资源上传下载工具xftp' aria-label='XManager5ssh远程登录服务器工具xshell ，服务器资源上传下载工具xftp'>XManager5ssh远程登录服务器工具xshell ，服务器资源上传下载工具xftp</a></li></ul></div><section id="aside_about" class="widget widget_aside_about sb br mb"><div class="avatar"><img class="img" src="/view/template/mitiqin/img/tx.jpg"
alt="拓祥电子编程网"/></div><div class="wrap pd"><p class="title">拓祥电子编程网</p><p class="info">拓祥电子编程提供编程程序员技术分享技术，经验代码。</p><ul class="ul clearfix"></ul></div></section><div class="torson clear"></div><div class="torson widgets"><h4 class="bar">相关推荐</h4><div class="torson hot-post"><ul class="clearfix"><li><a href="/chengxu/1687261175a410.html"title='CSS实现导航栏底部动态滚动条效果' aria-label='CSS实现导航栏底部动态滚动条效果'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0043.jpg" alt="CSS实现导航栏底部动态滚动条效果"/></span><span class="sptit">CSS实现导航栏底部动态滚动条效果</span></a></li><li><a href="/chengxu/1687261197a411.html"title='css盒子模型实验报告总结_html盒子模型和CSS难点总结' aria-label='css盒子模型实验报告总结_html盒子模型和CSS难点总结'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0410.jpg" alt="css盒子模型实验报告总结_html盒子模型和CSS难点总结"/></span><span class="sptit">css盒子模型实验报告总结_html盒子模型和CSS难点总结</span></a></li><li><a href="/news/1687261261a413.html"title='html5比html4的音频使用方法,HTML5audio标签的用法示例' aria-label='html5比html4的音频使用方法,HTML5audio标签的用法示例'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0630.jpg" alt="html5比html4的音频使用方法,HTML5audio标签的用法示例"/></span><span class="sptit">html5比html4的音频使用方法,HTML5audio标签的用法示例</span></a></li><li><a href="/chengxu/1687261331a416.html"title='html中的标签' aria-label='html中的标签'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0932.jpg" alt="html中的标签"/></span><span class="sptit">html中的标签</span></a></li><li><a href="/chengxu/1687261669a429.html"title='dreamweaver怎么制作表格滚动条' aria-label='dreamweaver怎么制作表格滚动条'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0745.jpg" alt="dreamweaver怎么制作表格滚动条"/></span><span class="sptit">dreamweaver怎么制作表格滚动条</span></a></li><li><a href="/chengxu/1687261888a435.html"title='WEB_HTML网页基本语法' aria-label='WEB_HTML网页基本语法'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0268.jpg" alt="WEB_HTML网页基本语法"/></span><span class="sptit">WEB_HTML网页基本语法</span></a></li><li><a href="/wangzhan/1687262062a441.html"title='详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现' aria-label='详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0085.jpg" alt="详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现"/></span><span class="sptit">详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现</span></a></li><li><a href="/news/1687262604a454.html"title='Html5移动端布局及(rem布局)页面自适应布局详解' aria-label='Html5移动端布局及(rem布局)页面自适应布局详解'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0990.jpg" alt="Html5移动端布局及(rem布局)页面自适应布局详解"/></span><span class="sptit">Html5移动端布局及(rem布局)页面自适应布局详解</span></a></li><li><a href="/news/1687262688a456.html"title='htmlcss好看的提示框,div对话框,js+div+css实现好看的提示框效果(转...' aria-label='htmlcss好看的提示框,div对话框,js+div+css实现好看的提示框效果(转...'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0958.jpg" alt="htmlcss好看的提示框,div对话框,js+div+css实现好看的提示框效果(转..."/></span><span class="sptit">htmlcss好看的提示框,div对话框,js+div+css实现好看的提示框效果(转...</span></a></li><li><a href="/wangzhan/1687263165a470.html"title='HTML常用框架' aria-label='HTML常用框架'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0027.jpg" alt="HTML常用框架"/></span><span class="sptit">HTML常用框架</span></a></li><li><a href="/chengxu/1687263257a474.html"title='htmlcss表头,css固定表格表头(各浏览器通用)' aria-label='htmlcss表头,css固定表格表头(各浏览器通用)'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0165.jpg" alt="htmlcss表头,css固定表格表头(各浏览器通用)"/></span><span class="sptit">htmlcss表头,css固定表格表头(各浏览器通用)</span></a></li><li><a href="/chengxu/1687263280a475.html"title='状态输出导航栏html,网页导航条代码' aria-label='状态输出导航栏html,网页导航条代码'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0646.jpg" alt="状态输出导航栏html,网页导航条代码"/></span><span class="sptit">状态输出导航栏html,网页导航条代码</span></a></li><li><a href="/news/1687263345a477.html"title='html题目' aria-label='html题目'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0390.jpg" alt="html题目"/></span><span class="sptit">html题目</span></a></li><li><a href="/chengxu/1687263434a480.html"title='element显示表格右侧滚动条_B端交互组件之表格篇' aria-label='element显示表格右侧滚动条_B端交互组件之表格篇'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0275.jpg" alt="element显示表格右侧滚动条_B端交互组件之表格篇"/></span><span class="sptit">element显示表格右侧滚动条_B端交互组件之表格篇</span></a></li><li><a href="/wangzhan/1687263503a483.html"title='html+css总结+实训day01' aria-label='html+css总结+实训day01'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0737.jpg" alt="html+css总结+实训day01"/></span><span class="sptit">html+css总结+实训day01</span></a></li><li><a href="/news/1687263728a488.html"title='HTML中script标签' aria-label='HTML中script标签'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0796.jpg" alt="HTML中script标签"/></span><span class="sptit">HTML中script标签</span></a></li><li><a href="/wangzhan/1687263840a492.html"title='html文本内容自动滚动,html文本滚动滚动文字的HTML代码是什么_ ...' aria-label='html文本内容自动滚动,html文本滚动滚动文字的HTML代码是什么_ ...'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0786.jpg" alt="html文本内容自动滚动,html文本滚动滚动文字的HTML代码是什么_ ..."/></span><span class="sptit">html文本内容自动滚动,html文本滚动滚动文字的HTML代码是什么_ ...</span></a></li><li><a href="/news/1687264109a501.html"title='html,css,js常用单词' aria-label='html,css,js常用单词'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0879.jpg" alt="html,css,js常用单词"/></span><span class="sptit">html,css,js常用单词</span></a></li><li><a href="/news/1687264180a504.html"title='html input type text等标签属性和方法事件' aria-label='html input type text等标签属性和方法事件'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0947.jpg" alt="html input type text等标签属性和方法事件"/></span><span class="sptit">html input type text等标签属性和方法事件</span></a></li><li><a href="/news/1687264270a508.html"title='htmlcss基础篇——DOM中关于脱离文档流的几种情况分析' aria-label='htmlcss基础篇——DOM中关于脱离文档流的几种情况分析'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0104.jpg" alt="htmlcss基础篇——DOM中关于脱离文档流的几种情况分析"/></span><span class="sptit">htmlcss基础篇——DOM中关于脱离文档流的几种情况分析</span></a></li></ul></div></div><div class="torson clear"></div><div class="widget widget_tags"><h4 class="bar">标签列表</h4><ul><li class="submenu"><a target="_blank" href="/tag/617755.html">塞拉摩和什么服务器一组的</a></li><li class="submenu"><a target="_blank" href="/tag/617752.html">1核1g的服务器能做什么</a></li><li class="submenu"><a target="_blank" href="/tag/617738.html">服务器虚拟目录是干什么的</a></li><li class="submenu"><a target="_blank" href="/tag/617633.html">2u2路服务器是什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617613.html">游戏服务器是什么东西啊知乎</a></li><li class="submenu"><a target="_blank" href="/tag/617609.html">开传奇手游服务器需要什么云机</a></li><li class="submenu"><a target="_blank" href="/tag/617594.html">qq飞车手游服务器是什么意思啊</a></li><li class="submenu"><a target="_blank" href="/tag/617581.html">中国电脑服务器是干什么的</a></li><li class="submenu"><a target="_blank" href="/tag/617573.html">s3多媒体服务器能实现什么功能</a></li><li class="submenu"><a target="_blank" href="/tag/617547.html">为什么这么多卖服务器e5</a></li><li class="submenu"><a target="_blank" href="/tag/617534.html">乐刷pos连接服务器失败是什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617526.html">sql为什么一直连接不到本地服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617487.html">1u服务器能干什么用</a></li><li class="submenu"><a target="_blank" href="/tag/617470.html">淘米安卓服务器是什么意赛尔号</a></li><li class="submenu"><a target="_blank" href="/tag/617441.html">服务器的针对方式是指什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617433.html">域名根服务器f i k l什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617429.html">为什么我的DOTA2是日本服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617400.html">火影忍者手游服务器什么时候更新</a></li><li class="submenu"><a target="_blank" href="/tag/617398.html">2c4g服务器能干什么</a></li><li class="submenu"><a target="_blank" href="/tag/617344.html">电脑网络dns服务器未响应什么意思</a></li></ul></div><div class="torson clear"></div></div></div><footer id="footer"><div class="footer container-w cl"><div class="fnav"></div><div align="center"><span class="copy">
CopyRight © 2022 All Rights Reserved
<a href="/" title="拓祥电子编程网" target="_blank">拓祥电子编程网</a><p><a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-7</a></p><p>友情链接：<a href="https://www.815494.com/biancheng/">编程日记</a>|<a href="https://www.dn580.com/">电脑我帮您</a>|<a href="https://www.loghao.com/">网站日志分析</a>|<a href="https://www.sxydy.com/post/">数学伊甸园</a>|<a href="https://www.lxlong.com/">小龙励志网</a>|<a href="https://www.roclinux.cn/">Linux大棚</a>|<a href="https://www.dn580.com/">电脑知识</a></p></span></div></div></footer><script src="/view/template/mitiqin/js/common.min.js?2.3.0"></script><script src="/view/js/xiuno.js"></script><script src="/view/template/mitiqin/js/app.js?2.3.0"></script><div id="gotop"><div style="display: none; margin-bottom:5px;" id="goTopBtn"><a title="返回顶部" class="gotopa"><span class="iconfont icon-rocket-fill"></span></a></div><div align="center"></div></div></body></html>]]>