(HTML5+CSS3+Javascript)基础

时间：2020-02-02 10:17:51 阅读：67 评论：0 收藏：0 [点我收藏+]

HTML5知识点

学习视频1

参考手册

文档说明

<!DOCTYPE html> 告诉浏览器要处理的为html文档

<html lang="en"> 文档中html部分的开始，属性language，en=English，zh=Chinese

<head> 提供有关文档内容和标注信息

? <meta charset="UTF-8"> 定义编码格式

? <title> 标题

<body> 编辑主体

基本元素

<h1> 标题大小

<a href="http://..." target="..."> 超链接，href=链接目标，target="_blank"为新建窗口打开，默认为本地刷新

<b> 粗体

<em> 斜体

<u> 下划线，不推荐使用

<s> 删除线

<br/> 换行

表格元素

<table> 表格

<tr> 行

<td> 列

<th> 表头

colspan 合并列单元格，rowspan合并行单元格，reversed倒序

列表元素

<ol> 有序列表

? 属性：type（设置样式），reversed（降序）

<ul> 无序列表

<li> 表示列表中的项

表单元素

<form>

? method=用于发送form-data的http方法,

? action=当提交表单时向何处发送表单数据

<input> 属性 Type, Name

? Type=text时

? value=预填充内容,占位

? placeholder=显示内容，不填充，不占位

? maxlength=最大填充字符数

? size=拓宽单行文本框

? readonly只读

? Type=button时，按钮

? Type=submit时，提交表单

button元素比input-button更适用
submit用于提交表单，适用范围比input-button小
input-button通常用于和JS一起使用并作为绑定事件处理
submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。

Type=range时，数字滑动

? min，max=最值

? step=步长

? value=初值

Type=number时，手动输入数字元素同range

Type=checkbox时，复选框

Type=radio时，复选框，选中后无法取消

? name=键值

? checked预选中
```
<form>
    三选一
    <br/>
    <input type="radio" name="a" checked>C++
    <input type="radio" name="a">Java
    <input type="radio" name="a">Python
</form>
```
Type=email

Type=tel

Type=url

Type=date

Type=color

Type=hidden

Type=image

? <input type="image" src="图片地址" width="80px">

Type=file上传文件

? Multiple 一次允许上传多个文件

? Required 只能上传一个文件

<textarea> 多行文本框

? rows=行，cols=列

<select> 单选项列表

? <option>表单

<datalist> 多选项列表，配合input使用

<form>
    <input type="text" list="datalist1">
        <datalist id="datalist1">
            <option>C++</option>
            <option>Python</option>
            <option>Java</option>
        </datalist>
</form>

嵌入图片

? alt=备用显示内容

? 图片添加超链接

? <a>超链接标签

<a href="www.baidu.com">
    <img src="picture.png" width="190">
</a>

分区响应图

<map> <area>点击后导航到指定URL

属性shape、coords共同起作用

shape

? rect矩形，circle圆形，poly多边形,default默认

<img src="picture.png" usemap="#map1" width="190">
<map name="map1">
    <area href="www.baidu.com" shape="rect" coords="0,0,100,100" target="_blank">
</map>

嵌入视频

<video src="" height="100" controls preload="metadata" poster="picture.png">
    <source src="" type="video/mp4">
    <source src="" type="video/ogg">
</video>

CSS3选择器

<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        a{
            font-size:80px;
            color: darkcyan;
        }
    </style>
</head>

*选择所有元素

a{}根据类型选择元素

.class1{} 根据类选择元素

id1{} 根据id选择元素

[href] 根据属性选择元素

a:hover{} 选择器动作，鼠标经过时的动作

CSS控制边框和背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        .class1{
            border-width: 8px;
            border-color: darkcyan;
            border-style: groove;
        }
    </style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        .class1{
            border: 5px solid red;
            border-top: 10px dashed yellow;
            background-color: aliceblue;
            background-image: url("picture.png");
        }
    </style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>

background-attachment: fixed; 随页面滚动

CSS设置文本样式

对齐 text-align:

文本方向 direction:

文字间距，单词间距，行高 letter-spacing, word-spacing, line-height

首行缩进 text-indent

文本装饰 text-decoration

文本大小写转换 text-transform: (capitalize首字母大写 uppercase全部大写)

字体名称 font-family:

字体大小 font-size:

字体样式 font-style:

指定字母是否以小型大写字母显示 font-variant:

设置字体粗细 font-weight

创建文本阴影 text-shadow (水平偏移竖直偏移模糊度颜色)

CSS使用过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        p:hover{
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: 1s;
        }
    </style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>

transition-timing-function: (ease, ease-in, ease-out, ease-in-out)过渡时呈曲线变化

CSS使用动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        p:hover{
            animation-duration: 500ms;
            animation-delay: 200ms;
            animation-name: what;
            /*重复无数次*/
            animation-iteration-count: 4;
            /*变大之后缩小*/
            animation-direction: alternate;
        }
        @keyframes what {
            from{
                width: 1000px;
                height: 2000px;
                background-color: brown;
            }
            50%{
                width: 400px;
                height: 400px;
                background-color: blueviolet;
            }
            75%{
                width: 500px;
                height: 2000px;
                background-color: darkgreen;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: darkcyan;
            }
        }
    </style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>

CSS使用变换

transform:

transform-origin: 更改旋转锚点

CSS的盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oh my god</title>
    <style type="text/css">
        .class1{
            border: 1px solid black;
            background-color: antiquewhite;;
            /*内边距*/
            padding: 50px 10px;
            /*内边距背景填充*/
            background-clip: content-box;
            /*外边框*/
            margin: 100px 500px;
        }
    </style>
</head>
<body>
<div class="class1">
    what's your name?
</div>
</body>
</html>

JavaScript基础

外部文件引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS.js">
    </script>
</head>
<body>
</body>
</html>

变量

var，const，let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let num=123;
        num += "100";
        document.write("<h1>"+num+"</h1>")
        let name=prompt("your name is:", "")
        document.write("<h1>"+name+"<h1/>")
    </script>
</head>
<body>
</body>
</html>

判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let pwd = prompt("your pwd is ?","");
        if(pwd == "123456"){
            document.write("密码正确");
        }else{
            document.write("密码错误");
        }
    </script>
</head>
<body>
</body>
</html>

循环，跟C/C++一样。

(HTML5+CSS3+Javascript)基础

原文：https://www.cnblogs.com/shuizhidao/p/12250953.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)