Html basic notes, html notes

Html basic notes, html notes

1 HTML Introduction

HTML: hypertext markup language );

Directly parsed and executed by the browser (No compilation process );

Hypertext: audio, video, and image are all hypertext;

Tag: <an English word or letter> is a tag. Html pages are composed of tags;

2 HTML Network Terminology

Webpage: a page composed of various tags;

Home page: the actual page or navigation interface of a website;

Tag: Also known as a tag.

<H1> start tag,

Element:

Attribute: auxiliary information for each tag;

XHTML: HTML compliant with XML syntax standards;

DHTML: dynamic. Html + css + js page is DHTML;

HTTP: protocol standard. Specifies a format of data when the client browser interacts with the server. SMTP: mail Transmission Protocol; FTP: file transmission protocol;

3. HTML editing tool

Notepad: notepad editplus: syntax highlighted; tip: determines whether a word has an error (not 100%) based on the color );

Ultraedit: determines whether a word has an error based on the color. binary data can be displayed;

Dreamweaver: professional tools, code tips;

4. HTML Specification

HTML: weak language; case-insensitive; suffix: html or htm (some systems do not know the suffix name more than 3 characters, such as the DOS system );

HTML structure:

1) Declaration: Used to tell the browser which standard is used for the entire page. <! Doctype html> is HTML5 standard;

2) head part: it is not displayed on the page; it is to tell the browser some additional page information;

3) body: the code written must be placed in this tag;

5. HTML tags

Each tag has private and public attributes;

In html, the unit of length is pixel. in html, only one unit is pixel;

Body: bgcolor: background color; background: background color; text: text color;

A. Typographical tags

By default, spaces and blank lines are ignored in all browsers;

<P>: represents a paragraph attribute: align; Value: left \ right \ center;

<Br>: line feed;

<Hr>: split line color: idle color; size: line width; width: line length (two ways: 1 absolute value eg: 500; 2 Relative Value: 50% );

Noshade: Do not shadow; align: align; Value: left \ right \ center; center: center;

<Pre>: pre-defined format label that tells the browser not to ignore spaces and empty rows;

<Div>: block-level label, which must be a single row. attribute: align; <span>: Intra-row label without line breaks;

B. Font labels

<H1 ~ H6>: defines the font size. attribute: align: center;

Font: color: font color; three writing methods: 1 English word: red; 2 hexadecimal: #00 ffcc; 3 RGB (primary color): new RGB (124,156, 23 ); size: font size; face: font type;

Special characters: & lt; less than & gt; greater than & amp; & Symbol & quot; double quotation marks & apos; single quotation marks & copy; copyright & trade; trademark & nbsp; space

<B>: bold;

<Strong>: bold;

<I>: italic;

<Em>: italic;

<U>: underline;

<S>: strikethrough (strikethrough)/<del> (strikethrough );

<Sup>: superscript;

<Sub>: subscript;

 

C image tagging

Img: indicates an image.

Property: src: Path of the image;

Relative Path: relative to the path of the page, marked as./And./, respectively, representing the current directory and parent directory;

Absolute path: 1): Starting from the drive letter: C: \ Documents ents Settings \ Administrator \ Desktop \ images \ 1.jpg

2): network path: https://www.baidu.com

Width: width

Height: height

Alt: when the image cannot be displayed, it replaces the image content.

Title: prompt text

Border: border

Hotspot: Add hyperlinks at specific locations

<Map name = "Map" id = "Map">

<Area shape = "circle" coords = "122,81, 38" href = "www.baidu.com"/>

</Map>

Resolution: The usemap attribute in the label is associated with the name in the map element to create the relationship between the image and the ing;

<Area> the label defines the region in which the image maps. shape: the shape of the specified region, circle (circle), and coords: The coordinate href of the specified region: the specified target URL;

 

D. list mark

List tags: 3

Unordered list: ul

Attribute: type value: disc (default, solid point), square (solid point), circle (hollow circle );

Ordered list: ol

Attribute: type value: 1 (default Arabic number); start: start

Definition list: dl

Dt: list item title

Dd: LIST ITEM

 

E. hyperlinks (3 types)

1. link to other pages

2. Anchor: a name for a hyperlink. It is used to connect to a specific location on this page or other pages. The name attribute is used to name the hyperlink;

3. Link to blog <a href = "http://www.cnblogs.com"> enter blog </a>

Property: target: Tell the browser how to display the target page

The following four values are defined in html:

_ Self: displayed in the same browser;

_ Blank: open a new browser;

_ Parent: displayed in the parent window;

_ Top: displayed in the top-level window;

 

F. Table Markup

Table: table

Property: border

Width: width

Height: height

Align: Table alignment

Cellpadding: the distance from the cell content to the edge

Cellspacing: the distance between cells.

Bgcolor: Background Color

Background: background Image

Bordercolorlight: The upper and left borders of the table, and the color of the right and bottom borders of cells.

Bordercolordark: Right, bottom border of the table, and the color of the border on the cell and left

Dir: the arrangement of cell content; optional values: ltr (left-to-right) and rtl (right-to-left)

Caption: Table title

Tr: Row property: dir value: ltr from left to right, rtl: from right to left

Td: Cell attribute: align: horizontal alignment of content

Valign: top/middle/botton

Width: absolute value or relative value (%)

Height: the height of a cell.

Merge cells:

Attribute: colspan: horizontal merge

Rowspan: vertical merge

 

Th: equivalent to <td> + <B>, and the property is the same as <td>;

Attribute: align: Value: left/center/right/top/bottom

Thead tbody tfoot

The difference between writing and not writing:

1. If the table is large and is not written, it must be displayed after the table content is downloaded. If it is a tbody tag, it is downloaded and displayed;

2 tbody and tfoot: the browser parses the content from top to bottom. If it is written, the browser parses the content in the order of thead, tbody, and tfoot;

 

G. frame tag and <iframe>

Body labels are not allowed on the Framework page.

Frameset: Framework set (not supported by html5)

Rows: vertical branch framework

Cols: horizontal branch framework statement: 1 absolute value "200, *" * indicates the remaining; 2 Relative Value "30% ,*"

Frame: frame. A frame displays a page (not supported by html5)

Scrolling: whether a scroll bar is required. The default value is true;

Noresize: Fixed Frame Size

Bordercolor: color the frame border.

Frameborder: border

Name: name the framework.

Src: The target URL in the window

Embedded framework: a framework embedded on a page (only supported by IE)

Iframe: attribute: width/height/scrolling: whether a scroll bar is required. The default value is true;

 

H. Multimedia tags

Bgsound: Background Music

Embed: Play multimedia files

Property: src target file path

Autostart automatic playback value: true/false

Volume: 0 ~ 100, specifies the volume size. If not specified, the system defaults the volume;

Marquee: Mobile

Property: The left/right/up/down/direction of the direction Moving target, and the down moving distance is fixed to PX;

Behavior: behavior mode; values: slide, which is used to scroll back and forth, and scroll.

Scrollamount: moving speed

Loop: the number of loops. The negative value is a wireless loop.

Scrolldelay: The interval for moving a rest, in milliseconds;

I. header mark

Head: defines Document Information

Title: defines the title of the browser toolbar.

Base: defines the default addresses or default targets of all links on the page.

Link: defines the relationship between a document and external resources. It is often used to connect a style sheet.

Meta: defines the metadata of HTML documents. It is used to define the description, keywords, author, last modification time, and other metadata of pages;

Script: defines client scripts, such as JavaScript;

Style: defines the style information of a document.

Example:

<Title> html page </title>

<Meta charset = "UTF-8"> <! -- Set the encoding of the current page number to UTF-8 -->

<Meta name = "keywords" content = "HTML, CSS, XML"/>

<Base href = "http://www.w3school.com.cn/images/" target = "_ blank"/>

<Link rel = "stylesheet" type = "text/css" href = "mystyle.css"/>

<Style tyep = "text/css>

Body {background-color: yellow}

P {color: blue}

</Style>

</Head>

Link: link color

Alink: The color when the mouse is pressed.

Vlink: The color of the accessed Link

Leftmargin: left margin

Topmargin: Top margin

<Body link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">

 

J. Form tag(All form tags must be enclosed in the <form action = "#"> tag.) action attribute: Specifies an address in the background;

Input: input box

Property: type value: text box

Password box

Redio single-stick

Checkbox multiple selection box

Submit submission

Reset

Button common button

Readonly

Disabled

Select: create a single-or multiple-choice menu

Attribute: multiple specifies that multiple option values can be selected simultaneously: multiple

Option: displays the <select> label menu or an element in the scrolling list;

Attribute Value: selected = "true" is displayed by default;

Textarea: text field; attribute: cols columns, rows: number of rows;

Attribute: for, The for attribute value should be the same as the id attribute value of the relevant element.

Eg:

<Input type = "radio" name = "gender" id = "gender-man">

<Label for = "gender-man"> male </label>

Frameset: defines a framework set;

Attribute: cols defines the number and size of columns in the framework set.

Rows defines the number and size of rows in the framework set

Legend: defines the title for the fieldset element; frameset sub-element;

Eg:

<Fieldset>

<Legend> User Group 1 </legend>

Username: <input type = "text"> <br>

Password: <input type = "text">

</Fieldset>