web

HTML总结

2019-02-12  本文已影响6人  Viarotel

HTML总结

sublime

环境配置

sublime常用快捷键:

form表单

<form>

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

action属性

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

method

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

<input>

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

type:属性

必须,确定性质

type:text :

表单输入框

type:password

密码输入框

type:radio
单选框
type:checkbox
多选框
type:file
上传
type:submit
提交按钮

name属性

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

value:属性

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

<select>

option 下拉框

<textarea>

多行文本输入框

<label>

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

get提交

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 属性

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

值 描述
color 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色，应该从父元素继承

background-position 属性

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

值 描述
left top left center left bottom right top right center right bottom center top center center center bottom 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

background-size 属性

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

值 描述
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-repeat 属性

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

值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

background-image 属性

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

值 说明
url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承

background 属性

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

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

值 说明 CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像 1

缩写:

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;

标签形式

块状标签 (石头)

行内块标签 (果冻)

行内标签 (水)

元素性质改变

盒子模型

盒子边框属性 border

盒子边框和内容填充物 padding

盒子间距 margin

margin

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

垂直重叠

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

嵌套崩塌

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

解决方法:

div 和span的属性:

CSS权重:

float浮动:

position元素的定位:

常用属性:

    *{
        margin: 0;
        padding: 0;
    }
    body{
        font: 16px/1.2 '微软雅黑';
    }
    ul{
        list-style: none;//去除小黑点
    }
    a{
        text-decoration: none;//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语法规范

Via

上一篇 下一篇

猜你喜欢

热点阅读