- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
Horizontal line label hr (recognition)
Text formatting tags (by heart)
Anchor point positioning (difficulty)
HTML common tags
Typesetting label
- Typesetting tags are mainly used in conjunction with css to display the tags of the web page structure and are the most commonly used tags for web page layout
Title tag h (by heart)
- Word abbreviation: head. title title document title
- In order to make the web page more semantic, we often use the title tag in the page. HTML provides 6 levels of title, namely
- Title tag semantics : used as a title, and decreasing in importance
- The basic syntax format is as follows:
<h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> <h5> 标题文本 </h5> <h6> 标题文本 </h6>
- The display effect is as follows:
- Summary:
- The titled text will become bolder, and the font size will increase in turn
- There can only be one title on a line
Paragraph tag p (by heart)
- Word abbreviation: paragraph paragraph [ˈpærəgræf] Don’t remember this word
- Function semantics:
- The HTML document can be divided into several paragraphs
- The text must be displayed in an orderly manner on the web page, and paragraph tags are inseparable. Just like we usually write articles, the entire web page can also be divided into several paragraphs, and the paragraph tags are
<p> 文本内容 </p>
- It is the most common tag in HTML documents. By default, the text in a paragraph will wrap automatically according to the size of the browser window .
Horizontal line label hr (recognition)
- Word abbreviation: horizontal 横线[ˌhɔrəˈzɑntl] Same as above
- In web pages, we often see some horizontal lines separating paragraphs from paragraphs, making the document structure clear and distinct.
- These horizontal lines can be achieved by inserting pictures, or simply through tags. <hr /> is to create tags that span the horizontal lines of the web page. The basic syntax format is as follows:
<hr />是单标签
- Display the default style horizontal line on the web page.
Line break label br (memory)
- Abbreviations: break break, break
- In HTML, the text in a paragraph will be arranged from left to right to the right end of the browser window, and then automatically wrap.
- If you want a certain text to be forced to wrap, you need to use a wrap tag
<br />
- At this time, it won’t work if you just hit the Enter key and line feed directly in Word.
div and span tags (emphasis)
- Div span has no semantics. It is the main two boxes of our web page layout. You must have heard of css+div
- Div is the abbreviation of division, which means there are actually many divs to combine web pages.
- span span
- Syntax format:
<div> 这是头部 </div> <span>今日价格</span>
- Both of them are boxes, which are used to hold our web page elements, but they are different. Now we mainly remember the usage and characteristics.
div tag Used for layout, but now only one div can be placed in a row span tags Used for layout, multiple spans can be placed on a line
Summary of Typesetting Labels
Label name definition Description <hx></hx> Title tag Use as a title, and decrease in importance <p></p> Paragraph tag The HTML document can be divided into several paragraphs <hr /> Horizontal line label There is nothing to say, just a line <br /> Newline label <div></div> div tag Used for layout, but now only one div can be placed in a row <span></span> span tags Used for layout, multiple spans can be placed on a line
Text formatting tags (by heart)
- In web pages, sometimes you need to set bold, italic, or underline effects for text. At this time, you need to use text formatting tags in HTML to display text in a special way.
- the difference:
- b is just bold. In addition to being bold, it also means to emphasize. The semantics are stronger.
- The rest is the same...
Label attributes
- The so-called attributes are the external characteristics, such as the color of the mobile phone and the size of the mobile phone. .
- The color of the phone is black
- The size of the phone is 8 inches
- The length of the horizontal line is 200
- The width of the picture is 300
- When using HTML to make web pages, if you want HTML tags to provide more information, you can use the attributes of HTML tags to set them . The basic syntax format is as follows:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> <手机 颜色="红色" 大小="5寸"> </手机>
Image tag img (emphasis)
- Word abbreviation: image
- If you want to display an image on a web page, you need to use the image tag. Next, the image tag <img /> and its related attributes will be introduced in detail. (It is a single dog)
- The syntax is as follows:
<img src="图像URL" />
- The src attribute in this grammar is used to specify the path and file name of the image file. It is a required attribute of the img tag .
- We will use css to do the border
- note:
- The tag can have multiple attributes, which must be written in the opening tag, after the tag name .
- The order of attributes is not distinguished. The tag name and attribute, and the attribute and attribute are separated by spaces .
- Take the key-value pair format key="value" format
- Case:
<img src="cz.jpg" width="300" height="300" /><br /> 带有边框的<br /> <img src="cz.jpg" width="300" height="300" border="3" /><br /> 有提示文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br /> 有替换文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
Link label (emphasis)
- Word abbreviation: the abbreviation of anchor [ˈæŋkə(r)]. Basic explanation of anchor, iron anchor
- Creating a hyperlink in HTML is very simple, just use tags to include the text.
- Syntax format:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
Attributes effect href Used to specify the URL address of the link target, (required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink target It is used to specify the opening method of the linked page. Its values are self and blank. _self is the default value and __blank is the opening method in a new window.
- note:
- External links need to be added http:// www.baidu.com
- Internal links can be directly linked to the internal page name, such as <a href="index.html"> home page</a>
- If the link target is not determined at that time, the href attribute value of the link tag is usually defined as "#" (ie href="#"), indicating that the link is temporarily an empty link .
- Not only can you create text hyperlinks, you can also add hyperlinks to various web page elements such as images, tables, audio, and video.
Annotation tag
- There is also a special tag in HTML-comment tag.
- If you need to add some annotation text to the HTML document that is easy to read and understand but does not need to be displayed on the page, you need to use the annotation tag.
- Brief explanation:
- The comment content will not be displayed in the browser window, but as part of the HTML document content, it will also be downloaded to the user's computer and can be seen when viewing the source code.
- Syntax format:
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
- Note importance:
- The comment is for people to see, the purpose is to better explain what this part of the code is doing, the program does not execute this code
- Generally used for simple descriptions, such as some state descriptions, attribute descriptions, etc.
- A space character before and after the comment content, the comment is located above the code to be commented, on a separate line
- recommend:
<!-- Comment Text --> <div>...</div>
- Not recommended:
<div>...</div><!-- Comment Text --> <div><!-- Comment Text --> ... </div>
Path (emphasis, difficulty)
- In actual work, our files cannot be randomly placed, otherwise it is difficult to find them quickly, so we need a folder to manage them.
- Directory folder:
- It is an ordinary folder, which only stores the relevant materials we need to make the page, such as html files, pictures, etc.
- Root directory
- Open the first level of the directory folder is the root directory
- There will be a lot of pictures on the page, usually we create a new folder dedicated to storing image files (images), then insert the image, you need to use the "path" method to specify the location of the image file. The path can be divided into: relative path and absolute path
relative path
- The directory path established based on the location of the web page of the cited file. Therefore, when web pages stored in different directories refer to the same file, the path used will be different, so it is called a relative path.
- The relative path starts from the file where the code is located to find our target file, and what we call the upper level and the next level is the same level. Simply put, the image is located in the HTML page.
Absolute path
- The absolute path refers to the directory path based on the root directory of the Web site. The reason why it is called absolute means that when all web pages refer to the same file, the path used is the same.
- note:
- Absolute path is used less, we can understand it. But note that its writing, especially the symbol \, is not a relative path /
Anchor point positioning (difficulty)
- By creating anchor links, users can quickly locate the target content.
- There are two steps to creating an anchor link:
- 1. Use the corresponding id name to mark the location of the jump target. (Find target)
<h3 id="two">第2集</h3>
- 2. Use <a href="#id名">link text</a> to create link text (clicked) (pull relationship ) I also have a grandfather whose surname is Bi..
<a href="#two">
- Schematic diagram:
- Fast memory method:
- It's like looking for someone to do something. First find him, then build relationships, and finally see the effect.
base tag
- grammar:
<base target="_blank" />
- to sum up:
- base can set the open state of the overall link
- base is written between <head> </head>
- All connections are added by default target = "_ blank"
Pre-formatted text pre tag
- Labels can define pre-formatted text.
- The text enclosed in the <pre> tag element usually retains spaces and line breaks, and the text is also rendered in a monospaced font.
<pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制 </pre>
- The so-called pre-formatted text is to display the page in accordance with the text format that we have written in advance, with spaces and line breaks reserved .
- With this tag, the text inside will be displayed according to our writing mode, without paragraph and line break tags. However, it is less used because it is not easy to control overall.
Special characters (understand)
- Some special symbols are difficult or inconvenient for us to use directly in html. At this time, we can use the following alternative codes.
- to sum up:
- It starts with the operator & and ends with the semicolon operator ;.
- They are not labels, but symbols.
- The special characters of less than "<" and greater than ">" cannot be used in HTML. The browser will parse them as tags. To display them correctly, use character entities in the HTML source code
