One 、 What is? HTML?

HTML: Hypertext tagging language  (Hyper Text Markup Language) www The descriptive language of the World Wide Web .
XHTML Extensible HyperText Markup Language ( Logo language )(EXtensible HyperText Markup Language) It's a markup language , Representation and hypertext markup language (HTML) similar , But the grammar is more strict .
browser :“ Explain and execute ”HTML Source code tools
 
Two 、HTML Document structure

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、.<!---->

     notes : For programmers , It won't be displayed in the web page
    HTML Shortcut keys for comments in :Ctrl+/

It should be noted that : The document declaration must have ! And it has to be on the first line of the document page !

3、 ... and 、HTML Basic syntax

 

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 .

Four 、 Basic labels

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

&nbsp;
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

  1. 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>& ...

  2. 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 ...

  3. 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 ...

  4. 49、html Basic knowledge &amp; 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 ...

  5. 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 ...

  6. 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 ...

  7. 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 ...

  8. 1、html Basic knowledge &amp; 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 ...

  9. 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

  1. 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

  2. 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 ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. 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 ...

  7. [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 ...

  8. 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 ...

  9. 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 ...

  10. 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 ...