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 .
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/>
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）
<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 )
There is no definite value for the occupied position , This has something to do with the current font size .
4、 Line break (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>
<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>* Ordered list
An ordered list consists of ：
</ol>* Custom list
<dt> Noun </dt>
<dd> explain </dd>
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 ;
10、 The application of hyperlinks
<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
No specific meaning , Collectively referred to as block labels ,
Used to set the document area , Is a common object for document layout
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 width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
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
<option> Menu content </option>
8） Multi-line text box （ Text domain ）
<textarea name="textareal" cols=" Character width " rows=" Row number ">
<input name="'" type="button" value=“ Button content ” />
<input name="'" type="submit" value=“ Button content ” />
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 .
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 ;
- 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 ...
- 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