HTML The document consists of three parts : The document declaration section 、<head> The head part 、<body> Main part .

1、<!DOCTYPE html> This is a HTML The declaration section of the document , stay html5 in , Has been reduced to this style .
2、.<!---->
It should be noted that : The document declaration must have ! And it has to be on the first line of the document page !
1、< Conventional markings >
< Mark attribute =“ Property value ” attribute =“ Property value ”></ Mark >
for example :<head></head>
2. Empty tag
< Mark attribute =“ Property value ” />
for example :<meta charset=”utf-8”> <br/>
explain :
1. Written in <> The first word in is called Mark , label , Elements .
2. Tags and attributes are separated by spaces , Attributes and attribute values are connected by an equal sign , Property values must be placed in “” Inside .
3. A tag can have no attributes or multiple attributes , There is no order between attributes .
4. The empty tag has no end tag , use “/” Instead of .
1、 Text title (h1-h6)
<h1>LOGO</h1>
<h2> Secondary column or title - Subheading H2</h2>
<h3> Again, we need column or classified subtitles H3</h3>
<h4> In the article, the classification subtitle H4</h4>
<h5> Secondary title </h5>
<h6> Six level title </h6>html The principle of using the title label :
H1 It's best to use it only once in a web page , For example, to a web page LOGO Use .
2、 Paragraph text (p)
<p> Paragraph text content </p>
Identify a paragraph ( There is a gap between paragraphs )
3、 Space
There is no definite value for the occupied position , This has something to do with the current font size .
4、 Line break (br)
<br />
The wrap is an empty tag ( Forced line wrap )
5、 In bold Bold has two marks
A、<b> Bold content </b>
B、<strong> Bold content </strong>
6、 tilt
<em></em> ,<i></i>
7、 Level
<hr /> Empty tag
8、 list (ul,ol,dl)
HTML There are three kinds of lists in the : Unordered list , Ordered list , Custom list
* Unordered list
An unordered list consists of :
<ul>(unordered list)
<li></li>
<li></li>
......
</ul>* Ordered list
An ordered list consists of :
<ol>(ordered list)
<li></li>
<li></li>
......
</ol>* Custom list
<dl>(definition list)
<dt> Noun </dt>
<dd> explain </dd>
(definition description)
......
</dl>
Knowledge expansion 2---- Properties of ordered lists
1)、type: Specifies the type of bullet for list items in a list
grammar :<ol type="a"></ol>
1 An ordered list of numbers in order ( The default value is )(1, 2, 3, 4).
a An ordered list of letters , A lowercase letter (a, b, c, d).
A An ordered list of letters , Capitalization (A,B,C,D)
i Rome digital , A lowercase letter (i, ii, iii, iv).
I Rome digital , Capitalization (I, ii, iii, iv).
2)、start Property specifies the starting point of the sequence table .
grammar :<ol start="5"></ol>
9、 Insert a picture
<img src=" Target file path and full name " alt=" Pictures replace text " title=" Picture title " />
notes : The image to be inserted must be placed under the site
title The role of : Show a tip when you hover over the image , When the mouse leaves, it's gone ,HTML The vast majority of tags support title attribute ,title Attribute is specially used for prompt information
alt The role of :alt Property is a prompt message displayed on the page when your picture cannot be loaded for some reason , It will output directly where the image was originally loaded .* The relative path :
1) When the current file and the target file are in the same directory , Write the target file name directly + Extension ;<img src=”q12.jpg”/>
2) When the current file and the folder of the target file are in the same directory , It is written as follows :
Folder name / Full name of the target file + Extension ;<img src=”images/q12.jpg”/>
3) When the folder of the current file and the folder of the target file are in the same directory , It is written as follows :
../ The name of the folder where the target file is located / Target file name + Extension ;
<img src=”../images/q12.jpg”/>
10、 The application of hyperlinks
grammar :
<a href=" Target file path and full name / Connection address " title=" Tip text "> Link text / picture </a>
<a href="#"></a> Empty link
attribute :target: How the page opens , Default property value _self.
Property value :_blank New window open
<a href="#" target="_blank"> The new page opens </a>
11、div and span Usage of
<div ></div>
No specific meaning , Collectively referred to as block labels ,
Used to set the document area , Is a common object for document layout<span> </span>
Text node labels
It could be a small piece of text , Or a word .
12、 The function and composition of data table
effect : Display the data
Table composition
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>notes : One tr For a line ; One td Means a column ( One cell )
* Related properties of data tables
1)width=" Width of table "
2)height=" Table height "
3)border=" The border of the table "
4)bgcolor=" The background color of the form " bg=background
5)bordercolor=" The border color of the table "
6)cellspacing=" Space between cells "
7)cellpadding=" The gap between cell and content "
8) Alignment mode :align="left/center/right";
9) Merge cell properties :
colspan=“ The number of columns in the cells you want to merge " Merge Columns ;rowspan=“ Number of rows of cells to merge ” Merger line ;
13、 The function and composition of the form
What forms do : Used to collect user information ;
1)、 Form box
<form name=" Form name " method="post/get" action=""></form>
2) The text box
<input type="text" value=" The default value is "/>
3) Password box
<input type="password" />
<input type="password" placeholder=" password " />
4) Reset button
<input type="reset" value=" Button content " />
5) Radio buttons / Radio button
<input type="radio" name="ral" />
<input type="radio" name="ral" checked="checked" />
In the radio button name Attribute must write , The same set of radio buttons name Property values must be the same .
checked="checked"( Selected by default ;) disabled="disabled" Ban
6) Check box
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" : Ban )
(checked="checked" : Selected by default )
7) The drop-down menu
<select name="">
<option> Menu content </option>
</select>
8) Multi-line text box ( Text domain )
<textarea name="textareal" cols=" Character width " rows=" Row number ">
</textarea>
9) Button
<input name="'" type="button" value=“ Button content ” />
<input name="'" type="submit" value=“ Button content ” />
<button></button>
button and submit Is the difference between the :
submit The submit button is used to submit information ,type The type is button It's just a jump , Do not submit .
Expand your knowledge 3: For different input types ,value The meaning of attribute usage
value The attribute is input Element settings .
For different input types ,value Properties are used differently :
type="button", "reset", "submit" - Define the text displayed on the button
type="text", "password" - Define the initial value of the input field
type="checkbox", "radio" - Define the value associated with the input
notes :<input type="checkbox"> and <input type="radio"> Must be set in value attribute .
Expand your knowledge 4:
<form name=" Form name " method="post/get" action=""></form>
Form There are two ways to get data in get and post The difference between ?
1. get Get data from the server ,post Is to send data to the server .
2. get The parameter data queue is added to the submission form ACTION Attribute refers to URL in , Value corresponds to each field in the form one by one , stay URL Can be seen in .post It's through HTTP post Mechanism , Place the fields and their contents in the HTML HEADER Transfer to ACTION Attribute refers to URL Address . Users don't see the process .
3. about get The way , Server side Request.QueryString Get the value of the variable , about post The way , Server side Request.Form Get submitted data .
4. get Small amount of data transmitted , Not greater than 2KB.post Large amount of data transmitted , It is generally defaulted to unlimited .
5. get Very low security ,post High security . But it's more efficient than Post Good method .
Suggest :
1、get The security of this method is better than Post The way is worse , If it contains confidential information , Suggest using Post Data submission method ;2、 When you're doing a data query , Suggest using Get The way ; We're doing data additions 、 When modified or deleted , Suggest using Post The way ;
HTML More articles on text structure and common tags
- web Front end development from 0 To 1—html Structure and common labels
One :html Document label structure <html></html><!-- Document header information , Indicates what label the document content is written with .--> <head></head>& ...
- html First time to know Document structure Commonly used labels
HTML First time to know △HTML: Hypertext markup language , Is a markup language for creating web pages , Not a programming language , There is no logic In essence, it's the rules that browsers recognize We write web pages according to the rules , Browsers render our web pages according to rules . For different browsers , The same ...
- Android Programmer Science WEB front end (1)-HTML(1)- Standard structure commonly used labels -Sublime
Reprint please indicate the source :http://blog.csdn.net/iwanghang/article/details/76522043 I think blog is useful , Please thumb up , Please comment on , Please pay attention to , thank you !~ 8 Month. , Changing jobs has 2 It's been months ...
- 49、html Basic knowledge & Commonly used labels (1)
From today's issue, we enter the front-end learning , Study first html, There's no logic, no brain burn , Just remember . practice . practice . practice . One .HTML First time to know 1.web The nature of service import socket def main(): sock ...
- HTML Common labels and attributes of
label Label classification Tag name english English meaning Label type remarks HTML Page structure < html> HyperText Markup Language Hypertext markup language < head> h ...
- html Common label learning notes
The content of this article is : Preface : This article covers several common tags , And some common attributes of these tags ( There are some attributes because there are already CSS Style instead of , So I choose not to talk about some unimportant things here ) Typesetting labels Paragraph Tags :p div span Title ...
- html( Commonly used labels , Label classification ), Page template , CSS(css Three ways to introduce ), Priority of the three methods of introduction
HTML Markup language is a non programming language responsible for completing the structure of the page form : label : By <> The package begins with a letter , You can combine legal characters ( -| Numbers ), Special symbols that can be parsed by browsers , The label has a beginning and an end Instructions : By <> package ...
- 1、html Basic knowledge & Commonly used labels (1)
From today's issue, we enter the front-end learning , Study first html, There is no complicated logic to burn the brain , Just remember . practice . practice . practice . This navigation : HTML First time to know Introduction to commonly used labels <body> Commonly used labels in One .HTML First time to know ...
- html Common label arrangement
html Document structure <!DOCTYPE html> <html lang="zh-CN"> # This lang Presentation language ,zh-CN Chinese means , The content of the whole document is in Chinese ...
Random recommendation
- linux process po There are two ways to configure scripts in multiple languages
1. stay configure.ac It's equipped with ALL_LINGUAS, And then call AM_GLIB_GNU_GETTEXT 2. stay po Put... Under the directory LINGUAS file , from gettextize To generate and process
- centos6 install redis
1. Check installation dependencies yum install gcc-c++ yum install -y tcl yum install wget 2. Get the installation file wget http://download.red ...
- android 5.0 New feature learning -- View outline
ViewOutlineProvider -- View outline setOutlineProvider-- have access to View.setClipToOutline Method to cut a view outline Area . Only rectan ...
- AVL Tree operation
1.AVL A tree is a binary search tree with equilibrium conditions , A tree AVL Tree is the height difference between the left and right subtrees of each node 1 Binary search tree of . 2.AVL Deleting a tree is more complicated than inserting it . If there are relatively few deletions , So lazy deletion is the best strategy . 3 ...
- Java In a multithreaded static Use of variables
Turn :https://blog.csdn.net/yy304935305/article/details/52456771 Mr. Lu Xun once said :“ Time is like water in a sponge , As long as willing to squeeze , There is always something ”. Whatever the swelling ( how ) What do you say ...
- Spring Security( Ten ):3. What’s New in Spring Security 4.2 ( new function )
Among other things, Spring Security 4.2 brings early support for Spring Framework 5. You can find th ...
- [BZOJ2863] The angry head of state
Description: Pty Living in a wonderful country , This country has n Cities , The number is 1~n. Every city has its way to other cities . There are no two cities that can reach each other . The head of state is very angry now , He shouted ...
- ubuntu server 18.04 lts Solution of terminal Chinese display as garbled code
. Recently installed ubuntu server 18.04 lts Version discovery system comes with the terminal, whether it is editing Chinese , Or display Chinese are garbled , It's still the same thing , Today, I found out by accident that ssh, The remote access , stay windows Install open source p ...
- mercurial A few easy-to-use tips
In fact, these two years , Be able to adopt mercurial I try my best to use , Even some upstream are git Of , Or it needs to be entrusted to the company gitlab Working with others on the Internet , I put it all on hg-git. Without it , Just because mercurial It's easier to use than git Good ...
- day 54 JS And jquery
jQuery introduction 2017-07-10 jQuery Quick start . jQuery Introduce jQuery It's a lightweight . Multi browser compatible JavaScript library . jQuery Make it easier for users to handle HTML Doc ...