前端三件套速成

MoyiTech

已于 2024-02-09 02:06:50 修改

阅读量432

点赞数 9

文章标签：前端

于 2024-01-05 23:28:06 首次发布

本文链接：https://blog.csdn.net/qq_30650051/article/details/135419829

版权

本文介绍了HTML的基本框架结构，包括元素、属性、文本格式化和表单，同时详细讲解了CSS用于描述网页布局和样式设置，以及JavaScript如何控制网页行为，包括jQuery的使用和异步数据请求（Ajax）

摘要由CSDN通过智能技术生成

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

HTML部分

HTML基本框架结构：

在这里插入图片描述

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head>
    元素包含了文档的元（meta）数据，如
    <meta charset="utf-8"> 定义网页编码格式为 utf-8。
    <title> 元素描述了文档的标题 </title>
</head>
<body>
    元素包含了可见的页面内容
    <h1>这是一个一级标题 h1-h6</h1>
    <p>这是一个段落</p> 浏览器会自动地在段落的前后添加空行。
    <a href="https://www.9998k.cn/">这是一个链接 这里的href是属性</a>
    <img src="./1.png" width="111", height="222" alt="图片名">
    <br> 换行符
    <hr> 水平线
    <!-- 这是一个注释 -->
</body>

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML 文本格式化标签

标签	描述
<br>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<base>标签规定HTML中所有链接标签的默认属性，href、target等

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

div：块元素（分段）

span：内联元素（行内）

HTML表单

<form> 用于创建表单，action为提交URL method为post or get

CSS部分

CSS：

内联样式 style属性
内部样式表 head中的style标签
外部引用使用外部的CSS文件

一般情况下优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

如果外部样式在内部样式之后引入，则优先外部样式

外部样式表

从CSS文件引入样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

在head.style中声明

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

在元素的style属性中声明

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

Javascript部分

jQuery

元素操作

元素选择

var a = $('.class')
var b = $('#id')

创建元素

var c = $('<h1>contents<h1>')

添加元素

// 追加到子标签
a.prepend(c)
c.prependTo(a)
a.append(c)
c.appendTo(a)

// 将页面已存在元素追加到，相当于移动
a.prepend(b)

// 同级追加
a.before(c)
a.after(b)

删除元素

a.remove()  // 标签和子元素一起删除
a.empty()  // 删除子元素，不删除标签

遍历元素
实质上每个整体是jQuery，但元素都是DOM

$('.class').each(function(index, element) {
	console.log(index);
	console.log(element);  // console.log(this)
	console.log($(element));  // 转为jQuery
})

事件

ready事件预加载事件

$(document).ready(function() {
});
$(function() {
});

绑定事件

// bind绑定
$("元素").bind("事件1 事件2 事件3", function(){
	console.log("为多个事件绑定一个函数")
})

$("元素").bind("事件1", function(){
	console.log("事件1的函数")
}).bind("事件2", function(){
	console.log("事件2的函数")
})

$("元素").bind({
	"事件1": function(){
		console.log("事件1的函数")
	},
	"事件2": function(){
		console.log("事件2的函数")
	}
})

// 直接绑定
$("元素").事件名(function(){
})
$("#myBtn").click(function(){
}).mouseout(function(){
})

Ajax

异步无刷新
GET

$.get("URL", "params", function(data) {
	console.log(data);
	console.log(data.text());
	console.log(data.json());
})

$.getJSON("URL", "params", function(data) {
	console.log(data);
})

POST

$.post("URL", "params", function(data) {
	
})

MoyiTech

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端三件套速成

HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为。
复制链接

扫一扫