HTML5 training course-basic knowledge of html and css

Image for post
Image for post

HTML5 training course-basic knowledge of html and css, Html is a hypertext markup language (English full name: HyperText Markup Language, abbreviation: HTML) is a standard markup language used to create web pages.

Css is Cascading Style Sheets (English full name: Cascading Style Sheets) is a computer language used for document styles such as html and xml. CSS can not only modify web pages statically, but also dynamically perform web page elements with various scripting languages. format.

Basic content

Tag = start tag + content + end tag

Tags can be nested, for example: the page body tag contains heading tags, paragraph tags.

Some tags have attributes and specific formats. Take a tag as an example, xxxx where make is the tag attribute.

An element designed to have no content is called a void element. When you need to use a void element, you only need to use a start tag. This is a convenient shorthand and can reduce the number of tags in html

The use and meaning of common marks

<!doctype html> html5 document type definition, this line should be written to the beginning of the html file

<html></html> mark the beginning and end of an html page

<head></head> tagged page information

The <meta charset=”utf-8"> tag specifies the character encoding, this line should be written above all other elements in the <head> element

<title></title> Specify a title for the page, and the content in the tag appears at the top of the browser

<body></body> marks the main content of the page

<! — xxxxx → The content of xxx in the middle is the content of the comment

Separate the header from the main body of the page when writing html

<h1></h1> is the main title, from <h2> to <h6> is the subtitle, the font is from large to small

<p></p>Start a paragraph

The <blockquote> </blockquote> tag defines block quotes, and all text between them will be separated from regular text, often indented on the left and right sides (increasing margins), and sometimes italics are used. In other words, block references have their own space

Insert a newline

The <q> tag defines a short quote, and browsers often insert quotes around this quote

What you need to understand (some elements discarded in the old version and elements that are not recommended to be used, you must understand the meaning when you see it)

<ol></ol>Define an ordered list

The <ul> tag defines an unordered list

The <li> tag defines list items, the <li> tag can be used in ordered lists (<ol>) and unordered lists (<ul>)

The <dl> tag defines a description list, and the <dl> tag is used with <dt> (define item/name) and <dd> (describe each item/name)

The tag tells the browser to express the text as emphasized content. For all browsers, this means to display the text in italics

<body bgcolor=”xxx” text=”xxxx”>,bgcolor attribute sets the page color, text attribute sets the text color

<font face=”arial”>xxxx</font> use the font element to change the font

<center></center> Horizontally center the enclosed text

Some character entities

<Display as<

>display as>

©right displayed as ©

Three. A simple html framework

<!doctype html>



<meta charset=”utf-8">

<title>Hello Wrld!</title>



<h1>Demonstration file, the page shows hello world! </h1>


Hello Wrld!




Insert a link in the page

Used to create links to other pages. The content in the element is the link text. The link text will be underlined in the browser to indicate that it is clickable, for example:

<a href=”(link destination file path or url)”

title=”text description”> (link text)

The href attribute points to the path of the linked file

The text description of the link page required by the rirle attribute

The id attribute is added to point to a specific title of a link, for example:

<a href=”index.html#identifier”>xxxxx</a>

And synchronize the title in the page, the identifier used in the link should be consistent with the identifier setting of the title

<h2 id=”identifier”>xxxxx</h2>

Add the target attribute to make the browser a separate window when opening the link instead of the same window, for example:

<a target=”_blank” href=”xxxxxxxx”


If you don’t add the target attribute, the browser will open the link in the same window when you click the link. If you add this attribute, the browser will open the link in a separate window.

Five. Insert an image in the page

<img src=”xxxxx”>marked to display the image on the page, xxx is the path or url of the image

The alt=”xxx” attribute is the text describing the content of this image. If the image fails to display, this text will be used to replace it.

width-”xxx” attribute tells the browser to display the width of the image on the page

The height=”xxx” attribute tells the browser to display the height of the image on the page

To be continued, welcome to continue to pay attention to the sharing of good programmer front-end tutorials!

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store