全网最全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">最小2030列的多行文本框</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文件,就这么一句话,其他什么都不要加,就能运行


alert("外部使用JS")

文件放置在此,有需要的自己拿吧

项目文件,点击下载
慢着,别跑,密码是6666

加几个回车让你看不见下面内容
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车
回车

看了这么多,能给我点一个赞就好了

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值