(1). html 超文本标记语言

基本作用:搭建页面骨架

(2). css 层叠样式表

基本作用:美化页面,提升用户交互程度

(3). javaScript 浏览器脚本语言

基本作用:实现基于客户端,流程控制的脚本

html 主要由标签(标记)组成

标签:

语法:<标签名>

标签种类

1.单标签:由一个标签组成,标签内不能存放其他子标签
    <标签名 [属性1= “”,属性2 = “”] />
2.双标签:
    开始标签   结束标签
    <标签名>   内容 </标签名>
例子:<html>  <html> </html>  </html>

相对路径:

从本文件出发到达其他文件的路径

绝对路径

服务器或电脑的文件全路径

网络路径

其他网络链接路径

标签

<p>…………</p>   <!--段落标签,文字会独占一行-->
        <i>…………</i>   <!--斜体-->
        <b>…………</b>   <!--加粗-->
        <em>          <!--斜体-->
        <small>小字体</small> <!--细题-->
        <sup>上提</sup>       <!--上提-->
        <sub>下沉</sub>       <!--下沉-->
        <blockquote>引用</blockquote>   <!--引用-->
        <q>引用</q>                     <!--标记短的引用-->
        <br> <!--换  行-->
        <hr> <!--水平线-->
        <textarea></textarea> <!--文本域 可拖动-->
        <a href=""target="_blank">…………</a>    
        <!--超链接--><!--target:目标 _balnk:新窗口-->
        <img src=""height="1PX" width=:1PX:> 
        <!--图片-->  <!--height:高度 width:宽度-->        
        <!-- pre 预先格式化文本  不会转移部分字符 -->
        <!-- tt 打字机风格 -->
        <!-- cite 斜体  -->
        <!-- strong 加粗 -->
        <!-- font 字体规格 size color-->
        <!-- big字体加大 -->
        <!-- nobr 强行不换行    ->

列表

<!--无序列表-->                               <!--有序列表-->
<ul>                                         <ol>
    <li>                                          <li>
        列表项目                                       列表项目
    </li>                                         </li>
</ul>                                        </ol>

表格

<table border="1px" cellspaccing="0">          <!--表格-->
           <tr>                                        <!--行-->
                <td width="宽度" align="对齐方式">      <!--单元格--> <!--当td改为th时 文字居中加粗-->
                </td>
           </tr>
        </table>
<!--border:边框 cellspaccing:单元格间隙--> <border-radius:圆角>
<col> <!--代表一列--> 

 实战: <col width="20px">   <!--表格第一列宽度20px-->
  
<!--当单元格列较多时,可用colgroup(分组)代替--> 

 实战:<colgroup span="6" width="20px">  <!--将六列设为一个组,统一宽度20px-->

<colspan> <!--单元格横跨的列数-->  实战: <td colspan="3"> <!--合并后三个单元格-->
<rowspan> <!--单元格横跨的行数-->  实战:<td rowspan="3"> <!--合并向下三行单元格-->
<caption>个人</caption> <!--表格标题-->
border-spacing:0:边框与边框之间的距离
border-collapse:collapse边框合并
tr:nth-child() 具体值 2n odd even隔行换色(odd单数变色,even双数变色,数值n:)
tr:hover:鼠标悬浮换色

表单

button 按钮   type属性

    <input type="text" name="密码" id="密码" value="请输入密码" />
    <!--input:表单 type:选择类型 value:显示的文字-->
    <for action="地址" method="get/post">  <!--submit:提交--> 
    placeholder <!--显示的文字-->
    <select>
        <option>摩羯座</option>
        <option>白羊座</option>
    </select>

Get与Post区别

1.Get通常表示获取数据
2.Post通常表示提交表单
3.Get请求发送的数据都在地址栏用户可见
4.Post请求发送的数据用户不可见
5.Get请求不能提交大量数据,而Post可以,可以混用但不建议混用。

美化:

<span> </span>  <!--容器标签--> 实战: <span style="color:#000000">
<div> </div>  <!--div容器标签-->  <font-size:字体大小>
实战: <div margin:auto; width="400px">div容器居中</div>   <!--margin:边距 auto:自动-->
outline:none   <!--input 外部黑框 -->

字体

font-family    <!--字体类型-->
 font-family:   <!--设置字体样式--> 
 letter-spacing <!--设置字符间距--> 
 word-spacing   <!--设置字间距--> 
 text-indent    <!--文本首行缩进--> 
 line-height    <!--设置行高--> 
 font-weight    <!--字体粗细--> 
 opacity:0~1;   <!--字体透明度0全透明,1不透明-->

font-style

font-style:CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。
normal
    选择 font-family 的常规字体。
italic
    选择斜体,如果当前字体没有可用的斜体版本,会选用倾斜体(oblique )替代。
oblique
    选择倾斜体,如果当前字体没有可用的倾斜体版本,会选用斜体(italic )替代。

overflow

overflow:CSS属性 overflow定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。

    /* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
    /* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;
 /* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
    /* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;
     /* 规定从父元素继承overflow属性的值 */
overflow: inherit;

text-shadow(文字阴影)

语法:
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 1px 1px 2px black;

-webkit-text-stroke(字体描边)

语法:

/* 宽度和颜色属性 */
-webkit-text-stroke: 4px navy;

cursor(光标样式)

<table border='1'>
    <tr>
        <th>值</th>
        <th>描述</th>
    </tr>

    <tr>
        <td><i>url</i></td>
        <td>
            <p>需使用的自定义光标的 URL。</p>
            <p>注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。</p>
        </td>
    </tr>

    <tr>
        <td>default</td>
        <td>默认光标(通常是一个箭头)</td>
    </tr>

    <tr>
        <td>auto</td>
        <td>默认。浏览器设置的光标。</td>
    </tr>

    <tr>
        <td>crosshair</td>
        <td>光标呈现为十字线。</td>
    </tr>

    <tr>
        <td>pointer</td>
        <td>光标呈现为指示链接的指针(一只手)</td>
    </tr>

    <tr>
        <td>move</td>
        <td>此光标指示某对象可被移动。</td>
    </tr>

    <tr>
        <td>e-resize</td>
        <td>此光标指示矩形框的边缘可被向右(东)移动。</td>
    </tr>

    <tr>
        <td>ne-resize</td>
        <td>此光标指示矩形框的边缘可被向上及向右移动(北/东)。</td>
    </tr>

    <tr>
        <td>nw-resize</td>
        <td>此光标指示矩形框的边缘可被向上及向左移动(北/西)。</td>
    </tr>

    <tr>
        <td>n-resize</td>
        <td>此光标指示矩形框的边缘可被向上(北)移动。</td>
    </tr>

    <tr>
        <td>se-resize</td>
        <td>此光标指示矩形框的边缘可被向下及向右移动(南/东)。</td>
    </tr>

    <tr>
        <td>sw-resize</td>
        <td>此光标指示矩形框的边缘可被向下及向左移动(南/西)。</td>
    </tr>

    <tr>
        <td>s-resize</td>
        <td>此光标指示矩形框的边缘可被向下移动(南)。</td>
    </tr>

    <tr>
        <td>w-resize</td>
        <td>此光标指示矩形框的边缘可被向左移动(西)。</td>
    </tr>

    <tr>
        <td>text</td>
        <td>此光标指示文本。</td>
    </tr>

    <tr>
        <td>wait</td>
        <td>此光标指示程序正忙(通常是一只表或沙漏)。</td>
    </tr>

    <tr>
        <td>help</td>
        <td>此光标指示可用的帮助(通常是一个问号或一个气球)。</td>
    </tr>
</table>

background(背景)

background-color (背景颜色)

background-color:#545454;

background-image (背景图片)

background-image:url(../XXX/ico.jpg);

background-repeat(背景平铺方式)

background-repeat: repeat-x;    //x轴方向平铺
    background-repeat: repeat-y;    //Y轴方向平铺
    background-repeat: repeat;      //默认样式
    background-repeat: no-repeat;   //不平铺

background-size(背景图片大小)

/* 关键字 */
    background-size: cover
    background-size: contain
    
    /* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
    background-size: 50%
    background-size: 3em
    background-size: 12px
    background-size: auto
    
    /* 两个值 */
    /* 第一个值指定图片的宽度,第二个值指定图片的高度 */
    background-size: 50% auto
    background-size: 3em 25%
    background-size: auto 6px
    background-size: auto auto
    
    /* 逗号分隔的多个值:设置多重背景 */
    background-size: auto, auto     /* 不同于background-size: auto auto */
    background-size: 50%, 25%, 25%
    background-size: 6px, auto, contain
    
    /* 全局属性 */
    background-size: inherit;
    background-size: initial;

background-size: unset;

CSS规则

样式优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器
<...style="...">  #box{...}  .con{...}  div{...}    *{...}

组合选择器

子元素选择器:

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写: 
    h1 > strong {color:red;}

父元素选择器:

属性选择器

盒子模型

border  边框
    dotted  点状
    solid   实线
    double  双线
    dashed  虚线
margin  外边距
padding 内边距

display

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)

弹性布局

CSS简写

background <背景>

background-color  /*背景色*/
background-image  /*背景图片*/
background-repeat /*背景图平铺方式*/

集合写法:

background:color <颜色默认黑色> url(xxx/xx.png) <背景图> no-repeat; <平铺方式>

border <边框>

border-width /*边框宽度*/
border-style /*边框样式*/
border-color /*边框颜色*/

集合写法:

border: 1px <边框宽度必有> solid <边框样式必有> #FFFFFF <边框颜色默认黑色>

font <字体>

font-style: italic; /*斜体*/
font-weight:bold;  /*字体宽度*/
font-family:宋体;  /*字体样式*/
font-size: 20px    /*字号*/
font-height:35px  /*行高*/

集合写法:

font:italic bold 20px/35px 宋体,黑体

margin<边缘> padding<填充>

margin/padding-top 
margin/padding-right
margin/padding-bottom
margin/padding-left

集合写法:

margin/padding:10px <top> 11px <right> 12px <bottom> 13px <left>
margin/padding: 10px <top>  15px <right left>  20px <bottom>
margin/padding: 10px <top bottom> 15px <left right>

color <颜色>

color: red;
color:rgb(125,138,11)
color:#DEDEE4

过度动画 :

transition

语法

transition: property duration timing-function delay;
值                                       描述
    transition-property              规定设置过渡效果的 CSS 属性的名称。
    transition-duration              规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function    规定速度效果的速度曲线。
    transition-delay                   定义过渡效果何时开始。
集合写法:
    transition: all 0.5s
Last modification:September 15th, 2020 at 07:08 pm