Web front end training 1HTML / basic tag


The standard markup language for creating web pages is not a markup language. "Hypertext" means that the web page can contain non text elements, such as pictures, links, music, etc. HTML documents are also called web pages.

Suffix: html .htm itself makes little difference.

Basic syntax:

Tags: tags are also called elements. Keywords surrounded by angle brackets, such as < HTML >, usually appear in pairs. HTML elements start with a start tag and HTML elements end with an end tag. Start and end tags are also called open tags and closed tags. Some HTML elements have empty content.

Tag attribute: additional information can be added to the element, which is generally described in the start tag.

Document: define the entire HTML document through the < HTML > tag




Header: < head > element contains all header label elements. In the < head > element, you can insert scripts, style files (CSS), and various meta information.

Body: the < body > tag defines the body of the document.

<p>This is the first paragraph.</p>

Document title: the < title > tag defines the titles of different documents

Title: defined by < H1 > - < H6 > tags, the importance decreases in turn and plays an emphasis role. It is used in the main body and automatically wraps lines

<h1>This is a title</h1>
<h2>This is a title</h2>
<h3>This is a title</h3>

Horizontal line: separated by < HR > labels. Common attributes: color, size, width (percentage or px), align, and alignment

<hr color="red"size="3"width="50%"align="left/center">

Paragraph: defined by label < p >, auto wrap

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Line feed: defined by label < br >, single label


List: unordered list < UL >, beginning with dot

<ul type="XXX">
    <li>Jay Chou</li>
    <li>Lin Junjie</li>
    <li>Eason Chan</li>

Ordered list < ol >, starting with numbers / Roman letters

Layer: < div > block level element. The default is full width, height and proportion. Attributes: width, height and align

<div style="width=100px;height:100px">XXXXX</div>

Block: < span > in line elements (no line wrapping, no width and height)


Hyperlinks: defined by tags < a >

Attribute: href connection to jump to location: target window open location:_ self current window_ Blank blank window

<a href="https://www.bilibili. Com "> BiliBili animation barrage website</a>

The < base > tag describes the basic link address / link target. This tag serves as the default link for all link tags in the HTML document:

<base href="http://www.bilibili.com/images/" target="_blank">

Anchor: defined by label < a >

href followed by # means to refresh the current page and return to the top

<a href="#"> back to top</a>

Jump to id/name

<a href="#id/nameXXXX"XXXXXX</a>

Image: defined by label < img >, single label

Attribute: src address of the incoming picture (required attribute)

alt the text content displayed when the picture is broken or does not exist

titile the text displayed when the mouse hovers over the picture

Width: the width of the picture

Height: the height of the picture

Border: the border of the picture

<img src="/images/logo.png" width="258" height="39" />

Table: defined by < Table > tag

tr line

td standard cell

th header (font centered and bold)

Table attribute: width table width

weight table height

border table boundary

align table alignment

                 style="border-collapse:collapse;" Merge Table borders

tr attribute: align alignment of line contents

bgcolor line background color

<table width="400px"align="center"border="1"style="border-collapse:collapse;">
    <tr align="center">
        <th>full name</th>
        <td>Xiao Ming</td>

        <td>Xiao Hong</td>
        <td>Blue </td>


Relationship between document and external resources: defined by < link > tag

<link rel="stylesheet" type="text/css" href="mystyle.css">

Metadata: some basic metadata is described through the < meta > tag. The metadata is not displayed on the page, but will be parsed by the browser. It is usually used to specify the description of the web page, keywords, the last modification time of the file, author, and other metadata< Meta > is generally placed in the < head > area.

Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define description content for web pages:
<meta name="description" content="free Web & Programming tutorial">
Define Web Author:
<meta name="author" content="Runoob">
Refresh the current page every 30 seconds:
<meta http-equiv="refresh" content="30">

Script: < script > tag is used to load the script file

HTML comments:

<!-- This is a comment -->

Format label:

< font >: Specifies the font, size and color of the text

< pre >: define pre formatted text (space and line feed are reserved)

<pre> Hello World </pre>
&nbsp Space character

< b >: Bold

< I >: tilt

< U >: underline

< del >: middle dash

< sup >: superscript

< sub >: subscript

Empty element: HTML element without content. It is required that the element must be closed in future versions, so < XXX / > is the safest

Page structure:

/ / picture from rookie tutorial Introduction to HTML | rookie tutorial (runoob.com)

Keywords: Front-end

Added by mikkex on Thu, 03 Feb 2022 11:15:30 +0200