current position：Home>Discussion on HTML page knowledge

Discussion on HTML page knowledge

2022-05-15 02:37:45【Koki 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

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
 html notes
<a href="http://map.baidu.com"> Map </a> html Link address

7. html picture
<img src="Untitled.png"> html picture src= Path to picture

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

13. Title box
<H1> Headline </H1> H1-H6 All represent the size of the input box

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 ：

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

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.

So the result ：

2.

So the result ：

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

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 ：

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

current position：Home>Discussion on HTML page knowledge

Discussion on HTML page knowledge

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

Two 、HTML label - attribute

Look for the element ：

3、 ... and 、 event

The sidebar is recommended

guess what you like

Random recommended