1. The composition of the Wed standard
mainly includes three aspects : structure (Structure), performance (Presentation) and behavior (Behavior)
| standard | Description |
|---|---|
| Structure (Structure) | The structure is used to sort and classify webpage elements. At this stage, I mainly learn HTML |
| Performance (Presentation) | Performance is used to set the layout, color, size and other appearance styles of web page elements, mainly referring to CSS |
| Behavior (Behavior) | Behavior refers to the definition of web page model and the compilation of interaction. At this stage, I mainly learn Javascript |
2. Text formatting tags
<h1> </h1>There are 6 heading tags, and the size is gradually reduced.
<p></p>Paragraph tags and
<br />line break tags. This is a single tag
<strong></strong>Or <b></b>bold label. It is recommended to use <strong>labels
<em></em>or <i></i>tilt. It is recommended to use <em>labels
<del></del>or <s></s>strikethrough. It is recommended to use <del>labels
<ins></ins>or <u></u>underscores. Recommended <ins>label
3. Box label
<div>And <span>there is no semantic just a box, for containing content
Features:
<div>Labels are used for layout, but each <div>label has its own line. Big box
<span>labels are used for layout, and there can be more than one in a row <span>. Small box
4. Image label
<img src="图像URL" />src is a required attribute (must be written). This is a single label.
Other attributes (you don’t need to write)
alt text is to replace the
title with text when the image is not displayed. The prompt text is to display the text when the mouse is placed on the image.
width pixels set the width of the image and
height pixels set the image The height
border pixel sets the thickness of the image border.
For example:<img src="图像URL" alt="图像加载失败" title="提示文本" />
Note:
(1) The image tag can have multiple attributes, which must be written after the tag name (src)
(2) The attributes are in no order, and the tag name and attributes, and attributes and attributes are separated
by spaces (3) Attributes take the format of key-value pairs, that is, the format of key="value", attribute="attribute value"
Relative path: the directory path established based on the location of the referenced file
| Relative path classification | symbol | Description |
|---|---|---|
| Same level path | The image file is at the same level as the HTML file, such as<img src="baidu.gif" /> |
|
| Next level path | / |
The image file is located at the next level of the HTML file, such as<img src="images/baidu.gif" /> |
| Upper level path | ../ |
The image file is located one level above the HTML file, such as<img src="../baidu.gif" /> |
Absolute path: refers to the absolute location under the directory, directly to the target location, usually the path starting from the drive letter (note: not commonly used)
such as "D\web\img\logo.gif" or the complete network address "http ://www.baidu.com/img/bd_logo1.png"
5. Hyperlink label
Grammar format
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
(1) Attribute explanation:
href is used to specify the url address of the link target (required attribute). When the href attribute is applied to the label, it has the function of a hyperlink
target is used to specify the way to open the linked page, where _self is the default value and _blank is the way to open in a new window
(2) Link classification
external links : such as<a href="https://www.baidu.com">百度</a>
Internal links : Interlinks between internal pages of the website, just write the name of the internal page directly, such as<a href="index.html">首页</a>
Null connection : when the target link is not determined,<a href="#">首页</a>
Download link : If the address in href is a file or compressed package, this file will be downloaded
Web page element links : you can add hyperlinks to various file elements in the web page, such as text, images, tables, audio, etc.
Anchor link : Click on the link to quickly locate a certain position on the page. See specifically the 2 black dots below
-
In the href attribute of the link text, set the attribute value to the form of #name, such as
<a href="#two">第2集</a> -
Find the target location tag, add an id attribute = the name just now, such as
<h3 id="two">第2集介绍</h3>