华清远见重庆中心-HTML+CSS技术总结

HTML知识点总结

b标签和strong标签的区别 (加粗文本)      i标签和em标签(斜体) 

s标签和del标签(删除线，del更常用)   u标签和ins标签(下划线)

-b标签只是单纯的加粗文本，只是样式上的东西（b标签更常用）

-strong标签有强调的语意，浏览器渲染时会更偏重strong标签

i标签和em标签 / s标签和del标签 / u标签和ins标签 同理

html实体：

空格(小于一个中文字符的一半)    （ ）

半角输入符下的空格(相当于一个中文字符的一半)    ( )

全角输入法下的空格(相当于一个中文字符)   ( )

<   （&lsaquo;）

>     (&rsaquo;)

TM  ™     (&trade;)

版权符号    (&copyright;)

上标 / 下标

  

X²  

H₂O

相对路径：

相对于当前文件的位置，寻找其他目标资源的路径

绝对路径：

从根目录为起点到目标资源的路径

注意：通过Hbuilder等工具运行的html页面是通过它的内置服务器显示的，浏览器为了安全，不允许服务器上的html页面访问本地文件

-以双斜杠（//）也是绝对路径，代表使用当前页面的协议拉取资源

-以单斜杠（/）也是绝对路径，代表服务器应用上下文（application context 可以理解成服务器可以拉取到资源的文件夹路径）

列表：

ul：可以通过type属性修改项目符号

disc 实心原点 默认

circle 空心圆

square 正方形

li：可以通过type属性修改项目符号

1  阿拉伯数字 默认

A/a 英文字母

I / i  罗马数字

自定义标签：

a标签：

href 定义超链接跳转的路径

target 定义跳转的方式

   _self 默认 在当前窗口显示跳转之后的内容

   _blank 新窗口跳转显示内容跳转之后的内容

   _parent 在父页面的窗口显示跳转之后的内容

锚点：

   -跳转到定位的位置，（若高度足够，定位的位置会位于视图顶部）

   <a href=”#id属性名”>直接到达id属性名的位置</a>

表格：

表格常用属性：

   -border 表格的边框 值是数字

   -cellspacing 单元格之间的空隙

   -width/height 表格的宽高

   -cellpadding 单元格的内边距

   -align 控制表格的位置（left/center/right）

   -bgcolor 背景颜色

   -background 背景图片

   -rowspan/colspan=”2”  上下/左右合并2个单元格（保留目标单元格数据，删除需要合并的单元格数据）

表格结构：（浏览器会自动加）

表单：

form表单域：

   -name 表单域的名字 ，一个html中可以有多个表单域

   -action=“url” 设置处理表单的服务器程序的url地址

   -mathod=“get/post”  提交表单的方式

           -get：把提交的参数附在action的url地址中，会显示在地址栏，一般用于不需要保密的信息，比如分页

           -post：吧提交的参数包裹在表单体当中，不会显示在地址栏

 表单元素input属性：

-txt  输入框

-password  密码框

-radio  单选框

-checkbox  复选框

-date  日期  yyyy/mm/dd

-datetime-local  日期时间

-color  颜色选择框

-file  文件选择（可用于添加附件）

-button  按钮（无定义）

-submit  提交按钮

-reset  重置按钮

其他属性：

-name  定义组件的名字 [name=你输入的值 / value的值(例如单选框)]

-value  设置元素的值

-placeholder  设置输入框中提示文字

-required   设置必填项，如果不填将会弹出提示信息

-checked   设置元素默认选中

-readonly   设置元素只读不可修改

-disabled   设置元素禁止使用（例如点击button，接收验证码cd时）

label标签：

-为元素设置标注（绑定元素for和元素id名相同）

<label for=”user”>用户</label>

<input id=”user” type=”text”>

select标签：

-定义一个下拉列表

     选项写在option里；name写在<select>里；value写在<option>里

textarea标签（多行文本框）

    <label></label>

<textarea name=”words”><textarea>

iframe（内联框架）：

-在页面中嵌入另一个页面

     <iframe src=” ”></iframe>

     -src  设置嵌入页面的url地址

     -frameborder  0/1设置iframe的边框

     -width/height/

//点击a链接切换界面（xxx为切换的界面地址）

     -a标签中如果不添加target属性，会自动跳转新页面，不会在iframe内部进行跳转，

     当 a标签的target 和 iframe的name 属性相同时，就会在iframe内部切换

CSS易错点/难点总结

部分快捷键

alt+shift+up/down    单行注释

alt+up/down             移动代码行

退格键                     删除前一个字符

del                            删除后一个字符

ctrl+shift+k                删除一整行

ctrl+enter                  直接换行

alt+shift+f                 格式化代码

引入css样式

-通过元素样式属性，使用css内联样式（开发中不推荐使用，会影响页面生成的效率）
-通过style标签，使用css
   1. 直接写样式表
   2. 通过 @import 引入外部文件
-通过 link 标签引入外部文件，使用css

不同位置引入的样式的优先级: 内联样式 > style标签 > 外部文件

@import 和 link 的异同

相同：都能引入css文件

不同：

          link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS

          link引入的文件可以和页面一起加载，@import则需要在页面加载完成后才能加载

          link可以通过dom插入样式（因为dom是基于文档的），@import不能通过dom插入样式

frist-child和first-of-child

first-child和first-of-type:

first-child:父元素中的第一个子元素（父元素总体！子元素中的第一个）

            先确定位置，后确定元素，先确定第一个位置，在确定元素是否符合。

first-of-type:父元素中，同类型，子元素中的第一个

            直接确定该元素的第一个位置。

补充：

:nth-child()  奇数（odd），偶数（even）

span:not(:nth-of-type(3))  除了第三个span

span:not(:nth-child (3))   除了第三个子元素

float浮动

待选项：
        left: 浮动到左侧
        right: 浮动到右侧

<!-- 流式布局 -->
        <!-- 会自适应窗口大小进行一个有序的排列，一行排满后会自动换行 -->

清除浮动：

       -给高度坍塌的父元素添加 overflow: hidden
       -给高度坍塌的父元素的下一个元素添加 clear: both

      （ 可以专门在后面写一个空内容的div.clear，clear类设置css样式 clear: both）

定位

绝对定位（absolute）

参考系：默认参考视口（viewport）；绝对定位的元素会浮出文档流

相对定位（relative）

参考系：自己的位置；可以通过设置relative来改变absolute的参考系

固定定位（fixed）

参考系：视口；当滚动条发生变化时，位置不会改变

粘性定位（sticky）

若视口中sticky定位的元素上面有其他定位元素，则会在其他定位元素下面，通过滑动滚动条，若sticky定位的元素到达视口最顶部，则会固定在视口最顶部，跟随视口向下移动

定位的元素可以通过top，left，right，bottom改变位置，但 top和bottom / left和right 只会生效一个

重绘和回流

回流和重绘是浏览器在页面元素发生变化时，更新元素的两种方案

## 回流

当一个元素发生以下变化则触发回流:

1. 大小
2. 文档流中的位置
3. 内容
4. 结构

回流时浏览器将更新整个页面或部分区域

table 表格标签的修改会触发回流，所以 table 表格布局不推荐使用

## 重绘

当一个元素变化但没有触发回流时，将触发重绘

例如: 修改 color 属性 background-color 属性 等

重绘只会重修渲染当前被修改的元素
 

flex

父元素上的属性

/* 必须在父元素上写display:flex 来开启flex功能 */
display: flex;

        flex-direction:

        row: 默认值，规定横向为主轴

        column: 规定纵向为主轴

        row-reverse: 规定横向为主轴，同时反向

        column-reverse: 规定纵向为主轴，同时反向   

flex-wrap:

        wrap: 换行

        nowrap: 不换行

        wrap-reverse: 换行且反向  

justify-content:

        flex-start: 对齐主轴起始点

        flex-end: 对齐主轴结束点

        center: 在主轴上居中

        space-around: 每个子元素两侧的间隔相等

        space-between: 两端对齐，中间平均分布

        space-evenly: 平均分布

align-items:

        flex-start: 对齐次要轴起始点

        flex-end: 对齐次要轴结束点

        center: 在次要轴上居中居中

        baseline: 根据子元素中的文本进行文本高度对齐

        stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器

align-content:

         使用条件：子元素在主轴上必须换行

         作用：多行子元素在交叉轴上的对齐方式

         待选项和 justify-content 相同

子元素上的属性

order：

        设置弹性盒子元素的排列顺序

flex-grow：

        值代表比值，若flex盒有多余区域，将flex盒多余的部分按比例分配给子元素

flex-shrink：

        值代表比值，若子元素超出flex盒，flex盒按比例压缩子元素
 

flex-basis：

        在flex中，可以直接将其作为宽或高使用，优先级高于width/height

flex：

       复合属性：flex-grow；flex-shrink；flex-basis

        auto（1 1 auto）

        none（0 0 auto）

align-self：

         在弹性盒子元素上使用，覆盖align-items属性

gride

display: grid

                grid-template-rows

                grid-template-columns

            通过网格线设置单元格位置和大小

                grid-row-star

                grid-row-end

                grid-row

                grid-column-start

                grid-column-end

                grid-column

            通过命名区域的方式进行布局

                grid-template-areas

                grid-area

            网格间距

                row-gap

                column-gap

                gap