H5基本框架组成

h5的整个框架也和人是有点相同的，他们也有头，身体与脚。
其中头部呢，包含了定义h5页面、定义当前页面编码、网站标题等元素

<!DOCTYPE html>
<!--doctype，定义了当前html代码的版本(H5)，必须放在最前面-->
<html lang="en">
<!--html主体框架，里面包含了head与body框架，lang属性就是规定元素内容的语言(可无视，但是以后开发网站还是需要加上的)-->
<head>
  <!--头部元素，里面可以添加标题，css样式或者脚本的元素-->
  <!--这些标签可用在 head 部分：<base><link><meta><script><style> <title>-->
  <meta charset="UTF-8">
  <!--meta标签，提供页面有关信息，这里的意思就是定义编码为UTF-8码，meta还可以包含name，content等元素-->
  <title>教学翻车现场</title>
  <!--定义文档标题-->
</head>
<body>
  <!--body，整个页面的身体部分，主要内容都是在这里添加，body里面不建议添加任何属性（颜色，文本颜色等），建议在css样式里面更改-->
</body>
</html>
文本格式化标签
<b></b><strong></strong>：文本加粗

<i></i><em></em>：文本倾斜

<s></s><del></del>：文本添加删除线

<u></u><ins></ins>：文本加下划线

标签属性写法
属性也就相当于是标签的外表，比如一台手机，他有多少像素，是什么颜色等等

而标签的属性也是这个意思

下面是示例

<标签 属性1=“属性1” 属性2=“属性2”></标签>

<!-- img标签为图片标签，它的属性就必须有指定路径（src）、描述（alt ）-->
<图片标签 指定路径="./images/123.png" 描述="这是一张图片">
<img src="./images/123.png" alt="这是一张图片">

我们用img图片标签来演示其属性

下面是img标签的属性

注意：

  • 属性可以拥有 多个属性 ，但是必须写在开始 标签的后面 ， 括号的里面
  • 属性 不分先后顺序 ，标签名与各个属性必须用 空格 分开
  • 还有许多标签如border、高宽等不建议直接使用，一般都是写在css样式里面

演示

<img src="./images/123.png" alt="我是名为123的图片" width="100px" height="100px" border="3">

依次包含了 路径、错误显示文本、宽与高、边框属性

超链接标签

超链接很常见，几乎任何网站都存在这个标签

它用于跳转等作用

a标签常用属性

属性属性值简述作用
href链接指定跳转到链接
target跳转方式指定跳转方式，比如基于本页面打开或者新建一个页面打开

href与target几乎为a标签必不可缺的属性，下面展示用法

<a href="#">我是超链接</a>
<a href="#" target="_blank">我是新建页面打开的超链接</a>

target最常用的标签也就是 _blank ，也就是 新建页面打开 ，默认值为 _self ， 基于当前页面打开

表格
表格由table、tr、td组成，意思分别对应表格、行、个

  • table是表格标签
  • 表格的每一行都是一个tr，写在table里面
  • td代表每一个格子，写在行里面，也就是tr
  • 代码演示
<table>
        <tr>
            <td>第一行第一格</td>
            <td>第一行第二格</td>
        </tr>
        <tr>
            <td>第二行第一格</td>
            <td>第二行第二格</td>
        </tr>
</table>

表格常用属性如下

属性属性值简述作用
border像素值边框的意思，border="0"即为去掉边框，默认去掉边框
cellspacing像素值，默认为2单元格边框之间的空白距离
cellpading像素值，默认为1单元格内容与单元格边框之间的距离
width像素值宽，设置表格宽度
height像素值高，设置表格高度
align左中右，left、center、right表格在网页中对齐方式

表格还有一个 标题标签 ，即caption

  • caption标签为标题，位于整个表格上方，默认居中
  • caption标签写在table的后面

代码演示

<table border="1">
        <caption>我是标题</caption>
        <tr>
            <td>第一行第一格</td>
            <td>第一行第二格</td>
        </tr>
        <tr>
            <td>第二行第一格</td>
            <td>第二行第二格</td>
        </tr>
</table>

表格合并操作

  • colspan ：表格向右合并
  • rowspan ：表格向下合并

代码演示

<table border="1">
    <caption>我是标题</caption>
    <tr>
        <td>第一行第一格</td>
        <td>第一行第二格</td>
        <td>第一行第三格</td>
    </tr>
    <tr>
        <td>第二行第一格</td>
        <td>第二行第二格</td>
        <td>第二行第三格</td>
    </tr>
</table>

更改后为

<table border="1">
    <caption>我是标题</caption>
    <tr>
        <td rowspan="2">第一行第一格</td>
        <td colspan="2">第一行第二格</td>
    </tr>
    <tr>
        <td>第二行第二格</td>
        <td>第二行第三格</td>
    </tr>
</table>

这两个属性是写在td里面的，精确指定某一个格子的操作，被“吃”掉的盒子需要删除对应td代码

列表

列表分为 有序列表ol 与 无序列表ul

ul与ol标签里面的子内容都是li标签

ul与ol里面只允许有li标签，而li标签里面可以容纳其他标签

代码演示

<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
<ol>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ol>

当然还有一个自定义列表dl

代码演示

<dl>
    <dt>水果</dt>
    <dd>西瓜</dd>
    <dd>苹果</dd>
    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>青菜</dd>
</dl>

自定义列表可以自定义前面的序列号

在有序列表ol与无序列表ul中，还有一些属性是常用的

属性属性值简述作用
type无序ul：square，none 有序ol：A、a、1、I、i无序：可以更改形状，或者去掉形状有序：可以更改前方序号格式
start数字排序起始点

代码演示

<ul type="none">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
<ul type="square">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
<ol type="A" start="2">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ol>
<ol type="I" start="3">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ol>
Form表单与input标签
<form action="" method="">
    <input type="text">
</form>

form表单常用属性

属性属性值简述作用
actionurl或地址指把整个表单内容提交到哪儿处理
methodget、post是否采用加密提交
name用户自定义规定表单的名称
input标签常用属性：
属性属性值简述作用
type（重要）text（文本）
password（密码）
radio（单选框）
checkbox（多选框）
button（按钮）
submit（提交按钮）
reset（重置按钮）
image（图片）
file（打开文件）
date（日期）		试试看就知道啦
name用户自定义命名控件的名字，主要用于方便服务器识别控件
value用户自定义用于input控件中的默认文本值
size正整数调整控件大小
checkedchecked用于控件默认选中的项
maxlength正整数允许用户输入的最长字符
placeholder用户自定义提示文本

代码演示

<form action="#" method="GET">
    <span>用户名：</span>
    <input type="test" name="username" placeholder="请输入用户名">
    <br />
    <span>密码：</span>
    <input type="password" name="password">
    <br />
    <input type="radio" name="gender"><span>男</span>
    <input type="radio" name="gender"><span>女</span>
    <br />
    <input type="checkbox" name="yes"><span>是否同意条款</span>
    <br />
    <input type="submit" name="submit" value="注册">
    <input type="reset" name="reset" value="重置">
</form>
定位
  • 绝对定位
position: absolute;

绝对定位 就是先移动到 提供 的位置来 定义自己的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <title>text专用</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            bottom: 200px;
            right: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

没有绝对定位的时候， 盒子默认会在左上角

当使用绝对定位，给盒子定义的是 bottom（下）与right（右） ，那么盒子会 先跑到 右下角，然后再 基于右边 与 下边 增加自己的外边距

  • 相对定位
position: relative;

相对定位 也就是把自己当前位置当做中心，然后指定位置 增加外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <title>text专用</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

当设置了 相对定位 的时候，盒子把自己当做了 中心点 ，代码中设定了 top（上） 与 left（左） 为 200px ，也就是 增加上面 与 左边 的外边距为 200px

  • 固定定位
    这个很好理解了，就好比窗口某个小广告无论你怎么 更改页面大小 或者 滚动 他 始终在一个位置 跟着你跑
<!DOCTYPE html>
<html lang="en">
<head>
    <title>text专用</title>
    <style type="text/css">
        body {
            height: 5000px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

首先 固定定位 它的 位置定义是基于绝对定位 的，当我上面代码中给他 设置right（右） 与 bottom（下） 的时候，他就 和绝对定位一样 会先跑道右下角，然后数值为 0 ，也就是右边和下面 不需要增加外边距 ，我设置页面高度为5000px，当我拖动页面 固定定位他是不会动的

堆叠顺序（z-index）

定位布局如果出现 重叠 情况就用 z-index 来 调整 布局

盒子默认定位顺序是后面的代码压住前面的代码，通过这个就可以调整顺序

演示一下基本的三个盒子浮动且代码顺序依次盖住

#test1,
#test2,
#test3 {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
#test2 {
    background-color: blue;
    top: 50px;
    left: 50px;
}
#test3 {
    background-color: orange;
    top: 100px;
    left: 100px;
}
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

当我给test2加上 z-index: 1 ;的时候，此时蓝色方块在最顶层

#test2 {
    background-color: blue;
    top: 50px;
    left: 50px;
    z-index: 1;
}

当我再给test1加上 z-index: 2 ;的时候，因为test1比test2大（2>1），所以test1此时在最顶层

#test1 {
    z-index: 2;
}

z-index 值越大 ，则会 显示到最上方 ，按照 z-index>代码顺序 的优先级排列

块级盒子居中

最简单的方法把盒子以父级为标准居中

满足条件：盒子指定宽度（width）、左右外边距设置为auto

#box {
        width: 100px; /* 指定宽度 */
        height: 100px;
        background-color: red;
        margin: 0 auto; /* 设置左右外边距为auto */
}

其他两种写法：

margin-left: auto;
margin-right: auto;
margin: auto;

margin就只设置一个值为auto，代表四个方向都为auto，上下已经被固定宽度所以不变，但是左右也是auto也是一样的效果

visibility可见性
visibility: hidden; /* 对象不可见 */
visibility: visible;  /* 对象可见 */

visibility属性设置为不可见，但是位置会保留

与display的none属性不同的是，visibility会保留隐藏的位置

overflow溢出显示

如果当前盒子内容超过了盒子的大小，则显示滚动条或者不显示多余内容等

属性描述
visible默认值，不进行裁剪内容也不加滚动条
hidden不显示超出的内容，超出部分直接隐藏
scroll总是显示滚动条
auto超出就显示滚动条，不超出则不显示
<div id="test1">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<div id="test2">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<div id="test3">我是内容</div>
#test1,
#test2,
#test3 {
    width: 150px;
    height: 150px;
    border: 1px solid black;
    float: left;
    margin: 0 3rem;
}
#test1 {
    overflow: hidden;
}
#test2 {
    overflow: auto;
}
#test3 {
    overflow: scroll;
}

第一个框我设置为 hidden ，则下面内容 直接隐藏了 ，第二个框我设置的 auto ，则 超过 了他才会显示 滚动条 ，第三个即为 scroll ，无论是不是超过 都显示 滚动条

outline轮廓线

input的文本框或者文本域等空间选中的时候总会有轮廓线，往往在以后开发中都是去掉的，so直接去掉就好

<input type="text" style="outline: none;">
resize文本域限制

文本域使用在以后开发中也不需要用户可以随意拖动，这个属性就可以限制住文本域随意拖动

<textarea cols="30" rows="10" style="resize: none;"></textarea>
vertical-align垂直对齐
  • 不影响块级元素 内容对齐，只针对 行内元素 和 行内块元素
  • 通常用于对齐 表单 ， 图片 与 文字
介绍用法
基线对齐vertical-align: baseline;
垂直居中vertical-align: middle;
顶部对齐vertical-align: top;
<img src="./123.png" style="vertical-align: middle;">
<span>我是居中对齐</span>
<br /><br /><br />
<img src="./123.png" style="vertical-align: baseline;">
<span>我是基线对齐</span>
<br /><br /><br />
<img src="./123.png" style="vertical-align: top;">
<span>我是顶部对齐</span>
伪元素选择器
选择符简介
::before在元素前面插入内容
::after在元素后面插入内容
  • before和after必须有 content 属性
  • before和after会创建一个元素，都是 行内元素
  • 在dom里面是看不见这个元素，所以叫伪元素
  • 权重为1
<div>天气</div>
div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
div::before {
    content: "今天";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
}
div::after {
    content: "真好";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
}

因为是行内元素，所以使用 display:inline-block 转换为行内块元素，这样就能给出高宽了

阴影
box-shadow：对象和图片阴影

text-shadow：文字阴影

<div>我是文字</div>
width: 100px;
height: 100px;
border: 1px solid black;
text-shadow: 1px 1px 5px black;
box-shadow: 0 0 10px black;

阴影括号内的值依次是：x距离 y距离 阴影大小 阴影颜色

鼠标样式
  • div{ cursor:default } 默认正常鼠标指针
  • div{ cursor:hand }和div{ cursor:text } 文本选择效果
  • div{ cursor:move } 移动选择效果
  • div{ cursor:pointer } 手指形状 链接选择效果
  • div{ cursor:url(url图片地址) } 设置对象为图片
transition过度动画
  • transition-property ：设置某元素不使用过渡效果
  • transition-duration ：动画过渡时间
  • transition-timing-function ：转速曲线
  • transition-delay ：延迟进行动画
  • transition：过渡复原时间
属性属性值简述作用
transition-propertycss属性名字设置的指定属性将取消过渡效果
transition-duration数字设置过渡的时间
transition-timing-functionease：慢快慢
ease-in：慢快
ease-out：快慢
ease-in-out：全程慢 设置过渡的动画速度
transition-delay数字动画延迟进行
<div id="box1"></div>
#box1 {
    width: 100px;
    height: 100px;
    background-color: orange;
    float: left;
    transition: all 0.3s;
}
#box1:hover{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    float: left;
    transition-delay: 100ms; /* 延迟100毫秒进行动画 */
    transition-duration: 500ms; /* 动画过渡时间 */
    transition-property: height; /* 设置某元素不使用过渡效果 */
}

我们要在需要进行的过渡的元素里面先放上transition，并设置一个复原时间，上面的代码设置为all 0.3s，这时候再去hover里面写上其他的过渡动画，并在hover里面更改它的大小与颜色即可实现过渡

TransForm 2D运动

实现元素移动、旋转、缩放等效果，简单可以理解为变形

  • translate：移动
  • rotate：旋转（值为deg，也就是角度的意思）
  • scale：缩放

transform: 属性()

translate：移动

{alert type="info"}

transform: translate(x, y);

transform: translateX(n);

transform: translateY(n);
{/alert}

/* x轴移动100px，u轴移动200px */
transform: translate(100px, 200px);
rotate：旋转
  • transform: rotate(度数deg);
/* 旋转360° */
transform: rotate(360deg);
scale：缩放
  • transform: scale(宽倍数, 高倍数);

1也就是一倍，一倍默认不变；2就是两倍，扩大本身的两倍；低于1比如0.5，就是缩小

/* 放大两倍 */
transform: scale(2, 2);

写法顺序

如果同时存在多个转换，顺序应该为：移动 - 旋转 - 缩放
顺序的不同会影响最终的结果
如果有多个属性，一定要让移动放在最前面

keyframes动画

定义动画：

0% - 100%为动画过程，可添加多个过程，理解为关键帧

@keyframes 动画名{...}

/* 定义动画名为test */
@keyframes test {
    0% {
        transform: translate(0px);
    }
    100% {
        transform: translate(100px);
    }
}

调用动画：

animation-name: 名字;
animation-duration: 持续时间;

/* 调用test动画并设置3秒时间过渡 */
animation-name: test;
animation-duration: 3s;
动画模式：

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

animation-fill-mode : none | forwards | backwards | both;

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

none：不改变默认模式
forwards ：动画结束后保持结束时的属性
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both：向前和向后填充模式都被应用

© 允许规范转载
如果觉得我的文章对你有用，可以赞助本站，使本站更好的发展