Table of contents
2.2 Basic structure of HTML file
2.5 Understand the default framework generated by VScode
1. What is HTML
The full name of HTML is Hyper Text Markup Language (Hyper Text Markup Language), which is a markup language. It includes a series of tags, through which the document format on the network can be unified, and the scattered Internet resources can be connected into a logical whole. In layman's terms, HTML is used to write front-end pages, and various pages in our usual browsers are written in HTML.
We can use the shortcut key F12 or fn+F12 to view the HTML source code of any browser page
Two HTML infrastructure
2.1 Understanding HTML tags
HTML code is composed of " tags ", and the basic format of tags is as follows:
<body>hello</body>- The tag name (body) needs to be placed in <>
- Most HTML tags appear in pairs, <body> is the start tag, and </body> is the end tag
- A small number of tags only have the start tag, which is called a single tag
- Between the start tag and the end tag is the content
- Some attributes can be included in the start tag
Shaped like:
<body id="hello">hello</body>This is equivalent to setting a unique identifier for the current pair of tags
2.2 Basic structure of HTML file
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>- The html tag is the root tag of the entire html file, and it is also the topmost tag
- The head tag writes the attributes of the page, such as the title of the page, the character set of the page, etc.
- The body tag writes the specific content to be displayed on the page
- The title tag contains the title of the page
When the above code runs, we can get the following page
2.3 Label Hierarchy
Each label has the following two relationships
- father-son relationship
- Brotherhood
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>This has the following relationship
- head and body are child tags of html, and html is the parent tag of head and body, and they are parent-child relationships
- title is the child tag of head, and head is the parent tag of title
- There is a sibling relationship between head and body
2.4 Properties of tags
The attributes of the label have the following characteristics
- There can be multiple attributes, but none of them can be written before the label
- Attributes are separated by spaces, there can be multiple spaces, or newlines
- Attributes are in no particular order
- Properties are represented in the format of key-value pairs
The example is as follows (the src tag and its attributes are explained in detail later in this article):
<img src="dog.jpg" alt="狗" title="这是一个小狗"
width="500px" height="800px">2.5 Understand the default framework generated by VScode
In VScode, after we enter html , select html:5 to generate the following html frame by default
<!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>- <!DOCTYPE html> is called DTD (Document Type Definition), which describes that the current file is an HTML5 file
- <html lang="en"> This is actually adding a lang attribute to the html tag, and the value of long is en, indicating that the current page is an English page (some browsers will automatically translate according to the life prompt here )
- <meta charset="UTF-8"> Describes the character encoding method of the current page. Without this line, Chinese characters may not be parsed correctly and garbled characters may appear
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> Among them, viewport refers to the area on the screen of the device that can be used to display web pages, width=device-width, initial -scale=1.0 is to set the width of the visible area and the device to be equal, and set the initial zoom to be non-scalable.
- <title>Document</title> The title tag describes the name of the current page, that is, the initial name of the current page is Document
Three HTML common tags
With the above basic understanding of HTML, let's learn some common tags to make a special interface by ourselves
3.1 Annotation tags
<!-- 这是注释的基本格式 -->Comments will not appear on the web interface, and its main purpose is to improve the readability of the code. We can quickly comment and uncomment through ctrl+/ in VScode
3.2 Heading tags: h1 ~ h6
The code example is as follows
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>The effect is as follows
When using title tags, pay attention to the following two points
- Title tags have their own line breaks
- The larger the number of the title label, the smaller the font. We can refer to the first-level title, the second-level title, and the third-level title to understand, that is, the first-level title has the largest word.
3.3 Paragraph tags: p
We can find that when we paste a relatively long piece of text into the body tag with html, even if we have divided the paragraphs in VScode, when I run it, I will find that it is not divided into paragraphs, so we need to use paragraph tags to implement segmentation
The code example is as follows
<p>这是第一段</p>
<p>这是第二段</p>The effect is as follows
Note the following when using the p tag :
- The p tag is not just a newline, that is, a gap between the p tag and other content
- The paragraph described by the p tag is not indented at the beginning
- For the content in each pair of p tags, the layout will be automatically determined according to the width of the browser
- 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
- The newline directly entered in the html source code will not be parsed as a newline when parsing, but a blank space will be displayed on the page
3.4 Newline label: br
An example of use is as follows
<p>
p 标签不单单是换行,即 p 标签和别的内容之间一个空隙 <br/>
p 标签描述的段落开头没有缩进<br/>
对于每一对 p 标签中的内容,会自动根据浏览器宽度来决定排版<br/>
html 内容首尾处的换行,空格均无效<br/>
在 html 中文字之间输入的多个空格只相当于一个空格<br/>
html 源码中直接输入的换行在解析的时候不会解析为换行,而是在页面中显示一个空格<br/>
</p>The effect is as follows
Note the following when using the br tag
- br is a single label
- The br tag does not have a large gap like the p tag, the br tag is just a line break
- <br/> is a standard way of writing, it is not recommended to write as<br>
3.5 Text formatting tags
- Bold: strong tag and b tag
- Italic: em tags and i tags
- Strikethrough: del tag and s tag
- Underline: ins tags and u tags
The code example is as follows
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>The effect is as follows
3.6 Image tags: img
Common attributes of the img tag:
- src: Indicates the path of the image, which can be a relative path or an absolute path. (I won’t explain too much about the difference and usage of relative paths and absolute paths here, and old irons who don’t know it can check it out)
- alt: Replacement text, when the picture cannot be displayed correctly, display the replaced text
- Width / height: Control the width and height. Generally, one of the height and width can be changed, and the other can be scaled proportionally. If they are changed at the same time, the image may be unbalanced
- border: border, the parameter is the width of the pixel
- title: The title of the picture, that is, when our cursor falls on the picture, the text displayed on the cursor
We use the img tag to display pictures on the interface, so the img tag must have the src attribute
The code example is as follows
<img src="dog.png" alt="狗" title="这是一个小狗" width="500px">Note: The src path is a relative path, that is, I have put the picture in the same directory as the html file in advance, and its file name is dog.png
The effect is as follows
3.7 Hyperlink label: a
Common attributes of the a tag:
- href: the link to the page you want after clicking
- target: open mode, the default is _self, in this mode, the new page that jumps after clicking will occupy our current page, and when we usually use it, we will change it to _blank, after changing it, clicking the link will open a new page show
Pay special attention to the following two points when using the a tag:
- The href attribute of the a tag must have, otherwise the jump cannot be performed
- The a tag must have content, otherwise nothing in the a tag will be displayed on the page
Several forms of links in the href attribute in the a tag:
1. External link: Refer to the address of other websites
<a href="http://www.baidu.com">百度</a>2. Internal links: For links between web pages, just write the relative path
First, create a test.html in the same directory, and then we are writing an html file. In this file, you can jump to the test page through this code
<a href="test.html">跳转到test页面</a>
3. Download link: When the path corresponding to href is a file, the browser will execute the download task
<a href="test.zip">下载文件</a>4. Empty link: use # to place the space
<a href="#">空链接</a>In this case, we click on the empty link text on the page and will not jump
5. Links to web page elements: We can add links to any element on the web page
<!-- 这是给一个图片添加链接 -->
<!-- 点击图片之后就会跳转到搜狗主页 -->
<a href="http://www.sogou.com">
<img src="dog.png">
</a>6 Anchor link: Through this, you can jump to the location of the webpage, similar to clicking on the directory, jumping to the corresponding paragraph
The following is a code sample, just to demonstrate the basic method used
<a href="#one">第一段</a>
<a href="#tow">第二段</a>
<a href="#three">第三段</a>
<!-- 这是第一段 -->
<p id="one">
...
</p>
<!-- 这是第二段 -->
<p id="two">
...
</p>
<!-- 这是第三段 -->
<p id="three">
...
</p>7. Prohibition of jumping links: When we don't want the link to jump, just set its href attribute to javascript:void(0) or javascript :;
3.7 List Labels
1. Unordered list: ul and li
code example
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ul>The effect is as follows
2. Ordered lists: ol and li
code example
<ol>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ol>The effect is as follows
3. Custom list dl dt (subtitle) and dd
code example
<dl>
<dt>西游记四人组</dt>
<dd>唐僧</dd>
<dd>孙悟空</dd>
<dd>猪八戒</dd>
<dd>沙悟净</dd>
</dl>The effect is as follows
4. Precautions
- The labels in each list are in a parallel relationship
- Only li tags can be placed in ul / ol tags, and only dt tags and dd tags can be placed in dl tags
- If you want to nest different lists, you can put other tags in the li tag
Four comprehensive exercises
After learning the use of these basic tags above, we can write some basic web pages. Here is a simple web page resume.
Expected page effect
code show as below
Reminder, you can find a picture on the Internet by yourself, download it to the same directory as the html file, and then modify the picture path name in the code to display the picture correctly.
<!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>我的简历</title>
</head>
<body>
<h2>某某某</h2>
<div>
<!-- 基本信息 -->
<div>
<h3>基本信息</h3>
<!-- 这里填写正确的图片路径 -->
<img src="dog.png" alt="个人图片" title="某某某" height="300px" height="150px">
</div>
<div>
<p>求职意向: Java开发工程师</p>
</div>
<div>
<p>联系电话: XXX-XXX-XXXX</p>
</div>
<div>
<p>邮箱: [email protected]</p>
</div>
<div>
<!-- 这里可以填写你的gitee地址 -->
<p><a href="#" target="_blank">我的 gitee</a></p>
</div>
<div>
<!-- 这里可以填写你的博客地址 -->
<p><a href="#" target="_blank">我的 博客</a></p>
</div>
</div>
<!-- 教育背景 -->
<div>
<h3>教育背景</h3>
<ol>
<li>1990 - 1996 小葵花幼儿园 幼儿园</li>
<li>1996 - 2002 小葵花小学 小学</li>
<li>2002 - 2005 小葵花中学 中学</li>
<li>2005 - 2008 小葵花中学 高中</li>
<li>2008 - 2012 小葵花大学 计算机专业 本科</li>
</ol>
</div>
<!-- 专业技能 -->
<div>
<h3>专业技能</h3>
<ul>
<li>Java基础语法扎实, 已经刷了800道Leetcode题</li>
<li>常见数据结构都可以独立实现并熟练运用</li>
<li>熟知计算机网络理论, 并且可以独立排查常见问题</li>
<li>掌握Web开发能力, 并且独立开发了学校的留言墙功能</li>
</ul>
</div>
<!-- 我的项目 -->
<div>
<h3>我的项目</h3>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</p>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</p>
</li>
</ol>
</div>
<!-- 个人评价 -->
<div>
<h3>个人评价</h3>
<p>在校期间，学习成绩优良，多次获得奖学金</p>
</div>
</body>
</html>Summarize
Here is the relatively basic knowledge in html, which is very interesting and useful, and I hope it can have a good influence on every reader.
It is not easy to make, if this blog is helpful to you, please like it, bookmark + follow and support a wave of editors, thank you!