HTML front-end development overview

Front-end development is the process of creating WEB pages or APPS and other front-end interfaces and presenting them to users. The user interface interaction of Internet products is realized through HTML, CSS, JavaScript and various technologies, frameworks and solutions derived from them. Front-end development evolved from web page production, the name has a very obvious characteristics of The Times

Internet product development process and front-end development positions

Software architecture

C/S

There is a Client program locally and a Server program remotely, such as QQ, Thunderbolt… Advantages Good user experience Disadvantages Inconvenient development, installation, deployment, and maintenance

B/S

Browser/Server Only one Browser is required. Users use different urls to access different programs on the Server. Advantages Development, installation, deployment, and maintenance are simple

• HTML: Used to build basic web pages and display the contents of the page
• CSS: Used to beautify and layout a page
• JavaScript: Controls the elements of a page to make it look dynamic

| | | if user request is static resources, then the server will direct static resource will be sent to the browser. The parsing engine static resource, embedded in the browser can display static resources | | | | dynamic resources using dynamic web resources released in a timely manner. All user access, the results may be different such as: JSP /servlet, PHP, ASP… | | | | if user request is a dynamic resource, then the server will perform dynamic resource, converted to static resource, and then sent to the browser | |

HTML document type

Hyper Text Markup Language the two document types commonly used today are XHTML 1.0 and HTML5

• Hypertext hypertext is a network of text messages organized in different Spaces by means of hyperlinks
• Markup language A language made up of tags. < tag name > Like HTML, XML is a markup language, not a programming language

HTML documents with an.html or.htm suffix are divided into:1.Containment labels: there are start labels and end labels. Such as < HTML > < / HTML >2.Autism and labels: Start tags and end tags together. Such as < br / > tags can be nested < a > < b > < / a > < / b > ❌ < a > < b > < / b > < / a > ✅ can define attributes in the start tag. Attributes are made up of key-value pairs, and values need to be quoted (even or odd). HTML tags are case insensitive, but it is recommended to use lower case HTML comments: Press CTRL +/ <! -- This is a note -->Copy the code

XHTML 1.0

The shortcut for creating a version document: HTML: xT + Press TAB

html5

You can use XHTML 1.0 on PC, or you can use HTML5, which is a fast way to create backward compatible version documents: HTML :5 + TAB or! + tab

• The first line is the document declaration
• The second line tag and the last line define the HTML document as a whole
  • Lang =”en” in the tag defines the language of the web page as English, and the definition of Chinese as lang=” zh-cn “, it does not matter, it is generally used for analysis statistics
  • The tag and tag are its first level child elements
  • The TAB is responsible for setting the page and defining the title, including defining the encoding format of the page. External chain CSS style files and javascript files, etc., the content of the Settings will not be displayed on the web page, the content of the title will be displayed in the title bar
  • Write the content displayed on the web page

The difference between the two documents

• Document declaration and encoding declaration
• Html5 has new tag elements and element attributes

Create HTML shortcuts

All operations can be completed instantly by pressing the TAB key

1. Element shortcuts

1. Fuzzy input element name in the editor, you can automatically complete (select the listed items) generationHTMLLabels, even if not standardHTMLThe label.2Input!html:5
html:4s
html:4T will automatically complete the basic HTML structureCopy the code

2. Use > to generate child elements

/ / inputdiv>ul>li// Press TAB <div>
<ul>
<li></li>
</ul>
</div>
Copy the code

3. Use “+” to generate sibling elements

div+p+bq


<div></div>
<p></p>
<blockquote></blockquote>
Copy the code

4. Use ^ to generate the parent element

/ / inputdiv+div>p>span+em^bq // press TAB <div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
Copy the code

5. Use asterisks (*) to generate multiple identical elements

div>ul>li*5


<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Copy the code

6. Use “()” to group elements

The element after “+” is a sibling of the first element in parentheses

div> (header>ul>li*2) +footer>p// Press TAB <div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Copy the code

7. Id and class

Element and id attribute values are separated by "#", and class attribute values are separated by ". Separate // inputdiv#header+div.page+div#footer.class1.class2.class3// Press TAB <div id="header"> < /div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Copy the code

8. Use [] to mark other attributes

td[title='hello' colspan=3]// Press TAB <td title="hello" colspan="3"> < /td>
Copy the code

9. Automatic numbering from 1 to n with the “$” symbol (” *” for multiple elements)

li.item$*3

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li> Add '$' after' $'@n"Change the starting value of the number to n Li. item$@3*3
 
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li> You can add @- after $to change the direction of the number. li.item$@-3*3

<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
Copy the code

10. Add text with {}

a[href=index.html]{this is a text} <a href="index.html"> < span style = "max-width: 100%a>
Copy the code

11. Super blend

(div#box.class1.class2>a[href=index.html target="_blank" rel="noopener noreferrer"]{flashback: $@-10} *10) *2

<div id="box" class="class1 class2">
  <a href="index.html"> < span style =" max-width: 100%; clear: both;1@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:2@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:3@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:4@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:5@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:6@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:7@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:8@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:9@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:10@ -10</a>
</div>
<div id="box" class="class1 class2">
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:1@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:2@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:3@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:4@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:5@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:6@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:7@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:8@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:9@ -10</a>
  <a href="index.html" target="_blank" rel="noopener noreferrer"> flashback:10@ -10</a>
</div>
Copy the code

⚠️ Note: do not pass opener information. Normally, when a web page links to another web page, the second web page can obtain the control of the first web page through window.opener. If they are two pages under the same domain name, they can be completely controlled before. If they are two pages under different domain names, the second page can have very limited control. Note: even very limited, it can be a little dangerous. Such as:

if(window.opener && !window.opener.closed) window.opener.close()
Copy the code