HTML+CSS知识点总结

HTML+CSS

head标签

<!--meta标签，设置字符集统一为UTF-8-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >

<!--meta标签，设置关键字name="keywords"-->
<meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯">

<!--meta标签，设置网站描述name="discriptions"-->
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等。">

<!--标题 title-->
<title>新浪首页</title>

<!--设置所有页面在另一个页面打开 base-->
<base target="_blank" />

<!--link 链接 引入css文件或者网站标题前面的logo-->
<link rel="stylesheet" href="index.css" />
<link rel="shortcut icon" href="favicon.ico">

<!--script标签 引入外面的js文件-->
<script charset="utf-8" src="index.js"></script>

body标签

h标题

<!--h1 h2 h3 h4 h5 h6 字体大小依次减少，重要性依次减少,h1整个页面只能有1个-->

p段落

<!--可以自动换行，并且有默认的字体和行高，需要单独设置字体和行高-->

br换行

<!--不需要闭合标签，直接在后面加一个斜杠就可以了-->
<br/>

字体变化

<!--删除线-->
<del></del> <b></b>

<!--下划线-->
<ins></ins> <u></u>

<!--加粗-->
<strong></strong> <b></b>

<!--倾斜-->
<em></em> <i></i>

img图片标签

<!--img标签的 alt图片不加载时显示的文字 title鼠标移入时显示的文字-->
<img src="http://n.sinaimg.cn/news/20170310/Dxru-fychhvn8123135.jpg" alt="美女" title="这个是美女" />

a超链接

<!--超链接可以链接其他页面，也可以链接本页面，还可以上一次操作,点击后默认替换本网址-->
_blank（新打开一个浏览器），_self（在当前窗口打开一个链接,这个是默认情况）
<a target="_blank" href="index.html" />
<a href="#main" />
<a href="javascript:void(0)"></a>
<a href="javascript:history.back();"></a>

列表

<!--无序列表-->
<ul>
    <li></li>
    <li></li>
</ul>

<!--有序列表-->
<ol>
    <li></li>
    <li></li>
</ol>

<!--自定义列表-->
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

<!--清除左边列表小圆点样式-->
list-style: none;

<!--列表前面小图标-->
list-style: url(路径);

<!--ul不换行显示-->
white-space: nowrap;

table表格

<table width="600px" height="150px" cellspacing="0" border="1px" cellpadding="20px" >
    <caption><h3>前端学生成绩表</h3></caption>
    <thead>
        <tr >
            <th>姓名</th>
            <th>性别</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td>石顺麟</td>
            <td>男</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

<!--合并同列单元格 row行-->
<td rowspan="2">书籍</td> 

<!--合并同行单元格 col列-->
<td colspan="2">书籍</td> 

form标签

<!--text文本框 password密码框 hidden隐藏域 radio单选框 checkbox复选框 button按钮-->
<!--reset重置 image图片按钮 submit提交 disabled="disabled"表单失效-->
<form action="">
    昵称：<input type="text" value="请输入昵称"> <br/><br/>
    密码：<input type="password" > 
          <input type="hidden" name=""  value="" >  <br/><br/>
    性别：<input type="radio" name="gender">男 
          <input type="radio" name="gender" checked="checked">女 <br/><br/>
    学科：<input type="radio" name="xueKe">java
          <input type="radio" name="xueKe" checked="checked">前端
          <input type="radio" name="xueKe">iOS  <br/><br/>
    爱好：<input type="checkbox" name="aiHao">游泳
          <input type="checkbox" name="aiHao">爬山
          <input type="checkbox" name="aiHao" checked="checked">羽毛球 <br/><br/>
  喜爱的食物：<input type="checkbox" name="food">鸡腿
             <input type="checkbox" name="food" checked="checked">牛排
             <input type="checkbox" name="food" checked="checked">烤全羊 <br/><br/>
    生日：<select name="" id="">
            <option value="">1990</option>
            <option value="">1991</option>
            <option value="">1992</option>
            <option value="">1993</option>
            <option value="1994" selected="selected">1994</option>
          </select>年 
          <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="" selected="selected">3</option>
            <option value="">4</option>
            <option value="">5</option>
          </select>月 
          <select name="" id="">
            <option value="">11</option>
            <option value="">12</option>
            <option value="">13</option>
            <option value="" selected="selected">14</option>
            <option value="">15</option>
          </select>日 <br/><br/> 
    简介：<textarea name="" id="" cols="10" rows="5"></textarea>       

          <br/><br/>
          <input type="button" value="登录"> 
          <input type="reset" >
          <input type="image" src="hm.bmp">
          <input type="submit" value="注册">
</form>

自定义单选框和复选框样式

• 由于安卓和ios默认样式都不一样，所有这时候我们要重新定义了

自定义单选框的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单选框和复选框自定义</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            box-sizing: border-box;
            outline: none;
        }
        .box {
            width: 100%;
            height: 50px;
            text-align: center;
        }
        input {
            display: none;
        }
        label {
            width: 100%;
            height: 100%;
            display: inline-block;
            position: relative;
            line-height: 50px;
            color: #999;
        }
        label:active {
            background: #EEEEEE;
        }
        label:after {
            content: "";
            /*必须设置*/
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid green;
            position: absolute;
            top: 15px;
            left: 15px;
            border-radius: 20px;
        }
        input:checked+label:after {
            background-color: green;
        }
        .line {
            width: 100%;
            height: 1px;
            background: #ccc;
            opacity: 0.2;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">选项一</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio" id="radio2" name="radio" /><label for="radio2">选项二</label>
    </div>
</body>

</html>

自定义复选框样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单选框和复选框自定义</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            box-sizing: border-box;
            outline: none;
        }
        .box {
            width: 100%;
            height: 50px;
        }
        input {
            display: none;
        }
        label {
            width: 100%;
            height: 50px;
            display: inline-block;
            line-height: 50px;
            position: relative;
            text-align: center;
        }
        label:active {
            background: #EEEEEE;
        }
        label:after {
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid green;
            border-radius: 20px;
            display: inline-block;
            position: absolute;
            top: 15px;
            left: 15px;
        }
        input:checked+label:after {
            background-color: green;
        }
        .line {
            width: 100%;
            height: 1px;
            background: #CCCCCC;
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="checkbox" id="checkbox1" /><label for="checkbox1">选项一</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="checkbox" id="checkbox2" /><label for="checkbox2">选项二</label>
    </div>
</body>

</html>

特殊字符

<!--空格-->
&nbsp;

<!--小于号 < -->
&lt;

<!--大于号 > -->
&gt;

<!--和号 & -->
&amp;

<!--平方2 -->
&sup2;

<!--立方3 -->
&sup3;

display元素的显示

<!--块级元素 display:block; 可以设置宽高，并独占一行-->
<!-- p,h1-h6,div,ul,li,ol,li,dl,dt,dd -->

<!--行内元素 display:inline; 无法设置宽高，不会独占一行-->
<!--不能设置margin-top(bottom)和padding-top(bottom),但是可以设置margin-left(right)和padding-left(right)
<!-- a,span,b,u,i,s,strong,em,ins,del -->

<!--行内块级元素 display:inline-block,内元素之间,可以设置宽高，不会独占一行-->
<!-- img,input -->

<!--隐藏元素 display:none-->

font字体

/**字体连写**/
font: font-style font-weight font-size/line-height  font-family;

/**颜色 color**/
color:blue; /**black黑色 white白色 skyblue蓝色 skyblue天蓝 red红色 green绿色 pink粉色 purple紫色*/
color:#666666;
color:rgba(140,120,23,0.5);

/**字体样式 normal默认 italic斜体*/
font-style:normal;
font-style:italic;

/**字体粗细 normal默认 bold粗体 100-900**/
font-weight:normal;
font-weight:bold;
font-weight:100;

/**字体大小**/
font-size:12px;

/**字体格式 **/
font-family:"SimSun","SimHei","Microsoft YaHei";
/**宋体SimSun 黑体SimHei 微软雅黑Microsoft YaHei 微软正黑体Microsoft JhengHei**/
/**新宋体NSimSun 新细明体PMingLiU 细明体MingLiU 标楷体DFKai-SB**/
/**仿宋FangSong 楷体KaiTi 幼圆YouYuan 华文细黑STXihei**/

/**单词之间的间距**/
word-spacing:12px; //字母字母之间
letter-spacing:12px; //中文字体之间

/**大小写 capitalize首字母大写 uppercase大写 lowercase小写**/
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;

text字体

/**行高 line-height行高，行高和图层高度一致可以文本垂直居中**/
line-height:24px;

/**文本对齐方式 text-align文本对齐方式 center left right**/
text-align:center;

/**缩进文本首行 text-indent**/
text-indent:24px;
text-indent:2rem  /*首行缩进2个文字*/

/**文本下划线 text-decoration none默认 underline文本下划线 overline文本上的一条线 line-through穿过文本的一条线**/
text-decoration:none;  /*默认*/
text-decoration:underline   /*文本下划线*/
text-decoration:overline    /*文本上划线*/
text-decoration:line-through    /*穿过文本的一条线*/

/** letter-spacing是字体间距**/
div{
  letter-spacing:12px //字体间距12px
}

background背景

/**背景连写**/
background: #00FF00 url(bgimage.gif) no-repeat center top;

/**背景颜色 background-color**/
background-color:yellow;
background-color: transparent  /**背景颜色透明**/

/**背景图片 background-image**/
background-image: url(bgimage.gif);

/**背景图像重复 background-repeat no-repeat不重复 repeat-x **/
background-repeat:repeat;
background-repeat:no-repeat;
background-repeat:repeat-x;

/**规定背景图像的位置 background-position**/
background-position:10px 10px;
background-position:center center;

/*设置背景图片大小*/
background-size:200px 200px;

精灵图

//精灵图就是为了减少图片请求，把小图标都集合在一起

padding内边距

/**内边距 padding top right bottom left 遵循上右下左**/
padding:10px 5px 35px 20px;

border边框

/**边框border  solid实线 dashed虚线 dotted点线 none清除边框 border-radius圆角边框**/
border:1px solid #blue;
border:1px solid transparent;
border-radius:50%;

maging外边距

/**外边距 margin auto居中**/
margin:10px 10px 10px 10px;
margin:0 auto;

/*块级元素水平垂直居中*/
margin:0 auto;

/*合并现象*/
/*两个盒子上面盒子设置margin-bottom下面设置margin-top会有合并现象，会显示最大的像素*/

/*塌陷现象*/
/*如果大盒子中没有设置border，里面的盒子设置margin-top，大盒子跟着下面走*/
/*第一个方法 设置超出内容隐藏*/
overflow:hidden;
/*第二种方法 设置透明的border*/
border:1px solid transparent;
/*第三种放 设置浮动*/
float:left;
float:right;

float浮动

/**浮动 left right clear:both清除浮动**/
flost:left;
clear:both /**清除浮动**/

/**伪元素清除浮动**/
.clearfix:after {
    content: "";/*添加内容为空*/
    height: 0;/*内容高度为0*/
    line-height: 0;/*内容文本的高度为0*/
    display: block;/*将文本设置为块级元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*将元素隐藏*/
}
.clearfix {
    zoom: 1;/*为了兼容ie6*/
}

position定位

/**positon定位 relative相对定位 absolute绝对对位 fix固定定位 子绝父相**/

/**相对定位 relative 在原来的盒子位置偏移，没有脱离标准流**/
position:relative;
left:10px;
top:10px;

/**绝对定位 父盒子没有定位，在向上找，没有找到就是浏览器的**/
position:absolute;
left:10px;
top:10px;

/**固定定位 以浏览器作为标准定位**/
position:absolute;
left:10px;
top:10px;

/**子绝父相定位 图片水平垂直居中**/

/*第一种情况 子盒子和父盒子宽高不确定*/
.father{
  positon:relative;
}
.son{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin:auto;
}

/**第二种情况 子盒子宽度固定父盒子宽度不定**/
#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位relative
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

/**第三种情况 用 flex 弹性布局**/
.father{
    display:flex;   /*弹性布局模式*/
    justify-content:center; /*主轴居中有 flex-start flex-end center space-between space-around*/
    align-items:center; /*测轴居中有 flex-start flex-end center stretch*/
}

vertical-align对齐

/**vertical-align垂直对齐方式 针对行内元素和行内块元素 top middle bottom**/
vertical-align:top;
vertical-align:middle;

overflow溢出

/**overflow hidden超出隐藏 auto超出有滚动条 scroll直接有滚动条**/
overflow:hidden;
overflow:auto;
overflow:scroll;

锚伪类

/**link鼠标未访问的链接 a:link**/
a:link {color: #FF0000;} 

/**visited鼠标访问的链接**/
a:visited {color: #00FF00;}

/**当鼠标移入的时候，a链接和盒子都可以**/
a:hover {color: #FF00FF}
div:hover {color: #FF00FF}

/**鼠标点击没有放手的时候 a链接和盒子都可以**/
a:hover {color: #0000FF;}
div:hover{color: #0000FF;}

文本超出加省略号

/*设置单行文字如果超出用省略号表示 text1放在当前文字的盒子中*/
.text1{
width: 200px;
overflow: hidden; /*超出的隐藏*/
white-space: nowrap;
text-overflow:ellipsis; /*超出的设置为省略号*/
}

/*超出2行用省略号表示 text2放在当前文字的盒子中*/
.text2 {
 word-break:break-all;
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}

z轴定位方向

/**z轴 z-index 需要定位才有效，没有定位是无效的**/
position:absolute;
z-index:100;

opacity不透明度

/**opacity会把盒子的所有元素添加不透明度**/
opacity: 0.5;   /*设置半透明效果  0-1.0之间*/
filter: Alpha(opacity:50);   /*设置半透明效果，兼容IE6 1-100之间*/

/**rgba只是单独的设置不透明度**/
background-color:rgba(230,230,230,0.5);

css编辑顺序

/**实例化和位置 宽 高 背景颜色 边框 定位**/

cursor移入增加图标

/**增加小手图标**/
cursor:pointer;

/**增加十字箭头图标**/
cursor: move;

/**增加禁用图标**/
cursor: not-allowed;

常用名称

/**页面结构**/
/***
container容器 header页头 content内容 main页面主体 footer页尾 nav导航 sidebar测栏 column栏目
wrapper页面外围控制整体布局宽度 left center right左中右 fl fr左右浮动 clearfix清除浮动带来的影响(父盒子设置)
**/

/**导航**/
/**
mainbav主导航 subnav子导航 topnav顶导航 sidebar边导航 leftsidebar左导航 rightsidebar右导航
menu菜单 submenu子菜单 title标题 summary摘要 path路径
**/

/**模块化命名**/
/**
hd模块头部 bd模块内容部分 ft模块底部
**/

/**个内容页对应**/
/**
title标题 subtitle副标题 properties属性 infor简介 content内容 page分页 insert_ad插入广告
expression表情 options功能选项 up_down上下篇 comments评论 related相关内容 download下载地址 play_add播放地址
**/

/**功能**/
/**
logo标志 banner广告 login登录 loginbar登录条 regsiter注册 search搜索 date日期 shop功能区
title标题 joinus加入 status状态 btn按钮 scroll滚动 tab标签页 list文章列表 msg提示信息
current当前的 tips小技巧 icon图标 note注释 guild指南 service服务 hot热点 news新闻 download下载 vote投票 partner合作伙伴 link友情链接 copyright版权
**/