当前位置:网站首页>htmlcss

htmlcss

2020-11-06 01:16:12 one who tries not to offend anybody

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

版权声明
本文为[one who tries not to offend anybody]所创,转载请带上原文链接,感谢