HTML 标签

<b></b>                 加粗
<strong></strong>       加粗
<i></i>                 倾斜
<em></em>               倾斜
<u></u>                 下划线
<ins></ins>             下划线
<span></span>            不换行
<p></p>                  段落
<br>                     换行
<div></div>              布局
<h1></h1>               一级标题
<del></del>             删除线
<s></s>                 删除线
<a href=""></a>         超链接
<ul><li></li><ul>       无序列表
<ol><li></li><ol>       有序列表
<dl>
    <dt>项目标题</dt>
    <dd>项目描述</dd>    项目列表
</dl>
&nbsp;                  空格字符实体

表格：

    <!-- table嵌套tr，tr嵌套td  table是整个表格，tr是行，td是单元格 -->
    <!-- cellspacing：td之间的距离  cellpadding：内容和边框线之间的距离 -->
    <!-- colspan横向合并 rowspan纵向合并 -->
    <table cellspacing="0" cellpadding="20">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

表单：

    <form action="" method="POST">
        文本框：<input type="text placeholder="框内的提示文字">
        <br><br>
        密码框：<input type="password">
        <br><br>
        单选框：<input type="radio" name="sex">男 <input type="radio" name="sex">女
        <br><br>
        复选框/多选框：<input type="checkbox" checked>读书 <input type="checkbox">听音乐 <input type="checkbox">lol
        <!-- xhtml1.0  checked="checked" -->
        <!-- html5.0   checked -->
        <br><br>
        上传文件：<input type="file">
        <br><br>
        文本域：<textarea></textarea>
        <br><br>
        下拉菜单：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
        <br><br>
        <input type="submit" value="提交按钮">
        <input type="button" value="普通按钮">
        <input type="reset" value="重置">
        <button>普通按钮button</button>
    </form>

css选择器

1.标签选择器

div{color:red;}
.......
<div>div</div>    <!-- 对应以上样式 -->

###2.类选择器

.blue{color:blue;}
......
<div class="blue">...</div>

###3.层级选择器结合上面两种使用，减少命名

.con{width:10px;height:20px;}
.con span{color:red;}
......
<div class="con">
    <span>...</span>
</div>

4.id选择器

通过id名选择元素，id名称不能重复
#box{color:red;}
<p id="box">段落</p> 

5.伪类选择器

常用的有hover，表示鼠标悬浮在元素上的状态
.box{width:100px;height:100px;}
.box:hover{width:300px;}

CSS属性

布局属性

width:200px /* 宽度 */
height:300px /* 高度 */
background:#ccc; /* 背景色 */
font-style:italic /* 倾斜 */
border:1px solid red /* 外边框为1px的红色实线 */
border-collage:collapse /* 把小表格之间的两条框线变成一条 */
border-radius /* 把边框变圆 */
padding:30px /* 内边距 */
margin:50px /* 外边距 */
box-sizing:border-box /* 启动盒子内减模式
margin:0 px auto /* 水平居中 */
float:left/right /* 浮动 */
list-style /* 去除列表前的圆点 */
resize:none /* 设置文本域禁止拖拽 */
outline：none /* 去掉焦点框 */
opacity 设置元素透明度

文本样式属性

text-align 设置文字水平对齐方式
text-indent 设置文字首行缩进
color:red /* 颜色 */
font-size:30px /* 字号 */
font-weight:bold /* 加粗 */
font-family 设置文字字体
line-height 设置文字行高
text-decoration:none /* 去除下划线 */

设置元素

（1）display 设置元素类型及隐藏
1.none 隐藏且不占位置
2.block 以块元素显示
（2）css元素溢出
1.overflow:visible 默认值，超出元素框显示
2.overflow:hidden 内容被修剪，多余不可见
3.overflow:scroll 以滚动条显示
4.overflow:auto 超出会以滚动条显示

（3）定位
position属性设置元素定位类型
1.position:relative 生成相对定位元素,占位
2.position:absolute 生成绝对定位元素，不占位，浏览器参照
3.position:fixed 生成固定定位元素，不占位，相对浏览器，固定不动。

<!-- 定位：绝对定位和相对定位配合使用：子级绝对定位  父级相对定位 -->
<!-- 绝对定位：默认以浏览器为参照物，但是父级是已经定位的，就以这个父级为参照物定位 -->
<!-- 默认情况下，定位是后来者居上 -->
偏移：使用left/right/top/bottom, z-index 设置元素层级

(4)页面嵌套

    <iframe src="#" class="" name=""></iframe>

web前端之html+css基础