1 、HTML

1.1 Composition of web page

written words picture link Equal element composition . In addition to these elements Web pages can also contain audio video etc.

1.2 WEB Front end development process

Now the mainstream development process :

The development mode of separation of front end and back end .

  • Art Designer :ps( design sketch )

    • The front end and the back end need to negotiate the development specification of the back-end interface .

  • Front end engineer :(HTML CSS JS Equal front end technology ) Implement static web pages You also need to use mock technology Realize the simulation test of the page .

  • Back-end engineer : Development interface .

    • Front and rear end joint debugging .

1.3 WEB Standards for ( a key )

Different browsers ( firefox , Google , IE) The kernel is different . And how they work The parsing of the page is different , There will be differences in the display .W3C The organization has developed a browser WEB standard

1.3.1 web The benefits of standards

1 Can be accessed by a wide range of devices

2 Easier to be searched by search engines

3 Reduce the traffic cost of the website

4 Make the site easier to maintain

5 Speed up page browsing

1.3.2 WEB The composition of the standard

Mainly including structure performance And behavior

Structural criteria : Used to organize and classify web page elements It mainly includes html and XHTML etc. .

Style standard : Table is used to set the layout of web page elements Color Size and other appearance patterns , It mainly refers to CSS

Standards of conduct : It refers to the definition of web page model and the way of interaction , It mainly includes DOM ,ECMAScript and BOM In the third part of .

2 HTML The understanding of

HTML:Hyper Text Markup Lanague( Hypertext markup language )

HTML Tags are used to mark the parts of the web page to be displayed , The web page itself is a text file , Add tags from text files , It can tell the browser how to display the content ( How to deal with words , How to arrange the page , How to display the picture, etc ).

2.1 Develop the first HTML The page of

1 Create a HTML file extension .html perhaps .htm

2 Write in a document HTML Basic frame of the page html:5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> </body>
</html>

JAVA The program needs to be compiled first After by java Virtual machine running . however HTML Files do not need to be compiled , There is a browser directly for parsing and execution .

2.2 The document type

<!--html4 The document type of -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--html5 The document type of -->
<!DOCTYPE html>

Must be on the first line of the document Tell the browser what type of document the current document is using html Standard specification .

3 HTML The label of

3.1 Head tag

<head>
<!-- meta The tag is the metadata of the page -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the page -->
<title> This is the first one HTML page </title>
</head>

Metadata tags :meta label

meta Tags are often used to specify the description of a web page keyword Last modification time of the file author And other metadata

Metadata can be used by browsers , Search engines found other web The service call .

meta Label common name attribute :

 <!-- meta The tag is the metadata of the page -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set web pages to adapt layout width=device-width Adapt to the width of the equipment initial-scale Don't zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='keywords' content=" Online shopping , E-Shop ">
<meta name="description" content=" This is a B2C A full range of e-commerce websites ">
<meta name="author" content=" Zhang San ">
<!-- Set automatic jump of web page 5 Seconds later, jump to Baidu -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
<!-- Title of the page -->
<title> This is the first one HTML page </title>

3.2 body

3.2.1 The format of the label

< Tag name Property name = Property value , Property name = Property value > Encapsulation content of label </ Tag name >

Tag names are case insensitive It is recommended that tag names be in lower case

Attributes of the tag :

Basic attributes :bgcolor=”red“ You can modify the basic style of an element

Event properties :onclick=“alert(' Hello ')” The browser can generate certain actions to correspond to the current operation

Label classification :

Single label and double label

Single label :< Tag name />

<hr/>

Double label :<head></head> <body></body> <p></p>

The syntax of labels :

1 Tags cannot be cross nested

<!-- correct -->
<div><span> Hello ,html</span></div>
<!-- error -->
<div><span> Hello ,html</div></span>

2 Double labels must be turned off

3 Property must have a value Use double quotes for attribute values

4 notes Cannot nest

3.2.2 Commonly used labels

3.2.2.1 font Font labels

<font color="red" face=" Song style " size="22"> Hello HTML </font> 

3.2.2.2 Special symbols

 <h2> This is a newline label &lt;br/&gt;</h2>

Common symbols

&nbsp; --> Space , No matter how many spaces are written in the source code The browser will resolve to a space 
&lt;
&gt;
&amp;-->&
&quot;-->“
&apos;-->'

3.2.2.4 Title Tag

Title Tag h1 --- h6

h1 It's the biggest h6 Minimum

attribute :

Alignment mode : align:left right center

3.2.2.5 Hyperlinks

In the web page, all the contents that can be jumped after clicking are hyperlinks

 <!--
a Tags are hyperlink tags
href Set the address of the link
target:
_self Indicates that the link address is opened in the current tab
_blank Indicates that the page with the link address is opened in a new tab
-->
<a href="http://www.baidu.com" target="_blank"> Baidu </a>

3.2.2.6 Tabs tab

Unordered list Ordered list

 <!--
ul Represents an unordered list
ol Represents an ordered list
li List item
type attribute You can modify the style of the list tab
Ordered list :A a 1 i
Unordered list :none disc square circle
-->
<ol type="i">
<li> Zhao si </li>
<li> Lennon </li>
<li> Little Shenyang </li>
<li> Song Xiaobao </li>
</ol>

<ul type="circle">
<li> Zhao si </li>
<li> Lennon </li>
<li> Little Shenyang </li>
<li> Song Xiaobao </li>
</ul>

3.2.2.7 Image tag

<img src="img/1.jpg" width="300px" height="200px" border="10" alt=" This is a picture ">

3.2.2.8 Tabular label

 <!--
label :table Represents a table
tr Said line
td Represents a cell
thead Indicates the header
tbody Represents the table body
th Header cell
Table properties :
border The border of the table
align Alignment of the table relative to the page left right center
width Width of table
height Table height
cellspacing Spacing between cells
Cell properties :colspan Set up cross Columns Merge Columns
rowspan Set up cross line merger
-->

<table align="center" border="1" width="300px" height="300px" cellspacing="0">
<tr>
<td> full name </td>
<td> Gender </td>
<td> Age </td>
</tr>
<tr>
<td> Zhang San </td>
<td> male </td>
<td>21</td>
</tr>
<tr>
<td> Li Si </td>
<td> Woman </td>
<td>18</td>
</tr>
</table>

<table align="center" border="1" width="300px" height="300px" cellspacing="0">
<thead>
<tr >
<th colspan="4"> Basic personal information </th>
</tr>
<tr>
<th> full name </th>
<th> Gender </th>
<th> Age </th>
<th> School </th>
</tr>
</thead>
<tbody align="center">
<tr >
<td> Zhang San </td>
<td> male </td>
<td>21</td>
<td rowspan="2"> North China University </td>
</tr>
<tr>
<td> Li Si </td>
<td> Woman </td>
<td>18</td>
</tr>
</tbody> </table>

3.2.2.9 iframe Frame Tags ( understand ) Inline or inline frames

iframe Label he can be in one html On the page Open a small window , To load a separate page

 <iframe src="index.html" width="800px" height="300px" name="abc"></iframe>

3.2.2.10 frameset ( understand )

By using the framework , You can display more than one page in the same browser window . each HTML The document is called a framework , And each frame is independent of the others .

<!-- Divide vertically Proportion of left and right 25% 75 -->
<frameset cols="25%,75%">
<frame src="index.html">
<frame src="table.html">
</frameset>
<!-- Horizontal division It is divided into upper, middle and lower Respective proportion 25% 50% 25%-->
<frameset rows="25%,50%,25%">

<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html"> </frameset>

4 Form labels

Form labels form label It is mainly used to collect user input data , Submit data to the background , Process and save .

<form action="">
<!-- Single line text input box -->
User name :<input type="text" value="" placeholder=" Please enter the user name "/><br/><br/>
<!-- Password box -->
User password :<input type="password" value="" placeholder=" Please input a password "/><br/><br/>
Confirm the password :<input type="password" value="" placeholder=" Please enter the confirmation password "/><br/><br/>
<!-- File selection dialog -->
Head portrait :<input type="file" value="" placeholder=" Please select the file you want to upload "/><br/><br/>
<!-- Radio buttons are mutually exclusive So the radio button name Attribute values must be consistent In this way, they can be mutually exclusive -->
Gender :<input type="radio" name="sex" value="man" checked="true"> male
<input type="radio" name="sex" value="woman"> Woman <br/><br/>
<!-- Check box type=checkbox Multiple values can be selected at the same time The default selection is used checked Indicated selection have access to checked or true-->
Hobby :<input type="checkbox" value="JAVA" checked="checked">JAVA
<input type="checkbox" value="python">python
<input type="checkbox" value="html">HTML
<input type="checkbox" value="CSS">CSS<br/><br/>
<!-- Drop down the selection box multiple Indicates whether multiple selections can be made in the drop-down box The default choice is to use selected option Options -->
Native place :<select >
<option>-- Please select the place of origin --</option>
<option value="sx" selected="selected"> shanxi </option>
<option value="tj"> tianjin </option>
<option value="bj"> Beijing </option>
<option value="hn"> hunan </option>
</select><br/><br/>
Self evaluation :
<textarea rows="10" cols="80" placeholder=" Please fill in the self-evaluation form ">

</textarea><br/><br/>
<!-- Submit button -->
<input type="submit" value=" Submit "/>
<!-- Reset button -->
<input type="reset" value=" Reset "/>
<!-- General button -->
<input type="button" value=" General button "/>

</form>

Use the form to complete the layout of the form

<form>
<h1 align="center"> User registration </h1>
<hr width="500px">
<table align="center" width="500px">
<tr>
<td> User name :</td>
<td><input type="text" value="" placeholder=" Please enter the user name "/></td>
</tr>
<tr>
<td> User password :</td>
<td><input type="password" value="" placeholder=" Please input a password "/></td>
</tr>
<tr>
<td> Confirm the password :</td>
<td><input type="password" value="" placeholder=" Please input a password "/></td>
</tr>
<tr>
<td> Head portrait :</td>
<td><input type="file" value="" placeholder=" Please select the file you want to upload "/></td>
</tr>
</table>
</form>

5 Other labels

div label

span label

p Paragraph Tags

<!-- div The label is an exclusive line however The label itself does not occupy any space Rely on content to occupy space -->
<div style="width: 100px; height: 100px; "> This is a div label </div>
<div> This is a div label </div>
<!-- span Labels are on the same line It doesn't take up space Rely on content to occupy space -->
<span>span label </span><span></span> <span>span label </span>
<!-- p Paragraph Tags By default, a line is left above or below the paragraph -->
<p>
8 month 6 Japan , Zhengzhou novel coronavirus pneumonia conference response , Net transmission “800 Wedding banquet ” pompous , There were many people who attended the wedding banquet that day 402 Guests ,60 Staff , Please don't spread rumors 、 Don't believe in rumors 、 Don't tale . that , When was the nurse diagnosed ? Her contacts can be denied as close contacts and secondary close contacts ......
</p>

20 Get to know the front end HTML(1) More articles about

  1. Get to know the front end HTML

    HTML  Hypertext markup language HTML Parsing seeing the name of a thing one thinks of its function ,HTML It is composed of labels , After composition ,HTML It can be directly recognized and processed by the browser as we want to show users . Let's analyze it HTML Label by label . &l ...

  2. 20、 Front end knowledge points --html5 and css3 characteristic ( One )

    [html5/css3]css Medium flex Flexible layout learning summary https://blog.csdn.net/Umbrella_Um/article/details/99490209 use CSS/CSS3 real ...

  3. web standard Browser Introduction Introduction to development tools HTML Introduce HTML Color Introduction standard HTML The structure, { The front end of the front end of the first knowledge }

    The front end of the front end of the first knowledge   I'm new to you Contents of this section One web standard Two Browser Introduction 3、 ... and Introduction to development tools Four HTML Introduce 5、 ... and HTML Color Introduction 6、 ... and standard 7、 ... and HTML The structure, One web standard web Ready to introduce : 1. ...

  4. day 41 The front end of the front end of the first knowledge

    The front end of the front end of the first knowledge   I'm new to you Contents of this section One web standard Two Browser Introduction 3、 ... and Introduction to development tools Four HTML Introduce 5、 ... and HTML Color Introduction 6、 ... and standard 7、 ... and HTML The structure, One web standard web Ready to introduce : 1. ...

  5. 01 . Front end HTML

    Get to know the front end HTML Introduction history HTML(Hyper Text Markup Language) Hypertext markup language , It is different from programming languages Hypertext is beyond the scope of plain text , For example, describe the color of the text . size . Font and other information , Or use diagram ...

  6. Sublime Text Recommended extensions for front end development

    Sublime Text Recommended extensions for front end development Sublime Text Sublime Text It's recognized by programmers as the magic of coding , With beautiful user interface and powerful functions what's more ,Sublime Text ...

  7. GMTC Global big front end Technology Conference - The future has to

    GMTC-2019 Beijing GMTC The buzzword of this conference must be monitoring . performance , Of course, cross platform is still a hot topic ,write once,run anywhere!, Here is a summary of my experience . 6.20 In the morning The evolution of the front end The core idea ...

  8. webpack And loader practice

    Developers who are familiar with the concept of front-end template , Usually used underscore Of template Method , It's very easy to use , Support assignment , conditional , Cycle, etc , Can basically meet our needs . In the use of Webpack When building a development environment , If you want to use ...

  9. Interview questions HTML +CSS

    HTML+CSS part 1. In line elements and block level elements ?img What is it ? How to convert in line elements into block level elements ? Inline elements : And other elements are on the same line , Height . The row height, the outer margin and the inner margin cannot be changed , The width of the text picture cannot be changed , Can only hold text or other ...

  10. jQuery Grammar summary and notes

    1. References to page elements are jquery Of $() Reference elements include through id.class. The name of the element and the hierarchy of the element dom perhaps xpath Conditions, etc , And the returned object is jquery object ( A collection of objects ), Can't call directly dom ...

Random recommendation

  1. POJ3461 KMP The template questions

    I've been busy reviewing for the postgraduate entrance examination recently , So there are fewer questions .. The data structure was relearned yesterday KMP Algorithm , I tried to write today , There are still many problems , however KMP The algorithm is understood , Before the v_JULY_v The blog of , I don't know , Now I finally understand why he's counting ...

  2. Microsoft Azure Custom data and Cloud-Init

     What is custom data ? Customers often ask how to configure Microsoft Azure Insert scripts or other metadata into the virtual machine . In other clouds , This concept is often called user data .MicrosoftAzure There is a similar work in ...

  3. IIS solve CPU And high memory utilization

    In process discovery w3wp High occupancy . After inquiry , Found as follows : w3wp.exe Is in IIS( Internet information server ) A process associated with an application pool , If you have multiple application pools , There will be corresponding multiple w3wp.exe Process instance transport ...

  4. Shell Color style and attribute control of script

    Let's look at the format first echo -e "\033[ Character background color : Text color m character string \033[0m" give an example echo -e "\033[41;36m  typeface  \033[0m" ...

  5. js Match string

    lastIndexOf() Method returns the last occurrence of a specified string value , Search from back to front in a specified position in a string var str = 'Hello World' str.lastIndexOf('Hell ...

  6. [Tensorflow] Object Detection API - predict through your exclusive model

    Start to predict One . Training results From: Testing Custom Object Detector - TensorFlow Object Detection API Tutorial p.6 Training results ...

  7. netstat stay windows Lower and Linux Check the network connection and port occupancy under

    Suppose there's a service , Tell me 8080 The port is occupied ,OK, I'm going to see what services are occupying , Can you kill me Let's say I'm Windows Next : First column : Proto agreement Second column : Local address [ip+ port ] The third column : far ...

  8. WebAPI Certification and authorization

    Web APi Certification (Authentication) And authorization (Authorization)[ One ]( Twelve ) http://www.cnblogs.com/CreateMyself/p/4856133.ht ...

  9. InterView And C/CPP

    CPP quote What is? " quote "? To declare and use " quote " What should be paid attention to ? answer : A reference is an alias for a target variable (alias), The operation of the application is exactly the same as the direct operation of variables . Shen Mingyi ...

  10. webapi Returns an unquoted string , Solve the problem of automatic double quotation marks

    Return type changed to HttpResponseMessage type [Route("api/TestControllers/test")] [HttpGet] public HttpRespo ...