1.中的必须放在第一行，放在下面可能会有问题。2.标签大集合3.HTML5语义标签4.页面中的锚点<ahref="#jump">我跳！</a>...<divid="jump">跳到这里！</div>可用于“返回顶部”功能。5.<img>标签一般需要写alt属性6.在HTML5中，<video>标签可以用来插入视频，<audio>标签可以用来插入音频7.我不能永远记住，row表示行，column表示列。在表格中，tr表示行（表格行），th和td（表格数据单元格）表示列。8.语义化的好处(1)SEO(SearchEngineOptimization)搜索引擎优化(2)提高可访问性，让盲人可以使用屏幕阅读器更好地访问。(3)提高代码可读性，方便多人修改和维护，提高开发效率。9.实体字符<...10.css介绍<linkrel="stylesheet"href="common.css">11.属性选择器<inputclass="section-left"type="text"disabledvalue="张三"><pclass="section-right">right</p><divclass="nav">nav</div>//css[disabled]{...}input[type="text"]{...}//属性值也可以不用双引号[type=text]{...}//关于是否需要引号：当属性值包含空格或有特殊符号时，必须使用引号[class^="section"]{...}//这里可以选择class属性以"section"开头的元素,即上面的输入和p个伪类选择器：一个冒号12.a伪类选择器在标签上的顺序不能从上到下改变：linkvisitedhoveractive13.li:nth-child(even){...}或li:nth-child(2n){...}选择偶数项li元素14.:not(p)不包含p元素。:not(.class-a)不包含类值为class-a的元素。伪元素选择器::CSS3变成两个冒号15.::first-letter{...}第一个字母或汉字16.::first-line{...}第一行17.::beforeand::afterp::before{内容：“之前”；}//在元素前添加内容p::after{content:"after";}//在元素后添加内容18.::selection{...}样式应用于用户选择的内容19.siblingselectorh1+p{...}选择h1旁边同级的p元素20.multiplesiblingselectorsh1~p{...}选择h1后面同级的所有p元素，不需要相邻21.继承属性：color,font,text-align,list-style22.非-继承属性：背景，边框，位置如何知道当前属性是否可以从文档中继承？Inherited在文档中是yes，表示可以继承。23.选择器优先级https://jsfiddle.net/DarcyAn/...奇怪，为什么伪元素选择器的优先级比伪类高？注意伪类与类具有相同的优先级，伪元素与标签具有相同的优先级。24.最高优先级：p{color:red!important;}CSStext25.font属性至少要设置font-size和font-family。26、text-indent属性本来是用来设置首行缩进的，一般设置为2em，也可以设置负值配合overflow:hidden；达到隐藏文字的效果。27.white-space：nowrap不换行。pre完全保留制表符和空格，超出时不会换行。pre-wrap保留制表符和空格。超出时自动换行。28.word-wrap：分词；当长字超出时换行。属性名称现在从word-wrap更改为overflow-wrap。29.文字阴影：1px2px粉色；文字阴影：x轴偏移y轴偏移【阴影模糊半径】？[颜色]？。30.文本溢出：剪辑|省略;务必使用overflow:hidden;空白：nowrap；同时。CSS盒模型盒模型概念，width，height，padding，margin（水平居中），border，border-radius，overflow，box-sizing，box-shadow，outline31.margin合并（1）相邻元素的边距会合并（2)父元素和子元素的边距会被合并。（前提是父子元素之间没有padding、border等元素）MDNMarginMerge32.border-radius:50%;是一个圆角，水平半径为宽度的50%，垂直半径为高度的50%。所以这是一个圆圈。33.box-shadow:4px4px3px3pxred只能设置前两个值。您还可以设置内嵌阴影和多重阴影（以逗号分隔）。CSS背景34.background-attachment:scroll|当地的;设置内容滚动时背景图片的状态。scroll：背景图片不动。local：背景图片随内容滚动。35.背景位置：20%50%；请特别注意设置为百分比的值。以上说法的意思是：x轴上20%的图片在容器的20%处，y轴上50%的图片在容器的50%处。看图：如果这样设置：background-position:50%50%;，就是居中。也等于background-position:centercenter;可以设置负值，常用于sprite精灵贴图中。36、线性渐变linear-gradient()可以用来绘制渐变背景。背景：线性渐变（到底部，白色，黑色）；向下渐变37.background缩写：在position和size之间加/，否则会冲突。CSSlayout布局介绍，display（水平居中，导航居中），position（轮播头图，固定顶栏，mask，三行自适应布局），float（两列布局），flex（三行两列）columnadaptive)38.position定位，如果同时设置top和bottom，元素会被拉伸放大。39.z-index有栈的概念。红色元素的父元素z-index为9，蓝色元素的z-index为1，所以虽然蓝色元素的z-index比红色1大了100，但是因为z-index的红色参照物高，红色仍然在蓝色。相当于两副扑克牌上下叠放，无论内部怎么调整，下副扑克牌都跑不到上副扑克牌上面。40.position：相对；引用对象就是元素本身，最常用的场景就是绝对定位元素的引用对象(=?ω?)?41.position:absolute;默认宽度是内容宽度，不在文档流中。42.位置：固定；常见场景：面具面具。43、clear属性清除浮动常用解决方法：.clearfix:after{...}其实是加了一个不可见的点。主要代码：.clearfix:after{content:".";显示：块；明确：两者；//目前为止前三项都是用来清除floating:块级元素用clear:both都可以清除floatingheight:0;溢出：隐藏；可见性：隐藏；//最后三项是让圆点不可见}给浮动元素的父元素加上clearfix类，会清除父元素的影响，因为子元素浮动收缩为一体，看完整代码：jsfiddle栗子44.flex布局实现三行自适应+两列自适应。东西有点多，放在这里：https://segmentfault.com/a/11...CSS变形transform:45。变换：翻译（20%，20%）；移动。这里的20%参考就是这个元素的宽高46.transform:skew(30deg);倾斜。y轴的负方向向x轴的正方向倾斜，x轴的正方向向y轴的负方向倾斜。一个相当直观的图片在这里：47.transform:translate(100px)rotate(45deg);先移动，再旋转。先旋转，再移动：transform:rotate(45deg)translate(100px);效果不同。因为旋转之后，x轴和y轴的方向发生了变化。CSS动画：过渡效果transition+animationanimation48.transition语法：transition:<single-transition>[,<single-transition>];//可以包含多个动画//每个动画的变化<single-transition>:<transition-property><transition-duration><transition-timing-function><transition-delay>eg1:transition:color2sease3s,left2秒；例如2：过渡：2秒；相当于transition:all2sease0;49.animation和transition的区别：(1)Transition需要hover或者click或者js触发，而animation自动运行。(2)动画可以做多帧动画。50、动画语法：animation:<single-animation>[,<single-animation>]//每个动画包含：<single-animation>:<animation-name><duration><timing-function><delay><iteration-count><direction><fill-mode><play-state>;@-webkit-keyframesabc{0%{left:0;上：0；}50%{左：250px；顶部：100px；}100%{左：500px；顶部：0；}}//0%相当于from,100%相当于to@-webkit-keyframesflash{//flasheffect0%,50%,100%{opacity:1;}25%,75%{不透明度:0.1;}}eg1:animation:abc2sease0sinfinitereversebothrunning;eg1：动画：abc2s，abcd2sboth;</p>
</div>
</div>
<div class="zuowen_sxy">
<div class="prev">上一篇：<a title="颜色研究" href="/webqianduan/230357.html">颜色研究</a> </div>
<div class="prev">下一篇：<a title="搭建一个使用Proxy和Reflect实现双向数据绑定的微框架（基于ES6）" href="/webqianduan/230359.html">搭建一个使用Proxy和Reflect实现双向数据绑定的微框架（基于ES6）</a> </div>
</div>
<div class="related_about">
<div class="related_about_t"><code>页面制作HTML+CSS基础炖相关文章</code></div>
<ul>
<li><a href="/kejifunen/338937.html" target="_blank" title="MoDao v4.0打造简单安全的协作平台，实现高效原型制作">MoDao v4.0打造简单安全的协作平台，实现高效原型制作</a></li>
<li><a href="/kejifunen/338183.html" target="_blank" title="去美丽的乡村做什么？飞猪制作了乡村目的地“数字指南”">去美丽的乡村做什么？飞猪制作了乡村目的地“数字指南”</a></li>
<li><a href="/kejifunen/337760.html" target="_blank" title="ironSource 子公司 Luna Labs 推出 IE">ironSource 子公司 Luna Labs 推出 IE</a></li>
<li><a href="/kejifunen/336965.html" target="_blank" title="虎牙推出AI工业化图像制作系统，为主播提供个性化陪播图">虎牙推出AI工业化图像制作系统，为主播提供个性化陪播图</a></li>
<li><a href="/kejifunen/336330.html" target="_blank" title="梦想游戏制作圈！ 2023腾讯大学生游戏创意制作大赛现已开启">梦想游戏制作圈！ 2023腾讯大学生游戏创意制作大赛现已开启</a></li>
<li><a href="/kejifunen/334937.html" target="_blank" title="音视频AI神器“统一听”重大升级：超长视频可以自由提问，还能">音视频AI神器“统一听”重大升级：超长视频可以自由提问，还能</a></li>
<li><a href="/jishuluodi/334186.html" target="_blank" title="小企业如何制作银行对账单？ ">小企业如何制作银行对账单？ </a></li>
<li><a href="/jishuluodi/333214.html" target="_blank" title="制作5分钟的企业宣传片需要多少钱？ ">制作5分钟的企业宣传片需要多少钱？ </a></li>
<li><a href="/jishuluodi/329500.html" target="_blank" title="淘宝店制作算网页制作吗？ ">淘宝店制作算网页制作吗？ </a></li>
<li><a href="/jishuluodi/329160.html" target="_blank" title="淘宝双十一应该抢哪个页面？ ">淘宝双十一应该抢哪个页面？ </a></li>
<li><a href="/jishuluodi/328654.html" target="_blank" title="为什么我进不了淘宝商品页面？ ">为什么我进不了淘宝商品页面？ </a></li>
<li><a href="/jishuluodi/328374.html" target="_blank" title="如何快速免费制作淘宝店铺图片-制作店铺招牌？ ">如何快速免费制作淘宝店铺图片-制作店铺招牌？ </a></li>
<li><a href="/jishuluodi/326025.html" target="_blank" title="我儿子秋天要上学了，学校要求我买一台i7电脑，他的专业是动画">我儿子秋天要上学了，学校要求我买一台i7电脑，他的专业是动画</a></li>
<li><a href="/jishuluodi/325766.html" target="_blank" title="如何用网格纸制作一个迷你商店？ ">如何用网格纸制作一个迷你商店？ </a></li>
<li><a href="/jishuluodi/323791.html" target="_blank" title="淘宝刷着页面就不动了？">淘宝刷着页面就不动了？</a></li>
<li><a href="/jishuluodi/323018.html" target="_blank" title="如果我的浏览器打不开淘宝登录页面怎么办？ ">如果我的浏览器打不开淘宝登录页面怎么办？ </a></li>
<li><a href="/jishuluodi/321534.html" target="_blank" title="如何制作2寸照片的电子版？ ">如何制作2寸照片的电子版？ </a></li>
<li><a href="/jishutupo/318595.html" target="_blank" title="使用CSS创建响应式订单确认页面">使用CSS创建响应式订单确认页面</a></li>
<li><a href="/jishutupo/318234.html" target="_blank" title="页面上的错误">页面上的错误</a></li>
<li><a href="/jishutupo/318058.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/370052.html" title="与科大讯飞胡雨深度对话！如何制作一个可以处理33种语言的翻译" target="_blank">与科大讯飞胡雨深度对话！如何制作一个可以处理33种语言的翻译</a></li>
<li><em>2</em><a href="/kejifunen/369627.html" title="语音互动平台制作T恤，荔枝为何不做好自己的工作？ " target="_blank">语音互动平台制作T恤，荔枝为何不做好自己的工作？ </a></li>
<li><em>3</em><a href="/kejifunen/366081.html" title="新款Ticwatch手表出现在淘宝众筹页面，并被命名为“悦音" target="_blank">新款Ticwatch手表出现在淘宝众筹页面，并被命名为“悦音</a></li>
<li><em>4</em><a href="/kejifunen/361272.html" title="AI学会了制作表情包，但它们真的好笑吗？ " target="_blank">AI学会了制作表情包，但它们真的好笑吗？ </a></li>
<li><em>5</em><a href="/kejifunen/360545.html" title="【DIY教程】仅需10步！你可以制作一个可穿戴式FM发射器" target="_blank">【DIY教程】仅需10步！你可以制作一个可穿戴式FM发射器</a></li>
<li><em>6</em><a href="/kejifunen/360162.html" title="微软要制作HoloLens游戏了" target="_blank">微软要制作HoloLens游戏了</a></li>
<li><em>7</em><a href="/kejifunen/359101.html" title="Apple Watch Series 2 评测+拆解！制作时" target="_blank">Apple Watch Series 2 评测+拆解！制作时</a></li>
<li><em>8</em><a href="/kejifunen/358486.html" title="揭秘可穿戴产业链布局！ 79元手环如何制作" target="_blank">揭秘可穿戴产业链布局！ 79元手环如何制作</a></li>
<li><em>9</em><a href="/kejifunen/358277.html" title="在持续不断的AI产业竞争中，智能图像制作将成为AI商业化的突" target="_blank">在持续不断的AI产业竞争中，智能图像制作将成为AI商业化的突</a></li>
<li><em>10</em><a href="/kejifunen/356973.html" title="如何制作最流行的Gogo运动耳机？ " target="_blank">如何制作最流行的Gogo运动耳机？ </a></li>
</ul>
</div>
<div class="r_con">
<div class="r_title">猜你喜欢</div>
<ul class="you_like">
<li><em>1</em><a href="/kejifunen/355098.html" title="世界杯四强争霸，优酷智能制作定义了内容制作的极速标准" target="_blank">世界杯四强争霸，优酷智能制作定义了内容制作的极速标准</a></li>
<li><em>2</em><a href="/kejifunen/354183.html" title="透露成本！看看VR游戏制作有多贵？ " target="_blank">透露成本！看看VR游戏制作有多贵？ </a></li>
<li><em>3</em><a href="/kejifunen/353684.html" title="黄晓明成老板投资制作首部VR电视剧" target="_blank">黄晓明成老板投资制作首部VR电视剧</a></li>
<li><em>4</em><a href="/kejifunen/353385.html" title="从静态页面到通用平台，Web 技术发展的脚步不会停止" target="_blank">从静态页面到通用平台，Web 技术发展的脚步不会停止</a></li>
<li><em>5</em><a href="/kejifunen/351009.html" title="英国天空电视台涉足VR，将制作大量360度视频" target="_blank">英国天空电视台涉足VR，将制作大量360度视频</a></li>
<li><em>6</em><a href="/kejifunen/350149.html" title="有创意很酷的东西！每天15分钟，就可以为你的狗狗制作一个舒适" target="_blank">有创意很酷的东西！每天15分钟，就可以为你的狗狗制作一个舒适</a></li>
<li><em>7</em><a href="/kejifunen/349603.html" title="《恋与制作人》引领二次元新潮流" target="_blank">《恋与制作人》引领二次元新潮流</a></li>
<li><em>8</em><a href="/kejifunen/349232.html" title="谷歌推出VR视图，轻松自己制作全景图片和视频 " target="_blank">谷歌推出VR视图，轻松自己制作全景图片和视频 </a></li>
<li><em>9</em><a href="/kejifunen/348797.html" title="苹果教配件制造商如何制作 Apple Watch 表带 " target="_blank">苹果教配件制造商如何制作 Apple Watch 表带 </a></li>
<li><em>10</em><a href="/kejifunen/348528.html" title="外国友人制作了自己的HoloLens瞬移游戏" target="_blank">外国友人制作了自己的HoloLens瞬移游戏</a></li>
<li><em>11</em><a href="/kejifunen/347953.html" title="魅族-小米都达不到Meze耳机体验！ Meze，纯手工制作、" target="_blank">魅族-小米都达不到Meze耳机体验！ Meze，纯手工制作、</a></li>
<li><em>12</em><a href="/kejifunen/347553.html" title="智能手表也可以通过3D打印来制作" target="_blank">智能手表也可以通过3D打印来制作</a></li>
<li><em>13</em><a href="/kejifunen/347496.html" title="“表弟”周鸿祎有话要说！为什么要制作儿童手表？ " target="_blank">“表弟”周鸿祎有话要说！为什么要制作儿童手表？ </a></li>
<li><em>14</em><a href="/kejifunen/346864.html" title="Oculus宣布成立实验室制作虚拟现实电影" target="_blank">Oculus宣布成立实验室制作虚拟现实电影</a></li>
<li><em>15</em><a href="/kejifunen/345739.html" title="这是全球首款纯手工制作的智能耳机" target="_blank">这是全球首款纯手工制作的智能耳机</a></li>
<li><em>16</em><a href="/kejifunen/345228.html" title="日本村田制作所推出用于可穿戴设备的叠层二次电池 " target="_blank">日本村田制作所推出用于可穿戴设备的叠层二次电池 </a></li>
<li><em>17</em><a href="/kejifunen/344558.html" title="金牌厨师的绝活！原来这才是提拉米苏的正确制作方法" target="_blank">金牌厨师的绝活！原来这才是提拉米苏的正确制作方法</a></li>
<li><em>18</em><a href="/kejifunen/342485.html" title="游戏专家齐聚Unite Shanghai 2019，揭秘热门" target="_blank">游戏专家齐聚Unite Shanghai 2019，揭秘热门</a></li>
<li><em>19</em><a href="/kejifunen/342099.html" title="爱奇艺2020年报电话会议：个性化推荐、智能制作等提升内容制" target="_blank">爱奇艺2020年报电话会议：个性化推荐、智能制作等提升内容制</a></li>
<li><em>20</em><a href="/kejifunen/340049.html" title="B站与BBC达成战略合作，将共同制作《绿色星球》等多项独家内" target="_blank">B站与BBC达成战略合作，将共同制作《绿色星球》等多项独家内</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>
