preface

Learn the concept and classification of web pages, understand the difference between static and dynamic web pages; Understand how web browsers work. Understand the concepts of HTML,XHTML,HTML5 and develop simple HTML pages.

What is a web page

You can browse information on the Internet through web pages, such as news, pictures, etc., and also publish information, such as recruitment information, etc. A web page is a file on a computer in a certain place.

Web pages are mainly composed of three parts: structure, presentation and behavior.

The characteristic of static web page is that no matter when and where you browse this web page, you see the same form and content, and can only browse, users can not interact with the site. Static pages are written in HTML with.htm,.html,.shtml,.xml, etc. Compared with dynamic pages, dynamic pages are.asp,.jsp,.php,.perl,.cgi and so on.

Dynamic web pages refer to pages whose content can be automatically changed according to certain conditions.

How web browsers work

B/S structure, namely browser/server structure, the user interface is realized through WWW browser:

  1. The transaction logic is mainly implemented on the server side, and very little of it is implemented on the front end.
  2. Greatly simplified client computer load.
  3. Reduce the cost and workload of system maintenance and upgrade.
  4. The overall cost of the user is reduced.

How browsers work:

  1. The browser requests a URL to an application through an HTML form or hyperlink.
  2. The server receives the request from the user.
  3. The server executes the specified application that has been received and created.
  4. The application usually does what it needs to do based on what the user enters.
  5. The application formats the results into a document that web servers and browsers can understand, commonly known as HTML web pages.
  6. The web server finally returns the results to the browser.

The WWW is based on the HTTP protocol. The Web browser is a software tool used to obtain and display web pages through the URL, which is used to specify the location and mode of resources to be obtained on the Internet.

HTML and HTML 5

HTML is a simple markup language used to produce hypertext documents. The hypertext documents written with HTML are called HTML documents, which can be independent of various operating system platforms.

Extensible Hypertext Markup Language XHTML:

XHTML is enhanced HTML that does not need to be compiled and can be executed directly by the browser. Its scalability and flexibility will adapt to more needs of future network applications, is based on XML applications. Developers on the basis of HTML4.0, with THE rules of XML for some extension, thus got XHTML, so, the purpose of establishing XHTML is to achieve the transition from HTML to XML.

HTML5 simplifies:
, simplified the DOCTYPE, simplified the character set declaration, to the browser’s native ability to replace script code implementation, simple and powerful HTML5API.

The structure of HTML web pages

File extensions are a mechanism used by operating systems to mark file formats. An extension is a file identifier that distinguishes the file’s category and function.

The file name suffix of an HTML web page is.html or.htm.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "XXX ">Copy the code

The
tag is an auxiliary tag within the tag of an HTML document. The meta tag has two important attributes: name and HTTP-equiv, which are used to optimize the likelihood of a page being searched.

Use the name attribute under the meta tag:

<head> <meta name="keywords" content="nine, twenty-three"> <meta name="description" content="..." > <meta name="generator" content="Dreamweaver"> <meta name="author" content="depp"> <meta name="robots" content="all"> </head>Copy the code
  1. keywordsDescribe the keywords of the page to the search engine, and enter specific keywords for search after content.
  2. descriptionDescribe the main content of the page to the search engine.
  3. generatorDescribe the generated software name to the page, entering the specific software name after Content.
  4. authorThe designer of the web page, enter the designer’s name after content.
  5. robotsRestrict the way the search is performed, usually typed after contentall,one,index,noindex,follow,nofollowFor one, different attributes serve different purposes, limiting how pages can be searched.

Another attribute under the meta tag, http-equiv, is used to give the browser explicit information to help it display the page more accurately.

<head>
 <meta http-equiv="content-type"  content="text/html; charset=gb2312"/>
</head>
Copy the code
  1. refreshThe specific description of the property is the effect of making the page jump automatically.
  2. contentFollowed by the waiting time, the URL followed by the page link address to jump to.

The link tag, which defines a link to an external file, is often used to link external CSS styles.

The base tag defines the base location of all links throughout the page, and its main function is to ensure that all relative urls in the document can be decomposed into specific document addresses.

The style tag defines the style of the CSS. Indicates the introduction of a.style style sheet in the page.

The script tag is used to define scripts within the page.

Titl title tag, body tag.

A good HTML document should have the following three aspects:

  1. The code uses standard specifications and should not have misspellings
  2. Code structure is clear, so that people at a glance
  3. There are no errors or unnecessary code

Text design

<br>.. </br> <p>... </p>Copy the code
<p align=left>... </p> <p align=center>... </p> <p align=right>... </p>Copy the code

To label the text: < ACRONYM title=””>… The contents of the
annotation are enclosed in quotes after the title attribute, and the annotated contents are enclosed in the tag.

Unordered list: ul, Li, ordered list: OL Li

Define a list:

<dl> <dt>... </dt> <dd>... </dd> <dt>... </dt> <dd>... </dd> </dl>Copy the code

Graphic design in web pages

  1. Jepg format image, the file is a common image format,.jpg suffix, JPEG file is a compressed image. Compressed images can be maintained as 8-bit, 24-bit, and 32-bit depth images with compression ratios up to 100:1. Jpeg works well with large-area toned images.

  2. PNG, which is a bitmap image that can store 32 bits of information, using lossless compression. Support for transparent information, which refers to images that appear on top of other page files or page images.

  3. GIF format image, is an image interactive format, suffix name. GIF, only support 256 color less than the image, GIF file image effect is very poor.

So in summary: JEPg can compress the image capacity, PNG quality is better, GIF can do animation.

The vector diagram

Here are the biggest differences between vector and bitmaps:

Whether the image is scaled or not will not affect the effect of the vector image, but will affect the quality of the image.

Designers are generally only willing to save simple images such as logos, UI ICONS and logos as vector graphics.

Image resolution

Resolution is measured in dPI or lines per inch. There are two kinds of resolution commonly referred to, screen resolution and picture resolution, screen resolution is the default resolution of the computer monitor.

The current resolution of most monitors is 1024px x 768px, and the image resolution definition is a measure of how much data is contained in a bitmap image.

The higher the resolution of an image, the more data it contains, the larger the capacity of the image, the more computer resources it will consume, and the larger the storage space it needs.

Resolution refers to the number of pixels per inch, which is used to measure the length of an image.

Images on the page

<img src=... alt=... />Copy the code
  1. Align the top of the image with the text on the same line
<img style="vertial-align:text-top"/>
Copy the code
  1. Aligns the middle of the image with the text on the same line
<img style="vertical-align:middle"/>
Copy the code
  1. Align the bottom of the image with the text on the same line
<img style="vertical-align:text-bottom"/>
Copy the code
  1. Align the bottom of the image with the baseline of the text
<img style="vertical-alignbaseline"/>
Copy the code

Hspace =30px indicates the distance between the left and right sides of the image and the rest of the page. Vspace =30px indicates that the top and bottom sides of the image are 30px away from the rest of the page.

<img src="" widht="" height=""> <img src="..." border=> <hr align=".." width="..." size="..." > <a href=" link object path "> link anchor object </a>Copy the code

Leave email addresses for people who need to contact you

<a href="mailto: email address ">Copy the code
  1. Link has not been accessed:a:link{... }
  2. Link selected:a:active{... }
  3. Cursor over link:a:hover{... }
  4. After the link is accessed:a:visited{... }
Bootstrap dashed line double double groove line insetCopy the code

Links to hot image areas

The map tag:

<map id=... > <area shape="..." coords="..." href="..." > </map>Copy the code

Shape property, used to determine the shape of the selection, rect rectangle, circle circle, poly polygon. The href property is the hyperlink. The coords property controls the position of the shape, which is found by coordinates.

Forms in web pages

Calculates the area of the rectangle

< HTML > <head> <title> calculate the area of the rectangle </title> <style type="text/ CSS ">. Result {font-weight:bold; } </style> <script language="JavaScript"> function calculate() { var length = document.data.length.value; var width = document.data.width.value; var height = document.data.height.value; var area = document.getElementById('area'); area.innerHTML = length*widht; volume.innerHTML = length*widht*height; } </script>Copy the code

Create a form

  1. actionProperties, byformMust be in the form defined by the tagactionProperty to submit data from the form:
<form action="my.php"></form>
Copy the code

It indicates that this is a form that submits data from the my.php page.

  1. The Method property tells the browser how the data is submitted. The method property has two options: Post or GET.

  2. The name property so that submitted form data can be identified by the program that processes it.

<form name="data">
Copy the code
  1. Encoding mode,enctypeRepresents how HTML form data is encoded.

How forms work

Principle: the client receives the user’s information, and then submits the data to the background program to manipulate the data.

<script language="JavaScript">
Copy the code

If you do this by referring to an external javascript program, like link linking styles:

<script type="text/javascript" src="dada.js"></script>
Copy the code

Create a form

  1. The action attribute is needed to submit the data in the form:
<form action="da.php"></form>
Copy the code
  1. Method property, which tells the browser how data is submitted. There are two options under the Method property, post or GET.

The submission method is get. The input in the form field is added to the URL specified by the action. When the form is submitted, the user gets an explicit URL. Get is less secure, with the values of all form fields rendered directly. Post can be hidden except for visible processing scripts.

  1. The name attribute is added so that the submitted form data can be identified by the program that processes it.
<form name="dada">
Copy the code
  1. Encoding mode:enctypeRepresents how HTML form data is encoded,application/x-www-form-urlencoded, multipart/form-data, text/plainThree ways.
  • application/x-www-form-urlencodedIs standard encoding where submitted data is encoded as name/value pairs.
  • multipart/form-dataProperty represents data encoded as a message, defined for the formmimeEncoding method, creating a different from the traditionalpostBuffer, a part of the message corresponding to each control on the page.
  • text/plainRepresentation data is encoded in plain text so that no control or format characters are contained in the information.
  • multipart/form-dataMode cannot be used when uploading filespostProperties.
  1. How the target is displayed, indicating where to open the targeturl, you can set four modes.
  • _blankOpens the link in a new page
  • _selfOpens the page in the same window
  • _parentOpens the page in a parent window
  • _topMeans to load the page into the window that contains the link, replacing any pages currently in the window.
<form action="mailto:[email protected]" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
Copy the code

Form fields

The form field can be divided into three objects: input, Textarea, and SELECT.

The representation of various forms under the Input object.

<input name="" type="" value="" size="" maxlength="">
Copy the code
  • typeIndicates what type of form is defined
  • sizeRepresents the length of a text box field
  • maxlengthRepresents the maximum number of characters that can be entered
  • valueRepresents preconfigured information
  1. textA single-line text box
  2. passwordReplace the text*The text box
  3. checkboxYou can only make one of two yes or no choices
  4. radioA text box identified from multiple options
  5. submitDetermines the command text box
  6. hiddenThe user modification data cannot be viewed
  7. imageA definite symbol represented by a picture
  8. fileSetting file Upload
  9. buttonUsed in conjunction with client scripts
<form action="" method="post"> <input name="name" type="text" size="20" maxlength="12"> </form> <input name="secret" type="password" size="20" maxlength="20"> <input name="one" type="radio" value="one" checked="checked"> <input Name ="one" type="radio" value="two"> <input type="submit" value=" confirm "> <input type="reset" value=" restore ">Copy the code

The name attribute is not required to create a Submit or Reset button.

Hidden Hidden field style sheet

Hidden is used to record and hide data on a page that the user usually doesn’t care about, but must submit.

<form action=da.asp> <input type=hidden name= someHidden Value =dada> <input type=submit value= next > </form>Copy the code

Image-style form

<input type="image" SRC ="image/small icon.jpg "Alt =" ok ">Copy the code
  • The SRC attribute specifies the path of the image
  • Alt attribute adds text comments

File Style sheet for uploading files

The File style sheet allows users to upload their own files

< HTML > <head> <title> </title> <style type="text/ CSS "> Body {text-align: left; } input {font:100%; </style> </head> <form action="..." method="post" enctype="multipart/form-data"> <input type="file" name="uploadfile" id="uploadfile"/> </form> </body> </html>Copy the code

Form of textarea object

Form of textarea object

< HTML > <head> <title> </title> <style type="text/ CSS "> Body {text-align: left; } textarea{font:80%; color:navy; } </style> </head> <body> Method ="post" enctype="multipart/form-data"> <textarea name="dada" rows="10" cols="50" value="dada"> </textarea> </form> </body> </html>Copy the code

The form of the select object

The form of the select object

<select name="da1"> <option>1</option> </select> </form>Copy the code

Use the optGroup tag with the label attribute to classify options:

<select name=" Shanghai "> < optGroup label="da1"> <option>1</option> < optGroup > < optGroup label="da2"> <option>2</option> </optgroup> </select>Copy the code

Add the size attribute to the select tag. For example, size=6 indicates that it is a text box that can hold 6 lines of text. If the number of lines exceeds the set value, a scroll bar will appear.

<select name=" Shanghai "size="6">Copy the code

Form field collection: The code for a form field is a combination of the FieldSet tag and the Legend tag.

<form action="..." Method =" POST "> <fieldset> <legend> <input name="name" type="text" size="20" maxlength="12"> </fieldset> </form>Copy the code

Form input type

  • An input element of url type is a text box defined specifically for entering a URL address.
<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
Copy the code
  • An input element of type email is a text box defined specifically for entering an email address.
<input type="email" name="dada" id="dada" value="[email protected]"/>
Copy the code
  • The input element of type range is used to display the input box as a slider that can be used as a value selector within a specific range.
<input type="range" name="volume" id="volume" min="0" Max ="1" step="0.2"/>Copy the code
  • An Input element of type number is a text box defined specifically for entering a specific number.
<input type="number" name="score" id="score" min="0" Max ="10" step="0.5"/>Copy the code

  • The INPUT element of type TEL is a text box defined specifically for entering a phone number, with no special validation rules.

  • An input element of type search is a text box defined specifically for entering search engine keywords, with no special validation rules.

  • Input elements of type color provide a color selector by default.

  • An Input element of type date is a text box dedicated to entering a date, defaulting to an Input box with a date picker.

  • Month provides a monthly selector, week provides a weekly selector, time provides a time selector, datetime provides a full date and time selector, and datetime-local provides a full date and time selector.

Add features and elements to the form

  1. The form properties:
<form name="name" type="text" form="form1" Required /> <form id="form1"> <form type="submit" value=" submit" /> </form>Copy the code
  1. Formaction feature to submit forms to different pages.
<form id="form1" method="post"> <form name="name" type="text" form="form1"/> <form type="submit" value=" submit to page1" formaction="? Page =1 "/> < form type="submit" value=" page2" formAction ="? Page = 2 "/ > < input type =" submit "value =" submit "/ > < / form >Copy the code
  • The formMethod feature overrides the Method feature of the form
  • The FormencType feature overrides the encType feature of a form
  • The formnovalidate feature overrides the formnovalidate feature
  • The formTarget feature overrides the target feature of the form

Placeholder features

<input name="name" type="text" placeholder=" placeholder"Copy the code

Autofocus: When the page is loaded, it can automatically get the focus. Only one autofocus input element is allowed on each page.

<input name="key" type="text" autofocus/>
Copy the code

The AutoComplete feature is used for form elements and Input elements for form auto-completion.

input name="key" type="text" autocommplete="on"/>
Copy the code

The AutoComplete feature has three values. You can specify “on”,”off”, and “none”. If you do not specify this, the browser’s default Settings will be used.

<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
Copy the code

The keygen element provides a secure way to authenticate users.

<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
Copy the code
  1. The keyGen element has key generation capabilities that generate a private key and a public key when submitting the form.
  2. The private key is stored on the client, and the public key is transmitted to the server over the network.

The output element

  1. outputThe element is used for different types of output, such as computed results or script output.
  2. outputElements must be subordinate to a form, that is, written inside the form.
<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
Copy the code

required

If you set the required feature for an element inside a form, this value cannot be empty or the form cannot be submitted.

<input name="name" type="text" placeholder="dada" required/>
Copy the code

pattern

  1. Pattern is used to define a validation pattern for the Input element.
  2. The property value is a regular expression that is checked to see if the input matches the given format. If it does not, it cannot be submitted.
<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
Copy the code

min,max,step

  1. Min indicates the minimum value within the allowed range
  2. Max indicates the maximum value within the allowed range
  3. Step represents the interval step of valid data
< input type = "range" name = "dada" id = "dada" min = "0" Max = "1" step = "0.2" / >Copy the code

novalidate

  1. Used to specify that a form or form is submitted without validation
  2. If the novalidate feature is applied to form elements, then all elements in the form do not need to be validated at submission time
<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
Copy the code

validity

  1. Gets the ValidityState object for the form element, which contains validation results for eight aspects
  2. The ValidityState object persists, and the same ValidityState object is returned each time the validity property is obtained
var validityState=document.getElementById("username").validity;
Copy the code

WillValidate properties

  1. Used to get a Boolean value indicating whether a form element requires validation
  2. If the form element has the required or Pattern feature set, the willValidate attribute will be true, meaning that the form’s validation will be performed
var willValidate = document.getElementById("username").willValidate;
Copy the code

validationMessage

  1. Gets an error message for the current form element.
var validationMessage=document.getElementById("username").validationMessage;
Copy the code

Pay attention and don’t get lost

Well folks, that’s all for this article, and the people here are talented. I will continue to update the technology related articles, if you find the article useful, welcome to give a “like”, also welcome to share, thank you!!