前端常用知识点总结

分手后的思念是犯贱 2023-09-26 23:07 19阅读 0赞

## html,js等前端相关知识点总结 ##

--------------------

#### 文章目录 ####

*  html,js等前端相关知识点总结
 *  前言
 *  一、简介
 *   *  1.html
     *  2.javascript
     *  3.css
 *  二、常用知识点
 *   *  1.HTML
     *   *  1.html5文档（基本格式）
         *  2.html常用标签
     *  2.js
     *   *  1.js表单验证
         *  2.js通过id获取值
         *  2.js通过id改变 HTML 内容
         *  3.jq通过id获取值
 *  总结

--------------------

## 前言 ##

前端即网站前台部分，运行在浏览器上展现给用户浏览的网页。web前端就是利用三大核心 即 html，css，JavaScript分别是网页控件、美化控件代码、增强表现力的脚本语言等技术实现。

--------------------

## 一、简介 ##

### 1.html ###

> HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

### 2.javascript ###

> JavaScript 简称“JS” 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

### 3.css ###

> 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。  
> CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

## 二、常用知识点 ##

### 1.HTML ###

#### 1.html5文档（基本格式） ####

> 代码如下（示例）：

<!DOCTYPE html> <-- 声明为 HTML5 文档-->
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    </head>
     
    <body>
    文档内容..
    </body>
     
    </html>

#### 2.html常用标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基础</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt;!DOCTYPE&gt;</td> 
   <td>定义文档类型。</td> 
  </tr> 
  <tr> 
   <td>&lt; html&gt;</td> 
   <td>定义一个 HTML 文档。</td> 
  </tr> 
  <tr> 
   <td>&lt; title&gt;</td> 
   <td>为文档定义一个标题。</td> 
  </tr> 
  <tr> 
   <td>&lt; body&gt;</td> 
   <td>定义文档的主体。</td> 
  </tr> 
  <tr> 
   <td>&lt; h1&gt; - &lt; h6&gt;</td> 
   <td>定义 HTML 标题。</td> 
  </tr> 
  <tr> 
   <td>&lt; p&gt;</td> 
   <td>定义一个段落。</td> 
  </tr> 
  <tr> 
   <td>&lt; br&gt;</td> 
   <td>定义简单的折行(换行)。</td> 
  </tr> 
  <tr> 
   <td>&lt; hr&gt;</td> 
   <td>定义水平线。</td> 
  </tr> 
  <tr> 
   <td>&lt;! --&gt;</td> 
   <td>定义一个注释。</td> 
  </tr> 
  <tr> 
   <td>格式</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; b&gt;</td> 
   <td>定义粗体文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; abbr&gt;</td> 
   <td>定义一个缩写。</td> 
  </tr> 
  <tr> 
   <td>&lt; em&gt;</td> 
   <td>定义强调文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; i&gt;</td> 
   <td>定义斜体文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; s&gt;</td> 
   <td>定义加删除线的文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; strong&gt;</td> 
   <td>定义语气更为强烈的强调文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; sub&gt;</td> 
   <td>定义下标文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; sup&gt;</td> 
   <td>定义上标文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; time&gt;</td> 
   <td>定义一个日期/时间</td> 
  </tr> 
  <tr> 
   <td>&lt; u&gt;</td> 
   <td>定义下划线文本。</td> 
  </tr> 
  <tr> 
   <td>表单</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; form&gt;</td> 
   <td>定义一个 HTML 表单，用于用户输入。</td> 
  </tr> 
  <tr> 
   <td>&lt; input&gt;</td> 
   <td>定义一个输入控件。</td> 
  </tr> 
  <tr> 
   <td>&lt; textarea&gt;</td> 
   <td>定义多行的文本输入控件。</td> 
  </tr> 
  <tr> 
   <td>&lt; button&gt;</td> 
   <td>定义按钮。</td> 
  </tr> 
  <tr> 
   <td>&lt; select&gt;</td> 
   <td>定义选择列表（下拉列表）。</td> 
  </tr> 
  <tr> 
   <td>&lt; optgroup&gt;</td> 
   <td>定义选择列表中相关选项的组合。</td> 
  </tr> 
  <tr> 
   <td>&lt; option&gt;</td> 
   <td>定义选择列表中的选项。</td> 
  </tr> 
  <tr> 
   <td>&lt; label&gt;</td> 
   <td>定义 input 元素的标注。</td> 
  </tr> 
  <tr> 
   <td>&lt; fieldset&gt;</td> 
   <td>定义围绕表单中元素的边框。</td> 
  </tr> 
  <tr> 
   <td>&lt; legend&gt;</td> 
   <td>定义 fieldset 元素的标题。</td> 
  </tr> 
  <tr> 
   <td>&lt; datalist&gt;</td> 
   <td>规定了 input 元素可能的选项列表。</td> 
  </tr> 
  <tr> 
   <td>&lt; keygen&gt;</td> 
   <td>规定用于表单的密钥对生成器字段。</td> 
  </tr> 
  <tr> 
   <td>&lt; output&gt;</td> 
   <td>定义一个计算的结果。</td> 
  </tr> 
  <tr> 
   <td>框架</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; iframe&gt;</td> 
   <td>定义内联框架。</td> 
  </tr> 
  <tr> 
   <td>图像</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; img&gt;</td> 
   <td>定义图像。</td> 
  </tr> 
  <tr> 
   <td>&lt; map&gt;</td> 
   <td>定义图像映射。</td> 
  </tr> 
  <tr> 
   <td>&lt; area&gt;</td> 
   <td>定义图像地图内部的区域。</td> 
  </tr> 
  <tr> 
   <td>链接</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; a&gt;</td> 
   <td>定义一个链接</td> 
  </tr> 
  <tr> 
   <td>&lt; link&gt;</td> 
   <td>定义文档与外部资源的关系。</td> 
  </tr> 
  <tr> 
   <td>&lt; main&gt;</td> 
   <td>定义文档的主体部分。</td> 
  </tr> 
  <tr> 
   <td>&lt; nav&gt;</td> 
   <td>定义导航链接。</td> 
  </tr> 
  <tr> 
   <td>列表</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; ul&gt;</td> 
   <td>定义一个无序列表。</td> 
  </tr> 
  <tr> 
   <td>&lt; ol&gt;</td> 
   <td>定义一个有序列表。</td> 
  </tr> 
  <tr> 
   <td>&lt; li&gt;</td> 
   <td>定义一个列表项。</td> 
  </tr> 
  <tr> 
   <td>&lt; dl&gt;</td> 
   <td>定义一个定义列表。</td> 
  </tr> 
  <tr> 
   <td>&lt; dt&gt;</td> 
   <td>定义一个定义定义列表中的项目。</td> 
  </tr> 
  <tr> 
   <td>&lt; dd&gt;</td> 
   <td>定义定义列表中项目的描述。</td> 
  </tr> 
  <tr> 
   <td>&lt; menu&gt;</td> 
   <td>定义菜单列表。</td> 
  </tr> 
  <tr> 
   <td>表格</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; table&gt;</td> 
   <td>定义一个表格。</td> 
  </tr> 
  <tr> 
   <td>&lt; caption&gt;</td> 
   <td>定义表格标题。</td> 
  </tr> 
  <tr> 
   <td>&lt; th&gt;</td> 
   <td>定义表格中的表头单元格。</td> 
  </tr> 
  <tr> 
   <td>&lt; tr&gt;</td> 
   <td>定义表格中的行。</td> 
  </tr> 
  <tr> 
   <td>&lt; td&gt;</td> 
   <td>定义表格中的单元。</td> 
  </tr> 
  <tr> 
   <td>&lt; thead&gt;</td> 
   <td>定义表格中的表头内容。</td> 
  </tr> 
  <tr> 
   <td>&lt; tbody&gt;</td> 
   <td>定义表格中的主体内容。</td> 
  </tr> 
  <tr> 
   <td>&lt; tfoot&gt;</td> 
   <td>定义表格中的表注内容（脚注）。</td> 
  </tr> 
  <tr> 
   <td>&lt; col&gt;</td> 
   <td>定义表格中一个或多个列的属性值。</td> 
  </tr> 
  <tr> 
   <td>&lt; colgroup&gt;</td> 
   <td>定义表格中供格式化的列组。</td> 
  </tr> 
  <tr> 
   <td>样式/节</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>&lt; style&gt;</td> 
   <td>定义文档的样式信息。</td> 
  </tr> 
  <tr> 
   <td>&lt; div&gt;</td> 
   <td>定义文档中的节。</td> 
  </tr> 
  <tr> 
   <td>&lt; span&gt;</td> 
   <td>定义文档中的节。</td> 
  </tr> 
 </tbody> 
</table>

### 2.js ###

#### 1.js表单验证 ####

代码如下（示例）：

<!DOCTYPE html> <-- 声明为 HTML5 文档-->
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    </head>
    <body>
     <form name="myForm" action="/demo" onsubmit="return validateForm()" method="post">
    	名字: <input type="text" name="name">
    	<input type="submit" value="提交">
    </form>
    <script>
    function validateForm() {
        
        var x = document.forms["myForm"]["name"].value;
        if (x == null || x == "") {
        
            alert("请输入姓名。");
            return false;
        }
    }
    </script>
    </body>
     
    </html>

#### 2.js通过id获取值 ####

代码如下（示例）：

<!DOCTYPE html> <-- 声明为 HTML5 文档-->
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    </head>
    <body>
    <input type="text" name="name" id="name">
    <script>
    function validateForm() {
        
        var x = document.getElementById("name").value;
            alert("获取到的值为"+x)
    }
    </script>
    </body>
     
    </html>

#### 2.js通过id改变 HTML 内容 ####

代码如下（示例）：

<html>
    <body>
    
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="改变的文本!";
    </script>
    
    </body>
    </html>

#### 3.jq通过id获取值 ####

jq官网 [jq在线引入][jq]  
代码如下（示例）：

<html>
    <body>
    
    <input type="text" name="test" id="test" type = "test">
    
    <script>
    $(" #test ").val()
    $(" input[ name='test' ] ").val()
    $(" input[ type='text' ] ").val()
    $(" input[ type='text' ]").attr("value")
    </script>
    
    </body>
    </html>

## 总结 ##

未完善

[jq]: https://code.jquery.com/jquery-3.6.4.min.js