网页设计常用代码

最新推荐文章于 2024-08-25 08:29:31 发布

KeepLearning_wj

最新推荐文章于 2024-08-25 08:29:31 发布

阅读量108

点赞数 1

分类专栏： HTML/CSS/JS 文章标签： css javascript html5

本文链接：https://blog.csdn.net/qq_37603143/article/details/140444921

版权

HTML/CSS/JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 基本框架

<!DOCTYPE html>

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/mystyle.css">
    <script language="javascript" type="text/javascript" src="./js/main.js"></script> 
    <style></style>
</head>

<body>
</body>
</html>

2. 常用标签

<h1></h1>   各级标题
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> 

<img width="50%" height="500px" src="./img/test.jpg"/>  图片

<video width="320" height="240" controls>       视频
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
</video>

<hr/>        普通横线

<button onclick="alert('hello');">返回</button>   按钮

<progress id='progress1' value="0" max="100"></progress>    
进度条 document.getElementById("progress1").value=10

<input type="number" autocomplete="off" min="0" max="100"/> 数字输入栏

<input name="name" type="text" autocomplete="off"/>     单行文本

<textarea name="textarea" id="textarea" cols="35" rows="5"></textarea>  多行文本

3. 最小js运行环境

<meta charset="UTF-8">
<button onclick='
//注释也可以正常使用
var inputstr = window.prompt("请输入:");//, "default value"
console.log(inputstr);
'>test</button>

4.使页面可以编辑

在F12开发者工具中运行：

document.designMode = "on"
document.designMode = "off"

5. JS数组操作

var test=[]

test = test.concat(12)  //追加元素
==test.push(12)
==test = [test, 12]

test = test.slice(0, test.length-1) //删除最后一个元素
==test.pop()

test = test.slice(0,2)  //[0, 2)  裁剪只保留区间的内容

for (var i = 0; i < test.length; i++) {    //编历数组
  console.log(i, arr[i])
}