HTML CSS JS是三门必学的前端语言
- HTML定义了网页的内容
- CSS描述了网页的布局 格式
- JS（JavaScript）定义了网页的行为
jQuery是一个JavaScript库，极大地简化了javaScript的编程
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合
前端基础总结
1.HTML
一、HTML基本骨架
- doctype标签:是说明HTML是什么版本。
- html标签：表示该文件是以超文本标记语言（HTML）编写的
- head标签：表示网页头部的标签
- meta标签：HTML5文档都必须声明它们所使用的字符编码语言，通常使用utf-8，gb2312（简体中文）字符集表达中文字符。
- title标签: 表示HTML5标题
- body标签: 包含了所有文档的主体内容。
二、文本和超连接
- h1-h6标题标签:表示标题（h1最大以此类推大到小）
- p 段落标签
- hr水平标签
- <hr属性=“属性值”>
其他：
- class设置css类。
- dir文字方向。
- style设置内嵌样式。
- title设置工具提示。
- br换行标签
图片标签与超链接标签
- img图片标签属性
- src 图片地址
超链接标签属性:
ul,;li无序列表
ol,li有序标签
dl,dt定义列表标签
div标签
span标签
表格标签
- table表格标签
- tr行标签
- td单元格标签
表格的美化和布局
三、表单
form表单标签
- name属性用于设置表单的名称
- action属性用于设置处理表单提交数据的URL
- method属性用于定义浏览器将表单中的信息提交给服务端的方式，取值可以取get和post两种。
输入框和按钮
常见表单控件
四.代码展示
HTML在head的部分固定没有添加，只在后面body部分自定义各种标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式-->
<form action="7.媒体元素.html" method="get">
<!--文本输入框：input type="text"-->
<p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20" required></p>
<p>密 码：<input type="password" name="password" placeholder="请输入密码" required="required"></p>
<!-- submit提交表单，reset清空-->
<p>
<input type="submit"> <input type="reset" value="清空表单">
</p>
<!-- radio单选框标签 value即单选框的值，在提交时对应value
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="b" name="hobby">打篮球
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
</p>
<p><input type="button" name="btn1" value="按钮上文字"><!--按钮-->
<input type="image" src="../resources/image/2.jpg"><!--图片按钮默认是提交：和submit类似-->
</p>
<p><!--下拉框：selected:默认选项-->
你来自：
<select name="国家名称">
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
</p>
<p><!--文本域-->
反馈：
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
</p>
<p><!--文件域-->
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证-->
<p>邮箱：<input type="email" name="email" required>
url：<input type="url" required></p>
<!--数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p>商品数量<input type="number" name="num" max="100" min="1" step="1"> </p>
<!--滑块-->
<p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
<!--搜索框-->
<p>搜索：<input type="search"></p>
<p><!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
</form>
</body>
</html>
网页效果
2.CSS
代码展示
css在style里面加了样式，与后面body部分对应
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: orange;
background: blue;
border-radius: 10px;
}
h3{
color: orange;
background: blue;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<p>我爱学习</p>
<h3>学习JAVA</h3>
</body>
网页展示
详情博客
https://blog.csdn.net/weixin_43331963/article/details/106784229
3.javaScript
代码展示
js在script里面加了行为，与后面body部分对应。作用：被用来改进设计、验证表单、检测浏览器、创建cookies
随机点名案列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style>
body{
text-align: center;
}
</style>
<script>
// 页面加载完成入口
window.onload = function () {
// 1. 获取标签 (数组)
var inputs = document.getElementsByTagName("input");
var h1 = document.getElementsByTagName("h1");
// 1.2 提供一个数组, 存储人名
var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"];
// 定义一个 timer 变量
var timer;
// 2. 给 `走你` 按钮绑定单击事件
inputs[0].onclick = function () {
// 定时器的 bug, 开启新定时器之前, 必须先关闭就定时器.
window.clearInterval(timer);
// 3. 循环定时器
timer = window.setInterval(function () {
// 4. 生成一个随机下标
var index = window.parseInt(Math.random() * arr.length + "");
// 5. 根据下标取出对应的名称, 更换 h1 标签中的内容.
h1[0].innerHTML = arr[index];
}, 30);
}
// 给 `停止` 按钮绑定单击事件
inputs[1].onclick = function () {
window.clearInterval(timer);
}
}
</script>
</head>
<body>
<input type="button" value="走你！" />
<input type="button" value="停止！" />
<h1>等待抽奖！</h1>
</body>
</html>
页面展示
详情博客
javaScript学习笔记（一）js基础
JavaScript学习笔记（二）Js对象
4.jQuery
代码展示
jQuery 是一个 JavaScript 函数库，对JS进行了简化。与后面body部分对应。作用：兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。
线上搜索框案列：
- 当文本输入框获取焦点的时候，里面默认的文字清空，当失去焦点的时候，里面的文字又会回来。
- 当里面有用户输入的内容的时候，获取焦点不能清空文字。失去焦点也不可以还原文字。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.box {
height: 40px;
width: 258px;
margin: 100px auto 0;
}
.box input {
float: left;
width: 210px;
padding-left: 6px;
height: 40px;
background: url(../img/left.jpg);
color: #ccc;
}
.box button {
float: right;
width: 42px;
height: 40px;
background: url(../img/right.jpg);
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="请输入文字..." />
<button></button>
</div>
</body>
</html>
jQuery实现方式一：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 需求 : 为 input 标签绑定 focus 聚焦事件
$("input").focus(function () {
// 1. 获取 input 标签的 value 值
var value = $("input").val();
// alert(value);
// 2. 判断
if (value == "请输入文字...") {
// 3. 清空文字, 并同时设置样式
$("input").val("").css("color", "black");
}
});
// 需求 : 为 input 标签绑定 blur 聚焦事件
$("input").blur(function () {
if ($("input").val() == "") {
$("input").val("请输入文字...").css("color", "gray");
}
});
})
</script>
jquery实现方式二：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 需求 : 为 input 标签绑定 focus 聚焦和离焦事件
$("input").focus(function () {
// 1. 获取 input 标签的 value 值
var value = $("input").val();
// alert(value);
// 2. 判断
if (value == "请输入文字...") {
// 3. 清空文字, 并同时设置样式
$("input").val("").css("color", "black");
}
}).blur(function () {
if ($("input").val() == "") {
$("input").val("请输入文字...").css("color", "gray");
}
});
})
</script>
页面效果：
1789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
