HTML
# HTML is a front-end technology. It is mainly used for the development of front-end web pages. The web page developed with HTML is a static page
1, Introduction to HTML
HTML, commonly known as web page, means that what we see when we open the browser to visit any website is provided by HTML page (or content related to HTML technology).
The full name of HTML is HyperText Markup Language, which is translated into HyperText Markup Language. The so-called hypertext is not only text content, including links, audio and video content. The so-called markup language is simply an element. In other words, HTML provides a series of elements to form the most basic content in a page.
# HTML is called hypertext markup language 1. Hypertext -- Common file 1.txt Only text can be displayed, images, audio and video can not be displayed, and hypertext can be displayed 2. Markup language, not programming language Python C C++ Variables, functions, selections, loops, etc The basic elements of a markup language are called tags or tags <html> xxx </html>
When you save html files, you can use both htm can also be used html file suffix.
# 1. Use the browser to run html files - google chrome Google browser - firefox Firefox - edge (win10) - ie Never use - Only one function: download other browsers # 2. Tools for writing HTML files: - Do not use Notepad - Hbuilder - Write front-end tools - Sublime txt - Lightweight - nodepad++ ------------Real front-end developers-------------- - WebStorm - VSCode ---------------Back end developer--------------------- - Pycharm
2, First page
A page has and only one root tag is HTML. The element generally contains and two elements, that is, the header and main content of HTML.
<html>
<head>
<title>Title of web page</title>
</head>
<body>
<!-- This is a text box -->
<input type="text"></input>
</body>
</html>
- **HTML tag: * * surrounded by angle brackets:
- Appear in pairs: < p > < / P >, i.e. open label and closed label
- Attribute: defined in the open tag, such as the type attribute in the input tag
- Abbreviation: the content between opening and closing labels is the label body. If the label body is empty, it can be abbreviated as:
- notes: Is a comment label
- HTML documents are interpreted and run in the browser, showing not the source code, but the effect after rendering
# 1. Structure of standard HTML file
(1) Need to have html Root label for <html> xxx </html>
(2) There are two sub tags inside the root tag head and body
(3) head The header information is mainly used to describe the web page, such as the label and code of the web page
(4) body Indicates that the main content is mainly used to display to users
# 2. Title of web page
head In label title label <title> Write the title here</title>
# 3. Refresh the web page
(1) Click the refresh button on the left of the address bar
(2) Ctrl + r
(3) F5
(4) Ctrl + F5 force refresh - Do not load cache
# 4. Character set: avoid Chinese garbled code
<meta charset="UTF-8">
# 5. Labels, tags, elements < HTML > < title >
# 6. Label classification:
Double label: <html> </html> There is a beginning and an end
Single label: <meta > Single label
# 7. All tags can be added with attributes (equivalent to setting attributes for objects)
<input type='text'>
<input type="password">
# 8. Comments in HTML
- Shortcut key ctrl + /
- <!-- Annotated content -->
# 9. After running the html file, the tag itself will not be directly displayed in the page, but the content in the tag or the style corresponding to the tag
3, HTML header
The < head > element contains all the header elements of the current HTML page. The < title > element must be defined in the < head > element. You can also define < script >, < link > and other elements.
These HTML header elements define the title, code, script or style of the current page and other information.
1. title element
The < title > element defines the title of the current HTML page
<title>Baidu once, you will know</title>
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (IMG gzagllbl-1644507625040) (HTML. Assets / 1530668619163. PNG)]
2. meta element
Element provides metadata of HTML page. Metadata is the information that stores data.It is usually used to set the code, description, keywords, author and other information of the page.
The element does not appear on the page, but is parsed by the browser.2.1 define the coding format of web content
<meta charset="utf-8">
2.2 define HTML page keywords for search engines
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
2.3 define HTML page description
<meta name="description" content="Baizhi Education IT train,java train,PHP train,UI train,H5 train,linux train,Big data training,Python artificial intelligence,IT Industry training leader,High paying employment ">
2.4 define HTML page author
<meta name="author" content="Baizhi Education">
# 1. Current front-end learning, head Label, just add title and meta charset=utf-8 Keywords, authors and descriptions can be omitted.# 2. In the follow-up study, two tags script and style will be added to the head tag
Note: don't memorize by rote. All knowledge points are consolidated and memorized by understanding and knocking
4, HTML body
1. body element
The label defines the body of the document. The element contains all the contents of the document (such as text, hyperlinks, images, tables, lists, and so on)** The contents (sub tags) contained in the body element are * * that users can see.Only one tag can exist in an HTML file.
2. Basic composition of HTML elements
2.1 element type
Html is a markup language. The so-called markup refers to the elements in the page (elements can also be called tags). A complete HTML page is composed of many different elements.
Closed element: it must contain a start element and an end element. If there is no end element, an unexpected error will occur.
<title>Baizhi Education Python Artificial intelligence training</title><p>This is a paragraph label</p> <!--This tag is used to indicate that there will be line breaks in a paragraph-->
Empty element: it can also be called a single element. It only needs the start element, not the end element.
<meta name="description" content="Vorida Web Front end training"><br/> <!-- Line feed -- >
2.2 HTML attributes
Property is set in the HTML element to add additional information to the element. Attributes are generally defined in the start element and appear as "name / value" pairs
<input type="text" /> <!-- This is a text box --> <input type="button" value="Point me" /> <!-- This is a button -->
5, HTML text
1. Title element
HTML provides six header elements, from large to small, from < H1 > to < H6 >
<h1>This is the first level title</h1><h2>This is the secondary title</h2><h3>This is a three-level title</h3><h4>This is a four level title</h4><h5>This is a five level title</h5><h6>This is a six level title</h6>
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-s751fenv-164450765042) (HTML. Assets / 1530670234313. PNG)]
2. Paragraph
Element definition paragraph
: * * the browser will automatically add blank lines before and after the paragraph**<p> This is a paragraph. </p><p>This is another paragraph.</p>
Note: manual line wrapping in html is invalid
3. Line feed
The paragraph content defined by the element will not wrap automatically. If the line breaks, you need to use the br element
<body> Life gives us a huge and infinitely noble gift, which is youth: full of strength, full of expectations and volunteers, full of aspirations for knowledge and struggle, full of hope, confidence and youth. <br> What people lack is not talent, but ambition, not the ability to succeed, but the will to work hard.</body>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-obkf9ozw-164450765042) (HTML. Assets / 1530670731312. PNG)]
# 1. stay html In the file, manually press enter to wrap the line, which is invalid. Solution: use p Labels surround content or use<br># 2. In html files, adding spaces manually is invalid, and only one space will be displayed. solve: & nbsp;
4. Horizontal line
Displays a horizontal line (separation line) effect in the browser.Attribute: size = "10" color = "red" width = "100px or 50%" align = "left/right/center"
10 pixel high color width alignment
<body> Life gives us a huge and infinitely noble gift, which is youth: full of strength, full of expectations and volunteers, full of aspirations for knowledge and struggle, full of hope, confidence and youth. <br> <hr size="1" width="100%" color="red"/> What people lack is not talent, but ambition, not the ability to succeed, but the will to work hard.</body>
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-FGliiwtd-1644507625043)(HTML.assets/1530671029915.png)]
5. Text modification
5.1 bold
This is a normal text without bold.<br><b>This is a bold text.</b><br><strong>bold--stress the fact that</strong>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (IMG lwopuixi-164450765044) (HTML. Assets / 1530672074778. PNG)]
5.2 italics
<i>This is a paragraph of text in italics.</i>
5.3 underline
<body> witness:<u>Baizhi Education</u></body>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-uaosqrtf-164450765044) (HTML. Assets / 1530671768110. PNG)]
Delete line
<body> <del>This is a text to be deleted</del></body>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-tan7wyaw-164450765045) (HTML. Assets / 1530671905293. PNG)]
5.5 subscript text
<body> H<sub>2</sub>O</body>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-cjhuzfie-164450765045) (HTML. Assets / 1530672009385. PNG)]
5.6 superscript text
3 2 = 9[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-vapzkpy6-164450765046) (HTML. Assets / 1530672138124. PNG)]
5.7 small characters
Normal text<small>Small text</small>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-psp18hgx-164450765047) (HTML. Assets / 1530672191397. PNG)]
5.8 large font
<body> <small>Small text</small> Normal text <big>Large text</big></body>
[the transfer of external chain pictures fails. The source station may have an anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-vu9dmnk0-164450765048) (HTML. Assets / 1530672254286. PNG)]
6, Images and links
1. Image element
The element introduces an external image, and the element is an empty element.
1.1 src attribute
src attribute (required), indicating the URL address of the incoming image.
<img src="images/img.png">
The image can be a local address or a network address.
<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg">
1.2 image size
The width and height properties are used to set the width and height of the image display.
<img src="img.png" width="350" height="233" />
1.3 image positioning (understanding)
The align property is used to set the position where the image is displayed.
- Left: horizontal left.
- Right: right in the horizontal direction.
- Top: top in the vertical direction.
- bottom: lower in the vertical direction.
- middle: Center.
<img src="img.png" width="350" height="233" align="right" />
1.4 alt attribute
<img src="abcdef.png" alt="Unable to load picture"/>
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-rbrd4itv-164450765048) (HTML. Assets / 1530673186561. PNG)]
2. Hyperlinks
2.1 usage
href attribute (required), which indicates the URL address of the specified jump
<a href="http://www.baizhiedu. Com "> Baizhi Education</a>
2.2 opening method: target attribute
The target attribute of the element is used to set how the link is opened.
- _ blank: open the link in a new window.
- _ self: opens the link in the current window.
<a href="http://www.baizhiedu. com" target="_ Blank "> Baizhi Education</a>
2.3 anchor points
<body> <a id="postion"></a> <!-- Define anchor --> <!-- Other contents of the page ... ... ... --> <a href="#Position "> position to position < / a > <! -- link to anchor -- ></body>
2.4 empty links back to the top
<body> <!-- Other contents of the page ... ... ... --> <a href="#"> back to top < / a > <! -- back to top -- ></body>
7, List
1. Unordered list
1.1 define unordered list
- Element defines an unordered list that lists items on a page that do not have a specific order.
<ul> <li>Beijing</li> <li>Shanghai</li> <li>Chongqing City</li></ul>
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (IMG sukrnu40-164450765049) (HTML. Assets / 1530684550787. PNG)]
1.2 type attribute
Defines the type of bullet for the list
- disc: solid circle, default value.
- Circle: hollow circle.
- square: solid rectangle.
<ul type="circle"> <li>Beijing</li> <li>Shanghai</li> <li>Chongqing City</li></ul>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (IMG nvubxrmd-1644507625050) (HTML + css_pic / 1530684771419. PNG)]
2. Ordered list
2.1 defined sequence table
<ol> <li>Beijing</li> <li>Shanghai</li> <li>Chongqing City</li></ol>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-EC5RJ7Nv-1644507625051)(HTML.assets/1530684878880.png)]
Type attribute 2
- 1: Numeric value, default value.
- A or a: lowercase or capital letters.
- I or I: lowercase or uppercase Roman numerals.
<ol type="a"> <li>Beijing</li> <li>Shanghai</li> <li>Chongqing City</li></ol>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-Ed3exl5y-1644507625052)(HTML.assets/1530685009075.png)]
3. Custom list
8, Forms
1. Table use
The table is defined by the < Table > tag. Each table has several rows (defined by labels), and each row is divided into several cells (defined by labels).
<table> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr></table>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-h0tVbJNO-1644507625052)(HTML.assets/1530685462072.png)]
2. Table properties
| Attribute name | describe |
|---|---|
| width and height | Set the width and height of the table |
| align | Sets the alignment of the table |
| border | Sets the border width of the table |
| bgcolor | Sets the background color of the table |
| cellpadding | Set the inner margin (the distance between the cell border and the content) |
| cellspacing | Set outer margin (distance between cells) |
| bordercolor | Border color |
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr></table>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-PLWgz44J-1644507625053)(HTML.assets/1530685943196.png)]
3. tr element
| Attribute name | value | describe |
|---|---|---|
| align | right,left,center | Left right alignment |
| valign | top ,middle ,bottom | Vertical alignment |
| bgcolor | rgb(xxx,xxx,xxx),colorName | background color |
<table border="1" cellspacing="0" width="500px" height="100px"> <tr align="center"> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr align="right" valign="top" bgcolor="blue"> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr></table>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-v89uyjsi-164450765053) (HTML. Assets / 1530695272576. PNG)]
4. td element
An element is a data cell that defines a table.| Attribute name | value | describe |
|---|---|---|
| align | right,center,left | Set horizontal alignment |
| valign | top,middle,bottom | Set vertical alignment |
| width and height | pixels ,% | Sets the width and height of the cell |
| colspan and rowspan | number | Sets the number of cells that span columns and rows |
| bgcolor | rbg(),colorName | Cell background color |
<table border="1" cellspacing="0" width="500px" height="100px"> <tr> <td align="center">Row 1, column 1</td> <td valign="top">Row 1, column 2</td> </tr> <tr> <td width="300px">Row 2, column 1</td> <td bgcolor='red'>Row 2, column 2</td> </tr></table>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-5hxDveKK-1644507625054)(HTML.assets/1530697152946.png)]
Merge rows and columns
<table border="1" cellspacing="0" width="500px" height="200px"> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr> <td colspan="2">Row 2, column 1</td> </tr> <tr> <td>Row 3, column 1</td> <td rowspan="2">Row 3, column 2</td> </tr> <tr> <td>Row 4, column 1</td> </tr></table>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-8my04bpg-164450765054) (HTML. Assets / 1530697074613. PNG)]
5. Table title caption
The element is used to define the title of the table. It must follow the element, and only one title can be defined for each table.<table border="1" cellspacing="0" width="500px" height="100px"> <caption>Table title</caption> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr></table>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-u7jauhz0-164450765055) (HTML. Assets / 1530697414224. PNG)]
6. Header thead, tbody, tfoot footnote
The label defines the header of the table.<table border="1" cellspacing="0" width="500px" height="100px"> <caption>information</caption> <thead> <tr> <th>full name</th> <!-- The definition header cells are displayed in bold --> <th>Gender</th> </tr> </thead> <tr> <td>Tom</td> <td>boy</td> </tr> <tr> <td>Linda</td> <td>girl</td> </tr></table>
The tfoot element should be associated with thead And tbody Elements. (less used)
9, Form
# The form is mainly responsible for data collection in the web page
1. form element
The form is described by tags. There can be multiple sub tags inside the form to complete the collection of user information and send requests to the server.
Attribute: action = "xxx" method = "get/post"
Request address request method
http://www.baidu. com? uname=abc&passwd=123<form action=" http://www.baidu.com " method="get"> username:<input type="text" name="uname" id="uname115"/><br/> # abc password:<input type="text" name="passwd" id="pwd115"/><br/> # 123 < Input type = "submit" value = "submit" id = "sub115" / > < / form >
# 1. action="Address of the server" # 2. method="get/post" - Get will automatically collect data and splice the data in the form of key=value behind the server address. It is visible. If there is sensitive information, it is not safe - Post will automatically collect data, hide the data and make it safer
2. Form element
There are many different types of elements, which are determined according to different {type} attributes.
user name:<input type="text" name="txt" /> <!-- text Represents a text box-->
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-pb5soe9k-164450765055) (HTML. Assets / 1530757524606. PNG)]
- type attribute:
| Type name | describe |
|---|---|
| text | Text input box |
| password | Password box |
| radio | radio button |
| checkbox | check box |
| button | Button |
| submit | Submit button |
| reset | Reset button |
| file | File domain |
-
Name attribute: a common attribute of the tag, which is equivalent to an alias. It is an important attribute of each input control = = request parameter name.
-
id attribute: the unique identification name of the label. It cannot be duplicate.
-
Value attribute: the general attribute of the tag, which is the traditional Chinese medicine attribute = = request parameter value.
2.1 text box
user name:<input type="text" name="txt" /> <!-- text Represents a text box-->
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-vBqFFHfl-1644507625056)(HTML.assets/1530758139189.png)]
user name:<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" />
2.2 password box
password:<input type="password" name="pwd" value="123456" />
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-21P87cwF-1644507625056)(HTML.assets/1530758213655.png)]
2.3 radio buttons
<!-- name: The values must be the same, value: Represents the value when the form is submitted checked:Selected by default--><input type="radio" name="sex" value="1">male <input type="radio" name="sex" value="0" checked="checked">female
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-agyZZ5Io-1644507625057)(HTML.assets/1530758647865.png)]
2.4 check box
<input type="checkbox" name="course" value="Mysql">Mysql<input type="checkbox" name="course" value="HTML">HTML<input type="checkbox" name="course" value="Linux">Linux<input type="checkbox" name="course" value="Django">Django
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-GgfAT0gW-1644507625057)(HTML.assets/1530758924865.png)]
2.5 buttons
<input type="button" name="btn" value="Point me">
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-0UsxMIgZ-1644507625057)(HTML.assets/1530759170832.png)]
2.6 submit button
<input type="submit" name="sub_btn" value="Submit">
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-BwRP0N7V-1644507625058)(HTML.assets/1530759206331.png)]
2.7 reset button
<input type="reset" name="set_btn" value="Reset">
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-chwywVk8-1644507625058)(HTML.assets/1530759252821.png)]
2.8 file domain
<input type="file">
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-zUeGF95g-1644507625058)(HTML.assets/1530759404657.png)]
2.9 text fields
<textarea name="txtInfo" rows="4" cols="20">aa</textarea>
[the transfer of external chain pictures fails. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-B4l4b7ne-1644507625059)(HTML.assets/1530759866508.png)]
3. Drop down box
Select a course:<select name="course"> <option value="1">Java</option> <option value="2" selected="selected">C++</option> <option value="3">PHP</option></select>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-uW269Z5b-1644507625059)(HTML.assets/1530759604602.png)]
4. Form synthesis example
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-PUBotc66-1644507625060)(HTML.assets/1530759682014.png)]
10, Special symbols
| Display results | describe | Entity name |
|---|---|---|
| Space | | |
| < | Less than sign | < |
| > | Greater than sign | > |
| © | copyright | © |
| ® | Registered trademark | ® |
| ™ | trademark | ™ |