HTM CSS 笔记乱炖

2018-06-24 01:21:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、常用实体(字符转义)

  '&lt;' == '<'        '&copy;' == '?'

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

  '&nbsp;' == ' '       '&reg;' == '?'

  '&amp;' == '&'      '&trade;' == '?'

 

二、图片

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

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

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

  图片特点:

  JPEG(jpg) ---- 支持的颜色多,可压缩,但不支持透明

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

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

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

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

 

三、内联 与 块

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

  块元素 ---- div (无语义,常用于页面布局),p(段落),h(标题)

    特点:不受 width 的值的影响,独占一行。 

  内联元素 ---- span(常用于修饰文字),aimg(行内块元素),iframe

    特点:只占自身大小,可以设置水平方向的 paddingmargin 值,无法设置 widthheight

  一般使用规范:

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

    p 元素内不要包裹块元素

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

  通过 CSS 修改类型

    displayinline   内联元素

    displayblock    块元素

    displayinline-block  行内块元素(可设置 height 的行内元素)

    displaynone  隐藏且不占用文档中的位置(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:hovera: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>

    引用很多句子,块级引用(长引用)  样式 -- 独占一行

  • <sup></sup>

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

  • <sub></sub>

    设置下标  样式 -- H2O

  • <del></del>

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

  • <ins></ins>

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

  • <pre></pre>

    预格式,常与 code 连用  样式 -- 保留文本格式(换行,空格)

  • <code></code>

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

  • <ul></ul> 

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

    type 属性取值:

      type="disc" --- 列表项为实心圆点(默认)

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

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

  • <ol></ol>

    带序号的列表

    type 属性取值:

      type="1" --- 列表项为数字(默认)

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

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

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

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

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

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

  • <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,在表头中。样式 -- 文字居中,加粗。tfoottbody 交换位置是可以的。

      td 属性 colspan  -- 横向合并单元格,值为要合并的 td 个数,属性 rowspan  -- 纵向合并单元格,值为要合并的 td 个数(纵向合并只能向下合并)

      表格边框,可给 tdtable 分别设置 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 可选值 textpasswordradiofilecheckboxresetsubmitbuttontyperadio 时,要保持 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"

    JqueryAjax 能识别数据是否从 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 出现在同一个页面中。framesetiframe 中的内容不能被搜索引擎检索,而且 frameset 中不能自定义内容。

          

五、CSS   

  • 选择器权重(优先级)

    !important:最高 (慎用)

    内联样式: 1000

    id选择器:100

    类和伪类:10

    元素选择器:1

    通配选择器:0

    继承样式:无

    注:多个选择器组合时,权重回叠加,但是,仍然无法超越其上一级。(例如:11个元素选择器叠加,无法超过伪类)

  • 长度单位

    像素 px  ---- 

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

    rem  ---- 相对与 根 节点(html)的字体大小(CSS3)

  • 颜色单位

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

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

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

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

      H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

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

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

      A:Alpha透明度。取值0~1之间。

  • 字体 font

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

    字体分类:

      serif       --- 衬线字体

      sans-serif  --- 非衬线字体

      monospace  --- 等宽字体

      cursive    --- 草书字体

      fantasy    --- 虚幻字体

    设置字体样式:

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

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

      font-weight: normal | bold | 100~900  --- (一般计算计安装 400normal) 和 700bold) 的字体)

      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  设置(只针对)首行缩进(一般设置 2em),取取值可以隐藏文本,只让 SE 能检索而不显示

  • 盒模型 box

    盒子组成:

      margin  -- 盒子外边距

      border  -- 盒子边框

      padding  -- 盒子内边距

      content  -- 盒子内容

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

    对于样式盒子的样式 width 

      IE  --- widthborder * 2 + padding * 2 + content

      W3C  --- width = content

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

    边框 border

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

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

    外边距 margin

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

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

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

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

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

    垂直方向外边距重叠

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

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

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

    浏览器默认样式  

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

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

  • 溢出 overflow

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

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

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

  • 文档流

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

    元素在文档流中的特点:

      块元素

        当元素的宽度,高度为自动(auto)时,指定 paddingborder 不影响盒子的可见宽的大小,元素的宽度为父元素的 100%,高度被其子元素撑开,独占一行,自上而下排列

      行内(内联)元素

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

    元素浮动特点

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

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

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

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

      内联(行内)元素浮动后,可以设置它的 withheight,所以浮动后块元素和内联元素一样了

    浮动用途:

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

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

    浮动带来的问题:

      父元素高度塌陷

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

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

    解决方法

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

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

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

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

      开启  Block Formatting Context 的方式

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

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

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

        给元素设置 zoom: 1; 即可开启 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 6 不支持)

  • 层级 z-index

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

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

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

  • 透明度 opacity

    opacity 的值在 0~1 之间,0 表示 完全透明,1 表示 完全不透明。(IE 8 及以下不支持)

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

  • 背景图片 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: -10px 80px;  指定确切的偏移量(CSS-Sprite 图的用法)

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

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

    简写背景属性

       background: color | image | repeat | position | attachment

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

  • CSS-Hack

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

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

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

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

    IE 中的样式 hack

      在样式前加下划线(只有 IE 6 及以下支持),例如: _background:{};

      在样式前加星号(IE 7及以下支持),例如: *background:{};

 


 

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:网页CSS中*{margin:0; padding:0;}有什么用

下一篇:按下回车默认提交form表单问题