Web Front-end
HTML Tutorial
Teach you to use HTML to write Web pages in minutes_html/css_WEB-ITnose
Teach you to use HTML to write Web pages in minutes_html/css_WEB-ITnose
Before learning how to use HTML to write web pages, we must first understand what is HTML? Of course, this is not a systematic introduction to the past and present life of HTML. If you are interested in its life experience, you can ask Du Niang, and she will give you the answer you want.
. Published Logo. "Hypertext" means that the content of the page not only contains text, but can also include pictures, links, and even non-text elements such as sounds, animations, and small programs. All you need to know is that a Web page is a web page, and HTML is a markup language used to write web pages.
After understanding the concept of HTML, let’s look at the general structure of the HTML document: simply speaking, it contains two parts, one is the Head, and the other is the body, which is the body. The Head part is mainly used to describe information about the web page, and the Body part is the specific content of the web page. Usually we use three pairs of tags to represent the overall structure of a page, which are ,
and . We use VS to create a new HTML file to see its specific structure, as shown in the figure below:
Speaking of labels, also called markers. A label is a string with a less than sign (<) and a greater than sign (>) on the left and right respectively. The start tag refers to a tag that does not start with a slash (/), and inside it is a list of allowed attribute-value pairs. The closing tag is a tag that begins with a slash (/). The structure and format of a web document are defined by HTML elements, which are inclusive ranges defined by a single or a pair of tags. The following figure shows the four main forms of HTML elements:
The Head elements commonly used in HTML are as shown in the figure below
Commonly used ones The character set is shown in the picture below
Having said so much, I think you may be a little impatient. I can understand the excitement of being impatient to get started. Now let's try it out and write a simple web page.
The first thing is to create a new HTML file. After it is created, it will look like the overall structure diagram above
Then we can insert the content we want to display between the corresponding tags. , I will give the code first:
Let ’s take a look at the results of running using IE browser
<!DOCTYPE html><html ><head> <title>廊坊师范学院</title></head><body> <!--这是一个关于我们学校的网页Demo--> <center> <h2><img src="image/2.jpg" /><font color="bule">廊坊师范学院</font></h2> <b>厚德博学，弘毅致远</b> <hr color="blue"> <p> <b><i><font color="green" size="3">廊坊师范学院地处被誉为“京津走廊上一颗璀璨明珠”的河北省廊坊市。 1946年建校，2000年经教育部批准，升格为省属普通本科院校。升本以来，学校为社会输送了4万余名各级各 类专业人才。<br> 学校分两个校区办学，占地2000亩，教育教学设施与设备条件优越，馆藏文献140万册，电子图书107万册。 设有14个二级学院和继续教育学院、图书馆、社科部、期刊部等教辅单位，14个党政部门；含有普通本、专科 教育、高职教育、成人教育等多种教育模式；现有全日制在校生近20000名，教职员工 1394名，其中专任教师 902人，具有副高级以上职称的教师491名，具有博士、硕士学位及研究生以上学历的教师638名。<br> 学校坚持以学科专业建设为龙头，努力打造以教师教育学科专业为主体，理、工、经、管、法等多科协调发展 的专业格局。现开设本、专科专业108个，涵盖九大学科门类。其中汉语言文学专业为国家级特色专业和国家级 专业综合改革试点，同时还拥有一大批省级特色专业、教育创新高地、重点发展学科、实验教学示范中心、教学 团队、专业综合改革试点和精品课程。 </font></i></b></br> <img src="image/1.jpg" width="600" height="320"> <a href="http://www.lfsfxy.edu.cn/" target=”_blank“><font color="bule" size="12">更多了解</a></br> </center></body></html>
In the above example, I used simple web elements such as text, pictures and links, and did not design the layout because I only watched a two-hour video. What I want to say here is to use HTML Writing a Web page is a very simple thing, which is what my title calls "I will teach you how to write a Web page using HTML in minutes."
But if we want to make a web page with excellent content and structure, we need to study and learn seriously. The application of the B/S model that is more popular today requires us to design and produce better front-end pages. Therefore, further study and summary are needed. Let’s stop here today and quickly start DIYing the Web page you imagined.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
Mar 04, 2025 pm 12:32 PM
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How to efficiently add stroke effects to PNG images on web pages?
Mar 04, 2025 pm 02:39 PM
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
