HTML-CSS-JavaScript

作者: zhl 分类: JavaWeb 发布时间: 2023-07-02 20:04
内容 隐藏
1 HTML
2 CSS
3 JavaScript
3.1 JS的基础语法
3.2 JS函数
3.3 JS对象
3.4 String
3.5 JSON
3.6 BOM
3.6.1 Window
3.6.2 Location
3.7 DOM
3.8 JS事件监听
3.8.1 事件绑定

HTML

HTML(Hyper Text Markup Language): 负责网页的结构(页面元素和内容)。

  • HTML(HyperText Markup Language): 超文本标记语言
    • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
    • 标记语言：由标签构成的语言
    • HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片, <video>展示视频。
    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
      制作简易的HTML页面

HTML结构标签

<!DOCTYPE html> <!--约束，声明-->
<html lang="en"> <!--html 标签表示html的开始  lang="en" 表示英文， "zh_CN" 表示中文   html 标签一般分为两部分，分别是 head 和 body-->
<head><!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body><!--body标签是整个html标签显示的主体内容-->
    hello 你好
</body>
</html>

图片标签：<img>

  • src：指定图像的url（绝对路径 / 相对路径）
  • width：图像的密度（像素 / 相对于父元素的百分比）
  • height：图像的高度（像素 / 相对于父元素的百分比）

标题标签：<h1> - <h6>
水平线标签：<hr/>
换行标签 ：<br/>

CSS

  • 行内样式： 写在标签的style属性中(不推荐) 
    <h1 style= "xxx: xxx; xxx: xxx;"> 中国新闻网</h1>
  • 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中） 
    <style>
h1{
    xxx: xxx;
    xxx: xxx;
}
</style>
  • 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入） 
    h1{
xxx: xxx;
xxx: xxx;
}
    <link rel="stylesheet" href= "css/news.css">
  • 颜色表示形式：

span标签

没有语义的标签，就是为了给非标题设置颜色

CSS选择器: 用来选取需要设置样式的元素(标签)

  • 元素选择器 
    <h1> Hello CSS </h1>
h1{
color: red;
}
元素名称 {
color: red;
}
  • id选择器 
    <h1 id="hid"> CSS id Selector </h1>
#id{
color: red;
}
#id属性值{
color: red;
}
  • 类选择器 
    <h1 class="cls">CSS Slee</h1>
.cls{
color: red;
}
.class属性值{
color: red;
}

超链接标签

  • 标签：
    • <a href="..." target="..."> 央视网 </a>
  • 属性：
    • href: 指定资源访问的url
    • target: 指定在何处打开资源链接
    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开

默认超链接是蓝色且带有下划线的样式
可以以下通过CSS属性修改样式
text-decoration: 规定添加到文本的修饰，none 表示定义标准的文本。（可以去除下划线）
color: 定义文本的颜色

视频标签<video>

  • src：规定视频的url
  • controls：显示播放控件
  • width：播放器的长度
  • heiht：播放器的高度

音频标签<audio>

  • src：规定音频的url
  • controls: 显示播放控件

段落标签：<p>

文本加粗标签: <b> 或 <strong>

CSS样式

  • line-height：设置行高
  • text-indent：定义第一行内容的缩进
  • text-align：规定元素中的文本的水平对齐方式

新浪新闻-页面布局

  • 盒子：页面中所有的元素（标签），都可以看作是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
  • 盒子模型组成：内容区域(content)、内边距区域(padding)、边框区域(broader)、外边距区域(margin)

标签<div> <span>

  • 特点：
    • div标签：
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高 (width、height)
    • span标签：
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高 (width、height)
      表格标签
  • 场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表
  • 标签

表单标签

  • 场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集
  • 标签：<form>
  • 表单项：不同类型的input 元素、下拉列表、文本域等。
    • <input>: 定义表单项，通过type 属性控制输入形式
    • <select>: 定义下拉列表
    • <textarea>: 定义文本域

  • 属性：
    • action: 规定当提交表单时向何处发送表单数据，URL
    • method: 规定用于发送表单的方式。GET、POST

JavaScript

JavaScript 是一门跨平台、面向对象的脚本语言。

JS的引入方式
内部脚本：将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签

  • <script> 标签不能自闭和

JS的基础语法

书写语法

  • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
  • 注释
    • 单行注释：//注释内容
    • 多行注释：/*注释内容*/
  • 大括号表示代码块 
    //判断
if(count==3){
alert(count);
}

输出语句

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入HTML输出
  • 使用 consule.log() 写入浏览器控制台 
    <script>
window.alert("Hello JavaScript"); //浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML，在浏览器展示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>

变量

  • JavaScript中用 var 关键字(variable的缩写)来声明变量
  • JavaScript是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
    • 数字不能开头
    • 建议使用驼峰命名

注意：

  • EMCAScript6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
  • EMCAScript6 新增了const关键字, 用来声明一个只读的变量。一旦声明，常量的值就不能改变。

数据类型：JavaScript中分为：原始类型 和 引用类型

  • number：数字（整数、小数、NaN(Not a Number)）
  • string: 字符串，单双引皆可
  • boolean: 布尔。true,false
  • null: 对象为空
  • undefined: 当声明的变量未初始化时，该变量的默认值是 undefined
    使用typeof 运算符可以获取数据类型：例如 alert(typeof null)、alert(typeof 3.14)

运算符

== 与 ===

  • == 会进行类型转换，=== 不会进行类型转换
var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

类型转换：

  • 字符串类型转为数字( parseInt("xxx") )
    • 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。 
      alert(parseInt("12")); //12
alert(parseInt("12A34")); //12
alert(parseInt("A343")); //NaN (Not a Number)
  • 其他类型转为boolean(自动转换):
    • Number: 0 和 NaN为 false, 其他均转为 true。
    • string: 空字符串为false, 其他均转为true。
    • null 和 undefined : 均转为false。

流程控制语句

JS函数

  • 介绍：函数（方法）是被设计为执行特定任务的代码块。
  • 定义：JavaScript函数通过function关键字进行定义，语法为：
//定义方式一：
function functionName(参数1,参数2...){
    //要执行的代码
}
//定义方式二：
var functionName=function(参数1,参数2...){
    //要执行的代码
}

注意：

  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

JS中，函数调用可以传递任意个数的参数。

JS对象

Array

  • JavaScript中Array对象用于定义数组。

  • 定义

    var 变量名 = new Array(元素列表); //方式一
var 变量名 = [元素列表]; //方式二

  • 访问

    arr[索引] = 值;

  • JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据。

  • 属性（常用）

  • 方法（常用）

String

  • String字符串对象创建方式有两种： 
    var 变量名 = new String("..."); //方式一
var 变量名 = "..."; //方式二
  • 属性：
  • 方法

JSON

  • JS自定义对象
    • 定义格式： 
      var 对象名 = {
属性名1：属性值1，
属性名2：属性值2,
函数名称：function(形参列表){}
//或 函数名称：(){}
//可省略function
};
    • 调用格式： 
      对象名.属性名;
对象名.函数名();

JSON-介绍

  • 概念：JavaScript Object Notation，JavaScript对象标记法
  • JSON是通过JavaScript对象标记书写的文体 ,数据格式由键值对组成
    • 其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或null。
  • 由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输。
    • 数据载体多数以JSON和XML进行传输，在银行中一般使用XML进行数据传输。

JSON-基础语法

  • 定义

    var 变量名 = &#039;{"key1" : value1,"key2" : value2}&#039;;

  • JSON字符串转为JS对象

    var jsObject = JSON.parse(useStr);

  • JS对象转为JSON字符串

    var jsonStr = JSON.stringify(jsObject);

BOM

  • 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象。
  • 组成：
    • Window: 浏览器窗口对象
    • Navigator: 浏览器对象
    • Screen: 屏幕对象
    • History: 历史对象
    • Location: 地址栏对象

Window

Window 是浏览器窗口对象，直接使用window,其中window.可省略。window.alert("xxx"); 或alert("xxx");

  • 属性
    • history：对 History 对象的只读引用。请参阅 History 对象。
    • location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
    • navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。
  • 方法
    • alert()：显示带有一段消息和一个确认按钮的警告框。
    • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
    • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
    • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

      Location

      地址栏对象,使用window.location 获取，其中window可省略。window.location.属性; location.属性

  • 属性
    • href：设置或返回完整的url。

DOM

概念：Document Object Model ，文档对象模型

  • 将标记语言的各个组成部分封装为对应的对象：
    • Document: 整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
  • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。window可省略
  • Document对象中提供了以下获取Element元素对象的函数：
    • 根据id属性值获取，返回单个Element对象 
      var h1 = document.getElementById('id')l
    • 根据标签名称获取，返回Element对象数组 
      var divs = document.getElementsByTagName('div');
    • 根据name属性值获取，返回Element对象数组 
      var hobbys= document.getElementsByName('hobby');
    • 根据class属性值获取，返回Element对象数组 
      var clss= document.getElementsByClassName('cls');

JS事件监听

  • 事件：HTML事件是发生在HTML元素上的”事情“。比如：
  • 鼠标的点击
  • 键盘按键
  • 鼠标移动到元素上
  • 事件监听：
    • JavaScript可以在事件被侦测到时执行代码。

事件绑定

  • 方式一：通过HTML标签中的事件属性进行绑定 
    <input type="button" onclick="on()" value="按钮1">    //onclick后面的 on()是函数名
<script>
function on(){
    alert("不要点我嘛.。");
}
</script>
  • 方式二：通过DOM元素属性绑定 
    <input type="button" id="btn" value="按钮2">
<script>
document.getElementById(&#039;btn&#039;).onclick=function(){
    alert(&#039;不要点我嘛.。&#039;);
}
</script>

常见事件

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

更多阅读
标签云
bug fix cookie css docker elasticsearch filter git html java JavaWeb JDBC js linux maven MySQL netty NIO oss Redis servlet session Spring web 主从复制 事务 优化 垃圾回收 容器化 常用指令 序列化 底层原理 异步 数据库 索引 线程池 缓存 解耦合 负载均衡 高可用