HTML（HyperTextMarkupLanguage）需要注意的前端内容功能美观安全性能无障碍兼容体验DOM树浏览器在获取HTML代码后会将HTML解析为DOM树语义HTML中的元素和属性以及属性值有一定的意义。开发人员应该遵循语义来编写HTML。有序列表使用ol；无序列表使用ullang属性来表示内容。语义的好处是代码可读性、代码可维护性和搜索引擎优化。如何使无障碍语义化理解每个标签和属性的含义思考什么标签最能描述内容不要使用可视化工具生成代码此语句是必要的，放在HTML文件的头部，以确保浏览器呈现根据最佳相关规范。
指定与HTML文档相关的配置信息，如元数据
、文档标题
、引用的文档样式<style>和脚本、<title>等），例如charset属性可以声明文档编码------------------------------------------分隔符--------------------------------------------------CSS（层叠样式表）CSSHowworks选择器使用多种方式通过标签名称（例如h1{...}）、类名称（例如.nameStyle{...}）或id（例如#inputId{...}）通过属性（例如[disabled]{...},input[type="password"]{...})按DOM树中的位置，伪元素选择器（例如：:before{...}）伪类选择器（例如：hover{...})通配符选择器，用*匹配所有伪类不根据标签和属性来定位元素，伪类分为stateful伪类和Structural伪类。Statefulpseudo-classes：比如链接和输入框在不同交互情况下的状态：结构化伪类根据DOM节点在DOM树中的位置来决定是否选择元素，比如在DOM树中的不同位置选择元素listpseudo-classes在选择元素之前，选择不在DOM树上的元素，或者选择一些常规方法无法选择的元素。最常用的有<::after>、<::before>等。在新版规范中，使用单个冒号（:）来表示伪类。双冒号（::）表示伪元素，以区分伪类和伪元素。CSS选择器优先级规则最近的祖先样式优先于其他祖先样式“直接样式”优先于“祖先样式”内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器计算选择器中ID选择器个数(a)，计算选择器中类选择器、属性选择器和伪类选择器个数之和(b)，计算选择器中标签选择器和伪元素个数之和(c)中的选择器。按照a、b、c的顺序比较size，大的优先级高，相等的比较下一个。如果最后两个选择器中的a,b,c都相等，则根据“就近原则”判断属性后插入!important的属性优先级最高的选择器权重继承或者*0,0,0,0元素选择器0,0,0,1类选择器或伪类选择器0,0,1,0id选择器0,1,0,0内联样式style1,0,0,0!importantpositiveinfiniteselectormode组合使用name语法描述示例直接组合AB满足A和Binput:focusoffspring组合AB选择B，如果是A的后代nava父子组合A>B选择B，如果是A的子元素section>pbrotherselection选择器A~B如果在A之后并且与A同级相邻则选择Bh2~p选择器A+B如果紧跟在A之后选择Bh2+p行级排版上下文IFC仅包含行级框容器会在IFCIFC中创建一个排版规则：当盒子横排成一行，行放不下时，换行显示。text-align决定一个行内框的水平对齐方式vertical-align决定一个行内框的垂直对齐方式，避免浮动元素块级布局上下文BFC一些容器会创建一个BFC，不仅仅是块级标签可以创建：根元素浮动，绝对定位，inline-blockflexsubitems和gridsubitemoverflowvalue不可见blockboxdisplay:flow-rootBFC中的排版规则：box从上到下放置，垂直边距合并boxes的边距在BFC中。BFC中框的边距不会与外部框的边距合并。BFC不会与浮动元素重叠。FlexLayoutFlexBoxflex-direction指定的方向称为mainaxis，与其垂直的方向称为横轴justify-content属性规定了flexbox中元素在主轴方向的排列方式。align-items属性规定了flexbox中元素在横轴方向的排列方式。align-self属性定义了flexchild项单独在横轴方向的对齐方式。order属性可以指定弹性项目的放置顺序。flex-wrap属性指定flex容器是单行还是多行。同时，主轴的方向决定了新线的堆叠方向。默认值为nowrapflexitem会创建BFCFlexibility来设置flex子项的弹性：当容器中有剩余空间时会拉伸，当容器中空间不足时会收缩。-grow属性值分配flex-s的比例hrink属性是指容器空间不足时收缩的能力：当没有剩余空间时，按照每个child的flex-shrink属性值的比例进行压缩。flex-basis属性是指没有拉伸或收缩时的基础长度。flex:1指的是flex-grow:1flex:auto指的是flex-grow:1;伸缩收缩：1；flex-basis:autoflex:none指的是flex-grow:0;伸缩收缩：0；flex-basis：autoFloat用于图形换行，不推荐使用布局Position定位属性static默认值，非定位元素相对于其原始位置的相对偏移，不脱离文档流absolute绝对定位，定位相对于最近的非静态祖先元素固定相对于视图绝对定位，导航栏经常使用固定定位粘性元素依赖于用户滚动，在position:relative和position:fixed定位之间切换</p>
</div>
</div>
<div class="zuowen_sxy">
<div class="prev">上一篇：<a title="给想学编程又无从下手的计算机小白一些建议" href="/webqianduan/232245.html">给想学编程又无从下手的计算机小白一些建议</a> </div>
<div class="prev">下一篇：<a title="可以用来监听Dom类名样式变化的方法：MutationObserver" href="/webqianduan/232247.html">可以用来监听Dom类名样式变化的方法：MutationObserver</a> </div>
</div>
<div class="related_about">
<div class="related_about_t"><code>HTML和CSS_0相关文章</code></div>
<ul>
<li><a href="/kejifunen/370679.html" target="_blank" title="腾讯集团副总裁程武！用科技和文化支撑公益梦想">腾讯集团副总裁程武！用科技和文化支撑公益梦想</a></li>
<li><a href="/kejifunen/370657.html" target="_blank" title="吐槽小米手环和Moto360魅族智能手表或将推出">吐槽小米手环和Moto360魅族智能手表或将推出</a></li>
<li><a href="/kejifunen/370623.html" target="_blank" title="360第三代儿童卫士智能手表曝光！就为了老公和孩子吗？ ">360第三代儿童卫士智能手表曝光！就为了老公和孩子吗？ </a></li>
<li><a href="/kejifunen/370616.html" target="_blank" title="我们来看看智能门锁行业的五大技术和十大厂商">我们来看看智能门锁行业的五大技术和十大厂商</a></li>
<li><a href="/kejifunen/370612.html" target="_blank" title="德国发布儿童智能手表销售禁令，威胁隐私和安全">德国发布儿童智能手表销售禁令，威胁隐私和安全</a></li>
<li><a href="/kejifunen/370563.html" target="_blank" title="暴风和乐视也负债累累！冯鑫如何走出泥潭？ ">暴风和乐视也负债累累！冯鑫如何走出泥潭？ </a></li>
<li><a href="/kejifunen/370561.html" target="_blank" title="身体追踪是 VR 的灵魂，更具互动性和视觉冲击力">身体追踪是 VR 的灵魂，更具互动性和视觉冲击力</a></li>
<li><a href="/kejifunen/370521.html" target="_blank" title="Maxim 发布首款可监测心电图、心率和体温的腕戴式平台 ">Maxim 发布首款可监测心电图、心率和体温的腕戴式平台 </a></li>
<li><a href="/kejifunen/370498.html" target="_blank" title="详细讲解语音控制智能家居系统的实现流程和技术">详细讲解语音控制智能家居系统的实现流程和技术</a></li>
<li><a href="/kejifunen/370488.html" target="_blank" title="虚拟现实可以照进现实和AR增强体验">虚拟现实可以照进现实和AR增强体验</a></li>
<li><a href="/kejifunen/370456.html" target="_blank" title="AR和VR将如何重塑食品行业主要集中在三个方面">AR和VR将如何重塑食品行业主要集中在三个方面</a></li>
<li><a href="/kejifunen/370428.html" target="_blank" title="手机厂商做VR！只有苹果和谷歌Daydream吗？ ">手机厂商做VR！只有苹果和谷歌Daydream吗？ </a></li>
<li><a href="/kejifunen/370427.html" target="_blank" title="8K是未来，内容创作和生态建设迎来新概念">8K是未来，内容创作和生态建设迎来新概念</a></li>
<li><a href="/kejifunen/370376.html" target="_blank" title="区块链技术和VR将如何改变音乐产业？ （第1部分）">区块链技术和VR将如何改变音乐产业？ （第1部分）</a></li>
<li><a href="/kejifunen/370331.html" target="_blank" title="为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可">为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可</a></li>
<li><a href="/kejifunen/370320.html" target="_blank" title="Microsoft Band 2 美国亚马逊圣诞特卖！和上一">Microsoft Band 2 美国亚马逊圣诞特卖！和上一</a></li>
<li><a href="/kejifunen/370310.html" target="_blank" title="超越谷歌！云和AI撑起微软帝国，迈向万亿美元俱乐部">超越谷歌！云和AI撑起微软帝国，迈向万亿美元俱乐部</a></li>
<li><a href="/kejifunen/370301.html" target="_blank" title="NATEDE智能净化器来了，它可以自动种植植物和浇水">NATEDE智能净化器来了，它可以自动种植植物和浇水</a></li>
<li><a href="/kejifunen/370278.html" target="_blank" title="oTMS联合JDA发布中国消费者心声调查报告，新技术和客户体">oTMS联合JDA发布中国消费者心声调查报告，新技术和客户体</a></li>
<li><a href="/kejifunen/370233.html" target="_blank" title="榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ ">榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ </a></li>
</ul>
</div>
</div>
<div class="main-right">
<div class="right_fix">
<div class="r_con">
<div class="r_title">最新推荐</div>
<ul>
<li><em>1</em><a href="/kejifunen/371273.html" title="苹果跨界！让VR和iPhone擦出火花" target="_blank">苹果跨界！让VR和iPhone擦出火花</a></li>
<li><em>2</em><a href="/kejifunen/371268.html" title="石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料" target="_blank">石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料</a></li>
<li><em>3</em><a href="/kejifunen/371208.html" title="当虚拟现实和3D技术走进战场，无需军官在场" target="_blank">当虚拟现实和3D技术走进战场，无需军官在场</a></li>
<li><em>4</em><a href="/kejifunen/371125.html" title="PS5和PS5二代VR预计将于2020年发布" target="_blank">PS5和PS5二代VR预计将于2020年发布</a></li>
<li><em>5</em><a href="/kejifunen/371118.html" title="三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁" target="_blank">三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁</a></li>
<li><em>6</em><a href="/kejifunen/371095.html" title="蓝牙耳机和音箱无缝切换，不错过任何一个节拍" target="_blank">蓝牙耳机和音箱无缝切换，不错过任何一个节拍</a></li>
<li><em>7</em><a href="/kejifunen/371093.html" title="新型可穿戴设备简化血糖监测和调节" target="_blank">新型可穿戴设备简化血糖监测和调节</a></li>
<li><em>8</em><a href="/kejifunen/371064.html" title="Oculus 和 Valve！虚拟世界中的领域之战（第 2 " target="_blank">Oculus 和 Valve！虚拟世界中的领域之战（第 2 </a></li>
<li><em>9</em><a href="/kejifunen/371045.html" title="智能手表和传统手表厂商是竞争对手还是朋友？ " target="_blank">智能手表和传统手表厂商是竞争对手还是朋友？ </a></li>
<li><em>10</em><a href="/kejifunen/371020.html" title="Sennheiser 推出首款 Neckbuds 耳机！支持" target="_blank">Sennheiser 推出首款 Neckbuds 耳机！支持</a></li>
</ul>
</div>
<div class="r_con">
<div class="r_title">猜你喜欢</div>
<ul class="you_like">
<li><em>1</em><a href="/kejifunen/371013.html" title="亚马逊3C销售报告！可穿戴和游戏配件销量激增" target="_blank">亚马逊3C销售报告！可穿戴和游戏配件销量激增</a></li>
<li><em>2</em><a href="/kejifunen/371009.html" title="想和安老师面对面交流吗？低价体验VR——暴风魔镜4初体验" target="_blank">想和安老师面对面交流吗？低价体验VR——暴风魔镜4初体验</a></li>
<li><em>3</em><a href="/kejifunen/371001.html" title="阿里巴巴成立VR实验室，加紧VR内容培育和硬件研发" target="_blank">阿里巴巴成立VR实验室，加紧VR内容培育和硬件研发</a></li>
<li><em>4</em><a href="/kejifunen/370997.html" title="瑞鹰ZigBee Light Link智能照明控制系统解决方" target="_blank">瑞鹰ZigBee Light Link智能照明控制系统解决方</a></li>
<li><em>5</em><a href="/kejifunen/370973.html" title="医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？" target="_blank">医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？</a></li>
<li><em>6</em><a href="/kejifunen/370965.html" title="TicPods 免费！ iPhone和Android用户的最" target="_blank">TicPods 免费！ iPhone和Android用户的最</a></li>
<li><em>7</em><a href="/kejifunen/370952.html" title="联想Watch S和另外两款智能手表亮相，外观惊艳" target="_blank">联想Watch S和另外两款智能手表亮相，外观惊艳</a></li>
<li><em>8</em><a href="/kejifunen/370951.html" title="运动能量集合！把你变成驱动可穿戴设备和物联网的动力源" target="_blank">运动能量集合！把你变成驱动可穿戴设备和物联网的动力源</a></li>
<li><em>9</em><a href="/kejifunen/370932.html" title="富士胶片推出配备节省空间和可旋转镜头的新型紧凑型投影仪产品 " target="_blank">富士胶片推出配备节省空间和可旋转镜头的新型紧凑型投影仪产品 </a></li>
<li><em>10</em><a href="/kejifunen/370878.html" title="阿尔卡特 OneTouch 手表！缺乏细节和亮点" target="_blank">阿尔卡特 OneTouch 手表！缺乏细节和亮点</a></li>
<li><em>11</em><a href="/kejifunen/370867.html" title="谁和你一起跑步？最受网友欢迎的8款运动耳机" target="_blank">谁和你一起跑步？最受网友欢迎的8款运动耳机</a></li>
<li><em>12</em><a href="/kejifunen/370855.html" title="预算1500元以内 联想 Z5、小米X6 和荣耀8X 怎么选" target="_blank">预算1500元以内 联想 Z5、小米X6 和荣耀8X 怎么选</a></li>
<li><em>13</em><a href="/kejifunen/370824.html" title="VR和AR竞赛！谁是时代的转折点？ " target="_blank">VR和AR竞赛！谁是时代的转折点？ </a></li>
<li><em>14</em><a href="/kejifunen/370817.html" title="重新思考可穿戴设备和数据利用！为什么这么难坚持" target="_blank">重新思考可穿戴设备和数据利用！为什么这么难坚持</a></li>
<li><em>15</em><a href="/kejifunen/370813.html" title="【对比评测】小米和魅族耳机市场竞争！选择哪一边？ " target="_blank">【对比评测】小米和魅族耳机市场竞争！选择哪一边？ </a></li>
<li><em>16</em><a href="/kejifunen/370773.html" title="阿里巴巴和盛大同时进军VR行业" target="_blank">阿里巴巴和盛大同时进军VR行业</a></li>
<li><em>17</em><a href="/kejifunen/370770.html" title="可穿戴设备市场腾飞的关键！结构和功能的适配" target="_blank">可穿戴设备市场腾飞的关键！结构和功能的适配</a></li>
<li><em>18</em><a href="/kejifunen/370736.html" title="微软、谷歌和苹果都是同质的！技术会实现大统一吗？ " target="_blank">微软、谷歌和苹果都是同质的！技术会实现大统一吗？ </a></li>
<li><em>19</em><a href="/kejifunen/370730.html" title="当虚拟和现实失去界限时，虚拟现实会发生什么？ " target="_blank">当虚拟和现实失去界限时，虚拟现实会发生什么？ </a></li>
<li><em>20</em><a href="/kejifunen/370710.html" title="三星Galaxy Watch智能手表体验！更长的续航和堪比机" target="_blank">三星Galaxy Watch智能手表体验！更长的续航和堪比机</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="related_article"></div>
<div class="footer">
<p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p>
<p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。
如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p>
</div>
<!-- 应用插件标签 start -->
<!-- 应用插件标签 end -->
</body>
</html>
