Summary of front end knowledge points -- HTML

JavaScript language 2020-11-13 05:04:28
summary end knowledge points html


Summary of front-end knowledge points ——HTML

HTML:HTML4.01 It means web technology
HTML5:HTML4.01 Updated version of

1.web Basic knowledge of

web And Internet
1.Internet: A global computer network , The Internet , Internet , Interactive network
2. Provide services

 Visit website :www(world wide web) service
Email: Email service
BBS: Bulletin boards , Commonly known as Forum
FTP: File upload and download
telenet: Remote login

3.Internet On the application

1.C/S Program
C:Client client
S:Server Server side
representative :QQ, WeChat , Network game
2.B/S Program
B:Browser browser
S:server The server
representative : Website

4.web

web: Running on the Internet One of the above B/S Structured applications , Commonly known as the website .
w3c:( World wide web consortium )
w3c: To develop web The technical specification
web How it works :
Based on browser and server and communication protocol to achieve information transmission and display .
1. Communication protocol
HTTP/HTTPS
It standardizes how data is delivered and packaged
2. The server
1. function
1. Storage web Information , And provide the program running environment
2. Receive and respond to user requests
3. It has certain safety functions
2. Server products
1.TOMCAT
2.APACHE
3.IIS
3. Server technology
1.php
2.java
3..NET
3. browser
function :
1. Proxy user (UA:user agent) Submit a request
2. Display web pages graphically
3. As HTML and JS Interpreter
Browser products :
1.IE
2.chrome
3.firefox
4.opera
5.safari
Browser technology :
1.HTML
2.CSS
3.Javascript

2.HTML Quick start

1. What is? HTML?

HTML:Hyper Text Markup Language
Hypertext markup language
ex:
Plain text a: English first character
Hypertext a: Hyperlinks
Plain text b: The second character in English
Hypertext b: In bold
language: Language , It has its own grammatical structure
characteristic :
1. With .html or .htm For the suffix
2. Executed by browser resolution
3. You can nest scripting languages (javascript)
4. Mark with angle brackets

2.HTML Basic grammar of

1. Mark
The mark is also known as " Elements ", or " label ", In the web page , It mainly shows some functions .
Mark when used , Must use <> Cover up
Mark categories :
1. Closed type
It's also called double labeling
grammar :
< Mark > Content </ Mark >
ex:<a> Baidu </a>
<b> In bold </b>
Be careful : There must be a beginning and an end .
2. Open type
Also known as single marker
grammar :< Mark > or < Mark />
ex:<img> or <img/>
<br> or <br/>
2. Tag nesting
1. What is nesting ?
There is another pair of... In one pair of markers ( individual ) Mark , So as to form a layer of functions .
2. grammar
< Mark >
< Mark >
< Mark />
</ Mark >
</ Mark >
ex:
<a>
<b> This is the demo text </b>
</a>
ex:
<a><b> This is the demo text </b></a> correct , Not recommended
ex:
<a><b>dfdsfsdfs</a></b> error
Be careful :
1. Wrap indent , If it is a double marker, it must appear in pairs
3. Elements ( Mark ) attribute
effect : Decorating elements
grammar :
1. Must be declared in the start tag
< Mark Property name ></ Mark >
2. Use... Between the property name and the value "=" Connect
< Mark Property name = value ></ Mark >
3. Elements allow multiple attributes , Each attribute is separated by a space
< Mark Property name 1= value 1 Property name 2= value 2 ...></ Mark >
ex:
p Of the tag align The value of the property is center,title The value of the property is " This is the passage "
<p align=center title=" This is the passage "></p>
Standard attribute ( General properties ):
id: Define the unique identity of the element ( name )
title: Defines the text that is prompted when the mouse hovers over an element
style:css in , Define in line styles
class:css in , Reference class selector
4. notes
grammar :<!-- The comment -->
Be careful :
1. Comments themselves cannot be nested
2. Cannot be nested in tags
Front end development tutorial buckle qun:767273102 , From the most basic HTML+CSS+JavaScript.jQuery,Ajax,node,angular Wait until the mobile end HTML5 The actual combat information of the project has been sorted out

3.HTML Document structure

1.HTML Document structure

1. Document type declaration
effect : Tell the browser HTML Version type of
grammar :<!doctype html>
Write at the top of the page
2.HTML page
Write a pair of root tags under the document type declaration
<html></html>
There are two parts in the root tag :
The file header :<head></head>
Define the global information of a web page
The body of the document :<body></body>
Define what is displayed in a web page
2. Build a web page structure
1. Declaration of document type
2.HTML Page structure
In the main content (body) The position shows “ My first web page ”
3.head Elements
head It's a container for other head elements
1.<meta> Define basic information : Coding format , key word , Describe the content, etc
<meta charset="utf-8">
<meta name="keywords" content=" key word ">
<meta name="description" content=" Describe the content ">
2.<title></title> Define the title of a web page
3.<style></style> Define internal styles
4.<script></script> To define or refer to javascript file
5.<link> Introducing external styles
4.body Elements
Show the main content of the web page
1. Special characters
&nbsp; Said the blank space
&lt; It means a <
&gt; It means a >
&copy; Copyright
&yen; ¥
2. Text mark
1. Text style
<b></b>: In bold
<i></i>: Italics
<u></u>: Underline
<s></s>: Delete line
<sup></sup>: Superscript
<sub></sub>: Subscript
2. Title element
grammar : Display text in a striking way on a web page
grammar :
<hn> Content </hn> n:1-6
<h1> Content </h1> First level title
...
<h6> Content </h6> Six level title
characteristic :
1. Variable font size
2. In bold
3. There is a vertical space between the contexts
attribute :align
effect : Horizontal alignment of tag content
Value :left/center/right
3. Paragraph elements
effect : Express a paragraph of text in prominent form
grammar :<p></p>
attribute :align
Value :left/center/right
4. Line feed elements
grammar :<br> or <br/>
5. Separator element
grammar :<hr> or <hr/>
attribute :
1.size Represents the size of the horizontal line ( Height ), The value is px or % The number of
2.width Width , The value is px or % The number of
3.align Horizontal alignment left/center/right
4.color The color of the horizontal line , The value is the legal color value
6. Pre format
effect : Retain html Carriage returns and spaces in the code
grammar :<pre> Content </pre>
7. Partition elements
1. Block partition elements
effect : Used for layout of elements in the page
grammar :<div></div>
2. Row partition elements
effect : Dealing with different styles in the same line of text
grammar :<span></span>
8. In line elements and block level elements
1. Block-level elements
A single line element in a web page is a block level element
Common block level elements :
1. Title element h1-h6
2. Paragraph elements p
3.div
4. Structural markings (header...)
2. Inline elements
Multiple elements are displayed on the same line , From left to right
Common in line :
span,b,i,u,s,sup,sub,a,img
3. Block in row
The display mode is as follows , But it has the characteristics of block level elements
4.table ...

4. Images and links

1.URL

1. Directory structure
File directory : Folder nesting structure
2.URL
URL:Uniform Resource Locator Uniform resource locator , Commonly known as path .
effect : Used to indicate the location of any resource in the network .
3. The manifestation of the path
1. Absolute path
The absolute path is the complete path , You can definitely find the resources you are looking for .
1. Network resources
Communication protocol + Server host + File directory structure + File name
ex:http://www.jd.com/index/logo.png
2. Local resources
Search from the highest drive letter
C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
2. Relative paths
1. What is the relative path
Find the path of the resource file from the location of the current file , It's the relative path .
1. At the same directory
Direct reference
ex:Koala.jpg
2. Subdirectories
Enter the first , To quote
ex:img/Koala2.jpg
3. Parent directory
Back first , To quote
ex:../Koala1.jpg
3. Root relative path
Start at the root of the server
performance :/
/codeboy/img/logo.png

5. Images

1. Image format
1.jpg The compression ratio is high
2.png The background is transparent
3.gif Moving graph
2. Image markers
Mark :<img> or <img/>
attribute :
1.src Source , Of the image to be displayed url
2.width Width , Take the value of px or % A number in units
3.height Height , Take the value of px or % A number in units
4.alt The prompt text displayed when the picture is wrong

6. link

1. grammar
<a> Content </a>
2. attribute
1.href Of the link url
2.target The goal is , Specify how to open the web page
Value :
_blank Open... In a new tab
_self The default value is , Open a new page in the current page
2. Set a hyperlink to an image , open Tmooc Website (www.tmooc.cn)
3. Other forms of expression
1. Download resources
Let the linked URL, link to rar/zip File can
href="*.zip/*.rar"
2. Email links
href="mailto: Legal email address "
3. Back to the top of the page
href="#"
4. link to javascript
href="javascript:js Script "

7. Anchor point

 1. What is anchor point ?
It's a mark in the web page , It can be adjusted to the position of the mark through the super connection .
2. Use anchors
1. Define anchors
1. Use a Of the tag name Attributes define anchors
<a name=" Anchor name "></a>
2. Using arbitrary tags id Attributes define anchors
<ANY id=" Anchor name "></ANY>
2. Link to anchor
<a href="# Anchor name "></a>
<a href="url# Anchor name "></a>

8. form

1. The syntax of the form

1. form
<table></table>
2. That's ok
<tr></tr> --->table row
3. Cell / Column
<td></td> --->table data
Front end development tutorial buckle qun:767273102 , From the most basic HTML+CSS+JavaScript.jQuery,Ajax,node,angular Wait until the mobile end HTML5 The actual combat information of the project has been sorted out

2. Properties of the table

1.table attribute
width: Width
height: Height
border: Set table borders
align: Set the horizontal alignment of the table
Value :left/center/right
cellpadding: Set the inner margin of cells ( Content and td The gap between )
cellspacing: Set the outer margin of the cell (td The distance outside the border )
bgcolor: The background color
2.tr attribute
align Set the horizontal alignment of the current line
Value :left/center/right
valign Set the vertical alignment of the current line
Value :top/middle/bottom
bgcolor Set the background color of the current line
3.td attribute
width: Width
height: Height
align: Horizontal alignment
valign: The vertical alignment
bgcolor: The background color of the column
colspan: Cross column
rowspan: enjambment

3. Optional markings

1. Table title
Mark :<caption></caption>
If you set the table title , Must be located in <table> At the position of the first child element below
2. That's ok / Column headings
Mark :<th></th>
be-all td Both can be used. <th> replace

4. Complex application of forms

 You can combine several consecutive lines , Divide into groups , Unified management .
1. Row grouping
1. Header row
<thead></thead>
If the top row of the table is grouped , Can be placed in the header row
2. Table body row
<tbody></tbody>
Allow several lines to be placed in tbody Unified management in
3. End of table row
<tfoot></tfoot>
If the last row in the table is grouped , It can be placed in the last row of the table
2. Irregular forms
1. enjambment
rowspan
Start at the location of the specified cell , Merge several cells vertically down ( Include yourself ), The merged cells should be deleted .
2. Cross column
colspan
Start at the location of the specified cell , Merge cells horizontally to the right ( Include yourself ), The merged cells should be deleted .

9. list

1. The function of the list

 From top to bottom ( From left to right ) To display all the data , And you can add a logo in front of the data .

2. The composition of the list

 The list is made up of " List the type " and " List item " To form a
1. List the type
Ordered list :<ol></ol> order list
Unordered list :<ul></ul> unorder list
2. List item
Used to represent data in a list ( Nested in a list )
<li></li> list item
3. Ordered list
1.type effect : Specifies the sort type of the list
Value :
1 The default value is , In numerical order
a Lowercase letters
A Capital
i Small Roman numerals
I Capital Roman numeral
2.start effect : Specifies that the starting number is from A few Start
Value : Numbers

4. Unordered list

 1.type effect : Specifies the identity type of the list
Value :
disc: Solid round
circle: The hollow circle
square: Solid block
none: Don't show logo

5. List nesting

 Another list appears in one list
Nested lists can only appear in li in
ex:
<ol>
<li>
This is the content of the sequence table
<ul>
<li> Content </li>
</ul>
</li>
</ol>

10. Definition list

1. What is a definition list
Definition list is often used to give a class of things or explanations of nouns .
2. grammar
1.<dl></dl> Represents a list of definitions
2.<dt></dt> Denotes the noun to be explained in the definition list
3.<dd></dd> Represents the content of the definition list that explains a noun
ex:
<dl>
<dt> Noun </dt>
<dd> Explain the details </dd>
</dl>
Use occasion : Use... When mixing pictures and texts

11. Structural markings

1. The function of structure

 Used to describe the structure of an entire web page ( replace div Layout )
Enhance the semantics of tags

2. Common structural markers

1.<header></header>
effect : Define the header of a web page or area
2.<nav></nav>
effect : Define navigation links for web pages
3.<section></section>
effect : Main content
4.<aside></aside>
effect : Define sidebar information in the page , Close to the edge .
5.<footer></footer>
effect : Define the information at the bottom of the page , such as : The record number of the website , interpretative statement , Copyright .
6.<article></article>
effect : Define what is relevant to the text description , such as : Forum post , Microblog entry , User comments, etc

12. Forms ( a key & difficulty )

1. What forms do

1. Provide a visual interface to interact with users
2. Collect user information and submit it to the server

2. Part of the form

1. The front end
The form controls , Visual controls that interact with users
2. Server side part
Processing of submitted data ,***.php

3. Form tags

<form></form>
attribute :
1.action
effect : Define the actions that occur when a form is submitted , It is usually defined for the handler on the server url Address ,
ex:action="login.php"
2.method
effect : Specify how to submit the form data
Value :
1.get( The default value is )
1. Submit in clear text , The data to be submitted will be displayed in the address bar
2. Low security
3. There is a size limit for submitting data , Limit to 2KB
4. When you ask the server for data , Use get The way
2.post
1. Implicitly submit , The submitted data will not show
2. High security
3. There is no limit to the size of the submitted data
4. When you want to pass data to the server , Use post The way
3.delete
4.put
3.enctype
effect : Specify how the form data is encoded , What kind of data is allowed to be submitted to the server
1.application/x-www-form-urlencoded
The default value is , Allow arbitrary characters to be submitted to the server ( The document cannot be submitted )
2.multipart/form-data
Allow files to be submitted to the server
3.text/plain
Only normal characters can be submitted to the server

4. The form controls

 Visual elements that interact with users
1. classification :
1.input Elements
2.textarea Multiline text field elements
3.select and option Option box elements
4. Other elements
2.input Elements
1. effect : Provides a variety of input controls in the page , Such as : The text box , Password box , Radio button , Check boxes, etc .
2. grammar
Mark :<input> or <input/>
attribute :
1.type Specifies the type of input control to create
2.name Define a name for the control , Submit to the server for use ( must )
3.value Control value , Submit to the server for use
4.disabled Disable control , Unable to operate cannot be submitted to the server for use
The attribute has no value , As long as it appears in the tag , It's forbidden .
3.input Detailed explanation of elements
1. Text box and password box
The text box :<input type="text">
Password box :<input type="password">
attribute :
1.maxlength Specifies the number of characters to be entered
2.readonly read-only , You can only see , Can't change , But it's allowed to submit .
3.placeholder Place holder , That is, the text displayed on the control by default .

13. Button

 1. Submit button
type="submit"
effect : Submit the data of the form to the specified program on the server
2. Reset button
type="reset"
effect : Restore the contents of the form to the initial state
3. General button
type="button"
No function
attribute :
value: The text displayed on the button
3. Radio buttons and checkboxes
Radio button :type="radio"
Check box :type="checkbox"
attribute :
name In addition to defining the control name , It can also be grouped
checked Set the default selection , No value attribute
4. Hide fields and file selection boxes
1. Hidden fields
type="hidden"
Want to submit to the server , But data that you don't want to show to users can be placed in hidden fields .
2. File selection box
type="file"
Be careful :
1.method The value of must be post
2.enctype The value of must be multipart/form-data
3.textarea Elements
1. effect
Allow multiple lines of text to be entered
2. grammar
Mark :<textarea></textarea>
attribute :
1.name Define control name , For the server to use
2.readonly read-only
3.cols Specifies the number of columns in the text field , How many English characters can be displayed on a line ( Halve Chinese )
4.rows Specifies the number of lines in the text field , That is, how many rows of data are displayed by default , beyond rows The scroll bar will appear .
Front end development tutorial buckle qun:767273102 , From the most basic HTML+CSS+JavaScript.jQuery,Ajax,node,angular Wait until the mobile end HTML5 The actual combat information of the project has been sorted out

14. Option box

 1. grammar
1.<select></select>
effect : Represent an option box in the page
2.<option></option>
effect : Show the content items in the option box
2. attribute
1.select attribute
1.name Define the name of the option box
2.size Define the number of display options , The default value is 1
3.multiple Set multiple selection , Valueless properties
Be careful : Only the scrolling list supports multiple selection
2.option attribute
1.value Define the value of the option
2.selected Set the default selection , No value attribute
5. Other elements
1.label Elements
effect : Associated text field form control
grammar :<label></label>
attribute :for To be associated with the form control id value
2. Group controls
<fieldset></fieldset> Define groups for controls
<legend></legend> Assign a title to the group
3. Floating frame
effect : Allow in a web page , And introduce another page .
grammar :<iframe></iframe>
attribute :
1.src To introduce the page url route
2.width Width
3.height Height
4.frameborder The border of the floating frame , The default value is 1
版权声明
本文为[JavaScript language]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple