web基础-前端

最新推荐文章于 2024-08-17 09:57:39 发布

CZM_886

最新推荐文章于 2024-08-17 09:57:39 发布

阅读量366

点赞数

分类专栏： web前端文章标签： html cssjsjquery

本文链接：https://blog.csdn.net/CZM_886/article/details/78959508

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html：

1、hyper text markup language 超文本标记语言

2、格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
页面展示内容
</body>
</html>

3、HTML语法
标签：围堵标签(<div 属性名="属性值">xxx</div>、<a>超链接</a>...)、自闭标签(<img/>、<br/>...)
注释：
文本标签: 标题标签: <h1>标题一(字体最大)</h1> 、h2、h3、h4、h5、h6
字体标签: <fontface="微软雅黑" size="6">xxx</font>
其它标签: <p>xxx</p>、<span>xxx</sapn>...
列表标签: ul 无序列表 <ul><li>列表项1</li></ul>
ol 有序列表 <ol><li>列表项1</li></ol>
排版标签: <p>xxx</p> <pre>预文本标签</pre> <br/>换行 <hr/>水平线
图片标签: <img src="../img/1.jpg" alt="图片没显示时显示的内容"title="提示"/>
超链接a标签: <a href="https://www.baidu.com">点击跳转</a>
表格标签: tr:行 td:列 th:表头
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
frameset集合用法: <frameset cols="25%,50%,25%"><frame src="frame_a.htm"/></frameset>
form表单: <form action="" method="post">
<input type="submit" value=""/>
</form>
type类型有: submit提交按钮、button普通按钮、text文本输入框、password密码输入框、radio 单选按钮、checkbox复选按钮、

css：

1、casding style sheets 层叠样式表

2、内联 <div class="box" style="background-color: red;">xxx</div>

3、内部 head标签内 <style type="text/css">
.box{
font: "微软雅黑";
}
</style>

4、外部引入 <link rel="stylesheet" type="text/css" href="../css/001.css"/>

5、基本选择器: class选择器(.class类名{...})、id选择器(#id名{...})、标签选择器(标签名{...})

其它选择器：后代选择器(.box div p{...})、伪类选择器(a:hover{...} link、hover、active、
visited)
6、常用属性: 宽(width: 80px;)、高(height: 50px;)、边框(border：1px solid red；)、
背景(background: url(../img/1.jpg); background-color: red;)、行高(line- height: 20px;)、居中(text-align: center;)、去除a标签下划线(text-decoration: none;)、字体大小(font-size: 18px;)...

7、浮动: 块级元素(div...) 左浮动(float: left;)、右浮动(float: right;)
清除浮动: clear : left/right both overflow: hidden;

8、行内块级元素: display: inline-block;

9、盒子模型 content、padding、border、margin (margin: 0 auto; padding-left: 10px;...)

10、定位position
默认: position: static;
相对定位: position: relative;top: 10px;
绝对定位: position: absolute; 子绝父相
固定定位: position: fixed; 小广告等

js：

1、JavaScript 基于对象

2、内嵌 <script type="text/javascript">...</script>

3、内部引入 <script src="../js/03.js" type="text/javascript" charset="utf-8"></script>

4、ECMAScript : 基本语法

基本数据类型: number、string、boolean、null、undefined

数组定义: int[ ] a = {1,2}; var as = new Array(1,2,3,4);

for循环: for(var i = 0; i < 6; i++){
alert("111");
}

5、dom操作 document object model 文档对象模型

找元素: document.getElementById("id名");
document.getElementsByClassName("classname");
document.getElementsByName("name");
document.getElementByTagName("标签名");
创建元素: document.createElement("元素标签名");
document.createAttribute("属性名");
document.createTextNode("字符串");
element.appendChid(节点);
element.removeChid(节点);
element.setAttribute("属性名","值");

事件：点击事件(onlick()),改变事件(onchange())，加载事件 onload =function() {..} ...
6、bom操作 browser object model 浏览器对象模型

五大对象: window/location/history/screen/navigator
警告框 alert("msg");
确认框 confirm("确定退出吗??");
输入框 prompt("请输入账号");
定时器: var interver = setInterval(function(){...},1000);
清除定时器: interver.clear();
setTimeout(fn,ms);
window.open();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style type="text/css">
.box{
width: 50px;
height: 50px;
background-color: palevioletred;
}
</style>
<script type="text/javascript">
function aa(){
// alert("九九乘法表");
// console.log("111");

for(var i = 1; i <= 9; i++){
for(var j = 1; j <= i+1; j++){
var a = i * j;
document.write(i + "x" + j + "=" + a + " ");
}
// document.write("<br/>")
document.write("<br/>")
}

}
</script>
</head>
<body>
<div class="box" οnclick="aa()"></div>
</body>
</html>

jquery
1、框架(半成品)
2、jQuery引入:
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
alert($("#d").value);
</script>

3、加载事件 $(function(){...}); $(document).ready(fn);

4、点击事件 $("选择器").click(function(){...});

5、基本选择器(4): id选择器 var $jquery = $("#id");
class选择器 var $jquery = $(".className");
tag标签选择器 var $jquery = $("标签名");
选择多个 var $jquery = $("标签名1,#id,.className");

6、层次选择器(4): 后代选择器 $("body div");
孩子选择器 $("body>div");
大弟弟选择器 $("#first+div");
所有弟弟 $("#first~div");

7、基本过滤选择器(7)：第一个 $("div:first");
最后 $("div:last");
奇数 $("div:odd");
偶数 $(":even");
下标等于 $(":eq(num)");
> geater than $(":gt(num)");
< less than $(":lt(num)");
8、其它选择器: 内容过滤: $("div:has(#first-f)"); 可见选择器: $(":hidden").show(1000); 属性选择器: $("[属性名=值]")

9、jQuery样式获取: $jqObj.css("background-color"); 设置: $jqObj.css("background-color","red");

10、 jquery属性attr,prop 获取: $("").attr("属性名"); 设置: $("").attr("属性名","属性值"); 移除: $("").remove("属性名");
11、动画效果: 滑动效果: show显示 hide隐藏 toggle slideUp slideDown slideToggle
淡入淡出: fadeIn fadeOut fadeToggle
12、数组遍历: 数组.each(function(index,dom)); $.each(数组,fn);
13、标签体内容: $jq.html("<a>xx</a>"); 代码 $jq.text("<a>xx</a>"); 获取普通文本设置普通文本
14、a.append(b)->在a标签里面,追加b标签到最后面
a.prepend(b) ->在a标签里面,追加b标签到最前面
15、
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>变量声明</title>
<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var arr = new Array(4);
arr[0] = new Array("长沙","衡阳");
arr[1] = new Array("武汉","荆州");
$(function() {
$("#p").change(function(){
var r = this.value;
// alert(r);
$("#c").html("");
$(arr[r]).each(function(index,dom){
// alert(dom);
var c = $("#c").html();
// $("#c").html("<option value="+index+"> "+dom+" </option>" + c);
$("#c").append("<option value="+index+"> "+dom+" </option>");
});

});
});
</script>

</head>

<body>

<form action="" method="post">
<select name="p" id="p" >
<option value="0">请选择省</option>
<option value="0">湖南省</option>
<option value="1">湖北省</option>
</select>
<select name="c" id="c">
<option value="000"> 请选择市 </option>
</select>
<input type="submit" />
</form>
</body>

</html>