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://www.torson.com.cn/news/1687260765a400.html" title="行内标签与块级标签、form标签、wrapper网页布局--html基本知识...">http://www.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=zhniWxOGuK7tK4YyHPabeAGSV5TfncShGeKIVrJmQzQhinyiv6qDEwDDbPXqmK5lCHQvlOZ6u9Z_2FrzP9aVgOwg_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/1687253203a134.html"title='修改bootstraptable源码实现固定高时自定义滚动条的样式' aria-label='修改bootstraptable源码实现固定高时自定义滚动条的样式'>修改bootstraptable源码实现固定高时自定义滚动条的样式</a></li><li><a href="/news/1687263141a469.html"title='CSS文字样式' aria-label='CSS文字样式'>CSS文字样式</a></li><li><a href="/news/1687271375a727.html"title='java程序员如何准备面试' aria-label='java程序员如何准备面试'>java程序员如何准备面试</a></li><li><a href="/news/1687274786a853.html"title='5本最佳的Java面向对象理论和设计模式的书籍(转)' aria-label='5本最佳的Java面向对象理论和设计模式的书籍(转)'>5本最佳的Java面向对象理论和设计模式的书籍(转)</a></li><li><a href="/news/1687279417a1010.html"title='接口自动化测试框架设计优化与实现' aria-label='接口自动化测试框架设计优化与实现'>接口自动化测试框架设计优化与实现</a></li><li><a href="/news/1687282673a1093.html"title='Nuxt.js实现一个SSR的前端博客的示例代码' aria-label='Nuxt.js实现一个SSR的前端博客的示例代码'>Nuxt.js实现一个SSR的前端博客的示例代码</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/1687297853a1366.html"title='RFC2251 LDAP协议 第三版' aria-label='RFC2251 LDAP协议 第三版'>RFC2251 LDAP协议 第三版</a></li><li><a href="/news/1687309707a1551.html"title='雷达图分析法[技巧]' aria-label='雷达图分析法[技巧]'>雷达图分析法[技巧]</a></li><li><a href="/news/1687310138a1563.html"title='移动平均怎么均——两种计算方式的特点和用途' aria-label='移动平均怎么均——两种计算方式的特点和用途'>移动平均怎么均——两种计算方式的特点和用途</a></li><li><a href="/news/1687310408a1573.html"title='赛尔原创|用对比集成式方法理解基于文档的对话' aria-label='赛尔原创|用对比集成式方法理解基于文档的对话'>赛尔原创|用对比集成式方法理解基于文档的对话</a></li><li><a href="/news/1687314043a1671.html"title='使用jQuery实现表单验证功能' aria-label='使用jQuery实现表单验证功能'>使用jQuery实现表单验证功能</a></li><li><a href="/news/1687314501a1690.html"title='...京东用户注册)用JQuery实现简单表单验证,初学者必看...' aria-label='...京东用户注册)用JQuery实现简单表单验证,初学者必看...'>...京东用户注册)用JQuery实现简单表单验证,初学者必看...</a></li><li><a href="/news/1687322812a1954.html"title='WEB测试之兼容性测试' aria-label='WEB测试之兼容性测试'>WEB测试之兼容性测试</a></li><li><a href="/news/1687323524a1978.html"title='BrowserStack怎么用' aria-label='BrowserStack怎么用'>BrowserStack怎么用</a></li><li><a href="/news/1687324031a1998.html"title='firefox浏览器测试常用插件' aria-label='firefox浏览器测试常用插件'>firefox浏览器测试常用插件</a></li><li><a href="/news/1687327492a2128.html"title='eval()的运用和兼容性问题' aria-label='eval()的运用和兼容性问题'>eval()的运用和兼容性问题</a></li><li><a href="/news/1687337672a2447.html"title='CREO(trail.txt)轨迹垃圾文件的处理方法' aria-label='CREO(trail.txt)轨迹垃圾文件的处理方法'>CREO(trail.txt)轨迹垃圾文件的处理方法</a></li><li><a href="/news/1687339166a2573.html"title='KPM字符串匹配next矩阵计算' aria-label='KPM字符串匹配next矩阵计算'>KPM字符串匹配next矩阵计算</a></li><li><a href="/news/1687339787a2613.html"title='jkd1.8 list.stream()练习' aria-label='jkd1.8 list.stream()练习'>jkd1.8 list.stream()练习</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="/news/1687261285a414.html"title='HTML5+CSS3面试题整理' aria-label='HTML5+CSS3面试题整理'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0146.jpg" alt="HTML5+CSS3面试题整理"/></span><span class="sptit">HTML5+CSS3面试题整理</span></a></li><li><a href="/chengxu/1687261533a424.html"title='外观html与外观css的区别,使用CSS定制外观' aria-label='外观html与外观css的区别,使用CSS定制外观'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0251.jpg" alt="外观html与外观css的区别,使用CSS定制外观"/></span><span class="sptit">外观html与外观css的区别,使用CSS定制外观</span></a></li><li><a href="/chengxu/1687261781a433.html"title='bootstraptable表头固定、冻结列、横向纵向滚动条' aria-label='bootstraptable表头固定、冻结列、横向纵向滚动条'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0445.jpg" alt="bootstraptable表头固定、冻结列、横向纵向滚动条"/></span><span class="sptit">bootstraptable表头固定、冻结列、横向纵向滚动条</span></a></li><li><a href="/chengxu/1687261841a434.html"title='html特效代码大全精美免费下载' aria-label='html特效代码大全精美免费下载'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0752.jpg" alt="html特效代码大全精美免费下载"/></span><span class="sptit">html特效代码大全精美免费下载</span></a></li><li><a href="/chengxu/1687262016a439.html"title='table固定列横向滚动_解决elementui合计行在滚动条下方的问题_ ...' aria-label='table固定列横向滚动_解决elementui合计行在滚动条下方的问题_ ...'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0888.jpg" alt="table固定列横向滚动_解决elementui合计行在滚动条下方的问题_ ..."/></span><span class="sptit">table固定列横向滚动_解决elementui合计行在滚动条下方的问题_ ...</span></a></li><li><a href="/news/1687262564a453.html"title='html+css笔记' aria-label='html+css笔记'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0078.jpg" alt="html+css笔记"/></span><span class="sptit">html+css笔记</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/1687262964a463.html"title='Dreamweaver试题(6)' aria-label='Dreamweaver试题(6)'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0015.jpg" alt="Dreamweaver试题(6)"/></span><span class="sptit">Dreamweaver试题(6)</span></a></li><li><a href="/chengxu/1687263053a466.html"title='HTML——精选推荐' aria-label='HTML——精选推荐'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0896.jpg" alt="HTML——精选推荐"/></span><span class="sptit">HTML——精选推荐</span></a></li><li><a href="/news/1687263076a467.html"title='HTML语言基础练习题' aria-label='HTML语言基础练习题'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0496.jpg" alt="HTML语言基础练习题"/></span><span class="sptit">HTML语言基础练习题</span></a></li><li><a href="/news/1687263100a468.html"title='html全局背景代码,html背景代码' aria-label='html全局背景代码,html背景代码'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0754.jpg" alt="html全局背景代码,html背景代码"/></span><span class="sptit">html全局背景代码,html背景代码</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="/news/1687263369a478.html"title='html中select的属性' aria-label='html中select的属性'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0441.jpg" alt="html中select的属性"/></span><span class="sptit">html中select的属性</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/1687263770a489.html"title='htmlselect的事件方法属性' aria-label='htmlselect的事件方法属性'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0605.jpg" alt="htmlselect的事件方法属性"/></span><span class="sptit">htmlselect的事件方法属性</span></a></li><li><a href="/chengxu/1687263887a494.html"title='利用js+css+html实现固定table的列头不动' aria-label='利用js+css+html实现固定table的列头不动'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0474.jpg" alt="利用js+css+html实现固定table的列头不动"/></span><span class="sptit">利用js+css+html实现固定table的列头不动</span></a></li><li><a href="/wangzhan/1687264022a498.html"title='Tkintercanvas的画布参数,删除组件,添加垂直滚动条详解' aria-label='Tkintercanvas的画布参数,删除组件,添加垂直滚动条详解'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0744.jpg" alt="Tkintercanvas的画布参数,删除组件,添加垂直滚动条详解"/></span><span class="sptit">Tkintercanvas的画布参数,删除组件,添加垂直滚动条详解</span></a></li><li><a href="/news/1687264086a500.html"title='HTML与网页制作测试题库' aria-label='HTML与网页制作测试题库'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0370.jpg" alt="HTML与网页制作测试题库"/></span><span class="sptit">HTML与网页制作测试题库</span></a></li><li><a href="/news/1687264248a507.html"title='bootstrapTable表格设置单元格宽度无效并且数据太长而不换行的解决办法...' aria-label='bootstrapTable表格设置单元格宽度无效并且数据太长而不换行的解决办法...'><span class="img-box mb5" data-ratio="16:9"><img src="/uploads/image/0135.jpg" alt="bootstrapTable表格设置单元格宽度无效并且数据太长而不换行的解决办法..."/></span><span class="sptit">bootstrapTable表格设置单元格宽度无效并且数据太长而不换行的解决办法...</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/617744.html">小型机和服务器有什么区别</a></li><li class="submenu"><a target="_blank" href="/tag/617691.html">世界上最好的服务器是什么名字</a></li><li class="submenu"><a target="_blank" href="/tag/617649.html">御龙在天11周年什么服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617628.html">lol手游内测服务器什么时候维护好</a></li><li class="submenu"><a target="_blank" href="/tag/617608.html">s95的服务器什么时候维护好</a></li><li class="submenu"><a target="_blank" href="/tag/617607.html">为什么三国杀测试服服务器错误</a></li><li class="submenu"><a target="_blank" href="/tag/617594.html">qq飞车手游服务器是什么意思啊</a></li><li class="submenu"><a target="_blank" href="/tag/617585.html">端游吃鸡不同服务器有什么区别</a></li><li class="submenu"><a target="_blank" href="/tag/617573.html">s3多媒体服务器能实现什么功能</a></li><li class="submenu"><a target="_blank" href="/tag/617558.html">高温服务器奔溃的原因是什么</a></li><li class="submenu"><a target="_blank" href="/tag/617455.html">天谕中的服务器等级有什么用</a></li><li class="submenu"><a target="_blank" href="/tag/617450.html">为什么大企业的服务器安放在贵州</a></li><li class="submenu"><a target="_blank" href="/tag/617449.html">云服务器挂载iso是干什么的</a></li><li class="submenu"><a target="_blank" href="/tag/617441.html">服务器的针对方式是指什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617396.html">手机大型服务器是干什么用的</a></li><li class="submenu"><a target="_blank" href="/tag/617388.html">有一台服务器做什么好赚钱</a></li><li class="submenu"><a target="_blank" href="/tag/617381.html">为什么玩lol老是没网络连接服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617378.html">苹果5s为什么会找不到服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617337.html">没有人玩服务器的游戏叫什么</a></li><li class="submenu"><a target="_blank" href="/tag/617336.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>]]>