html (Hyper Text Markup Language) Hypertext Markup Language, inventor: Tim Berners-leehtml mainly defines the content and structure of web pages. html is the language for writing web pages. HTML can only run on the browser. Web page technologies include: html (writing web page structure, similar to a human skeleton), css (cascading style sheets, writing web page styles, similar to human skin), JavaScript (writing web page special effects and interactions) Functions, similar to human skills (actions)). Commonly used browsers are Google Chrome and Firefox. Google Chrome is recommended. Open the browser, F12 or right-click -> Check to open the development tool (dev tool)
View web pages through html code
Check the specific margins of the element through computed
The basic directory structure of the website: Create a new website folder -> create css, js, imgs directories and write web page files inside. w3school: https://www.w3school.com.cn/ tags/tag_wbr.asp. You can query all html tags, attributes and usage. Can be used as a reference manual for html.
Create a .html file, which is a web page file. Right click->Create text document->Change the suffix to .html
Right click -> Open the file in Notepad
. <!DOCTYPE html> declares the version of html5.0
<head></head> The head of the web page (can be understood like a human head)
<body>hello html!</body> The visible area of the webpage (such as the human body, the clothes worn, what other people can see)</html> The end of the webpage
HTML tags need to be written directly in <>. Those inside <> are called tags (tags), those with / are called end tags (called html end tags), and those without / are called start tags. HTML is composed of many tags with different functions. The start and end tags can directly wrap other tags. After writing the code, you must ctrl+s to save the code. Most domestic browsers display UTF-8 by default, but some browsers may not necessarily display UTF-8 encoding by default. Notepad saves in UTF-8 by default. If the web page is displayed without UTF-8 encoding, garbled characters will appear.
Tag: Tag is the basic unit of HTML language, consisting of <> plus English words inside. Closing tag: consists of a start tag <tag name> and an end tag, which appear in pairs. Most tags in html are closing tags. Self-closing tag: Start and end with a <>, the html4 version does not need to add /, and the html5 specification requires adding /. (Common ones are: meta, hr, link, br, input, img) Nesting: The closing tags of html can be nested and can be nested infinitely. Like a tree, there are countless branches. This structure is called tree structure. In order to represent this structure, a label generally occupies a line by itself, and indentation (Tab key 8 newlines) is required to represent the hierarchical structure. Attribute: The word after the space in the tag name usually contains =, or may not have an equal sign. Different attributes can give the tag different display effects or functions. Global attributes: Most html tags can use the title attribute: moving the mouse over the tag will display prompt content such as:
<h2 title="hello h2">h2 title</h2>
Private attributes: tag-specific attribute elements: the content wrapped by the start tag and the end tag, including the start and end tags. Element content: The content wrapped by the opening tag and the closing tag
8.
Block-level element: An element that occupies one line, even if the content does not fill the width of the web page, it will occupy the entire line. ——》h1-h6,p,blockquote Inline elements (inline elements): They will not occupy a single line. The size is automatically calculated and depends on the width and height of the content——》span,strong,i,em,b, cite, q, code, markhtml newline rules: html has its own set of processing rules. The spaces and line breaks at the beginning and end of the tag content will be ignored, and the spaces and line breaks between the content will be processed as 1 space.
HTML markup language is composed of many tags, and different tags have different styles and functions.
<h1>h1</h1>
h1-h6 title tags, the fonts are ordered from large to small, and the fonts have a bold effect.
align attribute: Set the text alignment. The attribute values are left, center, and right. The default is left alignment, which can be omitted.
<p></p>: p tag, paragraph tag, p tag comes with 16px margins at the top and bottom
<hr />: displays a horizontal line
<span></span> does not have any default style and is mainly used for css styles.
<br />: Line break tag, the content after br is displayed in a new line without margins.
The text wrapped in the <b></b> b tag will be displayed in bold without any semantic meaning. HTML4 version tag
<strong></strong> has emphasized semantics, and the wrapped text will be bolded. New tags added in html5 version
<i></i> has no semantic meaning, just italics. html4 tags
<em></em> has emphasized semantics, and the wrapped text is displayed in italics. h5 increases.
<sup>2</sup>: Superscript, the package text is displayed at the top
<sub>2</sub> subscript, the wrapped text is displayed smaller
<blockquote></blockquote> represents a quoted passage (such as a famous quote), with default margins
<cite></cite>The content quoted comes from somewhere or someone
<q></q> represents a reference, and the content is wrapped with ""
<code></code> indicates that the content is a piece of code, displayed in a fixed-width font style
<code></code> indicates that the content is a piece of code, displayed in a fixed-width font style
<mark></mark> marks a piece of content with a yellow background.
<pre></pre> can retain line breaks and space symbols, but it is difficult to control the display effect of the web page. Generally, it is not used unless there are special needs.
  half-width symbol, the width of one English letter, the width of half a Chinese character
  Full-width symbol, width of 2 letters, width of 1 Chinese character
<small></small> The font is one size smaller than the title content. The default effect takes effect in the h tag. h5 new addition
<time></time> represents a time, and the date text is wrapped with this tag - "datetime attribute: optional, you can set a specific date to facilitate search engine crawling.
<data value="100">100 yuan</data> is used for data text -> value attribute: optional, you can set a value to facilitate search engine crawling
<address></address> is used for address text, italic by default
<del>190.00</del> indicates deleted content, and the text will have a horizontal line.
<ins>7.9% off</ins> indicates the inserted content, and the text will be underlined
<abbr title="">HTML</abbr> is used for professional terminology text - "The content of the title attribute can be used as an explanation of the term
<!-- I am the comment content --> The comment content is the interface that the browser will not render, and is mainly for programmers to see. The comment shortcut key in vscode is ctrl+/
Download address: http://vscode.bianjiqi.net/
Install Chinese package
Commonly used plug-ins
HTML Snippets prompts html code
Auto Rename Tag automatically closes the tag and modifies the tag synchronously
HTML CSS Support smart prompt css class name and id name
open in browser The current html file can be opened with the browser
Live Server creates a local server to open the file
shift+! Select the first one to quickly generate the basic structure of the web page
<div></div> has styles and semantics by default, indicating a block-level area, which is the main web page layout area.
<header></header> represents the head of a web page or an article. It can be used in different scenarios. For example, in an article, it represents the head of an article. A web page has multiple headers. Generally speaking, it still represents the header of the web page.
<main></main> represents the theme content of the web page. There is only one main for a web page.
<section></section> mainly represents an independent theme and can replace the div element.
<aside></aside> can represent the sidebar of the web page. If it is at the file level, it represents the comments of the article.
<article></article> represents an article or post, which can contain header, footer, section, aside and other elements.
<footer></footer> represents the bottom area, which can represent the bottom of a web page or the bottom of an article.
<nav></nav> Navigation element, representing the navigation module. Generally, a web page has only one nav.
HTML tag nesting rules: 1. Layout elements can nest any element 2. Block-level elements can nest inline elements 3. Inline elements cannot nest block-level elements 4. p tags cannot nest other block-level elements
aHyperlink tag:
<a href="https://www.baidu.com" target="_self">To Baidu</a> This tag can be clicked to jump to a URL
property
1.href is the address of the redirected web page:
href="tel:13111111111" The tel protocol can create a phone link. On the mobile browser, the user can click to call up the phone for dialing. href="mailto:[email protected]": Using the mailto protocol, after clicking, the browser will open the default mail program of the machine, allowing the user to send mail to the specified mail address Anchor: You can specify an id attribute for the html tag , and then jump to the specified location through href="#id", # represents the id
For example
<a href="#fyp">Life</a> <h3 id="fyp">Very good</h3>
Download file: If href is a file address, the file can be downloaded.
Target is the way to jump to open a web page. The default attribute value is _self, the current window is opened, and -blank is to open a new window.
Ping: Click the a label to send a post request to the address specified by ping. It is mainly used to track user behavior.
Image tags:
<img src="./imgs/shop_33.jpg" alt="" height="50" loading="lazy" />
property
The src attribute is the image address, which can be a local image address or a network image address. The alt attribute sets the text description of the image. When the image is not displayed, the content of the alt attribute will be displayed. width sets the width of the image, and height sets the height of the image. If only one of them is set, the other one is automatically calculated. The unit is pxloading. The attribute sets the image loading behavior. There are 3 attribute values. The default is auto, which means the loading attribute is not used. Lazy, enables lazy loading (the image is loaded only when it appears in the visible area), eager, loads the image immediately, regardless of whether the image appears in the visible area. figure image area element
<figure> <img src="F" /> <figcaption>Pictures of the bridge</figcaption> </figure> Figure represents an image area that can wrap images and related information. figcaption describes the picture and can be used as the title of the picture.
list
ol ordered list
<ol type="1" start="5"> <li>Grade 1, Class 1</li> <li>First grade 2 boards</li> ... </ol>
An ordered list with a number in front of each column.
property
type attribute
The attribute value sets the numeric type in front of the column:
1 Arabic numeral (default).
a lowercase alphabetical order
A upper case alphabetical order
i lowercase Roman numeral sorting
I Upper case Roman numeral ordering
reversed reverse order start sets the starting value of the number
ul unordered list
<ul type="square"> <li>Grade 1, Class 1</li> ... </ul>
Unordered list, no sequence number, each column has a symbol in front of it
The type attribute sets the symbol for each column of the list: disc solid circle (default value), circle hollow circle, square rectangle. Can be used as layout elements for web pages.
dl custom list
<dl> <dt>web front end</dt> <dd>Web front desk</dd> </dl>
dl list, there can be multiple combinations of dt and dd in dl.
dt represents a term dd is the explanation of the term
iframe web container
<iframe src="https://player.youku.com/ embed/XNTg2MzEyMjY2NA==" frameborder="0" allowfullscreen> </iframe>
iframe web page container, which can display other web pages and web content in an area. The src attribute sets the address of the displayed web page. width sets the width of the iframe, and height sets the height of the iframe. frameborder sets the size of the border. allowfullscreen. Click the full screen button to display multimedia tags in full screen.
video: can play videos
<video src="./media/test.mp4" controls autoplay muted loop height="300" poster="./imgs/shop_33.jpg" preload="auto" </video>
src is the video address, which can be a local address or a network address. Controls player control bar autoplay autoplay (chrome browser needs to set muted) muted mute loop loop play width set width, height set height, generally set one, let the other size Automatically calculate the poster video cover image, which can be a network image or a local image preload Video cache attribute value: auto (default value) buffers the entire video, none does not buffer, metadata buffers the metadata of the video file, generally not set, keep the default.
<video controls autoplay muted> <source src="./media/test.webm" type=" video/webm"> <source src="./media/test.mp4" type=" video/mp4"> </video>
In order to be compatible with the formats of video files played by different browsers, use the source element until you find a video file that can be played.
html symbol input:
You can use Sogou input method to input special symbols
Display symbols via html symbol source code (recommended method)
table table
table represents a table
property:
borderThe width of the table border width sets the width of the table cellspacing the blank between cells cellpadding the direct spacing (blank) between cells and content, also called inner margin.align table alignment, left left aligned, center aligned , right right align bgcolor background image for web layout
tr represents a line
th header cell - default font bold, horizontally centered
td standard cell, mainly displays data (the display content is placed inside the td element)
colspan merges cells across columns. After merging cells, the remaining cells need to be deleted. rowspan merges cells across rows and merges cells in subsequent rows. After merging, excess cells need to be deleted. bgcolor cell background color: Attribute value: 1. Color name (red, gray, etc.) 2. Color hexadecimal code (#000000 black, #ffffff white) 3. rga mode: such as rga (204,97,70 )cellpadding is the direct spacing (blank) between the cell and the content, also called inner margin.align is the horizontal alignment of cell text, left (default), center (center), right (right) valign cell text vertical alignment, top top alignment, middle center, bottom bottom alignment
caption The title of the table
thead is the head of the table (if there is no header, you don’t need to write it. If you write thead, you must have tbody and tfoot). The cells at the head of the table generally use the th header element.
tbody The body part of the table
tfoot the bottom of the table
url: Uniform Resource Locator, also called URL
Protocol: The method used by the browser to request server resources:
http protocol, default port 80, can be omitted. Data is transmitted in clear text and can easily be hijacked.
The https protocol and HTTP protocol add an SSL certificate (with a public key and a secret key) to encrypt the data transmitted on the web page. The default port is 443, which can be omitted.
host: The IP address or domain name of the website server. Port: Each application on the computer has a separate port Path: The location of the resource on the website. Query parameters: additional information provided to the server, mainly data transmitted from the front end to the back end
**form form:** The tag contains many form controls. The form controls allow users to enter input data and pass these data to the backend through the form tag. (Form controls all have a name attribute, through which the data entered by the form control can be passed to the backend through query parameters.)
property:
action The address of data transmission method The method of sending data:
Value: get request (default) data is passed as query parameters. Advantages: Data transmission is relatively fast. Disadvantages: Data can be seen directly on the website. There is a limit on the size of the transmitted data, and only strings can be passed. If it is a get request, you do not need to write the method attribute.
Post request, the data is passed through the request body, and the data is not visible behind the URL. Disadvantages: Data transmission is not as fast as get. Disadvantages: The data is relatively safe in the request body. There is almost no display of the transmitted data, and various data can be transferred.
enctype specifies the post request and the MIME type of the data passed by the browser (the backend takes different values according to different mime types)
input input box label, self-closing label
property
maxlength is the maximum input character. Placeholder cannot be entered if it exceeds it. When the input content is empty, the prompt text displayed is readonly. The input box is read-only and can only be viewed, not input. Elements can be selected. disabled is disabled, the element is gray and cannot be selected. value element's display value (content) pattern. You can enter a regular expression. If the input box does not meet the regular expression, you will be prompted checked. Set the default option of the radio button or multi-select box. required. Required attribute. If there is no input value in the input box, There will be a prompt message when submitting. type determines the form of the input tag. Different values are displayed in different forms
type attribute value:
text (default) text input password data is displayed in cipher text number number input box, only numbers can be entered, the number input box attributes---->usually combined with the following attributes: min minimum value, max maximum value, step is the button on the right to increment Step length (the button on the right side of 3 attributes is valid) search is used to search the input box. After entering the content, there is a clear icon on the right. For radio radio buttons, the value must be set, which is the value selected by the radio. The name attributes must be consistent to achieve radio selection. checkbox Multi-select box, the value must be set, which is the value selected by the multi-select, and the name attribute must be set consistently. email is the email input box. If the input is not in email format, there will be a prompt. The tel phone number input box needs to be set with the pattern attribute to set the regular URL. If the input is not a URL, there will be a prompt color. You can select the color range slider, and you can slide the selected value in the specified range - with min minimum value, max maximum value, step The step size of each slide (default is 1). The hidden input box is hidden and cannot be seen on the web page. date date selection, time time selection, month month, week week, datetime-local year month day time - with min the optional minimum date, max the optional maximum date, value the selected date attribute button is displayed as a normal button, no Any function submit button, click to pass the data to the backend through name reset reset, restore the value controlled by the form form to the initial value file file upload, the form form must set enctype="multipart/form-data"
fieldset tag
The fieldset tag is a block-level container that represents a collection of form components. The legend sets the title of the fieldset control. It is usually the first element of the fieldset and will be embedded in the upper corner of the fieldset. Syntax: <form> <fieldset disabled> <legend>Personal information</legend> </fieldset> </form>
The disabled attribute can make the wrapped form controls gray and unavailable.
label label
The text description of label form control is generally used in the preform form.
The for attribute can be associated with a form control, and the value is the id attribute value of the form control.
<input type="checkbox" value="test" id="c" > <label for="c">Unknown</label>
You can put form controls into label tags and automatically associate them. <label> <input type="radio" value="man"name="sex">Male</label>
buttonbutton
property:
type button type: submit (submit form form data), reset (reset form data to its initial state), button is an ordinary button with no behavior. ——》The button tag can be used outside the form tag. Will have submit attribute and can be submitted
The disabled button disables the name of the button. When submitting data, submit it in the form of name=value (to match the value). The value of the value button. The form form associated with the button. The value is the id attribute of the form form. If omitted, the default association is in the parent form
<form id="form1"></form> <button form="form1" value="test">Submit</button>
select drop-down menu
Generate a drop-down menu, which needs to be set with the option tag.
<select name="province" require dmultiple size="8"> <optgroup label="South"> <option value="sc">Sichuan</option> <option value="gd" selected>Guangdong</option> </optgroup> <optgroup label="North" disabled> <option value="sc">Sichuan</option> </optgroup> </select>
property
1.select——name form name, the data is transmitted to the backend in the form of name=value (value is the vlaue value of the selected option)
disabled form cannot be selected
required required
multiple can select multiple options (you need to press ctrl for multiple selections) size If multiple is set, you can set the number of rows visible at one time.
2. option sets an option in the drop-down menu. ——》value The selected value selected Sets the default selected item
3. <optgroup label="南>Group options——》label is the name of the group, and the group cannot be selected. After disabled is set, all options under the group cannot be selected.
datalist container
<datalist id="data"> <option value="a" label="A11"> <option value="b" label="B11"> <option value="c" label="C11"> </datalist>
datalist is a container tag that can provide a set of data for a specified control, usually used for input prompts in input input boxes. The id attribute is used to associate the input input control. The list attribute of the input can be associated with the datalist container option to set each option. value is the option value, label is the description of the value, and the Chrome browser displays it on the next line of value.
textarea multi-line text input box
textarea is a multi-line text input box. By default, its size can be modified by pushing and dragging. The content of the package is the value placeholder prompt text. rows The height of the text box, the unit is row cols The width of the text box, the unit is character disabled Input is prohibited maxlength Maximum input characters minlength Minimum input characters required Required
output
10+10<output name="result">20</output> represents the result of a user's operation.
progress
<progress max="100" value="50">50%</progress>s is an inline element, indicating the completion progress of the task, usually displayed in the style of a progress bar.
max is the maximum value of the progress bar. The default is a number between 1value and 0-max, indicating the current progress.
meter indicator
<meter title="455" min="100" max="500" value="455" low="150" high="350"></meter>
The meter indicator displays a value within a known range. The value displays green in low and high, and orange in other areas.
min is the minimum value of the range max is the maximum value of the range value current value low lower threshold (greater than min) high higher threshold (less than max)
detailscollapse tag
details collapse tag. By default, the browser will collapse the tag to wrap the content. Click to expand and view the content.
Set folding title
<details> <summary>Collapse title</summary> <ul> <li>test1</li> </ul> </details>
Block-level tags (elements) div, p, form, ul, h1-h6, dl, header, nav, section, aside, main, article, footer inline tags ( elements) span, em, strong, input ( text, password, radio, checkbox, file), button, select, label are displayed in a progress bar style.
- max The maximum value of the progress bar, the default is 1 - value is a number between 0-max, indicating the current progress. **meter indicator**
The meter indicator displays a value within a known range. The value displays green in low and high, and orange in other areas. - min the minimum value of the range - max is the maximum value of the range - value is the current value - low is the lower threshold (greater than min) - high higher threshold (less than max) #### details Collapse tag details Collapse tag, the browser will collapse the tag to wrap the content by default, click to expand and view the content <summary>Set folding title
Collapse title
test1
```
Block-level tags (elements) div, p, form, ul, h1-h6, dl, header, nav, section, aside, main, article, footer inline tags ( elements) span, em, strong, input ( text, password, radio, checkbox,file),button,select,labeltable
The above is the detailed introduction to HTML and summary of commonly used codes. For more information about HTML introduction and commonly used codes, please pay attention to other related articles on downcodes.com!