Web Frontend Basics Overview

HTML Profile

HTML is a language used to describe a web page, fully known as Hyper-Text Markup Language, or hypertext tagging language. The text, buttons, pictures, videos, etc. that we see when we view the web page are presented through HTML writing and through browsers. This will be at the heart of our presentation at the front end.

Read this article alongside Factual and Interface Level: Markdown and HTML are not a substitute to compare how related concepts develop in different contexts.

In October 2014, HTML5 was issued as the recommended criterion for stabilizing W3C, which means that the standardization of HTML5 has been completed. HTML is already a very mature language, and he is the basis for follow-up throughout the front end.

All computers with browsers are able to view HTML files, using browsers only to modify the suffix, or using some plugins to modify and preview HTML codes in VSC.

HTML Foundation

HTML Infrastructure

The HTML code consists of characters in sharp brackets called HTML elements, each of which includes an initial and an end label with an end label with an additional slash. Each HTML element conveys between labels to the browser. The label provides the browser with a structure to render content

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 声明文档使用的字符编码为 UTF-8，避免中文乱码 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的显示效果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义网页的标题，会显示在浏览器标签页上 -->
    <title>我的第一个 HTML 页面</title>
</head>
<body>
    <!-- 一级标题 -->
    <h1>欢迎来到我的网页</h1>
    <!-- 段落 -->
    <p>这是一个简单的 HTML 示例，用于帮助新手学习 HTML 基础。</p>
    <!-- 无序列表 -->
    <ul>
        <li>HTML 是超文本标记语言</li>
        <li>用于创建网页的结构</li>
        <li>由各种标签组成</li>
    </ul>
    <!-- 插入图片，需替换为实际图片路径或 URL -->
    <img src="example.jpg" alt="示例图片" width="300">
    <!-- 创建超链接 -->
    <a href="https://www.example.com">访问示例网站</a>
    <!-- 水平线 -->
    <hr>
    <!-- 版权信息 -->
    <p>&copy; 2025 我的网页版权所有</p>
</body>
</html>

From this section, the HTML infrastructure can be understood.<html> Elements state that all of them are HTML codes.<body> Declare that they are what needs to be presented in the browser main window.<h1> <p> Declares that they are first-level titles or paragraphs.

<html lang="zh-CN"> Wait for a space to be added to the HTML label and then follow a set of assigned values to add features to the label to provide additional information for the label. The particular language here limits the subsequent language. Features are predefined, and we need to know what the labels are for.

<head> To declare page information, not in the main window, e. g.<title>If you want to declare a page title, it will be displayed above the URL address or at a small tab.

As for the other elements, we will gradually describe in the following narrative that the role of all common elements needs to be understood.

Base Elements

Structure Information

Space: To enhance code readability options for developers, a large number of lines and spaces are treated as one. <h1>--</h1> Title control component, six. <p>--</p> Paragraph in text <b>,<i> Bold and italics <sup>,<sub> Superscript & Subscript <br />,<hr /> Line-repeated symbols and horizontal lines, which are usually used individually as an expression of meaning

Semantic Information

Semantic information titles do not change the structure of the web page, but add additional information, some of which is briefly presented here

<strong>,<em> To emphasize that, by default, in bold and in italics <blackquote cite = "xxx"> Quote to a hyperlink, click on the contents of the block to jump <abbr title = "xxx"> Provide abbreviations, which are in the form of abbreviations,titleIt's a full spell, and a floating mouse will provide a full spell. <cite> Internal information is quoted <dfn> Internal information is new. <address> Provide contact information <ins>,<del>,<s> Underlined, strikeout, strikeout

List

HTML5 provides lists of three basic forms <ol> to create an orderly list, using <li>,</li> Create list items <ul> to create an unsequenced table, which uses <li>,</li> Create list items <dl> For the creation of the list of definitions, he included a range of terms that needed to be defined and the multiple definitions that were needed for that term. uses <dt>,</dt> Creates a defined term for the list,<dd>,</dd> Used to explain its definition. As a term may have multiple definitions, the same definition may be consistent with multiple terms, so the HTML code between them does not contain a relationship.

List allows nesting, in<li>,</li>to create a new list

Links, images, tables

Link

Links are the main specificity of the network, and we allow jumps between multiple pages, which is the core of web browsing. The links consist of a variety of different types of features, and a series of specifications for achieving the links have been agreed between HTML and other external software, allowing us to easily prepare the relevant codes.

Basic links used <a hred = "xxxx"> text </a> Composition, including linked web pages and descriptive texts. Link needs to contain a complete URL (web site) to unspecify a specific page.

When we need to point to the other pages of the same website, we don't need to use a long-domain name, we can use a short URL, we just need to use the relative directory structure to introduce the other ones..html The end page is fine and the parent page is available. .. Achieved.

Use the following structure if you want to use Email<a hred = "mailto:hyacehila@outlook.com"> Email Hy </a>

If you need to automatically open in a new window, you need to set features <a hred = "xxxx" target="_blank"> text </a>

If you need to link to the specific location of the current page, first we need to set specific settings in other elements of this page:<h2 id = "feature"> At this point, replace the connection with <a href = "#feature"> This is going to be an internal page jump

We also need to know what he set up if a link is needed to a specific location for another page (whether the page is external or inside the site) id Then use<a hred = "xxxx/#feature"> text </a>

Image

Pictures on the website need to be stored as attachments before reference is made, and it is therefore recommended that one or more files be stored separately in the documents of the website images

If you want a picture on the website, you need to use the empty elements below (no end label elements) <img src = "images/quokka.jpg" alt = "xxxx" title = "xxxxx"> They show the relative position of the picture, the alternative text description (for barrier-free design) when the picture cannot be viewed, and the title of the picture.

If we need to specify the size of the image manually, use specific <height = "450",width = "430"> But now this page layout usually uses the CSS file to specify, including matching settings

Image blocks can be embedded in other blocks, which is at the heart of the various layout methods that HTML uses. The effect of placing him within or outside a block element is completely different.

New version of HTML5 used <figure> Block instead of original empty elements <img> The basic method of use is <figure> <img src = "images/quokka.jpg" alt = "xxxx"> <figurecaption> xxx </figurecaption> </figure> Supported adding instructions for pictures

HTML currently supports a wide range of pictures in a variety of formats, including PNG, JPG, GIF, SVG, etc.

Table

The table clearly explains the complex information. Here we look at how to construct a table. HTML prepares a table by line.

<table> To start a table block <tr> Each line used to start the table <td> To start every cell <th> and <td> It's the same thing, but it's actually meant to mean the title.<th scope = "row">,<th scope = "col"> Specifies whether this is a row or column title

Yes. <th> and <td> Add features <th colspan = "2"> It allows him to cross multiple columns, the same characteristics. <th rowspan = "2"> We can get him across a lot of lines.

Use <thead>,<tbody>,<tfoot> The tables can be divided into multiple components that help readers understand that the control methods for each cell remain unchanged.

The HTML code only controls content, and as for the display style, it is controlled by CSS.

Form

The form is a place that provides some blank areas for you to fill in, and can be used when we need to collect information from visitors. Many browsers collect user information in advance and automatically fill in according to the form requirements.

The form is filled in by the user, then the information is submitted to the server by clicking the button, and the server returns a new web page accordingly.

Use a form <form action = “URL” methon = "get"> </form> Create among them action I've decided where the server will take the URL.method Method of submission determined, generally small search used get ; upload files with password confirmed post

Add one to the form <input type = "text" name = "username" maxlength = 4> Can create a text box, of which name It's a key that matches the server.maxlength is the maximum length allowed;replacementtextYespassword, and then automatically hide the entered character

If you want to create a multiline text box, you should use <textarea name = "xxx"> </textarea> Achieved

Select button to use <input type = "ratio" name = "xxx" value = "xxx"> We need to be in one.<form> Use multiple single buttons to achieve single theme

Recheck button to use <input type = "checkbox" name = "xxx" value = "xxx"> We need more than one check button to achieve it.

Click to use <select name ="xx"> </select> with multiple <option value = "xxx"> </option> Composition

Use if users want to upload files<input type = "file"> Achieved; correspondingly, if an additional submission button is required <input type = "submit">

HTML5 provides more common form properties including email url search, etc. <input> Selection is sufficient to facilitate user completion of forms.

Other Tags

Version Information

At the beginning of the entire page, we can use <!DOCTYPE html> Statement Version

In HTML code, we can use  Other Organiser

Each HTML component is usable <id = "xxx"> This will facilitate the automated processing of the back JS.

Those elements that are always in a different line are called block elements. <h1> <p> <ul> <li> etc; conversely called the inner chain element

<div> </div> The elements allow us to concentrate a group of elements in a single block for easy management, and when the web page distinguishes a lot of important pieces, we often use them.

<iframe> Embedded a new page in a small window of the page

Page Meta Info

<meta> Put it on. <head> ,use <meta name = "xxx" content = "xxx" /> Composition, which can include the designer of the website <author> Page Cache <pragma> With Expiry <expire> etc.;

<descirption> Introduction to Page Description <kerwords> I can give you key words.<robots> You can give permission to reptiles, etc.

Audio and Video

Video and audio are also very important on the modern Internet, which has led to significant improvements in HTML 5.

Use <video src = "xxx.mp4"> </video> You can create a video block to give the address of the video. There are also a lot of specific options, such as playout and cover, to adjust when needed.

Corresponding. If you need audio, just...<audio src = "xxx.mp3"> </video> Yeah.

CSS Profile

Basic introduction

CSS is used to create rules that specify how the content of the elements is displayed; once the CSS rationale is presented, we need only know the various styles.

To understand CSS, we need to know that every HTML element is in a box. We can set the element format rules for the contents in this box. The CSS's role is to select the cells and then give the rules.

A CSS rule consists of two parts, a selector and a rule. Like p,h1 {font-family:Arial,...} First Part Selectorp,h1block, the latter part is separated by a colon.

In practical applications, CSS documents are generally written separately, at which point they can be <head> Use empty elements <link> Sets the link position for the CSS file.

CSS has a wide variety of choices that allow us to apply the rules to a wide range of locations, including, inter alia, universal selection, type selection, class selection, ID selection. When different CSS rules are set for a selection at the same time, then the choicer is better and more specific.

Colour

CSS uses code <color:> Specifies the colour, using RGB values, 16-digit encoding, and preset names.

Besides the color of the elements, we can set the background colour. <background-color> Whether it's color or background, we can do it alone. <opacity:> Set Transparency

After CSS3, we can use HSL and HSLA colours, similar to RGB, using three values to control colours such as: <color:hsl(0,0%,78%)> Separately controlling the tone, saturation, visibility and one additional control transparency.

Text

The control text is divided into two broad categories, the CSS rules that directly affect font and appearance properties, and rules that do not concern text fonts.

We can use it. font-family: Set fonts so that, in order to avoid users missing fonts, we can specify a series of fonts, such as: font-family: xxx,xxx,xxx; Let computers be selected according to the circumstances.

To specify the size of the font, we need to use font-size: The rules for permitting use include: px,%,em is the pixel size statement, the percentage statement relative to the standard size, and according to the width of the font m.

<font-weight:bold> Set bold;font-style:italic Set italics;<text-transform:> Set case;<text-decoration:> (b) Setting up decoration lines;

Control spacing, alignment, indentation code omitted here. We can discuss it when we need to use it, and we need only basic understanding here.

Box.

To control the size of the box, we can use it. height:xx;width:xx; This box can be a block element or use. <div> </div> Defines the block.

In order to fit the user's screen, many HTML designs allow automatic scaling, which we can use to oversize or narrow. min-width:450px;max-width;650px;

Similarly, we can set the maximum and minimum height to control the size of the user screen. min-height:450px;max-height;650px; We can use it when there's too much over there. overflow Parameters, set to hidden/scroll Hides the spill or allows the user to slide.

Use border-width;border-style;border-color You can set the size, form and colour of the box border. Use padding:10px; to set the inner distance of the border; to use margin:10px; You can set the distance outside the border.

display (a) the way the element is displayed can be controlled (the element can be hidden directly and can only be discovered by looking at the source code); visibility The display of the box can be controlled (preserve the space occupied by the element but leave it blank)

Lists and Tables

list-style-type Allows us to control the style of bullet in the list

list-style-position Allows us to control the position of item symbols in the list, whether to mix them into the text or ask for a separate indentation of the text In.

empty-cells It helps us control the borders of empty cells.

border-spacing to control the distance between cells; corresponding border-collaspe Controls whether the cell borders of the table need to be combined.

Form

We generally recommend using the finished CSS file to control the various buttons of the form, and they are also covered by common front-end frames.

Characteristics of HTML5

HTML5 uses a new structure of defined page elements, making our web structure more standardized and very helpful in designing the layout of the page. It's an effective substitute for the former division.<div> </div> We used to use it together. id,class to distinguish the elements on the page.

We use <header> Blocks and<footer> Blocks as home header and home footer; we can alsoarticle Use in block<header> Blocks and<footer> Blocks as headers and footers for articles.

Use <nav> Block defines the main navigator for the entire site;

<article> The blocks make up all the components of the entire page, and they can be used either individually or embedded, which is the most extensive structure used for the construction of the entire page.

<aside> For provision<article> A piece of subsidiary information when he's not at all.<article> This provides information on the entire page, usually with an external link.

<section> To divide pages into parts, many can be included<article> It's fine.<article> Splits articles in blocks.

<hgroup> For the construction of headings and sub-headings, synthesizing different levels of titles.

<div> We can still use it to assemble the entire page, and he can still use it when the current way of doing things doesn't work.

We don't need separate content to organize the main content of the page except<header> Blocks and<footer> Blocks <aside> It's all about the page.

We used to use it. <a hred = "xxxx"> text </a> As a basic link; now HTML5 allows text The content is a piece, the whole piece becomes linked.