Summary of front-end related knowledge points such as html and js
Article directory
foreword
The front end is the foreground part of the website, which runs on the browser to display the web pages for users to browse. The front-end of the web is realized by using three core technologies, namely html, css, and JavaScript, which are web page controls, beautifying control codes, and scripting languages that enhance expressiveness.
1. Introduction
1.html
The full name of HTML is Hypertext Markup Language, which is a markup language. It includes a series of tags, through which the document format on the network can be unified, and the scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands, which can explain text, graphics, animations, sounds, tables, links, etc.
2.javascript
JavaScript, short for "JS", is a lightweight, interpreted or just-in-time compiled programming language with function priority. Although it is famous as a scripting language for developing Web pages, it is also used in many non-browser environments. JavaScript is based on prototype programming, a multi-paradigm dynamic scripting language, and supports object-oriented, imperative, declarative, and functional programming paradigm.
3.css
Cascading Style Sheets (full name in English: Cascading Style Sheets) is a computer language used to represent file styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standardized Generalized Markup Language). CSS can not only modify web pages statically, but also dynamically format elements of web pages with various scripting languages.
CSS can precisely control the layout of element positions in web pages at the pixel level, supports almost all font sizes and styles, and has the ability to edit web page objects and model styles.
2. Commonly used knowledge points
1.HTML
1.html5 document (basic format)
The code is as follows (example):
<!DOCTYPE html> <-- 声明为 HTML5 文档-->
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
文档内容..
</body>
</html>
2. HTML common tags
| Label | describe |
|---|---|
| Base | |
| <!DOCTYPE> | Define the document type. |
| < html> | Define an HTML document. |
| < title> | Define a title for the document. |
| < body> | Defines the body of the document. |
| < h1> - < h6> | Defines the HTML title. |
| < p> | Define a paragraph. |
| < br> | Define simple line breaks (newlines). |
| < hr> | Defines the horizontal line. |
| <! --> | Define an annotation. |
| Format | |
| < b> | Defines bold text. |
| < abbr> | Define an abbreviation. |
| < em> | Defines emphasized text. |
| < i> | Defines italic text. |
| < s> | Defines strikethrough text. |
| < strong> | Defines emphasized text with a stronger tone. |
| < sub> | Defines the subscript text. |
| < sup> | Define superscripted text. |
| < time> | define a date/time |
| < u> | Defines underlined text. |
| form | |
| < form> | Defines an HTML form for user input. |
| < input> | Define an input control. |
| < textarea> | Defines a multi-line text input control. |
| < button> | Define the button. |
| < select> | Defines a selection list (drop-down list). |
| < optgroup> | Defines a combination of related options in a select list. |
| < option> | Defines the options in a select list. |
| < label> | Defines the callout for the input element. |
| < fieldset> | Defines a border around elements in the form. |
| < legend> | Defines the title of the fieldset element. |
| < datalist> | Specifies a list of possible options for the input element. |
| < keygen> | Specifies the key pair generator field to use for the form. |
| < output> | Defines the result of a calculation. |
| frame | |
| < iframe> | Defines an inline frame. |
| image | |
| < img> | Define the image. |
| < map> | Define an image map. |
| < area> | Defines the region inside the image map. |
| Link | |
| < a> | define a link |
| < link> | Defines a document's relationship to an external resource. |
| < main> | Defines the body of the document. |
| < 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>
总结
未完善