HTML (frontend)

The front end is divided into three standards:

1.html: Structural Standard

2.CSS: Style Standard

3.javascript: Behavioral Standards

In addition to the semantics of HTML nothing else, the so-called semantics is to use tags to wrap our text content, labels are divided into inline tags and block-level labels

In-line Labels:

Font Label: A: Hyperlink tag href: Link address, Target:_blank: Opens the address of the link in another blank page.

Span: A small-span area label that does not affect the layout of the page.

Others are as follows: Font em strong I

Features: (1) display in one line;

(2) You cannot set the width height, the default is the size of the font.

P: Paragraph label, in the first day of understanding P, is always remember that p can only be placed in the font label.

IMG:SRC: Linked picture resource art: Loading picture resource fails when the content is displayed.

Layout Label:

DIV: Split tags, the structure of the entire Web page.

UL, OL, Li: List labels, sub-tags in UL and ol must be Li, Li can contain arbitrary tags.

HTML tag Features:

1.HTML not sensitive to row, not sensitive to table key

2. Blank Folding

A Web Standard

Web standards: Guidelines for making Web pages to follow

The classification of Web Preparation specification: Structure standard, style standard, behavior standard.

Structure: HTML style: CSS behavior: javascript

Web Preparation Summary:

Structural Standard: the equivalent of human body, HTML is used to make Web pages;

Style Standard: the equivalent of human clothing, CSS is to beautify the Web page;

Behavior standards: the equivalent of human action, JS is to make the Web page moving up, with vitality;

Browser kernel: Each browser core is different, the browser kernel is the browser's rendering engine, the rendering engine determines how the browser displays the content of the page and the page format information, rendering engine is the root cause of compatibility problems.

HTML: A Hypertext Markup Language, a descriptive markup language that describes how hypertext content is displayed.

Hypertext: Audio, video, images called hypertext;

Tags:< english words or letters > called tags, an HTML page is made up of various tags.

Role: HTML is the language that is responsible for describing the semantics of the document.

Note: The HTML language is not a programming language, but a markup language, and HTML pages are parsed directly by the browser.

What's the use of H tags?

Adds the semantics of the caption to the text.

Web page: A page consisting of a variety of tags is called a Web page.

Home page: A homepage or navigation page of a website.

The tag:<p> is called the start tag,</p> is called the end tag, also called the tag;

Each label is provided with a special meaning;

Element:<p> content </p> called element;

Properties: Auxiliary information for each label;

Color expression: pure word: red, green, blue, orange, gray, etc.

Decimal representation, hexadecimal representation.

Specification of HTML:

HTML is a weak language, case-insensitive, HTML page suffix is html or htm;

Structure of HTML:

Declaration part: The main function is to tell the browser which standard is used on this page?

Head part: Tells the server some additional information of the page, does not appear on the page;

Body part: The code we write must be placed in this tag;

XHTML is basically the same as HTML4.0 's markup.

XHTML is strict, pure HTML

Two head label

Head tags are placed between the heads. The bread here contains:<title>,<meta>,<link>,<style>.

<title>: Specifies the title of the entire page, displayed at the top of the browser;

<META>: Provide basic information of the page;

<link>: Defines the relationship between documents and external resources;

<style>: Defines the relationship between the internal style sheet and the Web page;

Related tags in body:

Font Tags: h1~h6,<font>,<u>,<b>,<strong>,<em>,<sub>,<sup>

Layout label:<div>,<span>,<br>,

Hyperlink:<a>

Picture Label:

There are two categories of tags in the HTML tag: 1. Font label; 2. Layout labels;

<b> and <strong>: Font bold <u>: Underline label <s>: Underline label <i> or <em>: Italic label

<sup>: Superscript <sub>: subscript

Two. Layout labels

Paragraph labels <p>

Properties: Align= "Properties": Alignment, property values include: Left center right

HTML tags are graded, and HTML divides all tags into two categories:

Text-level Tags: p, span, a, B, I, U, EM, text tags can only put text, pictures, form elements.

Container-level Tags: div, h-series, LI,DT,DD, container-level tags can be put anything;

Div and span are very important tags, the semantics of Div is division, "segmentation";

The semantics of span is "scope, span"

Div: Treat the contents of the tag as a block and must occupy a single line,

Span inside can only place text, picture, form element, span inside cannot put p,h,ul,dl,ol,div;

Div tag is a container-level label, where everything can be put, or even put themselves;

The BR is a newline label, and the;<br> tag comes in handy when you're going to end a line and start a new paragraph.

Horizontal line label

Content Center Label <center>

Predefined (pre-formatted) label:<pre>: retains all of its whitespace characters (spaces, line breaks), unchanged output (tells the browser not to ignore spaces and blank lines)

Hyperlinks <a> A:text-dicoration:none; Clear underline

There are three forms of hyperlinks:

1. External links: links to external documents;

<a href= "#" > click here to go to the new page </a>

2. Anchor Link: Refers to the hyperlink to a name, the role of this page or other pages in different places to jump:

Cases:

<a name= "Top" > Top </a>

<a href= "#top" > Back to Top </a>

3. Email Link:

code example: <a href= "mailto:[email protected" > Contact us </a>

Special few links:

<a href= "#" > Jump to Top </a>

Related to JS:

<a href= "Javascript:alert (1)" > Content </a>

<a href= "Javascript:j" > Content </a>

A is a text-level label

P should be able to contain a, and a can not contain p,a semantics to be less than p,a is can be treated as text, so p is equivalent to put in plain text;

IMG: Represents a picture, is a single-sided mark;

IMG is a self-closing label, also known as a single label;

The types of images that can be inserted are: JPG (JPEG), gif,png,bmp;

The picture format that cannot be inserted into a Web page is: Psd,ai

HTML page is not directly inserted into the picture, but insert the reference address of the picture, so also to report the image uploaded to the server;

4. List Label:

The list labels are divided into three types:

1. unordered list <ul>, and each item in a non-sequential table is a <li>

Li cannot exist alone, must be wrapped in UL, on the other hand, UL's "son" can not be something else, can only be li;

Here again, we emphasize that the role of UL is not to add small dots to the text, but to increase the "semantic" of the unordered list

Disclaimer: UL's son can only be Li, but Li is a container-level label, Li inside can put, even can put a UL;

2. sequence list <ol> Each of these items is a <li>

OL and UL are not the same semantics, how to use the same

Li inside can only have li,li must be the ol package, Li is the container level;

3. Definition List <dl>

<dl> no attributes, the sub-elements of the DL can only be DT and DD;

<dt> the title of the list, this tag is required;

<dd> List of table entries, if not required it can be added;

Note: Dt,dd can only be in DL, DL inside can only have dt,dd;

Dt,dd are container-level labels, want to put anything, so now it should be clearer to know what the label, not depending on the shape of the decision, but semantics (semantics are essentially structure)

Inline Tags: 1. Display in one line, 2. Cannot set the width height, the default is the font size;

Block-level Tags: 1. Exclusive row. 2. You can set the width of the height, the default is the father of 100%;

Inline block Label (img,input): 1. Display in one line, 2. You can set the width height

HTML (frontend)