前端常用知识点总结

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常用标签

标签 描述
基础
定义文档类型。
< 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>

总结

未完善

你可能感兴趣的:(html,前端,javascript,html)