Web Development (beginner)-HTML basics

Introduction to HTML

HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it. The browser is responsible for translating the label into a user "readable" format, presented to the user! (Example: Djangomoan template engine)

650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "style=" Background:url ("/e/u261/lang/zh-cn/ Images/localimage.png ") no-repeat center;border:1px solid #ddd;" alt= "Spacer.gif"/>650 "this.width=650;" src= "http ://s2.51cto.com/wyfs02/m00/89/d4/wkiom1gewmhixh32aabd7dhpves336.jpg "title=" 1.JPG "alt=" Wkiom1gewmhixh32aabd7dhpves336.jpg "/>

HTML Document

Doctype

<! DOCTYPE html>/* Recommended */doctype tell the browser what HTML or XHTML specification to use to parse an HTML document

Meta (metadata information)

Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency

1. Page encoding (tells the browser what encoding) <meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" ><meta charset= "UTF-8" >

2. Refresh and jump <meta http-equiv= "Refresh" content= "" "><meta http-equiv=" Refresh "content=" 5; Url=/* This sentence is very powerful.

3. Key words <meta name= "keywords" content= "StarCraft 2, star old boy, interview, F91, small color, JOY" >

4. Description for example: Cnblogs

5. X-ua-compatible compatible IE8 looks like <meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/><meta http-equiv= " X-ua-compatible "content=" Ie=edge "/>

Title

Page header information <title>it ' s title</title>

Link

1. Css<link rel= "stylesheet" type= "Text/css" href= "Css/common.css" >

2. Icon<link rel= "shortcut icon" href= "Image/favicon.ico" >

Style

Write a style on a page

<style type= "Text/css" >. bb{background-color:red; } </style>

Script

1. Introduction of documents <script type= "Text/javascript" src= "Http://xxx/js/gpt.js" ></script >

2. Write JS code <script type= "Text/javascript" > ... </script>

Common Tags

Labels are generally divided into two categories: block-level labels and inline (inline) labels

• A, span, select, etc.

• Div, H1, p, etc.

Various symbols

Http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

P and BR

P is the paragraph, there is a gap between the default paragraphs!

BR is line break

A label

1. Target property, _black means open <a href= "http://www.baidu.com" target= "_blank" in new page >new page</a>

2. Anchor <a href= "#t31" > various symbols </a>/* To find by ID */

H tag

Select Label
Drop-down menu <select><option> downline </option><option> Online </option></select>
Radio
Radio button (name is the same, it is a group, only one option is selected) <input type= "Radio" name= "Gender" value= "man" ><input type= "Radio" name= "gender" value= "Male" >
Password and text
<input type= "text" ><input type= "password" >
button
<input type= "button" value= "button" ><input type= "Submit" value= "submit" ><input type= "reset" value= " Reset ">
File
<div id= "t310" > 
TextArea
<textarea style= "width:500px;height:200px;" ></textarea>
Label
<label for= "name2" > Name: <input id= "name2" type= "text" ></label><label for= "Marriy2" > Marriage no:< Input id= "marriy2" type= "checkbox" ></label>
FieldSet
<fieldset> <legend> Login </legend> <p> user name:</p> <p> password:</p></fieldset>
Form form
<form method= "POST" action= "http://www.baidu.com" > <input type= "Submit" value= "Submit" ></form>
some additions
Block-level labels and inline labels
Block-level label:<p>
Inline Tags: <a><input><sub><sup><textarea><span>
block (block) element features 
① always starts on new lines; BR style= "margin:0px;padding:0px;" >② height, row height and margin and padding can be controlled; 
③ width defaults to 100% of its container unless a width is set. 
④ it can accommodate inline elements and other block elements  
Features of the inline element
① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

For inline elements, be aware of the following
Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.
Additional Knowledge points
1, Border-collapse:collapse; if possible, the borders are merged into a single border. The Border-spacing and Empty-cells properties are ignored.
2, border-spacing:5px; Border-spacing property sets the distance between the borders of adjacent cells (for border detach mode only)
3. The caption element defines the table title, and the caption tag must immediately follow the table label
4, Clear:both, the left and right sides are not allowed to float elements.
5, <input type= "Radio" name= "Gender" value= "male" checked> male checked will be selected by default
6. <option value= "Fiat" Selected>fiat</option> selected is selected by default
Web Development (beginner)-HTML basics