html&css基础总结

最新推荐文章于 2017-11-23 18:00:37 发布

nzjcnjzx

最新推荐文章于 2017-11-23 18:00:37 发布

阅读量169

点赞数

分类专栏：笔记本推荐

本文链接：https://blog.csdn.net/weixin_40204311/article/details/78244222

版权

笔记本推荐专栏收录该内容

4 篇文章 0 订阅

订阅专栏

总结：
   常用的标签：
       <body>   <head>   <title>
       标题<h1>-<h6>     段落<p>   粗体 <b> 斜体 <i>
       上标<sup> 下标<sub> 换行符<br/> 水平线<hr />
       加粗<strong> <em> 强调斜体 <blockquote>引用
       &nbsp 空格
   列表：
       有序列表：<ol>
                   <li></li>
               </ol>
       无序列表: <ul>
                   <li></li>
               </ul>
       定义列表: <dl>
                   <dt></dt>
                   <dd></dd>
               </dt>
   <a>标签   target=_blank 表示在新的窗口打开默认 self
   <img> 属性 src title alt height width
   图片格式 jpg png gif
   h5中的语义标签<figure><figcaption> 图形和图形说明
   表格<table>
           <tr> 行
                  <th></th>标题
                  <th></th>
                  <th></th>
           </tr>
           <tr>
                  <td></td>单元格
                  <td></td>
                  <td></td>
           </tr>
       </table>
   <td>属性 colspan跨列 rowspan跨行
   长表格 <thead><tbody><tfoot>分别是表头主体表尾
表单
   <form action=">请求地址 method 请求方式:get ,post
       <input type="text"/>文本框
       <input type="password"/>密码框
       <input type="radio"/>单选按钮
       <input type="checkbox"/>复选框属性checked 的值是bool类型
       <input type="file"/>文件上传域
       <input type="submit"/>提交按钮
       <input type="image" src=""／>图像按钮
       <input type="button"/>按钮
       <button><img src="">add</button>
       button可以设置类型为hidden来隐藏表单控件
   </form>
   <select>下拉列表框
       <option></option>
       <option></option>
    </select>
    <textarea></textarea>文本域
    <label>标签<label>
    <fieldset> 组合表单元素
            <legend></legend> 标题
    </fieldset>
    在html5中增加了 type ="email" "url" "date" “search”
         required 属性用来验证表单 placeholder 属性用来显示特性的值
         html中的注释 css /* */      js // /* */
         id 唯一的标示符 class可以有多个
         块级元素独占一行   <p> <ul> <li> <h1> <div>..
         内联元素不能设置宽高 <a> <b> <img><em> <span>..
         <div></div> <span></span> 盒子
         <iframe> 内联框架有属性src width height ...
         <mate>页面信息
         html5 添加视频
         <video src="" width height >
                 preload 自动加载 controls 控制条显示
                 autoplay 自动播放
                 loop 重新播放
                 <source></source>
                 <source></source>
                 可以添加多个源防止浏览器不支持
         <video/>
         添加音频
         <audio src=""> 属性和video类似
         <audio>
        CSS设想元素周围有一个盒子
        CSS选择器：
            通用选择器：*{}
           标签选择器：h1,p,{}
           类选择器: .class{}
           Id选择器: ＃id{}
           子选择器:li>a{}
           后代选择器：p a{}
           相邻兄弟选择器：h1+p{}应用与h1相邻的第一个p
           普通兄弟选择器：h1~p{}应用于h1相邻的多个p
   CSS中规则优先级：
       就近原则：两个选择器相同那么后出现的选择器优先级高
       具体性原则：选择器具体则优先级高 id：100 class：10 标签：1
       重要性：在任意属性值后加!important来强调
         继承：父元素的属性值会被子元素继承
   color 文本的颜色 backgroundcolor背景颜色
   color 有rgb和rgba   opacity指的是透明度0-1
   在css3中用hsl 和 hsla 来表示颜色 h－色调 s－饱和度 l－明度 a －透明度
   字体
       font－family指定的字体   ：Georgia, times,serif:
           font－face 服务器端字体
       font-size : 像素百分数； em值 1em等于一个m的宽度
       字体刻度：
       字体大小单位：
           12像素刻度：
           h1--24px--200%--1.5em
           16像素刻度：
           h1--32px--200%--2em
       @font-face{ 更多字体
                 font-family:
               src:url();
               }
           font-weight---normal --bold 粗体可以为数字100,200,300,...,700,
           font-style--normal--italic--oblique(是文本以倾斜显示)
           text-transform--uppercase--lowercase－－capitalize-分别是大写－小写－每个首字母大写
           text-decoration--none---underline（下划线）-overline（上划线）---line-through（横穿线）---blink(会使文本以动态闪烁)
           line-height－－－行间距－
       通常将盒子的高度和行间距设置为一样可使文本居中显示
       letter-spacing:字母间距
       word-spacing；单词间距（0.25em左右）
       对齐方式：
       text-align--center--right--left--justify--
       vertical-align--top--middle--bottom--
       文本缩进－－text-indent--负值代表像左边缩进-9999px
       投影：text－shadow－－有四个取值－
               －1－向左或右延伸的距离－2－向上或下延伸的距离
               －3－可选值模糊程度－4－投影颜色
       一些伪类：
       :first-letter,:first-line首字母，首行文本
       :link    未访问的链接
       :visited 单机后的链接
       :hover 放在链接上
       :active 正在访问的链接
       :focus 元素拥有焦点的时候
       :after 在元素后添加
   特定选择器：
       p[class]
       p[class="dog"];

盒子的大小：
   width：
   height：
   min-width
   max-width
   min-height
   max-height

内容溢出
   overflow--hidden--scroll--auto--
   这个属性可以用来解决父元素里面只有一个浮动元素的时候父元素的边框会折叠在一起。 widht:100%; overflow:auto;
   margin 外边距
   padding 内边距
   border 边框
让盒子居中
   设置他的marign: 0 auto;
   text-align属性会被子元素继承
内联元素与块级元素的转换
   display---block--inline--inline-block--none
           块级   内联     具有内联属性的块级元素隐藏
           不应该在内联盒子中创建块级元素
   盒子的隐藏
       visibility--hidden--visible--隐藏和可见
       使用visibility盒子隐藏了但是它还是占一个位置
   边框图片－css3
       border-image--url 切割图片的位置   如何处理直边可选值(stretch repeat round)拉伸图片重复图片
       border-image:url("") 11 11 11 11 stretch;
   盒子的投影
       box－shadow--水平偏移－垂直偏移－模糊距离－阴影扩展－－（正右下）
       border－radius－－圆角－椭圆形－可以指定位置如border－top－right