Article Directory
1. Introduction to HTML
1. Web page
1> What is a web page
A website refers to a collection of webpages on the Internet that are made using HTML to display specific content according to certain rules.
A web page is a "page" in a website, usually a file in HTML format, which is read by a browser. A web page is the basic element that constitutes a website, and it usually consists of pictures, links, text, sound, video and other elements. Usually the web pages we see often end with .htm or .html suffixes, so they are commonly calledHTML file。
2> What is HTML
HTML refers toHypertext Markup Language(Hyper Text Markup Language), which is a language used to describe web pages.
HTML is not a programming language, but a markup language. A markup language is a set of markup tags.
The meaning of hypertext :
- It can add pictures, sounds, animations, multimedia and more (beyond text limitations).
- It can also jump from one file to another, with file links (hyperlink text) from hosts around the world.
2. Web standards
Web standards are a collection of standards developed by the W3C organization and other standardization organizations. W3C (World Wide Web Consortium) is the most famous international standardization organization.
1> Why do we need web standards
Due to the inconsistent results parsed by different browsers, developers need to develop multiple versions.
Web standards can make pages written by different developers more standardized and uniform; content can be accessed by a wider range of devices; it can be more easily searched by search engines; it can make websites easier to maintain; and improve page browsing speed.
2> Composition of Web Standards
Web standards mainly include three aspects: Structure, Presentation and Behavior.
| standard | illustrate |
|---|---|
| structure | Structure is used to organize and categorize web page elements , HTML |
| Performance | It is used to set the color, size and other appearance styles of web page elements , CSS |
| Behavior | Behavior refers to the definition of web page model and the writing of interaction , Javascript |
Structure is written in HTML files, presentation is written in CSS files, and behavior is written in JavaScript files.
3. HTML syntax specification
1> Basic grammar
- HTML tags are keywords surrounded by angle brackets, such as <html>
- Double tags : Appear in pairs (most are double tags), such as < html>< /html>
- Single tag : a single tag (rarely), like < br />
2> Tag relationship
- containment relationship
<head>
<title> </title>
</head>
- Constellation
<head></head>
<body></body>
Two, HTML tags
1. Basic label
| tag name | definition |
|---|---|
| < html>< /html> | HTML tags |
| < head>< /head> | document head |
| < title>< /title> | the title of the document |
| < body>< /body> | body of the document |
<html>
<head>
<title> 文章标题</title>
</head>
<body>
文章主题在这里！
</body>
</html>
2. Title tags
In order to make web pages more semantic, we often use title tags in pages.HTML provides 6 levels of web page titles, namely < h1> - < h6>.
- The text with the title will become bold, and the font size will increase in turn.
- A title occupies a single line.
3. Paragraph and line break tags
In a web page, in order to display texts in an orderly manner, it is necessary to display these texts in segments. In HTML tags,The <p> tag is used to define paragraphs, which can divide the entire web page into several paragraphs.
- Text within a paragraph is automatically wrapped according to the size of the browser window.
- There is space between paragraphs and paragraphs.
In HTML, the text in a paragraph runs from left to right until it reaches the right end of the browser window, and then wraps automatically.If you want a certain text to be displayed in a new line, you need to use the newline tag < br />.
- < br /> is a single tag.
- The < br /> tag simply starts a new line, unlike paragraphs, where some vertical spacing is inserted between them.
4. Text formatting tags
Prominent importance, more important than ordinary text
| Semantics | Label |
|---|---|
| bold | < strong>< /strong> |
| tilt | < em>< /em> |
| strikethrough | < del>< /del> |
| underline | < ins>< /ins> |
5. <div> and <span> tags
They have no semantics, just a box for content.
- The <div> tag is used for layout, but now only one <div> can be placed in a line. big box
- The <span> tag is used for layout, and there can be more than one <span> on a line. small box
6. Image tags
The <img> tag is used to define images in HTML pages.
<img src="图像URL"/>
src is a required attribute of the <img> tag, which is used to specify the path and file name of the image file.
Image tag attribute description:
| Attributes | illustrate |
|---|---|
| src | image path |
| alt | The image cannot display the text used to replace it |
| title | The text displayed when the mouse is placed on the image |
| width | set the width of the image |
| height | set the height of the image |
| border | Set image border thickness |
- Image tags can have multiple attributes, which must be written after the tag name.
- Attributes are in no particular order, and tags and attributes, and attributes and attributes are separated by spaces.
Relative path: The directory path established based on the location of the referenced file.
Absolute path: refers to the absolute location under the directory, directly to the target location, usually the path starting from the drive letter.
7. Hyperlink label
The <a> tag is used to define a hyperlink, which is used to link from one page to another.
Grammar format:
<a href="跳转目标url地址" target="目标窗口弹开方式">文本或图像</a>
| Attributes | effect |
|---|---|
| href | Specify the url address of the link target |
| target | Link opening method, the default is _self, open in a new window as _blank |
Link Category:
- External link : such as < a href="http://www.baidu.com ">Baidu</a>.
- Internal link : just link directly to the internal page name
- Empty link : < a href="#">homepage</a> if no link target is determined at that time.
- Download link : If the address in the href is a file or compressed package, the file will be downloaded.
- Links to webpage elements : Hyperlinks can be added to various webpage elements in webpages, such as text, images, tables, audio, video, etc.
- Anchor link : Click the link to quickly navigate to a certain position on the page. (In the href attribute of the link text, set the attribute value to the form of #name, find the target location tag, and add an id attribute = the name just now )
8. Form label
- < table>< /table> is used to define the table
- <tr></tr> defines the row in the table
- < td>< /td> defines the cells in the table
- < th>< /th> header cell (centered and bold)
Grammar format:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1> Form properties
| attribute name | attribute value | describe |
|---|---|---|
| align | left、center、right | Alignment of table relative to surrounding elements |
| border | 1 or " " | Is there a border |
| cellpadding | Pixel values | Blank value between border and content, default 1 |
| cellspacing | Pixel values | Space between cells, default 2 |
| width | pixel value or percentage | Specifies the width of the table |
2>Form structure label
- < thead>< /thead>: used to define the head of the table. <thead> must have a <tr> tag inside. Usually it is on the first row.
- < tbody>< /tbody>: used to define the body of the table, mainly used to put the data ontology.
- The above tags are placed in the <table></table> tag.
3>Merge cells
- First determine whether to merge across rows or columns.
- Find the target cell.
- Delete redundant cells.
Way:
- Merge across rows: the uppermost cell is the target cell, rowspan="number of merged cells", and the target cell is the uppermost cell
- Merge across columns: the leftmost cell is the target cell, colspan="number of merged cells", the target cell is the leftmost
9. List label
Tables are used to display data, thenLists are for layout. The biggest feature of the list is neatness, tidiness, and order, and it will be more free and convenient as a layout.
According to different usage scenarios, lists can be divided into three categories: unordered lists , ordered lists , and custom lists .
1> Unordered list
< ul>The tag represents an unordered list of items in an HTML page, and generally presents list items with bullets, while list items use<li>Tag definition.
Grammar format:
- There is no order level between the various list items of the unordered list, and they are parallel.
- <ul></ul> can only nest <li></li>
- Between < li> and </li> is equivalent to a container, which can accommodate all elements.
2> Ordered list
< ol>Labels are used to define ordered lists, which are sorted numerically, and using<li>tags to define list items.
Grammar format :
3> Custom list
Custom lists are often used forExplain and describe terms or nouns, without any bullets preceding the list items of the definition list.
< dl>tag is used to define the description list (or definition list), which will be used with the< dt>(defining the project/name) and
< dd>(describe each item/name) together.
Grammar format:
- <dl></dl> can only contain <dt> and <dd>.
- There is no limit to the number of <dt> and <dd>, usually one <dt> corresponds to multiple <dd>.
10. Form label
A complete form usually consists of three parts: form fields , form controls (also known as form elements) and prompt information .
1> form field
A form field is an area containing form elements. The <form> tag is used to define form fields to collect and transmit user information.
< form> will submit the form element information within its scope to the server
Common properties :
| Attributes | effect |
|---|---|
| action | Specify the url address of the server program that receives and processes form data |
| method | Set the submission method of form data, its value is get or post |
| name | Specify the name of the form to distinguish multiple forms on a page |
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
2> Form control
<input form element
<input type="属性值"/>
The type attribute sets different attribute values to specify different control types
type attribute value
| attribute value | describe |
|---|---|
| check | Define a single line of input text |
| password | Define the password field |
| radio | Define radio buttons |
| checkbox | check box |
| submit | Submit the value of the form element in the form field form to the background server |
| reset | Reset button to clear all data in the form |
| button | Define a clickable button |
| file | File domain, upload files using |
Other attributes except type :
| Attributes | describe |
|---|---|
| name | Define input element name |
| value | Specifies the value of the input element |
| checked | The input element is selected when it first loads |
| maxlength | Specifies the maximum length of characters |
- name and value are the attribute values of each form element, which are mainly used by background personnel.
- name The name of the form element, requiredRadio buttons and checkboxes must have the same name value.
- The checked attribute is mainly for radio buttons and check boxes, the main function is to select a form element by default as soon as the page is opened.
label label
Define annotations for input elements. Labels are used to bind a form element. When clicking on the text in the <label> tag, the browser will automatically turn the focus (cursor) to or select the corresponding form element to increase user input. experience.
Grammar format:
<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<select dropdown form element
If there are multiple options for the user to choose and we want to save page space, we can use the <select> tag control to define a drop-down list.
grammatical format：
- A <select> contains at least one pair of <option>.
- When defining selected="selected" in <option>, the current item is the default selected item.
<textarea text field form element
When the user enters a lot of content, we can't use the text box form. At this time, we can use the <textarea> tag. In form elements, the <textarea> tag is used forDefine multiline text inputcontrols. You can enter more text by using a multi-line text input control, which is commonly used in message boards and comments.
Grammar format :
<textarea row3="3" cols="20">
文本内容
</textarea>
- cols = "Number of characters in each line", rows = "Number of rows displayed"