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>
总结
未完善