HTML summary :
One 、HTML summary
0、HTML+CSS
HTML： Hypertext markup language , Actually, it is a language used to develop web pages
CSS： Cascading style sheets , Can be used to render web pages 、 Beautify the web
Make a web page Building a house
HTML Tags build the structure of a web page brick ： Building the structure of the house
CSS style ： Beautify the web page lime 、 paint ： Beautify the house
1、HTML Introduce ( understand )
HTML： Hypertext markup language
Hypertext ： Beyond the text 、 Hypertext
Not only can it contain text , It can also contain, for example, pictures 、 Audio 、 Video and other formats
Mark ： label 、 Elements , Refers to a set of contents enclosed in brackets , for example ：
<div>,<img>,<h1>,<table>
<div></div>
It's actually a language for developing web pages
About HTML:
1)HTML Developed web documents , Usually with .htm、.html For the suffix
2)HTML Developed web documents , You can open and display ( The browser is a HTML Parser )
3)HTML The essence is a document (html/txt/word/ppt etc. )
2、HTML structure
HBuilderX Shortcut key :
ctrl+ Mouse wheel , You can zoom in or out of the font
ctrl+insert, You can put the mouse on the line , Or quickly assign the selected line to the bottom
ctrl+/ or ctrl+shift+/, You can quickly generate annotation symbols
<!DOCTYPE html>: Used to declare that the current document is a html Format page , And the version is html5.0 edition .
<html>: Root tag , be-all html The content should be placed inside the root tag
<head>: The first part , Used to store basic properties information of web pages ( for example : Webpage title , Encoding of web pages , Introduced css file , or JS file )
<body>: The body part , Used to store the visual content of a web page
<title> My first web page </title>: Specify the title of the page tag
<h1>~<h6>: Specify the title of the page content , For example, articles / News headlines
<meta charset="utf-8">: Notify the browser of the code used by the current web page , If you don't specify this line , Save and use web files utf-8, When the browser opens this page , If not used utf-8, There may be a garbled problem .
3、HTML grammar
1） label 、 Mark 、 Elements ： It's using angle brackets (<>) It's a set of things to wrap up , for example :
<head>,<body>,<h1>,<img>,<a> etc.
2） Tags are divided into start tags (<head>) And the end tag (</head>), Usually, other contents can be stored between the start and end tags .
<head>
<title> title </title>
</head>
3） Self closing label : Some tags don't need to be written inside , Usually it can be written as a self closing label
<img/>,<input/>,<br/>,<hr/> etc.
<img/> == <img></img>
4） attribute : Property must be declared on the tag , Attributes can have more than one , Multiple attributes separated by spaces
Attributes include attribute names and attribute values , The property name and the property value are connected with equal signs
Attribute values are enclosed in double or single quotation marks .
<img src="xx" id="xx" name="xx"/>
<img src='xx' id='xx' name='xx'/>
5） Annotation format : <!-- The comment -->
Annotation function :a) Add an explanation to the code
b) Comment on some code that you don't need to execute for the time being
c)html The content browser in the comment does not parse , It doesn't show
6） How to enter spaces and wrap lines in a web page
Because the browser will put multiple consecutive white space characters ( Space 、 Line break 、 tabs ) Parse it into a space to show , So if you want to make spaces or line breaks, you need to use other symbols instead .
a) have access to Implement spaces
b) have access to <br/> Tag to achieve line feed
Two 、HTML label
1、 Image tag
img Tags can insert an image into a web page , for example ：
<img src="img/meinv01.jpg" width="40%"/>
among ,src attribute : Used to point to the image path ( Relative paths , Network path )
width attribute : Specify the width of the picture
height attribute : Specify the height of the picture
On the path problem :
1) It is not recommended to write absolute paths with letter , Because in the future, we will change the publishing environment , This path is probably wrong , So I don't recommend
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
2) It is suggested to write relative path
./: Indicates the location of the current file , You can omit it
../: Represents the directory higher than the directory where the current file is located
<img src="./img/meinv01.jpg" width="40%"/>
In the current file (html) Find the directory img Catalog , stay img Search under directory meinv01.jpg file
2、 Hyperlink label
a Tags are used to implement a hyperlink in a web page
After clicking on the hyperlink , Will jump to another location ( Webpage 、 picture 、 Download address, etc ), for example :
<a href="http://www.baidu.com" target="_blank">
use Baidu Search , You don't know
</a>
among href attribute , Used to point to the jump to url Address
target attribute , Used to point to how hyperlinks are opened
_self: Open the hyperlink in the current window
_blank: Open the hyperlink in a new window
3、 Tabular label
table: Used to define a table , It can include tr label
tr(table row): Used to define rows in a table , tr Can contain td/th
td/th(table data cell): Used to define cells in a table
th(table header cell): Used to define the cells in the header , The text in it is bold and centered by default .
colspan attribute ： Set the number of columns the cell spans , for example :
<td colspan="2">11</td>
colspan="2": Sets the current cell to span two columns
rowspan attribute ： Set the number of rows that the cell spans vertically
<td rowspan="2">21</td>
rowspan="2": Set the current cell to span two rows vertically
4、 Form labels
4.1. What forms do
What forms do : Used to send data to the server
Two ways to send data to the server :
1) Use tables to send data to the server
Form item tags often exist in forms ( user name 、 password 、 nickname 、 mailbox 、 Verification code, etc ), You can enter data in the form item , Then submit the form to submit the input data to the corresponding server .
2) Using hyperlinks can also send data to the server
http://www.baidu.com?user= Zhang San &age=20&like= Basketball
stay URL The address can be followed by a question mark , Before the question mark is url Address , After the question mark, you can splice the parameters , Parameters include parameter names (user,age,like), And parameter values （ Zhang San ,20, Basketball ）, Use... Between multiple parameters & Separate . Access the server after entering the address , You can bring the parameters spliced after the address to the server
4.2.form label
<form action="http://www.baidu.com" method="GET|POST">
...
</form>
among action attribute : Used to specify to which address the data in the form will be submitted .
for example ：action Attribute points to the URL of Baidu server , Means , All data in the form will be submitted to Baidu server .
method attribute : Specify how to submit , The common submission method is GET and POST( The difference will be discussed later )
If you don't specify method, The default is GET Submit .
5、 Form item labels
1) Text input box ( user name / Verification Code / mailbox / nickname )
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>2) Password input box ( password / Confirm the password )
<input type="password" name="psw"/>
<input type="password" name="repsw"/>
3) Radio buttons ( Gender / Single choice questions )
<input type="radio" name="gender"/> male
<input type="radio" name="gender"/> Woman 4) Checkbox / Check box ( Multiple choice questions / Position / hobby )
<input type="checkbox" name="like"/> Basketball
5) Drop down the box ( Province / City / Urban choice )
<select name="prov">
<option> The Beijing municipal </option>
<option> Shanghai </option>
<option> Guangdong province, </option>
...
</select>
6) Multiline text input box
<textarea name="desc"></textarea>
7) Button / Submit button
<input type="button" value=" In a "/>
The normal button itself has no function , Can pass js Add functionality to the button ( For example, after clicking , Change a picture )
<input type="submit" value=" Submit / Sign in / register "/>
The submit button is used to submit the form , Submit the data in the form to action Property refers to the server
6、 Registration form case
Details of form items :
1) On the form item name What's the use of attributes ?
<input type="text" name="user"/>
<input type="password" name="psw"/>
Form item to submit data to ( for example : user name / password / Gender / hobby / nickname / mailbox / Verification code, etc ) It has to be name attribute , without name attribute , When the form is submitted , This item will be ignored ( That is, data cannot be submitted )
2) Why the radio box can choose more than one ?
All radio boxes name Property values must be the same , The same value indicates a group , Only one radio box in a group can be selected ( Single choice )
<input type="radio" name="gender"/> male
<input type="radio" name="gender"/> Woman
3) Why is the radio box or check box submitted with a value of on?
Because radio or check boxes are not like text input boxes , What you type in the box will act as value Submit
Radio or check boxes cannot be entered , So only through value Property to specify the value when submitting
<input type="radio" name="gender" value="male"/> male
<input type="radio" name="gender" value="female"/> Woman
<input type="checkbox"
name="like" value="basketball"/> Basketball
4) How to set a radio box or check box to select an item by default ?
<input type="radio" checked name="gender" value="male"/> male
<input type="checkbox" checked
name="like" value="football"/> football
You can add... To the radio box or check box checked Property to set a certain item to be selected by default
5) How to set an item in the drop-down box to be selected by default ?
The first item is selected by default in the drop-down box , How to set options other than the first item are selected by default
Can be in option Add a... To the label selected attribute .
<select name="city">
<option> Beijing </option>
<option> Shanghai </option>
<option selected> Guangzhou </option>
<option> Shenzhen </option>
</select>
6)option On the label value What is the function of attributes ?
for example : If " Shanghai " The option is selected , and " Shanghai " Of option There is no value, Will submit city= Shanghai ;
If in " Shanghai " The options are value attribute , stay " Shanghai " When selected and submitted , Will submit value The value of the property .
<select name="city">
<option> Beijing </option>
<option value="shanghai"> Shanghai </option>
<option selected> Guangzhou </option>
<option> Shenzhen </option>
</select>
7、 Audio 、 Video Tags
7.1. Audio tags
audio You can insert audio streams into web pages
<audio controls src="audio/ Desert camel _ Exhibition and Rollo .mp3">
If you see this paragraph , This label is not supported by your browser
</audio>
src attribute : Specifies the audio to be inserted url Address
controls attribute : Add playback for users 、 Pause 、 Volume control and other plug-ins
autoplay attribute : After the audio load is complete , Play immediately ( Auto play )
width、height: Set the width and height of the element
7.2. Video Tags
video You can insert a video stream into a web page
<video autoplay controls src="video/ Little fists .mp4">
If you see this paragraph , This label is not supported by your browser
</video>
src attribute : Specifies the... Of the video to be inserted url Address
controls attribute : Add playback for users 、 Pause 、 Volume control and other plug-ins
autoplay attribute : After the video is loaded , Play immediately ( Auto play )
width、height: Set the width and height of the element
7.3.div/span/p label
div/span/p Tags are very common but commonly used tags
These three elements are container tags , It can be used to wrap other labels or text
Set the style on the label , It can act on the content of it .
<div style="color:red;font-size:30px">
<span> Text text text </span>
<input />
<p> This is a p Elements </p>
</div>
div、p： It's an element , Default exclusive line , Both width and height can be set
It's also a block element : h1~h6,form,table,div,p etc.
span： It's an in-line element , Multiple in line elements can be displayed on the same line , Width and height cannot be set
The same in line elements are : span,b,i,u,input,img
CSS summary :
One 、CSS summary
1、 What is? CSS
CSS： Cascading style sheets , It's for beautification 、 A language for rendering web pages
And traditional html Label attribute setting style compared to , Use CSS Setting style can achieve ： That will show the data html Code and style CSS Code separation , It can enhance the display ability of web pages .
2、 How to be in html Introduction in CSS
2.1. On the label style Attribute internal add css style
<div style="border:2px solid #FF0000;font-size:26px;background:pink;">
This is a div...
</div>
This way is to css The style is written directly on the label style Attribute internal , Only valid for the current tag , Can't reuse code , And it can easily cause the confusion of page structure , Not conducive to later expansion and maintenance . So it's not recommended to use a lot of .
2.2. stay head Inside the label style Add... Inside the tag css style
<style type="text/css">
span{
border:2px solid green;
/* Set font size */
font-size:30px;
/* Set font thickness */
font-weight:bolder;
}
</style>
In this way, all of the css Style in one style Internal unified management of labels , No will css The code is written on the label , So it doesn't cause page structure confusion , And you can reuse code
2.3. adopt link The label introduces the external css file
<!-- Introducing external demo.css file -->
<link rel="stylesheet" href="demo.css"/>
In this way, all of the css The code is written in a css Unified management in documents , Really realized : take html Code and CSS Code separation . Code reuse can be realized , And it doesn't make the page structure confusing .
This is the recommended way ( Especially in enterprise development )
Two 、CSS Common selectors
So called selectors , It can help us in html A technique in which elements are selected to modify 1、 Element name / Tag name selector
Select all tags with the specified name by the name of the element or the name of the tag
Format : Element name / Tag name { css style .. }
span{} -- Check all span Elements
div{} -- Check all div Elements
2、class Class selectors
You can add a generic property to the label --class, Set the group that the element belongs to ,class The same value is a group of , adopt class Value can select the elements of this group .
Format : .class value { css style .. }
.s1{} -- Select all class The value is s1 The elements of
in addition , One element can set multiple at the same time class value , for example ：
<span class="s1 s2">span111</span>
Means the current span Elements belong to at the same time s1 Grouping and s2 grouping , If s1 and s2 Here it is span Set the background （ But the value is different ）, What is written at the back will cover the front （ For the same class of selectors ）.
If it's a selector of a different class , for example ： Use the element name 、 Class selectors 、id The selector selects the same element , Set the same properties , But the value is different , The order of priority is ：
id Selectors (100)> Class selectors (10)> Element name selector (1)
If a selector contains more than one selector category , It can be added by weight values , The higher the weight value, the higher the priority
If the weight values are the same , What is written at the back will cover the front !
3、id Selectors
You can add a generic property to the label --id,id Numbering , Requirements are unique throughout the web page . adopt id value , You can only select an element .
Format ：#id value { css style .. }
4、 Descendant selector
Inside the element selected by the parent selector , Select the specified descendant element
Format : Parent selector Descendant selector { css style ... }
div span{} -- Select all div Inside span Elements
#d1 p{} -- Choose id The value is d1 Inside the element p Elements
5、 Attribute selector
You can match elements by their attributes or attribute values
Format : Selectors [ Property conditions ][ Property conditions ]..{ css style }
input[type="password"]{} -- Check all the password input boxes
input[type="checkbox"]{} -- Check all the check boxes
div[id]{} -- Select all that have id Attribute div Elements
3、 ... and 、CSS Summary of common attributes
1、 Text 、 Font related properties
text-align： Set the horizontal arrangement of text
left（ be at the left side , Default ）、center（ In the middle ）、right（ be at the right ）
text-indent： Set the first line of text to indent , Percentage or pixel value
text-shadow： Set font shadow
letter-spacing： Set character spacing / spacing
font-siz： Set font size
font-weight： Set font thickness ,
100~900,bold,bolder,normal
font-family： Set the font ," Microsoft YaHei "," Song style "," Regular script " etc.
color： Set font color
2、 Background related properties
background It's a comprehensive attribute , You can also set the background color / Background image / Whether the background image is repeated / The location of the background image, etc
background-color: Set the background color
background-image: Set the background image
background-repeat: Set whether and how background images are repeated
backgronnd-position: Set the location of the background image
backgournd-size: Set the size of the background image 3、 Border properties
border: 2px solid red; -- Also set the width of the border 、 style 、 Color
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: Set rounded border
4、 Other attributes
width: Set the width of the element
height: Set the height of the element
--------------------------------
margin: Set the outer margin of the element
margin-top: Set the top outer margin of an element
margin-left: Set the left outer margin of the element
margin-right: Set the right outer margin of the element
margin-bottom: Set the lower outer margin of the element
margin: 10px 20px 30px 40px; /* On Right Next Left */
margin: 10px 20px 30px; /* On about Next */
margin: 10px 20px; /* Up and down about */
margin: 10px; /* The up and down or so */
--------------------------------
5、 Supplementary content ： How to value colors
Mode one : Use the name of the color ( English words )
red green blue black yellow pink
Mode two : # Six hexadecimal numbers (AABBCC==ABC)
#FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF
#F00 #0F0 #00F #000 #FF0 #FFF
Mode three : rgb(255,255,255)
rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
Four 、 Web comprehensive actual combat ： Jingtao login page
See the code for details ！
