Html
HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。
【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。
【标记语言】：标记，也叫做标签。也就是说HTML这门语言是由标签组成的。
网页学习的基本代码如下，使用快捷键!+enter生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>html的编写位置
html写在<body></body>标签之间
标签
html的学习主要就是熟悉各种标签的使用，常用的标签有
1.标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2.段落标签
<p></p>
段落标签，表示一个自然段，会独占一行。
3.换行标签
</br>
使用时使元素换行
4.水平线标签
<hr></hr>
5.引用图片标签
<img scr="1.gif" />
属性：
src： 设置一个外部图片的路径
alt： 可以用来设置在图片不能显示时的描述
width: 修改图片的宽度
height：修改图片的高度，这两个改变时都是同时修改，不该比例。只有当两个都同时指定时才不按比例。
6.注释标签
<!--
-->
7.meta标签
7.1使用meta标签可以用来设置网页的关键字
<meta name="keywords" content="HTML5，xxx，xx">
7.2还可以用来指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述。
<meta name="description" content="发布h5，js前端相关的信息">
7.3请求重定向
<meta http-equiv="refresh" content="秒数；url=目标路径" />
8.超链接元素
<a></a>
属性：
href:指向链接跳转的目标地址，可以写一个相对路径也可以写以一个完整的地址
target:设定在哪里打开链接，可选值：_self(默认值，在本页面打开) _blank（别的页面打开）
另外的用法：
<a href="#xx"></a>
<p id="xx"></p> 那么#会自动跳转到p的位置
<a href="#"></a> 会自动跳转到顶部
9.文本框标签
<input type="text" />
除了以上基本标签外，还有一些特殊的功能标签
1.表格
<table>
包含表头<th></th>和单元格<td></td>
</table>
2.无序列表
<ul>
包含多个元素<li></li>
<li></li>...
</ul>
3.表单域
<form>
<input type="">input默认是一个输入框标签 input一行可以存在多个
input的type可以设置多种属性
button按钮 可点击；checkbox复选框（多选框）；radio单选框；file文件；text文本；password密码输入；
<!-- 重要 ： input表单元素 必须放置在表单域中 -->
<form>
<!-- 单标签：br hr -->
<!-- 输入标签 -->
<!-- input默认是一个输入框标签 input一行可以存在多个 -->
<!-- <input /> -->
<!-- input中type属性可以决定表单输入内容的类型 -->
<!-- type="button" 按钮 可点击-->
<!-- value="" 按钮的名称 -->
<input type="button" value="这是一个按钮"/> <br />
<!-- 复选框（多选框） -->
<!-- type="checkbox" 例如：记住密码 -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- <input type="checkbox" />记住密码 -->
<!-- ArrayList add remove -->
<!-- menu 集合 = ["红烧肉"] -->
<input type="checkbox" name="menu" value="宫保鸡丁"/>宫保鸡丁<br />
<input type="checkbox" name="menu" value="红烧肉"/>红烧肉<br />
<input type="checkbox" name="menu" value="青椒肉丝"/>青椒肉丝<br />
<!-- 单选框 -->
<!-- type="radio" 例如：性别 -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- sex = "female" -->
<input type="radio" name="sex" value="male"/>男<br />
<input type="radio" name="sex" value="female"/>女<br />
<!-- 文件选择 -->
<!-- type="file" 例如：文件上传 -->
<!-- upload = 文件路径（文件） -->
<input type="file" name="upload"/><br />
<!-- 文本输入 -->
<!-- type="text" input的默认type值就是text -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- value实际上就是输入框输入的内容 -->
<!-- content = "输入的内容" -->
<input type="text" name="content" value=""/><br />
<!-- type="password" 基本与text一样 输入格式为密码 -->
<input type="password" name="password" value=""/><br />
<!-- type="number" 输入格式为数字 -->
<input type="number" name="number" value=""/><br />
</form></form>
4.焦点
<label for=""></label>label 用for属性，指向对应表单元素input中的id属性
<form action="服务器地址" method="post">
<!-- label 用for属性，指向对应表单元素input中的id属性 -->
<!-- 当用户点击对应的label，它的for属性指向的id属性所在输入框就能获取焦点 -->
<label for="user">账号：</label><input type="text" id="user"/><br />
密码：<input type="password"/><br />
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</form>5.下拉列表
<select name="" value=""></select>name属性设置在 select中， value就是option中的字符
CSS
html用来撰写网页的结构主体，如果把人比作一个网页，html就是骨架，为了让“人”变得好看需得加上血肉和衣裳，CSS的工作就是美化网页界面
CSS的编写位置
CSS的语句一般写在<head></head>之间用<style></style>标记包裹起来
CSS的编写内容
选择器
写在<style></style>标记之间的css样式一般使用 .关键词 或者 标签名 作为标识，这就是选择器。使用 .关键词 时，body的内容需要使用样式用class=“关键词”调用对应样式。
常用的基础选择器有：类选择器，id选择器，标签选择器。
选择器也有很多功能
后代选择器
/* 后代选择器 “父级选择器 子级选择器” ,其中的选择器都是基础选择器,彼此间有空格 */
ul li{
color: red;
}
/* 其中 基础选择器 可以是 类选择器 id选择器 标签选择器 */
.a li{
color: red;
}子元素选择器
/* 父级选择器>子级选择器 */
.a>.b{
color: red;
}
/* 设置子级元素时，不一定要写全所有选择器关系 */
.nav ul li a{
color: pink;
}
.nav a{
color: pink;
}
/* 设置直接子级 */
.nav1>a{
color: greenyellow;
}并集选择器
/* .a{
color: red;
}
.b{
color: red;
} */
/* 将上述代码精简 */
/* 选择器1,选择器2,....{} 所有的选择器可以设置相同的样式 */
.a,.b{
color: red;
}伪类选择器
/* 链接的伪类选择器· */
/* 当鼠标悬浮在链接标记上，会出发该效果 */
.link01:hover{
font-size: 40px;
color: cornflowerblue;
}样式的设计就是写在这样的选择器里面，可以设置宽高，服务于块元素，在块元素中，可以包含任意元素。
.box{
/* 块标记 可以设置宽高度 */
/* width: 200px; 用像素值设置宽度 */
/* width: 100%; 该元素的宽度所占它的父元素的宽度的百分比 div.width = body.width * 100% */
/* 快标记 默认独占一行，且在不设置宽度的情况下 宽度为100% (width:100%;) */
height: 100px;
/* 设置背景颜色 */
background-color: orange;
}元素模式转换
display，转换元素的显示模式，它有一些常用的属性：block块元素，inline行内元素，contents，inline-block行内块元素等等。其中行内块元素的使用较为频繁。
行内元素因为不是独占一行，所以没有办法设置像是背景颜色，宽高度这种属性，但有时候又会切实需要这样的功能实现来帮我们完成相应的工作。像是有些场景需要使用列表，但是又需要列表有一些好看的样式，inline-block可以帮助我们将行内元素更变为行内块元素
li {
display: inline-block;
/* 设置宽高 */
width: 120px;
height: 40px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 40px;
/* 设置字体颜色 */
color: #CCCCCC;
/* 当li被鼠标指向时，设置标签的样式为手指 */
cursor: pointer;
}JavaScript
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。
JS的组成
1.ECMAScript
简称ES，是JS的前身，也是JS的标准。
其中要学习JS的核心语法，如数据类型、定义变量、控制语句等。
2.BOM(Browser Object Model)
浏览器对象模型，可以通过js的BOM控制浏览器的行为。
3.DOM(Document Object Model)
文档对象模型，这里的文档指HTML页面。
可以通过js的DOM控制页面中的元素。
JavaScript的书写位置
JavaScript可以写在<body></body>之间在body结束之前，也可以写在<head></head>之间在head结束之前，还可以写在body之后，可写的范围很大。在书写js代码时需要使用<script></script>导入js文件才可以使用。js的代码也需要写在<script></script>里。
JavaScript的书写内容
提到这个名字很难不和Java联系起来，相较于Java这种强类型语言，JavaScript是一种弱类型语言，在使用变量时不等同于Java一样需要声明变量类型，js可以使用关键字var或者let定义变量，甚至有些时候可以不用，一般用的较为频繁的时let关键字，var会有块级作用域问题，用let去替换var，let具备块级作用域。
前文提到html是网页的骨架，css是血肉和服装，js就是网页多样化，让网页“动起来，活起来”的关键。
输出方式
js的输出方式有三种
1.弹出警告框
alert("hello");
2.控制台输出
console.log("hello")
3.页面中输出
document.write("hello");
可以写成如下形式
## 写在某个标签的事件中
事件，如鼠标单击事件onclick，鼠标移入事件onmouseenter等
<button onclick="alert('hello js!')">点击按钮</button>
这样通常用于调用函数
DOM获取元素的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
.a{
width: 100px;
height: 100px;
background-color: orange;
}
.a:nth-of-type(3){
background-color: aqua;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="a"></div>
<div class="a"></div>
<div id="b"></div>
</body>
<script>
// 如何获取body中的标签 根据选择器决定的
// document.querySelector(选择器的名称)
// document DOM中的主要对象 document就是整个HTML文档
// querySelector 根据选择器名称查询
var box = document.querySelector('.box')
//插入内容的函数 标签对象.innerHTML(插入的文本内容)
box.innerHTML = '显示插入内容的区域'
//innerHTML还可以插入标签的内容
box.innerHTML = '<h2>显示插入内容的区域</h2>'
//注意：innerHTML 前面的内容被后面内容覆盖掉
// querySelector 只能选择对应选择器的第一个标签
var box1 = document.querySelector('.a')
box1.innerHTML = '这是被选中的box1的元素'
// var box2 = document.querySelector('.a:nth-of-type(3)')
// box2.innerHTML = '这是选择的另外的元素'
//document.querySelectorAll()
//由于all 是查询所有的符合选择器条件的元素，因此最终的结果都是一个数组
var boxs = document.querySelectorAll('.a')
console.log(boxs)
//如果要区分元素，就用[下标]
boxs[0].innerHTML = '第一号元素'
boxs[1].innerHTML = '第二号元素'
//根据id名称获取标记
// document.getElementById('b')
// 根据class名称获取标记,返回结果是一个数组
// document.getElementsByClassName('a')
// 根据标签名称获取标记，返回结果是一个数组
// document.getElementsByTagName('div')
</script>
</html>
关于事件
js目前学习较多的场景就是各种的鼠标键盘事件
<script>
//onclick onmouseover onmouseout onmousedown onmouseup
// 事件 event 就像arguments在每一个函数中 ，也存在每一个事件中
let btn = document.querySelector('.btn')
//所谓的event 就是因触发条件而形成的一系列的内容
btn.onclick = function(event){
//event中有 相关的X和Y的坐标 clientX,clientY offsetX,offsetY
// type 事件的名称 click
console.log(event.type)
}
let box = document.querySelector('.box')
// onmousemove 鼠标移动事件
document.body.onmousemove = function(event){
//鼠标在body中的位置
console.log(event.clientX + ':' + event.clientY)
box.style.left = event.clientX + 'px'
box.style.top = event.clientY + 'px'
}
</script>按键监听
<body>
<input class="msg" type="text" />
发送
<select class="sel">
<option>按Enter键发送</option>
<option>按Ctrl + Enter键发送</option>
</select><br>
<div class="con"></div>
</body>
<script>
let msg = document.querySelector('.msg')
let sel = document.querySelector('.sel')
let show = document.querySelector('.con')
document.body.onkeypress = function(event){
if(sel.value == '按Enter键发送'){
if(event.keyCode == 13){
show.innerHTML += msg.value + '<br>'
}
}else{
//组合键的编码有可能会改变
console.log(event.keyCode + ":" + event.ctrlKey)
//按Ctrl + Enter键发送
if(event.keyCode == 10 && event.ctrlKey == true){
show.innerHTML += msg.value + '<br>'
}
}
}
</script>
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
