HTM CSS 笔记乱炖

一、常用实体（字符转义）

　　'&lt;' == '<'　　　　　　　　'&copy;' == '©'

　　'&gt;' == '>'　　　　　　　　'&quot;' == '"'

　　'&nbsp;' == ' '　　　　　　　'&reg;' == '®'

　　'&amp;' == '&'　　　　　　'&trade;' == '™'

二、图片

　　选择时，需要考虑 效果 与 文件体积

<img src="路径" title="鼠标悬浮显示的文字" alt="图片不显示时，显示的文字，被搜索引擎收录" />

　　img 标签可以设置属性 width="px", height="px"，只设置一项时，图片按比例缩放。

　　图片特点：

　　JPEG（jpg） ---- 支持的颜色多，可压缩，但不支持透明

　　GIF  ----  支持的颜色少，支持动态图，支持简单的透明（要求颜色单一，形状规整，不然效果很差）

　　PNG ----  支持颜色多，并支持复杂的透明

　　SVG ---- 可缩放矢量图，体积小，放大不失真，但似乎色彩不是特别丰富

　　ICON ---- 文字亦是图片，所以颜色单一，放大不失真，体积以 Byte 计

三、内联 与 块

　　HTML 5 中已经没有块元素，内联元素的说法了，但是元素的特点并没有变

　　块元素 ---- div （无语义，常用于页面布局），p（段落），h（标题）

　　　　特点：不受 width 的值的影响，独占一行。

　　内联元素 ---- span（常用于修饰文字），a，img（行内块元素），iframe

　　　　特点：只占自身大小，可以设置水平方向的 padding ，margin 值，无法设置 width，height

　　一般使用规范：

　　　　a 元素可以包裹除他本身之外的任何元素

　　　　p 元素内不要包裹块元素

　　　　一般来说用块元素去包裹内联元素

　　通过 CSS 修改类型

　　　　display：inline 　　内联元素

　　　　display：block  　　块元素

　　　　display：inline-block　　行内块元素（可设置 height 的行内元素）

　　　　display：none　　隐藏且不占用文档中的位置（visibility: hidden　　隐藏但占位置）

四、HTML 标签

• <meta />

　　设置网页编码

<meta charset="UTF-8" />

　　设置关键字

<meta name="keywords" content="HTML, CSS,JS" />

　　设置网页描述

<meta name="description" content="这是我的大乱炖笔记" />

　　设置请求重定向(5秒后跳转)

<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />

• <a></a>

　　href 属性取值

　　　　href="#" ---- 回页面顶部

　　　　href="#id" ---- 到对应id的元素所在的位置

　　　　href="mailto:shinekidd@163.com" ---- 给我发邮件

　　　　href="tel:185xxxxxx1" ---- 给我打电话

　　target 属性取值

　　　　target="_self" ---- 在当标签打开链接（默认）

　　　　target="_blank" ---- 在新标签打开链接

　　　　在 iframe 中打开

<a href="https://www.baidu.com" target="baidu">打开百度首页</a>
<iframe src="https://www.tencent.com" name="baidu" width="300px" height="500px"></iframe>

　　为不同状态的 a 标签设置样式（书写样式 a:hover，a:active 时不可交换顺序）

　　　　a:link　　未访问之前的样式

　　　　a:visited　　访问后的样式（只能设置字体颜色）

　　　　a:hover　　鼠标悬浮时的样式

　　　　a:active　　点击刹那的样式

• <strong></strong>　

　　　　强调标签里的内容　　样式 -- 加粗（<b></b> 样式加粗，无语义）

• <em></em>

　　　　标签里内容语气上的强调　　样式 -- 斜体（<i></i> 样式斜体，无语义）

• <small></small>

　　　　多用于合同小字，版权声明之类的文本　　样式 -- 比父标签的字体小

• <cite></cite>

　　　　引用书名，歌名，电影名（表示参考）　　样式 -- 内容斜体

• <q></q>

　　　　引用句子，行内引用（短引用）　　样式 -- 内容带双引号

• <blockquote></blockquote>

　　　　引用很多句子，块级引用（长引用）　　样式 -- 独占一行

• 

　　　　设置上标　　样式 -- 博客园^[1]

• 

　　　　设置下标　　样式 -- H₂O

• <del></del>

　　　　表示删除内容　　样式 -- ¥999

• <ins></ins>

　　　　表示插入的内容　　样式 -- 内容带下划线

• <pre></pre>

　　　　预格式，常与 code 连用　　样式 -- 保留文本格式（换行，空格）

• <code></code>

　　　　常与 pre 连用，插入代码块　　样式 -- 单独使用没啥特别的效果

• <ul></ul>　

　　　　无序列表多用与页面菜单布局

　　　　type 属性取值：

　　　　　　type="disc" --- 列表项为实心圆点（默认）

　　　　　　type="square" --- 列表项为实心方块

　　　　　　type="circle" --- 列表项为空心圆点

• <ol></ol>

　　　　带序号的列表

　　　　type 属性取值：

　　　　　　type="" --- 列表项为数字（默认）

　　　　　　type="i" --- 列表项为小写罗马字

　　　　　　type="I" --- 列表项为大写罗马字

　　　　　　type="a" --- 列表项为小写字母

　　　　　　type="A" --- 列表项为大写字母

• <dl></dl>

<dl>
    <dt>西红柿炒鸡蛋</dt>
    <dd>新鲜的西红柿，洗净，切成片，鸡蛋打碎。。。。。。。</dd>
</dl>

　　　　定义列表，列表项 dt 是被定义的内容，dd 是对定义内容的描述（表现为缩进个字符）。对菜谱的描述，人物的描述中会用到

• <table></table>

<table>
    <thead>
        <tr>
            <th>row1</th>
            <th>row2</th>
            <th>row3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>sum:</td>
            <td colspan="2">6</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">0</td>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

　　　　　　表格的列数，由列数最多的那个 tr 决定。th 是特别的 td，在表头中。样式 -- 文字居中，加粗。tfoot 与 tbody 交换位置是可以的。

　　　　　　td 属性 colspan  -- 横向合并单元格，值为要合并的 td 个数，属性 rowspan  -- 纵向合并单元格，值为要合并的 td 个数（纵向合并只能向下合并）

　　　　　　表格边框，可给 td，table 分别设置 border。给 table 设置 border-spacing 指定二者 border 之间的距离；给 table 设置 border-collapse: collapse 可以合并(重叠)二者的边框。

　　　　　　注：给 table 设置 border-collapse: collapse 后，border-spacing 自动失效

• <form></form>

<form action="/xxx/query" method="post" onsubmit="return false">
    <fieldset>
        <legend>登录</legend>
        <label for="user">用户名</label>
        <input type="text" name="user" id="user" autocomplete="off">
        <br>
        <label for="lock">密  码</label>
        <input type="password" name="lock" id="lock">
    </fieldset>
    <br>
    <fieldset>
        <legend>调查问卷</legend>
        <label for="pic">选择头像: </label>
        <input type="file" name="pic" id="pic">
        <br> <br>
         性别 :
        <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
        <input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label>
        <br> <br>
        兴趣 :
        <input type="checkbox" name="hobby" value="swim" id="swim"><label for="swim">游泳</label>
        <input type="checkbox" name="hobby" value="sleep" id="sleep" checked="checked"><label for="sleep">睡觉</label>
        <input type="checkbox" name="hobby" value="eat" id="eat"><label for="eat">吃饭</label>
        <br> <br>
        居住地 :
        <select name="city">
            <option value="shenzhen">深圳</option>
            <option value="guangzhou" selected="selected">广州</option>
        </select>
        <br> <br>
         说点啥 :
        <textarea name="msg" cols="30" rows="8"></textarea>
    </fieldset>
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <input type="button" value="按钮">
</form>

　　　　input 属性 type 可选值 text，password，radio，file，checkbox，reset，submit，button。type 是 radio 时，要保持 name 是相同的，作为按钮时，没有 name 属性。

　　　　如果希望某项被默认选中，设置 checked="checked" 属性（input 元素） 或 设置 selected="selected" 属性（select 元素）。

　　　　select 元素设置 multiple="multiple" 属性，可按 Ctrl 键多选，给 option 套父元素 <optgroup label="groupName"></optgroup> 可对元素进行分组.

　　　　属性 autocomplete="off" 禁止浏览器显示历史输入记录，属性 disabled="true" 可以设置禁用输入，属性 readonly="true" 可以设置为只读。但js 仍然能对其取值，赋值。

　　　　label 的属性 for 绑定对应的输入，点击该标签即可聚焦到输入框 或 选中选框，输入框的属性 placeholder="message" 可以在输入框内显示提示信息 "message"，逐渐取代 label 元素

　　　　textarea 文本域，属性 cols 定义列数，属性 rows 定义行数。样式 resize: none; 禁止缩放文本域。

　　　　fieldset 元素可对表单进行分组，组名写在 legend 元素中。

　　　　默认的提交方式在 form 元素设置 action（提交地址），method（提交方式），提交后会自动跳转，禁用默认提交方式只要给 form 设置属性 onsubmit="return false"

　　　　Jquery 的 Ajax 能识别数据是否从 form 元素中获取的，建议把要提交的数据放在 form 元素中，以防出现不必要的麻烦

• <frameset></frameset>

<frameset rows="50%, 50%">
    <frame src="https://www.baidu.com"></frame>
    <frameset cols="50%, 50%">
         <frame src="https://www.tencent.com"></frame>
         <frame src="https://www.baidu.com"></frame>
    </frameset>
</frameset>

　　　　frameset 元素中可以引入多个 frame，但是一定要给 frameset 设置 rows 属性 或是 cols 属性，frameset 之间互相嵌套。

　　　　frameset 不能和 body 出现在同一个页面中。frameset 和 iframe 中的内容不能被搜索引擎检索，而且 frameset 中不能自定义内容。

　　　　　　　　　　

五、CSS 　　

• 选择器权重（优先级）

　　　　!important：最高 （慎用）

　　　　内联样式：

　　　　id选择器：

　　　　类和伪类：

　　　　元素选择器：

　　　　通配选择器：

　　　　继承样式：无

　　　　注：多个选择器组合时，权重回叠加，但是，仍然无法超越其上一级。（例如：个元素选择器叠加，无法超过伪类）

• 长度单位

　　　　像素 px　　----

　　　　em　　 ---- 相对与 当前元素 所在的 父元素 的字体大小（em = font-size）

　　　　rem　　---- 相对与 根 节点（html）的字体大小（CSS3）

• 颜色单位

　　　　String　　用于描述颜色的英文单词　　'green'　　'red'　　 'blue'

　　　　RGB　　rgb(dec, dec, dec)　　三组10进制的数 （或百分比）+ 不透明度 。例：rgba(, , 88, .6), 　　rgb(20%, 40%, 60%)

　　　　HEX　　#ffffff（#fff）三组16进制的数组合而成

　　　　HSLA　  和 PS 中的调色一样 （IE8 及以下不支持）　　hsla(, 20%, 70%, .5)

　　　　　　H：Hue(色调)。(或)表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。取值为： -

　　　　　　S：Saturation(饱和度)。取值为：0.0% - 100.0%

　　　　　　L：Lightness(亮度)。取值为：0.0% - 100.0%

　　　　　　A：Alpha透明度。取值~之间。

• 字体 font

　　　　浏览器默认的字体大小一般是 px，不同的浏览器默认的字体样式不同，所，通常会给 html 设置一个 font-family 来统一显示效果

　　　　字体分类：

　　　　　　serif　　　　   --- 衬线字体

　　　　　　sans-serif　　--- 非衬线字体

　　　　　　monospace　 --- 等宽字体

　　　　　　cursive　　　 --- 草书字体

　　　　　　fantasy　　　 --- 虚幻字体

　　　　设置字体样式：

　　　　　　font-family:  Arial, "Microsoft YaHei", sans-serif;　　--- 设置多种预期的字体类型（具体，大类均可），以防计算机中没有安装某字体。

　　　　　　font-stlye: normal | italic | oblique　　--- italic 和 oblique 显示效果都是斜体

　　　　　　font-weight: normal | bold | ~　　--- (一般计算计安装 （normal） 和 （bold） 的字体)

　　　　　　font-variant: normal | small-caps　　--- 转成小型的大写字母

　　　　简写字体样式：

　　　　　　font: italic small-caps bold 30px/1.5 "微软雅黑"；　

　　　　注：此处指定行高 1.5 倍（也可以用具体的数值 px） ，不指定则会使用默认行高。之前如果设置了 line-height 将被此处覆盖，简写 font 样式需格外注意

　　　　　　color: #ccc;　　--- 字体颜色需要单独设置

• 文版样式

　　　　text-transform　　改变显示的样式，也只是样式，本质没变

　　　　　　text-transform: none;　　-- 默认
　　　　　　text-transform: capitalize;　　-- 首字母显示大写
　　　　　　text-transform: uppercase;　　-- 所有字母显示大写
　　　　　　text-transform: lowercase;　　-- 所有字母显示小写

　　　　text-decration　　

　　　　　　text-decoration: none;　　-- 默认
　　　　　　text-decoration: underline;　　-- 下划线
　　　　　　text-decoration: overline;　　-- 上画线
　　　　　　text-decoration: line-through;　　-- 删除线

　　　　letter-spacing　　字符间距

　　　　word-spacing　　（英文）单词间距　　-- （识别空格来判断是不是单词）

　　　　text-align　　文本对齐方式

　　　　　　text-align: left;　　-- 左对齐（默认）　　　
　　　　　　text-align: right;　　-- 右对齐
　　　　　　text-align: center;　　-- 居中
　　　　　　text-align: justify;　　-- 两端对齐（调整空格来实现的）

　　　　text-indent　　设置（只针对）首行缩进（一般设置 em），取取值可以隐藏文本，只让 SE 能检索而不显示

• 盒模型 box

　　　　盒子组成：

　　　　　　margin　　-- 盒子外边距

　　　　　　border　　-- 盒子边框

　　　　　　padding　　-- 盒子内边距

　　　　　　content　　-- 盒子内容

　　　　盒子的可见宽大小 = border * + padding * + content

　　　　对于样式盒子的样式 width

　　　　　　IE　　--- width = border * + padding * + content

　　　　　　W3C　　--- width = content

　　　　请在 html 中声明 DTD ，让 IE 使用 W3C 的盒子模型，另外，box-sizing: border-box; 样式可以让你在布局时省去很多麻烦

　　　　边框 border

　　　　　　border-style: solid | dotted | dashed | double 　 四种可选样式（CSS3 提供了 border-image）

　　　　注：在设置 border 时，要同时指定 width ， color ， style ，统一不同浏览器默认显示样式，content 的背景是会延伸到 padding 的

　　　　外边距 margin

　　　　　　margin-top　　-- 设置该值为正值（负值），该盒子下移动（上移），并驱使它下面的盒子下移（上移），但它上面的盒子不动（会被它覆盖）

　　　　　　margin-bottom　　-- 设置该值为正值（负值），该盒子不动，它下面的盒子下移（上移并会覆盖该盒子）

　　　　　　margin-left，margin-right　　-- 对于块元素独占一行，设置该值对下面的元素没啥影响，对与 行内块 元素，类比 margin-top，margin-bottom

　　　　　　让 块 元素水平居中：margin-left: auto; margin-right: auto; 或 margin: px auto;

　　　　注：行内元素无法设置垂直外边距值，但可设置 padding 值，设置垂直方向 padding 值不会挤推其它元素，只会覆盖其它元素，设置水平 margin、padding 值对水平方向的元素有挤推的影响

　　　　垂直方向外边距重叠

　　　　　　网页中 垂直方向 的 相邻的 兄弟 元素之间的外边距会重叠，而不是相加，重叠后，取较大值

　　　　　　如果 父子 元素 垂直方向 的外边距 相邻 重叠了，则子元素的外边距会设置给父元素

　　　　　　给父元素设置 border，或者给父元素设置 ::before{content: ""}，父子元素外边距不再是相邻重叠的

　　　　浏览器默认样式　　

　　　　　　浏览器自动为许多元素设置了 margin 和 padding 值，如 body 四边有 px 的外边距，p 有上下外边距之类的，各个浏览器还有区别

　　　　　　统一样式： *{margin: ; padding: }, 或是引入 reset.css

• 溢出 overflow

　　　　父元素无法容纳子元素时，子元素会溢出

　　　　　　overflow:visible;　　-- 不做处理，溢出后可见 （默认）
　　　　　　overflow:hidden;　　-- 溢出的内容被隐藏，不显示
　　　　　　overflow:scroll;　　-- 不论是否溢出，均给父元素添加水平和垂直方向滚动条
　　　　　　overflow:auto;　　-- 根据是否溢出，和溢出的方向，自动为父元素添加滚动条

　　　　　　overflow-x，overflow-y 可以指定水平和垂直方向的溢出样式

• 文档流

　　　　文档流在网页的最底层，它表示是一个页面中的位置，我们创建的元素默认处在文档流中

　　　　元素在文档流中的特点：

　　　　　　块元素

　　　　　　　　当元素的宽度，高度为自动（auto）时，指定 padding，border 不影响盒子的可见宽的大小，元素的宽度为父元素的 %，高度被其子元素撑开，独占一行，自上而下排列

　　　　　　行内（内联）元素

　　　　　　　　自占自身大小，从左至右排列，一行不足以容纳时，自动换行，其高度被其子元素撑开

　　　　元素浮动特点

　　　　　　设置 float: none | left | right 元素浮动会脱离文档流，不占原来(文档流中)的位置。遇到 父元素的边框 或 其它浮动的元素 则停止。文字会环绕在浮动元素周围。

　　　　　　浮动的 行内快 元素会占用在 浮动方向上的  没有浮动 的兄弟元素的位置，而一个素浮动后，下面的元素上移，被浮动的元素覆盖。

　　　　　　如果浮动元素上边有一个 没有浮动 的 块 元素，则浮动元素不会超过这个块元素，浮动元素也不会超过它的 浮动的 兄弟元素

　　　　　　浮动元素的 width，height 默认是被内容撑开的，和文档流中的块元素不同

　　　　　　内联（行内）元素浮动后，可以设置它的 with，height，所以浮动后块元素和内联元素一样了

　　　　浮动用途：

　　　　　　对块元素水平布局，如 ul 列表项 li 水平排列

　　　　　　display: inline-block; 也能使 li 水平排列，但是如果 li 标签书写时换行了，列表项之间会有一个空格，虽然可以给父元素设置 font-size: 来去除空格...）

　　　　浮动带来的问题：

　　　　　　父元素高度塌陷

　　　　　　　　文档流中，未指定父元素 height 值时（灵活的布局中，一般不设置指定父元素 height 值），父元素高度由子元素撑起，子元素浮动后，父元素就没有高度，其下面的元素上移，布局乱

　　　　　　下面的未浮动的元素上移，被楼上浮动的元素覆盖，布局乱

　　　　解决方法

　　　　　　据 W3C 标准中，页面中的元素都有一个隐含的属性 Block Formatting Context，默认是关闭的，开启后有如下属性

　　　　　　　　父元素的垂直外边距不会和子元素重叠

　　　　　　　　开启该属性的元素不会被浮动元素覆盖

　　　　　　　   开启该属性的父元素的 height 可以被浮动的子元素撑开

　　　　　　开启  Block Formatting Context 的方式

　　　　　　　　1. 设置元素浮动； 2. 设置元素绝对定位； 3. 设置元素的 display 为 inline-block； 4. 设置 overflow 为非 visible 的值

　　　　　　上述的四个方法都有些副作用，设置 overflow 的副作用最小

　　　　　　IE 不支持 Block Formatting Context ，但它有个隐含属性 hasLayout

　　　　　　　　给元素设置 zoom: ; 即可开启 hasLayout 属性 （其它浏览器会忽略这个属性）

　　　　　　清除浮动对下面未浮动的元素的影响

　　　　　　　　对受影响的元素设置 clear: left | right | both

　　　　　　　　　　clear: left　　-- 清除左侧浮动的元素对当前元素的影响，当前元素不超过左侧浮动元素

　　　　　　　　　　clear: right　　 -- 清除右侧浮动的元素对当前元素的影响，当前元素不超过右侧浮动元素

　　　　　　　　　　clear: both　　-- 清除左右两边对当前元素影响最大的那个的影响，当前元素不超过两侧浮动元素

　　　　　　鉴于 clear 的功效，只要浮动子元素下面的元素设置 clear，这个带 clear 样式的元素可以撑起父元素的 height

　　　　　　在不增加不必要的子元素的前提下，给父元素设置 ::after{content: ""; display: table; clear: both}，即可解决父元素塌陷的问题

• 定位 position

　　　　position: static; 　　   -- 定位不开启（默认）
　　　　position: relative;　　 -- 相对定位，相对其自身在文档流中原来的位置定位，未脱离文档流，提高一个层级，
　　　　　　　　　　　　　　　　  指定偏移量后可覆盖未定位的元素，仍然占用原来的位置，不会改变块或是内联元素的类型
　　　　position: absolute;　　-- 绝对定位，相对与开启了定位的祖先元素定位（祖先都未开启定位，则相对与 body 定位），
　　　　　　　　　　　　　　　　  脱离文档流，提高一个层级，不再占文档中流中的位置，内联元素开启后变成块元素，height 默认被内容撑开
　　　　position: fixed;　　 　 -- 固定定位（特殊的绝对定位）,相对与浏览器窗口定位，且不随滚动条滚动（IE 不支持）

• 层级 z-index

　　　　开启同一种定位后，定位有重叠，且元素的层级一样时，写在下边的 盒子 覆盖上面的 盒子 在浏览器中优先显示，

　　　　手动的给元素设置层级  z-index ，可修改显示的优先级

　　　　注：没有开启定位的元素不能设置 z-index，父元素的层级再高，也不能覆盖其子元素

• 不透明度 opacity

　　　　opacity 的值在 ~ 之间， 表示 完全透明， 表示 完全不透明。（IE 8 及以下不支持）

　　　　兼容低版本 IE 的写法　　filter: alpha(opacity=~);

• 背景图片 background-image

　　　　background-image: url("./image/test.jpg");

　　　　图片默认从元素的左上角开始重复平铺。

　　　　设置背景图片重复

　　　　　　background-repeat: repeat;　　-- 双方向重复平铺（默认）
　　　　　　background-repeat: no-repeat;　　-- 不重复
　　　　　　background-repeat: repeat-x;　　-- 沿 x 方向重复平铺
　　　　　　background-repeat: repeat-y;　　-- 沿 y 方向重复平铺

　　　　设置背景图片在元素中的位置

　　　　　　 background-position: left | right | top | bottom | center 　　及两两不矛盾的组合均可

　　　　　　 background-position: -px px;　　指定确切的偏移量（CSS-Sprite 图的用法）

　　　　设置背景图片是否随页面滚动

　　　　 　　background-attachment: scroll | fixed　　默认是 scroll，一般给 body 设置背景图片时，会用 fixed

　　　　简写背景属性

　　　　　　 background: color | image | repeat | position | attachment

　　　　注：简写属性时，未指定的属性将采用默认值，会覆盖之前的非简写属性。建议把非简写属性写在下面　　　　

• CSS-Hack

　　　　只在某些浏览器中执行的特殊代码

　　　　IE 中的条件 hack，只对 IE 有效，且 IE 及以上的版本不支持，用于处理低版本 IE 兼容性问题。

　　　　　　<!--[if lt IE 9]>　　此处内容会被 IE 9 一下的 IE 浏览器 解析　　<![end if]-->

　　　　　　除了 if lt IE 9 的写法，还有类似的 if gt IE ，if lte IE , if gte IE , if IE，if !IE

　　　　IE 中的样式 hack

　　　　　　在样式前加下划线（只有 IE 及以下支持），例如： _background:{};

　　　　　　在样式前加星号（IE 及以下支持），例如： *background:{};

---

　　　　　　--- 知识在于分享，转载请注出处 ---