HTML
HTML is a hypertext link language, English Name: hypertext markup language; It can be used for the design of text, pictures, sound, video and other web elements in web pages.
Development tools: vs code, Google Chrome
1, HTML beginner
1.HTML syntax:
Single tag: < tagName attribute = "attribute value"... >
Double Tags: < tagName attribute name = "attribute value"... > content < / tagName >
2.HTML document structure:
The html document structure is fixed and typed in the vs code editor! (! Is English). Press enter to automatically display the skeleton structure of the html document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
</head>
<body>
Web content
</body>
1. The first line is the HTML5 standard web page declaration, which can be recognized by browsers supporting HTML5 standard;
2. The HTML tag represents the start point and end point of the HTML document. It is the root tag of the HTML document structure. The attribute lang "means" language "and" en "means english;
3.head is a header element (element = tag + attribute + attribute value + content). The charset attribute in the first meta tag declares the encoding format. If you want to display Chinese on the web page, the attribute value must be equal to utf-8(utf-8 includes all words in the world), otherwise it will be garbled (the browser will use the default encoding when parsing, which may not be utf-8); Title is used to set the title of the web page; The second meta tag is related to mobile terminal adaptation.
4.body is the main body, which is used to write web page content
be careful:
Tags can be nested, but not crossed (for double labels).
Case insensitive, but it is recommended to use all lowercase.
2, HTML tags
1. Text:
Title h label: the font size decreases gradually from h1 to h6
Paragraph p label: there is no line break in p. you need to use a line break label br (line breaks and spaces in the label have no effect).
2. Picture:
<img src="File path" width="200">
IMG tag: the attribute value of src attribute is equal to the image path, which can be a relative path (relative to your own target file location) or an absolute path (not recommended. After the entire website is uploaded to the Web server, the website storage location may be changed, and the image cannot be displayed). In img tag, the width and height are scaled in equal proportion, so setting one is enough.
3. Audio:
The audio tag is used to add music to the web page. In the audio tag, the controls attribute is required to display the control on the web page, and the audio path is used as the attribute value of the src attribute of the sub tag source.
<audio controls>
<source src="File path">
</audio>
4. Video:
When playing video on the web page, use the video tag. The code style is the same as that of audio. Just change the tag name and file path.
Note: the audio and video formats supported by major browsers are different, so MP3 format is preferred for audio and MP4 format is preferred for video. These two formats can be played on each browser.
5. Hyperlink:
① Jump between pages:
<a href="Jump to page url" target="Target for resource display" >Click content</a>
href – hypertext reference, that is, hypertext reference. The attribute value is the address of the jump page (url – uniform resource location, that is, uniform resource address). It can be a relative path or an absolute path.
target attribute value has_ self,_blank, custom_ Self means that the web page is opened on the current page, that is, the newly opened page overwrites the currently opened page_ blank means to open in a new tab; Custom resource display targets can be used in conjunction with iframe.
② Intra page Jump:
Set anchor points where you need to jump:
<a name="Anchor name"></a>
Set the hyperlink where you click the jump in the page:
<a href="#Anchor name "> Click to return to the anchor</a>
6. List:
Ordered list: ul tag + sub tag li, the content in li is one line;
Unordered list: ol tag + sub tag li the same as above.
7. Form:
Label: the sub label tr represents the row and td represents the cell. Enter the content in the cell;
<table align="center" border="1" cellspacing="0" width="800" hight="300">
<tr>
<th>ranking</th>
<th>key word</th>
<th>trend</th>
<th>Search today</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
Cell contents are arranged as numbers. A tr is a row and a td is a cell.
Cell merge:
The cells in a row are merged. td attribute colspan = "x", x is the number of merged cells. Delete x-1 td in this tr tag, and colspan indicates the number of columns occupied by this td cell;
One column: rowspan = "y", delete y-1 cells in the merged tr, and rowspan represents the number of rows occupied by this cell.
table border="1" align="center" cellspacing="0" width="1000" height="600" >
<tr height="150" bgcolor="blue">
<td colspan="3"></td>
</tr>
<tr>
<td width="200" bgcolor="red"></td>
<td></td>
<td width="200" bgcolor="pink"></td>
</tr>
<tr height="150" bgcolor="yellow">
<td colspan="3"></td>
</tr>
</table>
8. Form
The form tag is used for the user's information input on the page. The attribute action represents the object for submitting the form information. The method selects the submission method, get or post.
form has three sub Tags: input, text area and select.
①input:
type attribute: text - user input information text box, password - password box, radio - radio box, checkbox - check box,
File - file field, submit - submit the information in the form to the object pointed to by the action attribute, rest - clear the form information,
Button - user defined button, hidden - hidden field;
②textarea:
Multi line text input box;
③select:
The select tag represents the drop-down menu, and the sub tag option content is each item in the menu;
<form >
<p>
<label for="phoneNumber">phone number:</label>
<input type="number" id="phonenumber">
</p>
<p>
<label for="pwd">Create password:</label>
<input type="password" id="pwd">
</p>
<p>
<label for="userName">full name:</label>
<input type="text" id="userName">
</p>
<p>
<span>Gender:</span>
<input type="radio" name="sex" >male
<input type="radio" name="sex" >female
</p>
<p>
<span>birthday:</span>
<select >
<option >1990</option>
<option >1991</option>
</select> year
<select >
<option >10</option>
<option >11</option>
</select> month
<select >
<option >1</option>
<option >19</option>
</select> day
</p>
<p>
<span>Working conditions:</span>
<input type="radio" name="now" >at work
<input type="radio" name="now" >At school
<input type="radio" name="now" >other
</p>
<p>
Multiline input:
<textarea></textarea>
</p>
<p>
<span>Your nationality is:</span>
<span></span>
<select >
<optgroup label="Asia">
<option >China</option>
<option >Japan</option>
<option selected>the republic of korea</option>
</optgroup>
<optgroup label="North America">
<option >U.S.A</option>
</optgroup>
</select>
<span>Current residence:</span>
<select >
<option >the republic of korea</option>
<option selected>China</option>
</select>
</p>
<p>
<input type="file"><br/>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</p>
<p>
<input type="checkbox">agree
<a href="#"> * * Internet Terms</a>
</p>
<button>Register now</button>
</form>