HTML

 

         标签

 标题标签 <h1---h6> h1 字号最大 h6 字号最小

 段落标签 <p>--</p>

 换行标签 <br/>

 字体加粗标签 <strong>---</strong>

 字体倾斜标签 <em>---</em>

        特殊符号

 空格 &bnsp;

 小于号 &lt;

 大于号 &gt;

 引号 &quot;

 版权符号 &copy;

        图像标签的基本语法

 <img src=“图片地址”alt=“图像无法显示时的替代文字”title=“鼠标悬停文字”

 width=“图片宽度”height=“图片高度”/>

        超链接

 基本用法 <a href=“链接的地址”target=“从哪个窗口打开”>链接的文字或图像说明</a>

     图像链接 <a href=“链接的地址”tarret=“从哪个窗口打开”><img src=“路径”alt=“”</a>

     文本链接 <a href=“链接的地址”tarret=“从哪个窗口打开”>文字说明</a>

   页面间链接

   锚链接

     <a name=“锚点”>目标</a>

     <a href=“#锚点”>链接内容</a>

   功能性链接   （电子邮件，qq MSN）

       列表

   有序列表  <ol type=“样式”>

              <li>第一项</li>

              <li>第二项</li>

              <li>第三项</li>

          </ol>

  

   无序列表   <ul>  

              <li>第一项</li>

              <li>第二项</li>

              </ul> 

 

   自定义列表    <dl>

                 <dt>标题一<dt>

                 <dd>第一项</dd>

                 <dd>第二项</dd>

                 <dt>标题二</dt>

                 <dd>第一项</dd>

                 <dd>第二项</dd>

              </dl>

       创建表格     (<table>标签的border边框属性，指定边框的宽度。）

              <table>

                  <tr>

                   <th>1行1列标题</th>

                     <th>1行2列标题</th>

                     <th>1行3列标题</th>

                  </th>

                <tr>

                      <td>1行1列的单元格</td>

                     <td>…………</td>

                 </tr>

              </table>

  表格跨列

     <table>

        <tr>

          <td colspan=“所跨的列数”>单元格内容</td>

        </tr>

     </table>

  表格跨行

     <table>

        <tr>

          <td rowspan=“所跨的行数”>单元格内容</td>

        </tr>

     </table>

   video 的用法      

       <videosrc=“视频路径” contorls=“提供一些按钮”></video>

      

       <video controls> autoplay(自由播放)

              <sourcesrc=“video/video.wem”>

              <sourcesrc=“video/video.mp4”>

       </video>

   audio 的用法

        <aideo controls> autoplay(自由播放)

              <sourcesrc=“aideo/aideo.ogg”>

              <sourcesrc=“aideo/aideo.mp3”>

       </audio>

  HTML的结构元素

       <header>

           网页头部                     article(独立的文章部分)

                                   aside(相关内容用于侧边栏)

                                   nav(导航辅助内容)

       </header>

       <section>

           网页主体部

       </section>

       <footer>

           网页底部

       </footer>

   <iframe> 框架

    <iframe src=“引用页面地址” name=“mo” width=“宽”hight=“高”/>

    <a href=“引用另一页面地址” target=“mo”>……</iframe>

       表单

   <form method=“提交方式”action=“提交地址”>

     姓名：<input type=“text” name=“gan”/>

     密码：<input type=“possword” name=“pass” />

 单选按钮（radio）              value=“男”checked/>男    (checked 默认选项)

 <input type=“radio”name=“gan”value=“男”/>男 

 <input type=“radio”name=“gan” value=“女”/>女

 复选按钮  (checked)

 <input type=“checkbox”name=“gan”value=“sports”>运动/>

 提交按钮 

   提交到指定的URL

   <input type=“submit”name=“”value=“提交”/>

   <input type=“image”src=“”/>

   普通提交

   <input type=“button”name=“”value=“提交”/>

 

 重置按钮  (reset)

  <input type=“reset”name=“”value=“重置”/>

 邮箱  （email）

  <input type=“email”name=“”/> 

 网址  (url)

  <input type=“url”name=“”/>

 数字（number）

  <input type=“number”name=“”min=“最小值”max=“最大值”step=“数字间隔”/>

 滑块  （range） 

  <input type=“range”name=“”min=“最小值”max=“最大值”step=“数字间隔”/>

 搜索框  （search）

  <input type=“search”name=“”/>

 隐藏域  （hidden）

   <input type=“hidden”value=“”name=“”/>

 列表框 （select）(selected 属于该选项默认值)

  <select name=“列表名称”size=“行数”>

  <option value=“可选项的值”>内容</option>

  <option value=“ ”selected>……</option>

  </select>

 文本域（file  用于上传的操作，文件，图片等）

   <form method=“提交方式”action=“引用地址”enctype=“multipart/form-data”>

   <input type=“file”name=“ ”/>

   <input type=“snbmit”name=“”valu=“上传”/>

   </form>

 多行文本域  （textarea）

   <textarea name=“”cols=“显示的列数”rows=“显示的行数”

     文本内容

   </textarea>

 readonly 只读    disabled 禁用

      表单初级验方法

  一种提示（pleceholder）

   <input type=“ ”name=“”placeholder=“提示内容”/>

  内容不能为空  (required)

   <input type=“” name=“”required/>

  是否与自定义的正则表达式相匹配（pattern）

   <input type=“”name=“”required pattern=“表达式”

   \s 任意的空白符号

   \S 非任意的空白符号

 

   \d 任意的一个数字符号，等价于【0-9】

   \D 任意的一个非数字符号，等价于【^0-9】

 

   \w 匹配一个数字、下划线或符号，等价于【a-z A-Z】

   \W 匹配一个非个字符号，等价于【^a-z A-Z】

   

    .除了换行符号之外的任意符号

 

  {n} 匹配前一项N次

   {n，m} 匹配前一项至少n次，至多m次

   * 匹配前一项0次或者多次

   + 匹配前一项1次或者多次

   ？匹配前一项0次或者1次

css的基本语法结构

 （选择器）h1{（属性）font-size:（值）12px;

     color:red;

          }

 <style>

在html中直接写

 

 

  引入css样式的方法：

     行内样式：（直接使用style属性设置css样式）

      <p style=“font-size：14px； color：green；”>直接在html标签中设置样式</p>

     内部样式表：（把css代码写在<head>的<style>标签中，与html内容在同一个文件中。）

     外部样式表：

      一：链接外部样式表

              <head>    rel(指的是页面中使用这个外接样式表)   type(文件类型是样式表)

                <link href=“引用文件所在位置”rel=“stylesheet”type=“text/css”/>

              </head>

      二：导入外部样式表

              <style>    @import（表示导入文件）

                @import url(样式文件所在位置) 

              </style>

      样式优先级：行内样式>内部样式表>外部样式表

     基本选择器

       1.标签选择器

              p{font-size：16px；}

       2.类选择器

              .gan{font-size:16px;}     class=“gan”

              (类名称）

       3.ID选择器

              #gan{font-size:16px;}      id=“gan”

              (id名称)

       选择器优先级：ID选择器>class类选择器>标签选择器

     高级选择器

       层次

            后代选择器             E F （所有E元素后代中的F元素被选中）

             子选择器                  E>F  (E元素的下一代F元素被选中)

             相邻兄弟选择器           E+F （E元素相邻的后一个元素F元素被选中）

             通用兄弟选择器           E~F  （E元素后的所有兄弟被选中）

         2.结构伪类选择器

            E：first-child              父元素的第一个子元素E

            E：last-child       父元素的最后一个子元素E

            E F：nth-child（n）          父元素的第n个子元素F      

          根据类型

            E：first-of-type          父元素中具有指定类型的第一个元素E

            E：last-of-type          父元素中具有指定类型的最后一个元素E

            E F：nth-of-type       父元素中具有指定类型的第n个元素F

       3.属性选择器

            E【attr】                    选择具有属性attr的

            E【attr=val】             选择属性attr=val属性值的必须一致

            E【attr^=val】             以属性值val开头的

            E【attr$=val】             以属性值val结尾的

            E【attr*=val】     字符串val与属性值中的任意位置先匹配

 

       五、美化页面

  1.设置字体类型     font-family   

       font-family：隶书；

  2.设置字体大小     font-size

       font-size：12px；

 3 设置字体风格     font-style   

                     normal（标准）  italic（斜体字体样式） oblique（倾斜字体样式）

       font-style：italic；

 4 设置字体粗细     font-weight 

                     normal（标准 400） bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）

       font-weight：bolder；

 5 字体属性（顺序   风格-粗细-大小-类型）

    网页文本

 1. 设置文本颜色     color

 2. 设置水平对齐方式   text-align

       left（排列在左侧，默认值）right（排列在右边）

              center（排列在中间）justify（实现两端对齐文本效果）

 3. 首行缩进       text-indent

  4.文本行高      line-height

  5.文本的装饰         text-decoration

       none（默认值）underline（文本下划线）overline（文本上划线）

              line-through（文本删除线）

  6.垂直对齐方式     vertical-align

                     （设置文本于图片的居中对齐，此时的值为middle）

  7.文本阴影       test-shodow可叠加

     test-shodow：color x轴位移（x-offset） y轴位移（y-offset）模糊半径（blur-radiu）

  超链接伪类

     a：link    单击访问前的超链接样式

     a：visited 点击访问后的超链接样式

     a：hover   鼠标悬浮超链接样式

     a：active  点击未释放超链接样式

列表样式

List-style-type:none\disc\circle\square\decimal

简写：list-style表示全部

背景样式

一、背景属性

1.    背景颜色：background-color

2.    背景图像：background-image

1.> 背景图像

2.> 背景重复方式：backgrond-repeat：

（1）    repeat

（2）    no-repeat

（3）    repeat-x

（4）    repeat-y

3.    背景定位：background-position{

12px 12px; -12px  -12px;

30% 60%;  80% 50%;

right top;~

}

背景的简写方式：

position: #c00 url() 205px 50px no-repeaet;

4.    背景尺寸：

1.> auto默认，原样

2.> percentage百分数

3.> contain图片正好适应自定义的辈子背景区域

4.> cover放大填充

5.    CSS渐变

1.> 线性渐变linear-gradient(totop,red,green);

2.> 径向渐变redial-gradient(……)；

 

第六章---盒子模型

一、盒子模型

              1、边框

                                     1.>border-color:上右下左、上下左右、上 左右 下

                                     2.>border-width：同上

                                     3.>border-style:  none;hidden;dotted;dashed;solid;double;……

                             简写方式：eg:border:1px solid black;

                              2、内边距-padding

                              3、外边距-margin

                                               设置方法：上右下左、上下左右、上 左右 下

                

                            使用margin：0auto；的条件：1.块元素 2.设置了固定宽度

二、盒子尺寸：border-box:内容的宽度或高度content：border+padding+margin+height/width

三、圆角边框：border-radius上右下左、上下左右、两对角

1>     圆形：块元素、宽高一致、圆角半径为宽高一半或50%

2>     半圆形：eg：上半圆border-radius：50%50% 0 0 ；同理

3>     扇形：亦是如此，border-radius：50% 0 0 0 ；三同一不同：宽高圆角半径一致；取值不同

四、盒子阴影：box-shadow：10px 10px 10px #06c;   box-shadow: inset 10px 10px10px #06c;

 

第七章、浮动
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列
display （html标签的显示方式）
block （块级元素，该元素前后会带有 换位符） 
inline （行内元素，该元素前后没有 换位符）
inline-block （行内块元素，该元素既具有行内元素的特性，也具有块元素的特性）
(可以让元素排在一行，并且支持宽度和高度，添加该属性在标准文档流中，不需要清楚浮动）
none （该元素不会被显示）
浮动：脱离文档流并向左/向右浮动，知道碰到父元素或另一个浮动元素
float 属性定义网页元素在哪个方向浮动。（可以让元素排在一行，并且支持宽度和高度，可以决定排列方向）
left（左） fight（右） none（默认值 不浮动）
清除浮动 （clear属性）
left（在左侧不允许浮动元素）
right（在右侧不允许浮动元素）
both（在左，右两侧不允许出现浮动元素）
none（默认值允许浮动元素出现在两侧）
解决父级边框塌陷的方法
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overf属性
（visible 默认值，内容不会修剪，会呈现在盒子外）
（hidden 内容会修剪，其余内容不可见）
（scroll 内容会修剪，浏览器会显示滚动条 ）
（auto 内容会修剪，当内容溢出的高度时才会显示滚动条，底部的滚动条只有在x方向出现内容溢出时，才会显示）
4.父级添加伪类after
eg. .a：after{ content：“”；}/*在clear类后面添加内容为空/*