html笔记

/ 0评 / 1

温馨提示:左侧可以打开菜单快速跳转哦~

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标签的属性

属性属性值简述作用
srcURL链接图片的连接路径,本地或者网络图片
alt文本当图片加载失败的时候显示的内容
title文本鼠标悬浮的时候显示的内容
width宽度,支持百分比设置图片的宽度
height高度,支持百分比设置图片的高度
border数字设置边框的高度

注意:

演示

<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>
            <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

 

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

表格合并操作

 

<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在元素后面插入内容
<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距离 阴影大小 阴影颜色

鼠标样式

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运动

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

transform: 属性()

 

translate:移动

transform: translate(x, y);

transform: translateX(n);

transform: translateY(n);

/* 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;

动画模式:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注