前端学习笔记

最新推荐文章于 2024-09-21 09:30:15 发布

Johnson0722

最新推荐文章于 2024-09-21 09:30:15 发布

阅读量226

点赞数

分类专栏：前端文章标签： html css 前端学习

本文链接：https://blog.csdn.net/John_xyz/article/details/103206996

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础

<!DOCTYPE>声明为HTML5文档
<html>元素是HTML页面的跟元素
<head>元素包含了文档的元数据 (meta)
<title>描述了文档的标题
<style>标签定义了HTML文档的样式引用地址
<body>元素包含了可见的页面内容
HTML标题通过<h1>-<h6>元素来定义了 <h1>这是一个标题</h1>
HTML段落通过<p>元素定义 <p>一个段落</p>
HTML链接是通过<a>来的定义的 <a href="http://www.baidu.com">这是一个链接</a>, 链接可以是一个词，也可以是一副图像，可以点击这部分内容跳转到链接部分
<br>表示换行，</br>元素是一个空的html元素，由于关闭标签没有任何意义，因此它没有结束标签 <p>这个<br>段落演示分行</p>
<hr>标签在HTML页面中创建水平线
图像由<img>标签定义，<img>是空标签，意思是它只包含属性，没有闭合标签。定义图像的语法是<img src="url" alt="some_text" width="304" height="228">. alt属性用来为图像定义一串预备可替换的文本，当浏览器无法载入图像时，替换文本告诉读者失去的信息

表格由<table>标签定义。每个标签均有若干行(由<tr>标签定义)，每行被分割为若干单元格(由<td>标签定义)，表头使用<th>标签进行定义，表格标题用<caption>定义

<table border='1'>
    <caption> Savings </caption>
    <tr>
        <th> header 1</th>
        <th> header 2</th>
    </tr>
    <tr>
        <td> e1 </td>
        <td> e2 </td>
    </tr>
    <tr>
        <td> e3 </td>
        <td> e4 </td>
    </tr>
</table>

有序列表使用<ol>标签，无序列表使用<ul>标签，每个列表项用<li>标签

<ol>
    <li> coffee1 </li>
    <li> coffee2 <li>
</ol>

<ul>
    <li> coffee1 </li>
    <li> coffee2 <li>
</ul>

HTML可以通过<div>和<span>将元素组合起来，大多数HTML元素被定义为块级元素或者内联元素。<div>元素是块级元素，可以用于组合其他HTML容器，<div>元素没有任何含义，但由于是块级元素，会前后折行。<span>元素是内联元素，可以用作文本容器，没有特定含义
- 块级元素在浏览器显示时，通常以新行开始, 例如 <h1>,<p>,<table>
- 内联元素在显示时，通常不会以新行开始, 例如<b>,<td>,<a>
HTML表单用于手机不同类型的用户输入。表单是一个包含元素的区域，允许用户在表单中输入内容，使用<form>标签来设置

<form>
first name: <input type="text" name="firstname"><br>
last name: <input type="text" name="lastname"><br>
password: <input type="password" name="pwd">
submit: <input type="submit" value="submit">
</form>

HTML <script>标签定义客户端脚本， <script>元素可以包含脚本语句，也可以通过src属性添加外部脚本文件, 例如：
```
 <script> document.write("hello world"); </script>
```

HTML属性

属性可以在元素中添加附加信息，一般描述于开始标签，而且总是以名称/值对的形式出现, 例如 HTML中有链接<a>标签定义,链接的地址在属性中指定： <a href="http://www.baidu.com">这是一个链接</a>。下面是适用于大多数HTML元素的属性
class 为html元素定义一个或多个类名
id 定义元素的唯一id
style 规定元素的行内样式
title 描述元素的额外信息

HTML URL

URL统一资源定位符， web浏览器通过url从web服务中请求页面。当点击HTML中的某个页面时，对应的<a>标签指向万维网上的一个地址。一个统一资源定位符(url)的语法规则如下: schema://host.domain:port/path/filename

schema定义因特网服务类型，最常见的是http. 其他的还有
- http: 超文本传输协议，不加密
- https: 安全超文本传输协议，加密所有交换信息
- ftp：文件传输协议，用于将文件下载或者上传至网站
- file: 本地计算机文件
host: 定义域主机（http默认主机是www）
domain 定义因特网域名 (例如baidu.com)
port 定义主机上的端口号 (http默认端口号是80)
path定义服务器上的路径
filename 定义文档的名称

CSS简介

CSS指层叠样式表(cascading style sheets), 样式定义如何显示HTML元素，样式通常存储在样式表中，外部样式表通常存储在css文件中
css规则由两个部分组成：选择器，一条或多条声明语句
- id选择器： id选择器可以为标有特定的id和HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，css中id选择器以#来定义
- class选择器：class选择器用于描述一组元素样式，可以在多个元素中使用. class选择器在HTML中以class属性表示，在css中以一个.号开始
- ```
// 应用于id="para1"
#para1 {
    text-align: center;
    color:red;
}

// 应用于所有class="center"
.center {
    text-align:center;
}

// 应用于所有p元素class="center"
p.center {
    text-align:center;
}
```
插入样式表的方法有三种：
- 外部样式表，当样式需要用到很多页面时，每个页面使用<link>标签链接到样式表，<link>标签在文档头部.
- 内部样式表：当单个文档需要使用样式时，使用内部样式表，可以用<style>在文档头部定义内部样式表
- 内联样式：仅当样式在一个元素上一次性使用，在style属性中使用

// 外部样式
<head> 
    <link rel="stylestheet" type="text/css" href="mystyle.css">
</head>

// 内部样式
<head>
    <style>
        p {margin-left:20px}
        body {background-imag:url("/images/back40.gif")}
    </style>
</head>

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

css属性：背景颜色，图像，文本颜色，文本对齐方式，字体，链接，列表，边框...

css分组和嵌套选择器, 在样式表中有很多相同的元素，为了减小代码量，可以使用分组选择器. 而嵌套选择器适用于选择器的内部样式。

h1 {color:green;}
h2 {color: green;}
p {color: green;}

// 使用分组选择器
h1, h2, p {
    color:green;
}


// 嵌套选择器
p {}   为所有p元素指定一个样式
.marked{}  为所有class="marked"的元素指定一个样式
.marked p{}  为所有class="marked"元素内的p元素指定一个样式
p.marked{}  为所有class="marked"的p元素指定一个样式

JavaScript简介

JavaScript是一种轻量级的脚本语言，可插入HTML页面的编程代码，用浏览器执行。可以直接写入HTML输出流，也可以直接改变HTML的内容.

HTML中的脚本必须位于<script>和</script>之间。脚本可以被放置在页面的<body>和<head>部分中。<script>和</script>会告诉JavaScript何时开始何时结束。也可以把脚本保存到外部文件中 <script src="script.js"></script>
JavaScript函数和事件，当发生某个事件时执行时调用该函数
JavsScript语法
JavaScript事件
- onchange: HTML元素改变
- onclick：用户点击HTML元素
- onload: 浏览器加载完页面
JavaScript this关键字: this表示当前对象的一个引用，它会随着执行环境的改变而改变

JQuery简介

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它. 将下载的文件放在网页的同一目录下，就可以使用jQuery. jQuery 是为事件处理特别设计的。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例如在元素上移动鼠标、选取单选按钮、点击元素

jQuery 语法:jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
- 基础语法： $(selector).action(): 美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
jQuery HTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。DOM = Document Object Model（文档对象模型）。三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery遍历
jQuery ajax