html、css、javascript快速入门

最新推荐文章于 2024-06-16 15:31:20 发布

不明之明

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量746

点赞数 27

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_73975059/article/details/136818559

版权

一、html快速入门

1.html格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2.基础标签：

<h1> -<h6> //定义标题，h1最大，h6最小
<font> //定义文本的·字体，字体尺寸，字体颜色
<b>  //定义粗体文本
<i>  //定义斜体文本
<u>  //定义文本下划线
<p>  //定义段落
<br>  //定义折行
<hr>  //定义水平线

3.图片、音频、视频标签：

<img>  //定义图片
    src:规定显示图像的URL（统一资源定位符）
    height:定义图像高度
    weight：定义图像宽度
<audio>  //定义音频
    src:规定音频的URL
    controls:显示播放控件
<video>  //定义视频
    src:规定音频的URL
    controls:显示播放控件

4.超链接标签：

<a>  //定义超链接，用于连接到另一个资源
href:指定访问资源的URL
target:指定打开资源的方式
    _self:默认值，在当前页面打开
    _blank:在空白页面打开

5.列表标签：

//有序列表
<ol>
    <li>海绵宝宝</li>
    <li>章鱼哥</li>
    <li>派大星</li>
</ol>

有序列表效果如下：

//无序列表
<ul>
    <li>海绵宝宝</li>
    <li>章鱼哥</li>
    <li>派大星</li>
</ul>

无序列表效果如下：

6.表格标签：

<table>  //定义表格
    border:规定表格边框的宽度
    width:规定表格的宽度
    cellspacing:规定单元格之间的空白
<tr>  //定义行
    align:定义表格行的内容对齐方式
<td>  //定义单元格
    rowspan:规定单元格可横跨的行数
    colspan:规定单元格可横跨的列数
<th>  //定义表头单元格

7.表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单。

表单项（元素）：不同类型的iput元素、下拉列表、文本域等。

form:定义表单
    action:规定当提交表单时向何处发送表单数据，URL
    method:规定用于发送表单数据的方式
        get:浏览器会将数据直接附在表单的action URL之后。大小有限制
        post:浏览器会将数据放到http请求消息体中，大小无限制
<input>:表单项，通过type属性控制输入形式
    type取值：
        text:默认值，定义单行的输入字段
        password:定义密码字段
        radio:定义单选按钮
        checkbox:定义复选框
        file:定义文件上传按钮
        hidden:定义隐藏的输入字段
        submit:定义提交按钮，提交按钮会把表单数据发送到服务器
        reset:定义重置按钮，会清除表单中的所有数据
        button:定义可点击按钮
<select>:定义下拉列表，<option>:定义列表项
<textarea>:文本域

二、CSS

CSS导入方式

将CSS导入HTML有三种方式：
1.内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color:red">Hello CSS</div>

2.内部样式：定义style标签，在标签内部定义css样式

<style type="text/css">
    div{
        color:red;
    }
</style>

3.外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet" href="demo.css">

css选择器：

概念：选择器是选取需设置样式的元素（标签）

div{
    color:red;
}

分类：

1.元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      color:red;
    }  //元素选择器
    #name{
      color:blue;
    }  //id选择器
    .cls{
      color:pink;
    }  //类选择器
  </style>

</head>
<body>
<div>div1</div>
<div>div2</div>
<div id="name">div3</div>
<div class="cls">div4</div>
<span class="cls">span</span>
</body>
</html>

三、javascript

javascript 是一门面向对象的脚本语言，它跨平台，控制网页的行为，使网页可交互。
W3C标准：网页主要由三部分构成：结构：HTML 表现：CSS 行为：javascript。
java与javascript完全不同，不论是概念还是设计，但是基础语法类似。

javascript引入方式

内部脚本：将js代码定义在HTML页面中。

在HTML中，javaScript代码必须位于<script></script>标签之间。

在HTML中文档可以在任意地方，放置任意的<script>

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

书写语法：

1.区分大小写

2.每行结尾的分号可有可无

输出语句：

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

变量：

javascript中用var关键字(variable的缩写)来声明变量

数据类型：

javascript中分为：原始类型和引用类型

5种原始类型：

number：数字（整数、小数、NaN）
string：字符、字符串、单双引皆可
boolean
null
undefined:当声名的变量未初始化时，该变量默认值是undefined

使用type运算符可以获取数据类型

alert(typeof age);

函数:

function functionName(参数1，参数2){

要执行的代码

}

形式参数不需要类型，因为javascript是弱类型语言。

返回值也不需要定义类型。

Array:

javascript Array对象用于顶改以数:

定义：
    var 变量名=new Array[元素列表];//方式一
    var 变量名=[元素列表];//方式二

String:

var 变量名=new String(s);//方式一
var 变量名=s;//方式二
属性：length:字符串长度
方法：charAt():返回在指定位置的字符
      indexOf():检索字符串

自定义对象：

var 对象名称={
        属性名称1：属性值1，
        属性名称1：属性值1，
        ...
        函数名称：function(形参列表){}
        ...
};

BOM（浏览器对象模型）:

javascript将浏览器的各个组成部分封装为对象

组成：

Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象

Window:

方法
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()	按照指定周期（以毫秒计）来调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式

History(历史记录):

获取：使用window.history获取，其中window可以省略

window.history.方法();

history.方法();

方法
back()	加载History列表中的前一个URL
forward()	加载History列表中的下一个URL

Lacation:

获取：使用window.location获取，其中window可以省略

window.location.方法();

loaction.方法();

属性：

href：设置或返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //3秒后跳转到首页
  document.write("3秒跳转到首页...");
  setTimeout(function(){
    location.href="https://www.baidu.com";
  },3000);
</script>
</body>
</html>

DOM(文档对象模型)：

将标记语言的各个部分封装为对象

Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

javascript通过DOM就能对HTML进行操作了

改变HTML元素的内容
改变HTML元素的样式（CSS）
对HTML DOM事件做出反应
添加和删除HTML元素

DOM是W3C（万维网联盟）的标准

DOM定义了访问HTML和XML文档的标准

W3C DOM被分为3个不同的部分：

1.核心DOM：针对任何结构化文档的标准模型

Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

2.XML DOM：针对XML文档的标准模型

3.HTML DOM：针对XML文档的标准模型

image:<img>
Button:<input type='button'>

事件绑定：

事件绑定有两种方式：

方式一：通过HTML标签中的时间属性进行绑定

<input type="button" value="按钮一" onclick="on()">

function on(){
    alert("按钮一被点了");
  }

方式二：通过DOM元素属性绑定

<input type="button" value="按钮二" id="btn">

document.getElementById("btn").onclick=function(){
    alert("按钮二被点了");
  }

不明之明

关注

27
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
html、css、javascript快速入门

在HTML中，javaScript代码必须位于<script></script>标签之间。在HTML中文档可以在任意地方，放置任意的<script>外部脚本：将js代码定义在外部js文件中，然后引入到HTML页面。2.内部样式：定义style标签，在标签内部定义css样式。获取：使用window.location获取，其中window可以省略。获取：使用window.history获取，其中window可以省略。表单：在网页中主要负责数据采集功能，使用<form>标签定义表单。
复制链接

扫一扫