HTML/CSS基础 目录 盒模型 margin叠加 块级元素和内联级元素 z-index属性 浮动 盒模型 ?...解决方法 添加父元素的内边距和边框任何一项即可取消叠加 给父元素加上样式即可 overflow: hidden; 块级元素和内联级元素 根据display属性，可以将元素分为块级元素(block)和内联级元素...z-index属性 定义 设置元素的堆叠顺序 用法 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 注意 可拥有负的 z-index 属性值 仅能在定位元素上奏效 浮动 定义 使元素脱离文档流
1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。
Fantastic Great .example { color: blue; } 大小写 以下都应该用小写： HTML 元素名称，属性，属性值（除非...text/CDATA），CSS 选择器，属性，属性值。...-- Recommended --> The currency symbol for the Euro is “€”. type 属性 在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS...CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。...属性名和值之间都应有一个空格。
行内元素转换成块元素，只要设置其display属性为block即可，display:block; 。...块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline;。 3、Doctype作用？ <!...没有定位，元素出现在正常的流中 inherit 规定应该从父元素继承 position 属性的值 注：relative是相对其自身的位置变动的。...一般在使用absolute的时候，都会给其父元素设置position:relative属性，使其基于父元素定位。
--action:这个属性要设置表单提交给的服务器--> <!...：[属性名称] 属性选择器的另外一种方式： --------------------------------------------- [class=div1]{ color: #fff; font-size...important》选择器写的更详细》ID选择》类选择、属性选择器》标签选择器》浏览器默认的样式》元素继承到的样式 注意： 如果想要打乱选择器的优先级，那么可以使用!...，都会被子元素继承 跟容器相关的属性(width/height/margin/padding/box-sizing/background...)...，都不会被继承 像文字属性，可以在父级元素上统一相对应的设置 ? ?
）翻译过来就是层叠样式表 作用：主要作用就是设置网页的文字（大小，颜色，字体，对齐等等）图片和板式布局等等 说的简单点了就是给页面化妆的 基本语法： 选择器 { 属性1: 值1; 属性2: 值2; 属性...选择器 想要操作任何一个标签，那么首先需要做的事情就是选中对应的标签，而这个就是选择器的作用 基础选择器 标签选择器 标签名 {属性1: 值1;属性2: 值2;} 特点：会将页面上所有符合的标签都选择上...，但是不能实现差异化选择 类选择器 声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} （声明类名选择器） 给对应的元素添加class类名属性 class="自定义的类名" （调用类名选择器...JS使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用，但是id选择器只能被一个元素调用 在同一个页面中吗，不能出现两个id值相同的元素 通配符选择器 * { 属性1: 值1; 属性2：值...颜色属性 颜色属性的取值可以是 十六进制，rgb(), rgba() css的注释 /* 注释内容 */
认识CSS样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式 语法： 选择符{ 属性: 值}... 需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来 然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位...相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)， 然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定...bold 12px/1.5em "宋体",sans-serif;} 注意： 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性...，其他的属性未指定将自动使用默认值。
HTML 1.1 FED1-表单类型 ⭐方法1 注意 1.2 FED2-表格结构 ⭐方法1 注意 1.3 FED3-图像标签属性 ⭐方法1 注意 1.4 FED4-新窗口打开文档 ⭐方法1 注意 1.5...- 音频媒体标签属性 ⭐方法1 注意 2....然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置 合并单元格 横向 合并单元格在td标签中使用colspan属性，属性值为需要合并单元格的个数...，同时将被合并的单元格td删除 纵向 合并单元格在td标签中使用rowspan属性，属性值为需要合并单元格的个数，同时将被合并的单元格td删除 1.3 FED3-图像标签属性 ⭐方法1 注意 video属性 onerror事件 2.
将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。...而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。...对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 static：元素框正常生成。...一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。...5、 以前总是觉得position：static这个属性很多余，现在看来他的作用就是让元素保持文档流的！ ? - End -
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 ?...三、容器的属性 以下6个属性设置在容器上。...3.6 align-content属性 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。...四、项目的属性 以下6个属性设置在项目上。...4.6 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
学习目标 表格的创建和使用 常见表单的使用 了解HTML5新增的标签及其表单属性 创建表格 单元格 单元格 单元格 表格至少有三个基本的标签构成 table 代表一个表格 tr代表行 td代表单元格 tr必须嵌套在table标签中，td必须嵌套在tr或者th中 有几个单元格就代表有几列 表格属性...select框的默认选中项 selected label标签的使用 表单域 action 提交的后台地址 method 提交的方法 H5新增的标签及其表单属性...标签里面包裹的东西是网页的页脚 aside 表示aside标签里面包裹的东西是网页的侧边栏 article 表示article标签里面包裹的东西是网页的文章页 详细请查阅文档 H5新增的表单新属性...优点：没有兼容性 缺点：有广告植入 使用H5新增的video方法 优点：没有广告 缺点：有兼容性，一般运用在手机端 video标签的常用属性
HTML面试题 1、 标签上title属性与alt属性的区别是什么？ alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。...title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。title属性可以实现鼠标悬停提示的效果。 2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？...嵌套层级太深，会导致搜索引擎读取困难，而且会大大增加代码冗余； 灵活性差，比如要设置tr的border等属性是不行的，要在td上设置border属性； 代码臃肿，可读性差； 混乱的 colspan 和...，但是元素占用的空间任然存在； opacity:0，是CSS3的属性，设置元素为完全透明，和 visibility 的效果类似，但是该属性修饰的元素可以使用 transition 和 animate 设置动画效果...； display:none，设置元素为不可见，不会占用文档的空间； hidden属性，该属性是HTML5中新增的属性，效果和 display 相同； 4、如何让一段文本中的所有英文单词的首字母大写 text-transform
块元素和行内块元素可以设置宽高 行内元素不可以，高度由内容撑开 三者是可以通过display属性任意转换的 block 块状元素 inline-block行内块元素 inline 行内元素 2.3 块级元素特征...none overflow: hidden|auto|scroll (除了visible之外的值) display: inline-block\ table-cells\flex （具有table-的属性...父元素加上overflow:hidden 在浮动元素的后面（同级），添加一个div，属性是clear:both 在父元素添加一个伪元素 .clearfix:after { display: block...id 选择器 class 选择器 tag 选择器 属性 选择器（a[href=""] ） 派生 选择器 7.2 优先级高低如何判断？ 不同级优先级： ！...important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符（*） 同一级别： 后来居上 （后写覆盖先写） 内联样式 > 内部样式表 > 外部样式表 > 导入样式 @
轻松添加类、id、文本和属性 连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： ?...连续输入类和id，比如p.bar#foo，会自动生成： Html代码 下面来看看如何定义HTML元素的内容和属性。...定义多个带属性的元素 如果输入 ul>li.item$*3，将会生成如下代码： Html代码 </...附加属性 可能你之前已经了解了一些缩写，比如 @f，可以生成： Css代码 @font-face { font-family:; src:url(); } 一些其他的属性，比如background-image...你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。
reflow:改变元素在网页中的布局和位置 导致回流发生的情况： 改变窗口大小 改变文字大小 内容的改变，如用户在输入框中敲字 激活伪类，如:hover 操作class属性 脚本操作DOM 计算offsetWidth...和offsetHeight 设置style属性 对应的css属性如下： 盒子模型相关属性 定位及浮动属性 节点内部的文字结构 repaint:改变不影响元素。...在网页中的位置的元素样式时，根据浏览器新属性重新绘制一次。不会带来重新布局。...导致重绘发生的情况： 改变visibility outline 字体颜色、背景色 导致重绘的css属性如下： css 隐藏属性的对比 display:none; 重排 （不占空间） visibility
如何优化（了解）： 1、花钱买关键字 见效快，花钱多 2、让页面更加规范，语义更加明确（在合适的地方使用合适的标签） 3、制作静态页面 4、发外链 标签属性 在使用标签的时候，一个独立的标签比较单一不能完成一些需求...这个时候就可以借助于标签的属性来完成 语法： 如： 在这里我们只需要了解语法即可 后面还会学习不同的标签不同的属性...图片标签 图片属性 src="图片地址" alt="图片的替换文本" title="图片标题" width...="400" height="400"（样式属性后期可以通过css去完成） 路径（地址） 难点和重点 地址分类 绝对地址：从盘符或者http://出发去找目标文件的过程就是绝对路径 <img src="...锚点跳转（页面内部跳转）： 在需要跳转的标签上添加 id="自定义id名" 如： 让a标签的href属性等于之前自己自定义的id名 如：<a href="#自定义的
学习目标 三种样式表的书写位置和优缺点 标签的三种显示模式和转换 复合选择器 背景属性 css的三大特性 样式表的书写位置 样式表可以有三种书写方式，分别分为 内嵌式样式表 外链式样式表 行内式样式表...单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件 行内式样式表 将样式直接写在标签本身上，以属性的形式存在...icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位） css的三大特性 继承性 后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承
数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。...E#id 代表id属性。 3. E.class 代表class属性。 4. E[attr=foo] 代表某一个特定属性。 5. E{foo} 代表标签包含的内容是foo。 6....简写属性和属性值 比如要定义元素的宽度，只需输入w100，即可生成： 1 width: 100px; Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。...e 表示 em x 表示 ex 像 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的。...使用 Emmet 可以快速生成带有前缀的 CSS3 属性。
网站其本质就是HTML + CSS 外加一些JavaScript构成的。所以基本上只要你会一些前端，就可以开始花样搭网站了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
