HTML总结

sublime

环境配置

• 使用sublime text 3
• 打开百度在搜索框中输入sublime text 3
• 普通下载
• 安装,路径自己选择
• Preferences-->Package Control 输入 install
• SublimeLinter 代码提示插件
• emmet html 自动补全插件
• markdown 插件实现实时预览和保存Markdown Editing + MarkdownLivePreview
• AutoFileName 快速列出你想引用的文件夹里面所有文件的名字，比如想引用test/img/1.png。只需要输入/img,该插件就会自动提示/img下面的所有文件名
• JsForma可以自动帮助你格式化JavaScript代码，形成一种通用的格式，比如对压缩、空格、换行的js代码进行整理，使得js代码结构清晰，易于观看。在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）
• SublimeCodeIntel 这个插件支持以下语言的自动提示功能：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.
  • 实现JS代码自动补全功能:
    • preferences->packages settings ->SublimeCodeIntel ->Settings-User
    • 添加
      {
      "JavaScript": {
      ​ "codeintel_selected_catalogs": ["JavaScript"]
      }
      }
• Sublime-HTMLPrettify代码排版插件,安装完快捷键ctrl+shift+h 一键格式化代码.

sublime常用快捷键:

• Ctrl + / ------------------------注释
• Ctrl + 滚动 -------------------字体变大/缩小
• Ctrl + O -----------------------打开源文件
• Ctrl + N -----------------------新建
• Ctrl + Shift + k --------------删除一行
• Ctrl+X--------------------------删除光标所在行
• Ctrl + Shift + ; --------------移除未闭合的容器元素
• Ctrl + D -----------------------就近选择相同项
• Ctrl + Shift + D -------------复制这行文本插入到下一行
• Ctrl + Shift + V -------------粘贴并复制格式
• Alt + . ------------------------- 快速闭合标签
• Alt + F3 -----------------------选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。
• Ctrl + L-------------------------选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
• Ctrl + Shift+ L----------------先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
• Ctrl + M -----------------------光标移动至括号内结束或开始的位置。
• Ctrl + Shift + [ ---------------选中代码，按下快捷键，折叠代码。
• Ctrl + Shift + ] ---------------选中代码，按下快捷键，展开代码。
• Ctrl + K+ 0 --------------------展开所有折叠代码
• Shift + Tab --------------------回退Tab的缩进.
• Ctrl + Enter------------------- 在当前行下面新增一行然后跳至该行
• Ctrl + Shift + Enter----------在当前行上面增加一行并跳至该行
• Ctrl + ←/→ --------------------进行逐词移动，
• Ctrl + Shift + ←/→ ----------进行逐词选择
• Ctrl + Shift + ↑/↓ -------------移动当前行（文件会被修改）
• Ctrl+KK -------------------------从光标处删除至行尾
• Ctrl+K Backspace ----------从光标处删除至行首
• Ctrl+Y ---------------------------恢复撤销
• Ctrl+J ----------------------------合并行（已选择需要合并的多行时）
• Ctrl + [ -------------------------- 选中内容向左缩进
• Ctrl + ] ---------------------------选中内容向右缩进
• Ctrl + K+ u ----------------------文本转换大写
• Ctrl + K+ i -----------------------文本转换小写

form表单

<form>

用于包括输入框,提交数据

action属性

提交的地址,暂时不用理解

method

属性提交数据的方法 get/post,如果不写,默认是get方式.

<input>

根据tpye的类型,表现不同的形式

type:属性

必须,确定性质

type:text :

表单输入框

type:password

密码输入框

type:radio

单选框

• name 必须要有,这里表明当前的单选输入框为一组
• value 必须要有,因为单选按钮提交的结果是value的值. value一般采用数字编码的形式表示.
• checked 默认选中

type:checkbox

多选框

• name 同radio
• value 同radio
• checked 默认选中

type:file

上传

• 当选中的时候 ,实际文件并没有被上传上来
• multiple 可以实现多选

type:submit

提交按钮

• value 按钮显示的内容
• 点击后表单被提交到 form.action 配置的地址

name属性

当前表单的名称 目前必须要有,因为提交的时候后台程序需要通过name属性获取表单的内容.

value:属性

当前表单的内容.value是提交的结果.如果设置了vlaue,则是当前表单的默认值.

<select>

option 下拉框

• name 属性需要设置
• value 每个option都要设置value
• selected 默认选中

<textarea>

多行文本输入框

• cols /rows 文本框的宽度和高度
• name值需要设置,value指的是标签内部的内容

<label>

用于包括输入框的头部和输入框 使之称为一体。多用于单选和多选。

• readonly 只读属性，输入框内容不能更改。
• disabled 禁用 表单的值再提交时会被舍弃。
• <fieldset> <legend> 可以实现表单的分组。

get提交

• 参数被放到地址提交,比如: /D:/abc?username=张三&pwd=123&sex=0&experience=0
• 不安全
• 地址栏拼接的参数长度有限,一般是<4k
• 一般用于获取数据

post提交

• 地址栏不显示提交内容,再请求体显示
• 相对安全
• 提交的数据量没有上限
• 一般用于提交保存数据

    <!-- action 是当前表单提交的地址 -->
    <form action="www.bufanui.com" method="get">
        <fieldset>
            <legend>基本信息</legend>
            用户名: <input type="text" readonly  name="username" value="张三"> <br>
            曾用名： <input type="text" disabled  name="oldname" value="张小三"><br>
            密码: <input type="password" name="pwd"> <br> 
            性别: 
                <label>
                    男: <input type="radio" name="sex"  value="0"> 
                </label>
                <label>
                    女: <input type="radio" checked  name="sex"  value="1"> <br>
                </label>
        </fieldset>
    
        <fieldset>
            <legend>补充信息</legend>
            爱好: 
            <label>
                篮球: <input type="checkbox" name="like" value="basketball">
            </label>
            <label>
                足球: <input type="checkbox" checked name="like" value="football">
            </label>
            <label>
                乒乓: <input type="checkbox" name="like" value="pingpang"><br>
            </label>
        
        工作年龄: 
            <select name="experience">
                <option value="0">--无--</option>
                <option value="1">1年</option>
                <option value="2" selected>2~3年</option>
                <option value="3">3~5年</option>
            </select> <br>
        上传头像: <input type="file" name="avatar" multiple> <br>
        个人描述: <textarea name="desc" cols="30" rows="4">
                    我对工作有极大地热情,我喜欢写代码!
                    我大学时候是一个德智体美劳全面发展的废柴!
                </textarea> <br>
        </fieldset>
                
        <input type="submit" value="提交">
    </form>

常用转义字符

<table style="width: 400px;">
<tbody>
<tr><th>显示</th><th>说明</th><th>实体名称</th><th>实体编号</th>
</tr>
<tr>
<td class="key"> </td>
<td>半方大的空白</td>
<td>&ensp;</td>
<td>&#8194;</td>
</tr>
<tr>
<td class="key"> </td>
<td>全方大的空白</td>
<td>&emsp;</td>
<td>&#8195;</td>
</tr>
<tr>
<td class="key"> </td>
<td>不断行的空白格</td>
<td>&nbsp;</td>
<td>&#160;</td>
</tr>
<tr>
<td class="key"><</td>
<td>小于</td>
<td>&lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td class="key">></td>
<td>大于</td>
<td>&gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td class="key">&</td>
<td>&符号</td>
<td>&amp;</td>
<td>&#38;</td>
</tr>
<tr>
<td class="key">"</td>
<td>双引号</td>
<td>&quot;</td>
<td>&#34;</td>
</tr>
<tr>
<td class="key">©</td>
<td>版权</td>
<td>&copy;</td>
<td>&#169;</td>
</tr>
<tr>
<td class="key">®</td>
<td>已注册商标</td>
<td>&reg;</td>
<td>&#174;</td>
</tr>
<tr>
<td class="key">™</td>
<td>商标（美国）</td>
<td>™</td>
<td>&#8482;</td>
</tr>
<tr>
<td class="key">×</td>
<td>乘号</td>
<td>&times;</td>
<td>&#215;</td>
</tr>
<tr>
<td class="key">÷</td>
<td>除号</td>
<td>&divide;</td>
<td>&#247;</td>
</tr>
</tbody>
</table>

<a>

target属性:

属性规定在何处打开链接文档。

有 4 个保留的目标名称用作特殊的文档重定向操作：

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者

窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框

架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。在iframe发生嵌套的时候 在顶层的父类标签刷新页面

iframe

规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

height && width

规定宽高

frameborder

规定是否显示 iframe 周围的边框。1为显示,0为隐藏

HTML5 不支持

<!--用CSS代替-->
<iframe src="http://www.w3cschool.cc/" width="200" height="200" style="border:0px solid red">

scrolling

规定如何显示滚动条

auto自动 yes始终 no不显示

background

background-color 属性

设置一个元素的背景颜色。

background-position 属性

设置背景图像的起始位置。

background-size 属性

css3属性:指定背景图片大小。

background-repeat 属性

设置如何平铺对象的 background-image 属性。

background-image 属性

设置一个元素的背景图像。

background 属性

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

缩写:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
缩写顺序:background: 
        [background-color] 
        [background-image] 
        [background-repeat] 
        [background-attachment] 
        [background-position] / [ background-size] 
        [background-origin] 
        [background-clip];。
例:background: green url(img/avatar.jpg) no-repeat 100px 150px;

标签形式

块状标签 (石头)

• 会自动换行
• 宽高有效
• 比如: div p h1~h6 ul>li ol>li dl>dt~dd tr form

行内块标签 (果冻)

• 不会自动换行
• 宽高有效
• 比如: img td input select button

行内标签 (水)

• 不会自动换行
• 宽高无效
• 比如: span a

元素性质改变

• display 我们可以通过修改display来修改元素的性质。
• block：设置元素为块元素
• inline：设置元素为行内元素
• inline-block：设置元素为行内块元素–
• none：隐藏元素

盒子模型

盒子边框属性 border

盒子边框和内容填充物 padding

盒子间距 margin

margin

只对行内块或块级元素生效.

垂直重叠

当两个div垂直放置的时候,上面盒子的margin-bottom和下面盒子的margin-top会发生重叠,最终的结果 以大 的为准

嵌套崩塌

当两个盒子发生嵌套的时候,里面盒子的margin-top会直接作用到外层盒子

解决方法:

• 给父类盒子添加极小的padding/border/
• overflow(推荐) overflow: hidden;

div 和span的属性:

• div 和span 只是单纯的标签 么有任何样式和语义化
  • div 一般用于布局,属于块状标签.
  • span一般用于特殊字段引用,属于行内标签.
    • 具有默认属性会导致字体高度变化
      • 使用display: block;转换为块状标签解决。

CSS权重:

• 行内样式(1000) > id选择器(100) > class选择器(10) > 标签选择器(1) > 通配符(0)
  • 双重选中可以叠加权重.
  • 就近原则.
  • 同级权重看位置.

float浮动:

• 浮动原则:
  • 同一个父类盒子内部,要浮动都浮动，右浮动很少用,而且会影响标签原来的顺序。
• 当子类盒子浮动,而其高度大于父类盒子的时候,会产生浮动的影响。
  • 清除浮动的影响的方法:
    • 父类 overflow: hidden;
    • 在浮动元素最后面添加空标签
      • 设置样式: clear:both;
        .clear{
        ​ /阻止前后有浮动元素/
        ​ clear: both;
        ​ }
• 浮动的另一个作用: 文字环绕图片.

position元素的定位:

• 固定定位: fixed相对浏览器定位,
  • 会脱离文档流
  • 可以将行内元素转换为行内块元素。
• 相对自己原来的位置定位,不会脱离文档流
• 绝对定位: absolute
  • 相对父类盒子定位,会脱离文档流.
  • 绝对定位:
    • 没有嵌套元素,相对body做定位
    • 如果有嵌套元素,而且父类有定位元素,则相对父类做定位.
    • absolute 父类一般都是 relative, "子绝父相".
    • 绝对定位会使行内元素变成块元素。

常用属性:

• css初始化

    *{
        margin: 0;
        padding: 0;
    }
    body{
        font: 16px/1.2 '微软雅黑';
    }
    ul{
        list-style: none;//去除小黑点
    }
    a{
        text-decoration: none;//a标签去除下划线
    }

• 半透明,rgba和opacity的区别

  • rgba单独指的是背景颜色透明度
  • opacity整个元素的透明度
    • 例:background: rgba(0, 0, 0, 0.5);
    • 例:opacity: .5;可以省略0,透明度 0~1.

• font:

  • font:简写
    • font:{
      font-style | font-variant | font-weight | font-size / line-height | font-family;
      ​ }
    • font-size / line-height | font-family必须一起写,前面的可以省略.
      • 例: font:italic bold 12px/20px arial,sans-serif;
  • font-weight:
    • normal 默认值。定义标准的字符。
    • bold 定义粗体字符。
    • bolder 定义更粗的字符。
    • lighter 定义更细的字符。
    • 数值 100 ~ 900 100为一单位,定义由粗到细的字符。400 等同于 normal，而700 等同于 bold。
    • inherit 规定应该从父元素继承字体的粗细。

• 获取鼠标悬浮是 改变为手

  • cursor: pointer; defalut(默认)|pointer|move

• 文本调整

  • 缩进
    • text-indent: px|em|%; 应用于块状元素
  • 行高
    • line-height: px|%; 百分比参照是字体大小.
      • line-height: 1; 即字体的大小等于字体所占高度。

• 层级z-index:

  • 一般为0~9999,默认级别为z-index:0,值越大,层级越靠上.
  • 如果定位元素发生了重叠,那么可以通过z-index控制 定位元素 的层级.
  • ==只对定位元素起作用.==

• overflow: 属性规定当内容溢出元素框时发生的事情

  • visible //默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden //内容会被修剪，并且其余内容是不可见的。
  • scroll //内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit //规定应该从父元素继承 overflow 属性的值。

• display: 属性规定元素应该生成的框的类型,即盒子类型转换.

  • none //此元素不会被显示。
  • block //此元素将显示为块级元素，此元素前后会带有换行符。
  • inline //默认。此元素会被显示为内联元素，元素前后没有换行符.
  • inline-block //行内块元素。（CSS2.1 新增的值）
  • 提示:一般用block,inline-block换行会产生空格.
    • 解决方法:设置font-size
      • 在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度
      • 重置父类元素的font-size，让其子元素恢复文字字符，（因为在1）去除了所有的文本，包括子元素的文本和空格回车产生的文本节点）
      • 例:

          .nav {
                  background: #999;
                  font-size:0;
              }
          .nav-item{
                      display:inline-block;
                      width: 100px;
                      background: #ddd;
                      font-size:14px;
      
                  }
      

• visibility: visible|hidden|collapse|inherit

  • visible
    • 默认值。元素是可见的。
  • hidden
    • 元素是不可见的。
  • collapse
    • 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
  • inherit
    • 规定应该从父元素继承 visibility 属性的值。

• 行内块元素居中
  + vertical-align 本身很复杂,一般只会作用于行内块元素,跟其他元素的对齐方式
  + vertical-align: middl

• 超出隐藏显示省略号:

  • 例:
    • 设置宽度为九个字符超出隐藏
      • width:9em;
    • 禁止换行
      • white-space: nowrap;
    • 超出隐藏
      • overflow:hidden;
    • 超出部分显示为省略号...
      • text-overflow:ellipsis;

• 锚点 #

  • 号是锚点 在当前页面跳转,如果为空则跳到页面头部

    • 例: 点击a标签会跳到div那一行

      <div class="div"></div>
      <a href="#div"></a>
      
      

• 绘制菱形

     .diamond {
                width: 80px;
                height: 80px;
                margin: 40px 0 0 40px;
                -webkit-transform-origin: 0 100%;
                -moz-transform-origin: 0 100%;
                -o-transform-origin: 0 100%;
                -ms-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform:rotate(-45deg);
                -moz-transform:rotate(-45deg);
                -o-transform:rotate(-45deg);
                -ms-transform:rotate(-45deg);
                transform:rotate(-45deg);
                background: #E5C3B2;
                }

CSS语法规范

• 用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下获得一致展现的方法。
• 为选择器分组时，将单独的选择器单独放在一行。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
• 声明块的右花括号应当单独成行。
• 每条声明语句的 : 后应该插入一个空格。
• 每条声明语句的 : 后应该插入一个空格。
• 为了获得更准确的错误报告，每条声明都应该独占一行。
• 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
• 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
• 为选择器中的属性添加双引号，例如，input[type=”text”]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
• 在同级元素中,.classA.classB指的是一个元素，同时满足classA和classB，即(class="classA classB"),权重大于单个.classA

Via

• 不要直接调用子元素的class,如郑州的张三,便于查找不会重复. 后代选择器一般只用三层.
  • 例: .zx .zx-title .close{ ...}
• 会提取公因式简化代码,
• 编写 HTML 代码时，尽量避免多余的父元素,不要有冗余.<a>标签能解决的就不要用<div>包裹.
• class 可以有多个特征:
  • 例:<div class="qq zx-type item">
• margin不会脱离文档流和position的absolute和fixed会脱离文档流.
• 隐藏元素 - display:none或visibility:hidden
  • display:none //隐藏不占用空间
  • visibility:hidden //隐藏但是占用空间
• 根据用户习惯,能用图片就不用背景背景图片,便于用户保存,背景图片便于调整位置.
• 缩写一般用于bady,CSS初始化等;例:font:14px/40px arial,verdana;
• HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
  • class
  • id, name
  • data-
  • src, for, type, href, value
  • title, alt
  • role, aria
• class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
• 行内标签设置float后 会自动转换为行内块状元素.但是并不会产生间隙.
  属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
• 规避脱标流
  • 能用标准流（没有脱标）解决就不用浮动
  • 解决不了就考虑有浮动（页面布局类型，“不完全脱标”）
  • 浮动解决不了用定位（小图标，完全脱标，不影响内容）
• 通用样式:前面不要加父类的选择器
• line-height: 1;
  • 基于当前字体的高度的行高
  • 即字体的大小等于字体所占高度.
• logo一般用a标签包裹就可以,写成背景,可以点击跳转首页.
• P标签默认具有margin属性,用margin: 0;重置.
• a标签不能包含a标签,p标签也是如此.
• P标签默认具有margin属性,用margin: 0;重置.
• img转换为块状元素后可以解决块之间的间隙
• 去除span的默认样式（行高导致高度变化）：display: block;
• 使用 calc() 函数计算 <div> 元素的宽度:
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • 例如：width: calc(100% - 10px)；
• input框提示文字，聚焦时字体消失
  • <input type="text" placeholder="请输入内容"/>
• 自定义输入框样式
  • 设置输入字体的大小;
    -font-size: 18px;
    ​ -width: 135px;
    ​ -height: 54px;
  • 去掉输入框默认边框
    -border: none;
  • 用于去掉input输入框获取焦点的默认样式
    -outline: none;
  • 把背景色设置为透明.不显示背景色,可用于输入框背景透明
    -background-color:transparent;
  • 下边框的线
    -border-bottom: 1px solid #e3e3e3;