全网最全Html5+css+js基础总结内含文件_学习html.css和js的总结-CSDN博客

本文链接：https://blog.csdn.net/qq_42302385/article/details/86491224

全网最全Html5+css+js基础总结

学会这些，起码网页就算入门了，今后能飞多高就看你们的了！
大家可以去我的博客页面，下面我就把代码文件贴一下，代码文件里面我加了很多注释，仔细看一下就懂了，工作繁忙我就不一一解释了，。

Html控件预览:
在这里插入图片描述

在这里插入图片描述

HTML的基本使用

以下是html1.html文件代码，，此页复制粘贴就可以运行

//需要图片，音乐，电影的要在子文件夹自行添加；

<!DOCTYPE html>
<!--ctrl+/    Ctrl+shift+/注释-->
<html >
<!--<html lang="en">以HTML开始，，默认语言为英语，“zh“中文-->
<head><!--head提供有关文档内容和帮助信息-->
    <meta charset="UTF-8"><!--编码-->
    <title>标题</title><!--标题-->
</head>
<body>
<!--显示内容-->


<!--herf超链接-->
<a href="https://www.baidu.com" target="_self"> 大家好</a><!--target="_blank"重开一页显示 target="_self"当页显示-->
<b>粗体</b>
<em>斜体</em>
<u>下划线</u>
<s>中划线</s>
<br/>br回车<br/>
1*****************************************************************************
    <table border="1px"><!--表格-->
        <thead><!--thead 表头-->
        <tr>
            <th>标题</th><!--th，标题栏，加粗，-->
            <th>标题</th>
            <th>标题</th>
        </tr>
        </thead>
        <tbody></tbody><!--表体-->
        <tr>
            <td rowspan="2">列合并</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
        <tr>
            <td colspan="2">行合并</td>
        </tr>
        <tfoot></tfoot><!--表尾-->
    </table>
2**********************************************************************************************
    <!--有序标签-->
    <ol type="1" ><!--type序列表体排列类型，数字，字母，罗马……-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <ol reversed><!--reversed降序，默认升序-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <!--无序标签-->
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>

3***************************************************************************************

<form>
    <input type="text" value="自填充内容" >
    <input placeholder="提示内容，占位符">
    <input maxlength="5" placeholder="只能输入5个"><!--最大限制输入位数-->
    <input size="50" placeholder="长度为50行"><!--输入框长度-->
    <br/>
    <input value="只读不允许修改内容"  readonly><!--只读 不允许写入-->
    <input type="password" placeholder="密码">
    <input type="number" placeholder="随意数字" >
    <input type="number" min="0" max="100" step="10" value="50"><!--0-100数字-->
    <br/>
    <input type="range" min="-100" max="100">
    <input type="range" min="-100" max="100" step="20">
    <input type="range" min="-100" max="100" step="20" value="50">
    <br/>
    <textarea >多行文本框</textarea>
    <textarea rows="20" cols="30">最小20行30列的多行文本框</textarea>
    <br/>
    <BUTTON onclick="" n> 与JS按钮绑定事件的按钮</BUTTON>
    <input type="button" value="普通按钮">
    <input type="submit" value="提交form表单">
    <input type="checkbox">单选择框
    <br/>
    <input type="radio"  name="a" checked>多选一默认选择
    <input type="radio"  name="a">多选一
    <input type="radio"  name="a">多选一
    <br/>
    强制选项：
    <select>
        <option>选择1</option>
        <option>选择2</option>
    </select>
    可输入选项：
    <input type="text" list="datalist">
    <datalist  id="datalist">
        <option>选择a</option>
        <option>选择b</option>
    </datalist>

</form>
4**************************************************************************************
<form enctype="multipart/form-data"><!--上传文件form必须加这个属性-->
    <!--无效果<input type="email">邮箱<input type="tel" >电话<input  type="url">地址<input  type="search">搜索-->
    <input  type="color">颜色

    <input  type="file" >选择一个文件
    <input  type="file" multiple>选择多个文件
    <input  type="file" REQUIRED>必须选择文件

    <input  type="image" src="1.jpg" width="40px">图片按钮
    <input  type="date">日期
    <input  type="time">时间
    <input  type="hidden" value="内容">隐藏
</form>
5********************************************************************************************
<br/>图片超链接
<br/>
<a href="html1.html">
    <img  src="1.jpg" width="300px"  alt="无图时显示">
</a>
<br/>
<br/>
利用form点击图片可在地址栏获取其位置
<br/>
<form>
<input type="image" width="300px" src="1.jpg" >
</form>
<br/>
分区响应图
<br/>
<img  src="1.jpg" width="300px"  alt="无图时显示" usemap="#map1">
<map name="map1">
    <area href="html1.html" shape="rect" coords="138,40,203,124" target="_blank" >
    <!--shape形状，coords位置（左上右下），target是否再新窗口 -->
    <area href="html1.html" shape="rect" coords="10,20,30,60" target="_blank">
</map>

<br/>
6***********************************************************************************************
<br/>
音频播放
<br/>
<!--autoplay自动播放 loop循环播放 controls控制进度条 preload="" 预加载 poster="图片地址"默认显示图片 -->
<audio src="音频地址"></audio>
<!--支持各种浏览器播放-->
<audio src="音频地址" height="128px"  >
    <source src="音频地址mp3" type="audio/mpeg">
    <source src="音频地址ogg" type="audio/ogg">
</audio>
<br/>
7************************************************************************************************
<br/>
视频播放
<br/>
<!--autoplay自动播放 controls控制进度条 preload="" 预加载 poster="图片地址"默认显示图片 -->
<video src="视频地址"></video>
<!--支持各种浏览器播放-->
<video src="视频地址" height="128px"  >
    <source src="MP4视频地址" type="video/mp4">
    <source src="ogv视频地址" type="video/ogg">
</video>
<br/>
8************************************************************************************************
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>
</html>

css及JS基本使用

html文件
需要配合下面的CSS和js文件一起用；
以下是Html2.html的文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式表</title>
  <!--JS样式-->
    <script src="script1.js"></script>
    <!--<script >
        alert("内部使用JS")
    </script>-->

    <!--<外部样式表>-->
    <!--<link rel="stylesheet" type="" href="a.css">-->
    <!--文档样式表-->
    <style type="text/css">


    /*动画*/
p{
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
}
p:hover{
    width: 200px;
    height: 200px;
    background-color: burlywood;
    transition-delay: 150ms;/*延迟*/
    transition-duration: 500ms;/*动画时间*/
    transition-timing-function: ease-in-out;/*有很多参数 ，此参数表示开始慢中间快结尾慢*/

}
    .class1{
        border: 1px solid black;
        background: aquamarine;
        padding: 100px 50px 100px  200px;/*内边距*/
        margin: 100px 50px 100px  200px;/*外边距*/
    }


        *{/*所有元素 all*/}
        a{/*根据类型选择元素，此仅对a标签影响 <a>*/  }
        .class{/*对类元素影响，类名可自定义，在下面要<a class="class1">*/}
        #id1{/*对ID影响，<a id="id1">*/}
        [herf]{/*对使用此属性的控件影响，<a herf="地址">*/}
        a:hover{/*对该控件的某一动作影响，<a>*/}
    </style>
</head>
<body>

<!--元素内嵌样式表
<a style="font-size: 20px ">字体变大</a>
<a style="font-size: 20px ;color: #ff4130">字体变大，颜色变红</a>

&lt;!&ndash;文档样式表，样式于title下的style里   【需注释外部样式表】&ndash;&gt;
<a>字体变大，颜色变蓝</a>

&lt;!&ndash;外部样式表，样式于title下的link到目录下CSS文件里   【需注释样式表】&ndash;&gt;
<a>字体变大，颜色变绿</a>-->
<div class="class1">盒子</div>
<p>P标签动画</p>
</body>
</html>

上面的css的样式需要加a.css和script1.js文件,代码如下

这是a.css的代码



/*

*{!*所有元素 all*!}
a{!*根据类型选择元素，此仅对a标签影响 <a>*!
    font-size: 20px;
    color: blue;
    font-family: 微软雅黑;
}
.class1{!*对类元素影响，类名可自定义，在下面要<a class="class1">*!}
#id1{!*对ID影响,不建议使用，<a id="id1">*!}
[herf]{!*也可以[herf="1.html"]对使用此属性的控件影响，<a herf="地址">*!}
a:hover{!*对该控件的某一动作影响，<a>*!}

*/





/*
常见属性
对齐文本Text-align
文本方向Direction
字母间距，单词间距，行高Letter-spacing  word-spacing:line-height:
首行缩进……
文本装饰……
文本大小写转换……*/

以下是script1.js文件,就这么一句话，其他什么都不要加，就能运行