1. HTML code features

<html>
    <head></head>
    <body>
        hello world!
    </body>
</html>

HTML code has the following characteristics:

HTML code is organized by tags, and tags are < >organized by angle brackets, which can also be called elements.
Most tags exist in pairs, called double tags, and a few tags exist alone, called single tags.
- The double tag <html>is the start tag and </html>the end tag, and the content between the start tag and the end tag is the content of the tag.
- Single tag, <br>only start tag, no end tag.
Tags can be nested, and the content of a tag can be one or more other tags.
Attributes can be assigned to start tags, and attributes exist in the form of key-value pairs, and there can be one or more.
- ```
<div id="myId">hello</div>
```
- iddivThe attribute is equivalent to setting a unique identity for this tag.

Little knowledge: What is the difference between html and xml files?

The xml file is in a tagged format. What tags does the xml have, what is the tag name, what is the function of the tag, and what attributes are there? These are all customized by programmers themselves according to their own needs and scenarios. standard.
HTML files are also in a tagged format. What tags does HTML have, what is the name of the tag, what is the function of the tag, and what are the attributes of the tag? Implemented, html does not support custom tags.

2. Basic structure of HTML file

2.1, the basic structure of HTML files

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

The method of quick generation of the above code framework: Create the file xxx.html in vscode, directly input !, and press the tab key to quickly generate it.

2.2, HTML file basic structure analysis

<!DOCTYPE html>

<!DOCTYPE html> Called DTD (Document Type Definition), the description indicates that the current document is an HTML5 document.

<html lang="en"> </html>

<html>tag is the root tag (topmost tag) of the entire html file.
langIt is an abbreviation for language and enan abbreviation for english, which describes that the current page is an English page.
- Indicate to the search engine that the page is in html language, and the language is an English website; if your page is a Chinese page, you can change it to <html lang="zh">.
- This is mainly for search engines. Search engines will not judge whether the site is Chinese or English, so this is to let search engines know whether your site is Chinese or English, and it will not affect the html page itself. .
- When some browsers open the webpage, they will prompt the user whether to translate the webpage content into the system language according to the system language (Chinese) and the webpage language (English).

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

headSome attributes of the page are stored in the tag, such as meta datametadata.
meta The tag is a single tag, with only the start tag and no end tag.
- <meta charset="UTF-8">Describe the character encoding method of the page. Without this line, it may cause Chinese garbled characters.
- <meta name="viewport">, viewport refers to the area on the device's screen that can be used to display our web pages.
- <meta content="width=device-width, initial-scale=1.0">, set the width of the visible area and the device width, and set the initial zoom to no zoom.
titleWritten inside the tag is the title of the page, known as the page tag.

<body> </body>

bodyWhat is written in the tag is what is displayed on the page.

3. HTML tags

3.1, annotation label

<body>
    <!-- 我是一段注释 -->
</body>

Code comments, HTML comments, and general language comments are very different.
- /* */ // #and other comment methods are not legal comments in HTML.
The content of the comment will not be displayed on the interface, the purpose is to improve the readability of the code.
Quick comment method: In vscode, you ctrl + /can quickly comment code by using it.

3.2, title tag

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

There are 6 title tags, from h1 to h6, the larger the number, the smaller and thinner the font.

Each title tag is on its own line, and this exclusive line has nothing to do with the writing of the code.

Precautions:

Whether the label wraps in html has nothing to do with the writing of the code, but with the label itself (some labels occupy a single line, and some labels do not exclusively).
The newline written in the html source code does not actually perform a newline operation, but is equivalent to a space.
Multiple consecutive spaces written may be ignored under certain circumstances, or may be treated as one space.
- Newlines and spaces at the beginning and end of html content are invalid.
- Multiple spaces entered between words in html are only equivalent to one space.

3.3, paragraph tags

<body>
    <p>这是一个段落 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ea blanditiis aspernatur nulla quasi possimus error numquam id quaerat in similique veniam nam commodi pariatur ullam, ipsa omnis rem ad.</p>
    <p>这是一个段落 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ea blanditiis aspernatur nulla quasi possimus error numquam id quaerat in similique veniam nam commodi pariatur ullam, ipsa omnis rem ad.</p>
    <p>这是一个段落 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ea blanditiis aspernatur nulla quasi possimus error numquam id quaerat in similique veniam nam commodi pariatur ullam, ipsa omnis rem ad.</p>
</body>

<p>A tag represents a paragraph, and between paragraphs, not only line breaks are performed, but there is also an obvious paragraph spacing.

loremA piece of random text will be automatically generated to help us better debug the display effect.

3.4, newline label

<body>
    <p>这是一个段落 <br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ea blanditiis aspernatur nulla quasi possimus error numquam id quaerat in similique veniam nam commodi pariatur ullam, ipsa omnis rem ad.</p>
    <p>这是一个段落 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt ea blanditiis aspernatur nulla quasi possimus error numquam id quaerat in similique veniam nam commodi pariatur ullam, ipsa omnis rem ad.</p>
</body>

3.5, formatting tags

<body>
    <strong>加粗</strong>
    <b>加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>

    <ins>下划线</ins>
    <u>下划线</u>
</body>

The formatting tags mentioned above are different from the title tags in that they do not occupy a single line.

Similar effects can also be achieved by using CSS. In actual development, the CSS method is the main method.

3.6, image label

<body>
    <img src="./img/touxiang.jpg" alt="" width="400px" height="400px" title="" border="">
</body>

<img>The tag has multiple attributes, the core attribute srcmust be filled in, and it describes the path of the picture (the path can be a local absolute path, a relative path, or a network path).
- Absolute path: The full disk path where the image is located.
- Relative path: Based on the location of html, find the path of the picture.
  - Same-level path: Just write the file name directly or ./1.jpg
  - Next level path: image/1.jpg
  - Upper level path: …/image/1.jpg
- Network path: the image path accessed through the http protocol.
Other attributes of the img tag:
- alt: Replacement text, when the text cannot be displayed correctly, altthe replacement text will be displayed.
- title: Prompt text, hover the mouse over the picture, there will be a prompt text.
- width/height: Control the width and height. Generally, one of the height and width can be changed, and the other will be scaled proportionally, otherwise the picture will be unbalanced.
- border: border, the parameter is the width in pixels. But generally use CSS to set.

Precautions:

<img>A tag has multiple attributes, which are separated by one or more spaces and newlines.
Attributes cannot be written before tags. Attributes are expressed in the format of key-value pairs, and the attributes are not in any order.

3.7, hyperlink label

<body>
      <a href="http://www.baidu.com" target="_self">百度</a>
</body>

<a>The tag can contain multiple attributes, and the core attributes hrefmust be filled in to realize the function of which page to jump to after clicking. The href can be a link or an IP address.
<a>The attribute in the tag targetindicates the setting of the opening method. The default is to open the _selfcurrent tab and replace the original page. If it is _blank, it will be opened with a new tab instead of replacing the original page.
The page redirected by the hyperlink can be the current page, another page of the current website, or a webpage other than the current website. The specific forms are:
- External link: href refers to the address of another website
- Internal links: Links between internal pages of the website (just write relative paths)
- Empty link: use # as a placeholder in href
  - ```
  <a href="#">空链接</a>
```
- Download link: The path corresponding to href is a file (zip file can be used)
  - ```
  <a href="test.zip">下载文件</a>
```
- Web page element link: you can add a link to any element such as a picture (put the element in the a tag)
  - ```
  <a href="http://www.sogou.com">
      <img src="1.jpg" alt="">
  </a>
```
- Anchor link: you can quickly navigate to a certain position on the page
  - ```
  <a href="#one">第一集</a>
  <a href="#two">第二集</a>
  <p id="one">
     第一集剧情 <br>
     第一集剧情 <br>
     ...
  </p>
  <p id="two">
     第二集剧情 <br>
     第二集剧情 <br>
   ...
  </p>
```
Prohibit a label jump: <a href="javascript:void(0);">or<a href="javascript:;">

3.8, form label

<body>
    <table >
        <thead>
            <tr>
                <th>姓名</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小样</td>
                <td>14500</td>
            </tr>
            <tr>
                <td>小悦</td>
                <td>10500</td>
            </tr>
        </tbody>
    </table>
</body>

There are multiple table tags, table tags and their representations:

Only tableattributes are placed in the table tag, and these attributes cannot be prompted in vscode. The attributes placed are:
- align: Indicates the alignment of the table relative to the surrounding elements, align="center" (not the alignment of internal elements)
- border: Indicates the border, 1 means there is a border (the larger the number, the thicker the border), "" means no border
- cellpadding: Indicates the distance between the content and the border, the default is 1 pixel
- cellspacing: Indicates the distance between cells, the default is 2 pixels
- Width / height: Indicates the setting size
There are two types of merging cells: cross-row merge ( rowspan="n") and cross-column merge ( colspan="n").
- The steps to merge cells are divided into 3 steps, namely:
  - First determine whether to span rows or columns
  - Find the target cell (merge across rows, the top is the target cell; merge across columns, the left is the target cell)
  - remove redundant cells

3.9, list label

<body>
    <h4>有序列表</h4>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>

    <h4>无序列表</h4>
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>

    <h4>自定义列表</h4>
    <dl>
        <dt>自定义列表项</dt>
        <dd>自定义列表项的描述1</dd>
        <dd>自定义列表项的描述2</dd>
    </dl>
</body>

List tags can be divided into three categories, namely ordered list tags, unordered list tags, and custom list tags.
- An ordered list of tags, consisting of <ol>tags and <li>tags .
- Unordered list tags, consisting of <ul>tags and <li>tags .
- Custom list labels, consisting of <dl>label, <dt>label and <dd>label .
List tags have different functions and effects, and the display effects on the web page are as follows:
The custom list label is used for multiple definitions corresponding to a term name or the same given definition for multiple term names, <dl> (total label) <dt>(subtitle) <dd>(explain around the title), there is a subtitle above, and several below developed around the title.
The list items of the list are in a parallel relationship, and the list has its own style, which can be modified by using CSS (for example, the small dots in front will be removed).
<ul>/ <ol>can only be placed <li> , and no other tags can be placed, and <dl>only <dt>and <dd>, <li> and other tags can be placed in .

3.10, form label

The above-mentioned simple electronic resume information filling draft can be completed by using the list tag, and the list tag can be mainly divided into two parts, namely the form field and the form control.
- Form Field: The area containing form elements, with an emphasis on <form>the label .
- Form controls: input box, submit button, etc., the focus is <input>on the label .
<form>Label, use it for front-end and back-end interactive operations (submit the input submission operation performed by the user on the page to the server).
<input>The label contains various input controls, which are:
type: Must exist. There are many types of values, such as button, checkbox, text, file, image, password, radio, etc.
name: Give inputit a name, especially for radio buttons, only with the same name can more than one be selected.
value: input the default value in .
checked: Selected by default (for radio buttons and multi-select buttons)
maxlength: Set the maximum length of the input text.
<input>There are many types of input controls for labels type, which are:
- text: Single-line text box, specially used for inputting text
- password: A single-line text box, specially used for entering passwords
- radio: radio button, which needs to namebe used with input controls (radio boxes with the same name attribute, the values are mutually exclusive, and can only be single-selected)
- checkbox: checkbox
- buttom: button
- submit: Submit button, <form>used with the tag, after clicking, it will try to send to the server
- file: file selection box
- reset: clear button
Form tags In addition to the above tags, there are other tags, namely:
- <label>Labels, used <input>together, clicking on the label can also select the corresponding radio/check box, which can improve the user experience.
  - The label contains forattributes, specifying which input label with the same id corresponds to the current label (clicking is only useful at this time).
  - ```
  <body>
      <label for="male">♂ 男</label> <input id="male" type="radio" name="sex">
      <label for="women">♀ 女</label> <input id="women" type="radio" name="sex">
  </body>
```
- ，
- <select>Labels, drop-down menus, collocations <option>.
  - <option>Defined in the label selected="selected" indicates that it is selected by default
  - ```
  <body>
      <select>
          <option value="" select="selected">请选择年份</option>
          <option value="">1999</option>
          <option value="">2000</option>
          <option value="">2001</option>
          <option value="">2002</option>
          <option value="">2003</option>
      </select>
  </body>
```
- <textarea>Label, multi-line edit box, enter multiple lines of text.
  - <textarea>The tags contain rowsand colsattributes , which limit the number of lines and words of the text, but they will not be used directly, because they can be modified by using css.
  - The content in the text field is the default content. Here, spaces and newlines will have an impact on the text.

3.11, no semantic tags

<div>
    <span>小样</span>
    <span>小样</span>
    <span>小样</span>
</div>

There are two main non-semantic tags, namely <div>tags and <span>tags.
- <div>Tags, which means division, are essentially big boxes that div occupy a single line and are used for web page layout. `
- <span>Tags, meaning spans, are essentially small boxes that span do not occupy a single line and are used for web page layout.

Summarize

The above is all the basic content of HTML, I hope it can be helpful to everyone. If you have any questions that cannot be solved, please leave a message in the comment area or send me a private message. If you feel that it is useful to you, you can give a like or follow to encourage bloggers, I will do better and better, thank you for your support, see you next time.

insert image description here

HTML zero-based quick start (detailed tutorial)