current position:Home>Discussion on HTML page knowledge

Discussion on HTML page knowledge

2022-05-15 02:37:45Koki can test a rookie

One 、web Composition of the page : HTML + css + javascript

HTML Define the content of the page , The content of text implementation
css Pattern design , Templates Such as : The font color , font size , Typesetting
javascript programing language : Logical verification Dynamic

stay pycharm Build a new one inside html file .

<title>python-20211229</title> — Represents the title line
 Insert picture description here

<input></input> — Represents the input field line
<input type="text"></input> — Represents the property of the input box line text box
<input type=submit></input> Submit properties
<input type=password></input> Password box properties
<input type=file></input> File upload properties
<input type=radio></input> Radio box properties
<input type=checkbox></input> Check box properties
<input type=button></input> Button properties
<rb> Line break

 Insert picture description here
for example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python-20211229</title>
</head>
<body>
 Favorite anime :

<input type=checkbox> One piece </input>
<input type=checkbox> Doulo land </input>

</body>
</html>

The page display :
 Insert picture description here
for example 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python-20211229</title>
</head>
<body>
 Favorite anime :
<input type="checkbox"> One piece 
<input type="checkbox"> Doulo land 
<br>
 Gender :
<input type="radio" name="sex"> male 
<input type="radio" name="sex"> Woman 

</body>
</html>

The page display :
 Insert picture description here

Two 、HTML label - attribute

1.<input type="text" readonly> readonly Read-only property , The input box is not editable
2.<input type="text" placeholder=" Please enter 8 Digit number "> placeholder Prompt when helping users input
 Insert picture description here

3.<input type="checkbox" checked > One piece checked Selected by default

 Favorite anime :
<input type="checkbox" checked > One piece 
<input type="checkbox"> Doulo land 

 Insert picture description here
4.<input type="checkbox" disabled > One piece input This element is disabled when the element is loaded
 Insert picture description here
5.
The first stands for disabling , the second button Submit on behalf of the button , The third is to submit

<input type=button value=" Submit " disabled >
<input type=button value=" Submit " >
<button> Submit </button>

 Insert picture description here
6. link a Is an element ,herf Attribute
<!-- link --> html notes
<a href="http://map.baidu.com"> Map </a> html Link address
 Insert picture description here
7. html picture
<img src="Untitled.png"> html picture src= Path to picture
 Insert picture description here
8.html picture
<img src="Untitled.png" width="270" height="129"> html Picture size settings width Width heigt Height
 Insert picture description here
9. The drop-down list
select and option Coexist

 Upload files :
<select name="ft" size="1">  == $0
    <option value="pdf">Adobe Acrobat PDF (.pdf)</option>
    <option value="doc"> Microsoft  Word (.doc)</option>
    <option value="xls"> Microsoft  Excel (.xls)</option>
    <option value="ppt"> Microsoft  Powerpoint (.ppt)</option>
    <option value="rtf">RTF  file  (.rtf)</option>
    <option value="all"> All formats </option>
</select>

It is shown that :
 Insert picture description here

10. Forms

<form><!-- Forms  -->
    <input type="text">
    <table border="2"><!-- Frame  -->
            <tr><!-- That's ok  -->
                <td>11</td><!-- Column  -->
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td>22</td>
                <td>33</td>
                <td>44</td>
            </tr>
            <tr>
                <td>55</td>
                <td>66</td>
                <td>77</td>
            </tr>
    </table>
</form>

It is shown that :
 Insert picture description here
11.iframe A web page is nested in a web page

<iframe src="//xui.ptlogin2.qq.com/cgi-bin/xlogin?"><!--iframe: Inner frame   Inside is a html page  -->
    
</iframe>

such as : The login page of the web page
 Insert picture description here 12. Large text box
<textarea></textarea> Enter unlimited
 Insert picture description here
13. Title box
<H1> Headline </H1> H1-H6 All represent the size of the input box
 Insert picture description here

14.id Is each html The only attribute of the page or style: Set the style .

More knowledge to :w3school understand , Poke me

Two 、DOM object Full name :Document Object Mode It's a set web standard , Access defined html A set of attributes of a document , Add, delete, modify, etc .

Other languages , Such as JAVA/PYTHON To operate html page , Do not operate directly , It's through DOM Object and then operate .HTML DOM Used exclusively for the operation of HTML page . therefore : Scripting language through DOM Object to access html page

At present , If you use it directly in the front page DOM Object words , Also need to use Java Script The grammatical .

Java Script Simple grammar

<script></script> var That is variable Statement
var Variable name = value
list : var he = [a,b,c,d] alert(he[1]) Tip pop up a
Dictionaries :var hei = {"name":"value","sex":"unknown"} Call it :hei.name

function :

function  The name of the function ( Parameters , Parameters ){
    
	return  value ;
}
 call : The name of the function ( Parameters )

debugging :
 Insert picture description here
result :
 Insert picture description here

Look for the element :

2.1
 Insert picture description here

name Corresponding
getElementById ID attribute :kw
getElementsByClassName class attribute :s_ipt
getElementsByName name attribute :wd
getElementsByTagName Tag name input
 Elemental ID attribute :
document.getElementById("kw")
 Elemental class attribute :
document.getElementsByClassName("s_ipt")
 Elemental name attribute :
document.getElementsByName("wd")
 The tag name of the element :
document.getElementsByTagName("input")
css Selectors :
document.querySelector(css)

Example : Select the search box of Adu's page , Enter the code in the console below , Proper :

document.getElemenByld("kw")

 Insert picture description here The result is located in the corresponding option box
 Insert picture description here
2.2 Attribute of element :

 Change properties :
document.getElemenByXXX(""). Property name = Property value 
 get attribute :
document.getElemenByXXX("").getAttribute( Property name )

chestnuts :
 Insert picture description here
Setup modification
1.
 Insert picture description here
So the result :
 Insert picture description here
2.
 Insert picture description here
So the result :
 Insert picture description here
3.
Change the text / Change font color :
First locate :

a = document.getElementById("articleContentId")
a.innerText=" Read txt Read the column of a character in the file "
a.style.color = "red"

 Insert picture description here
 Insert picture description here
 Insert picture description here

3、 ... and 、 event

Browser and user events , Trigger - perform js The response of different pages brought by the code .
for example : Click event 、 Input event 、 Mouse events, etc .

Page loading completion event :
window.onload = function(){
alert(“everything is ready!!”)
}

Click event :
document.findElementByld(XXX).οnclick= function(){
alert(“ Click on OK”)
}

Loading event :
 Insert picture description here

 Insert picture description here
3.1, The mouse trigger turns red , Remove the green js Code : Be careful Input wrap shift+enter Key wrap

 <!-- Navigate to element -->
a = document.getElementById("title")
<!-- Red -->
a.onmouseover =  function(){
    
    a.style.color = 'red';
}
<!-- green -->
a.onmouseout =  function(){
    
    a.style.color = 'green';
}

Effect of page
Trigger :
 Insert picture description here Move away :
 Insert picture description here

copyright notice
author[Koki can test a rookie],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120517585173.html

Random recommended