前端核心技术：HTML、JavaScript与CSS知识精要,-CSDN博客

本文链接：https://blog.csdn.net/weixin_46721191/article/details/130379031

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

文章目录

html,js等前端相关知识点总结
前言
一、简介
二、常用知识点
总结

前言

前端即网站前台部分，运行在浏览器上展现给用户浏览的网页。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常用标签

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

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在线引入
代码如下（示例）：

<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>