HTML learning part one (front-end learning)

Reference learning website:

My learning idea is: website + practice + video.

Video is important because it will give you a way to open your mind. You will think, oh! It turned out to be okay. This is something that books or website tutorials cannot teach you. Moreover, for some tutorials, you may not use its usage at work or in the future. In this case, watching videos is also a good solution.

Compare with website or book learning, and with video learning:

It is recommended to follow the website or app after the basics in the early stage. These current websites or apps have been developed and comprehensive, and will be updated and more useful in the future. However, if the difficulty becomes greater, it is necessary to improve from the basics. At this time, my suggestion is to watch the video. Watching videos, listening to others, and following other people's ideas can expand your thinking, improve your horizons, and improve your efficiency in learning difficulties.

1. What is HTML?

HTML stands for Hypertext Markup Language
HTML is the standard markup language used to create web pages
HTML describes the structure of a web page
HTML is made up of a series of elements
HTML elements tell the browser how to display content
HTML elements mark pieces of content, such as "this is a heading", "this is a paragraph", "this is a link", etc.

2. Basic outline

web document

All HTML documents must begin with a doctype declaration: .<!DOCTYPE html>

The HTML document itself begins and ends with .<html></html>

The visible part of the HTML document is between and .<body></body>

The declaration indicates the document type and helps the browser to display the web page correctly.<!DOCTYPE>

It can appear only once at the top of the page (before any HTML tags).

Statements are not case sensitive.<!DOCTYPE>

HTML headings are defined using the to tag.<h1><h6>

<h1>Define the most important headings. Define the least important headings:<h6>

HTML paragraphs are defined using tags:<p>

HTML links are defined using tags:<a>

HTML images are defined using markup.<img>

HTML elements

An HTML element is everything from the opening tag to the closing tag:

<Tab name>Content goes here...</Tag name>

Examples of some HTML elements:

<H1>My first title</h1>

<p>My first paragraph. </p>

Note: Some HTML elements have no content (such as the <br> element). These elements are called empty elements. Empty element has no closing tag!

HTML tags are case insensitive

2. (2.5) Web Page Attributes

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the opening tag
Attributes usually come in the form of name/value pairs, for example: name="value"

src attribute

This tag is used to embed images in HTML pages. attribute specifying the path to the image to display:<img>src

There are two ways to specify URLs in attributes:src

Absolute website: not good. (Use the address of someone else's URL image)

Relative URL: Use this, (equivalent to downloading in a local file)

Width and height attributes:

The tag should also contain and attributes that specify the width and height of the image in pixels:<img>width height

alt attribute:

A required attribute of the tag specifying the alternate text for the image if the image cannot be displayed for some reason. This could be due to a slow connection, wrong properties, or the user using a screen reader.<img src=“” alt=“”>

Style attributes (more on that later)

This attribute is used to add style to an element, such as color, font, size, etc.style

Long property

The attribute should always be included inside the tag, declaring the language of the page. This is to help search engines and browsers.lang<html>

For example: <html lang="en"> means to specify English as the language.

Ways to improve: <html lang="en-US">

The country code can also be added to the language code in the attribute. Therefore, the first two characters define the language of the HTML page, and the last two characters define the country.

Title attribute (this is interesting)

This attribute defines some additional related elements.title

The value of the title attribute will be displayed as a tooltip when hovering over the element:

For example: <p title="You are my dog">This is a paragraph</p>

Note: For the selection of quotation marks, when the attribute value itself contains double quotation marks, single quotation marks must be used. The reverse is the same.

3. Basic structure and usage

Bigger headline:

Every HTML heading has a default size. However, you can specify the size of any heading with the property, using the CSS property:style font-size（这个是字体大小的方法。）

For example: <h1 style="font-size:60px;">Heading 1</h1>

page paragraph

HTML element defines a paragraph.<p>

Paragraphs always start on a new line, and browsers automatically add some spaces (margins) before and after paragraphs.

This tag defines a topic separator in an HTML page and is usually displayed as a horizontal line .<hr>

This element is used to delimit content (or definition changes) in HTML pages:<hr>

HTML elements define line breaks .<br>

HTML elements define preformatted text.<pre>

Text inside elements is displayed in a fixed-width font (usually Courier), which preserves whitespace and line breaks:<pre>

web style

HTML attributes are used to add styles to elements, such as color, font, size, etc.style

For example:

<tagname style="property:value;">

This property is a CSS property. The value is a CSS value. (The css style will be learned later)

A CSS property that defines the background color of an HTML element.background-color

For example: <body style="background-color:powderblue;">

It can also set the color for the background of different label elements: <p style="background-color:tomato;">This is a paragraph.</p>

CSS properties define an HTML element (text color) :color

例如：<h1 style="color:blue;">This is a heading</h1>

CSS properties define the font to use for HTML elements (font selection) :font-family

例如：<h1 style="font-family:verdana;">This is a heading</h1>

CSS properties define an HTML element (font size) :font-size

例如：<h1 style="font-size:300%;">This is a heading</h1>

CSS properties define the horizontal text alignment of HTML elements :text-align

例如：<h1 style="text-align:center;">Centered Heading</h1>

HTML text format

HTML contains several elements for defining text with special meaning.

Formatting elements are designed to display special types of text:

<b>- bold text
<strong>- important text
<i>- italic letters
<em>- Emphasized text
<mark>- markup text
<small>- smaller text
<del>- delete text
<ins>- insert text
<sub>- Subscript text
<sup>- superscript text

Citation and Citation Elements

Introduces the , , , , , and HTML elements.<blockquote><q><abbr><address><cite><bdo>

<blockquote> <blockquote>

HTML element defining a section referenced from another source.quote><block

Browsers normally indent elements .<blockquote>

HTML tag defines a short quote .<q>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<abbreviation> for abbreviation<abbr>(这个有意思捏)

HTML tags define abbreviations or acronyms such as "HTML", "CSS", "Mr", "Dr", "ASAP", "ATM".<abbr>

Markup abbreviations can provide useful information to browsers, translation systems and search engines.

Tip: Using the global title property you can display an abbreviation/acronym for the description that you hover over the element.

HTML tags defining contact information for the author/owner of a document or an article ( rendered in italics ) .<address>

HTML tags define a creative work (such as a book, a poem, a song, a movie, a painting, a sculpture, etc.).<cite>

NOTE: A person's name is not the title of the work.

Text within elements is usually rendered in italics .<cite>

<bdo> for bidirectional coverage

BDO stands for Bidirectional Overlay.

HTML tags are used to override the current text direction:<bdo> <dir="rtl">表示反向输出信息。

用法：<bdo dir="rtl">This line will be written from right to left</bdo>

hidden content

Annotations can be used to hide content.

This is helpful if you temporarily hide content:

web color

HTML colors are specified using predefined color names, or using RGB, HEX, HSL, RGBA, or HSLA values.

The background color and font color of the web page have been introduced earlier.

border color

You can set the color of the border:

例如：<h1 style="border:2px solid Tomato;">Hello World</h1>

RGB color values represent red, green, and blue light sources.

RGBA color values are an extension of RGB , with an Alpha channel (opacity).

Choose the right color:

Randomly on the web, choose an RGB color selection.

shades of gray

Shades of gray are usually defined using equal values of all three parameters:

RGBA color value

RGBA color values are an extension of RGB color values with an alpha channel - specifying the opacity of the color.

RGBA color values are specified as:

RGBA ( red, green , blue, alpha )

hexadecimal color value

In HTML, color forms can be specified using hexadecimal values:

# rrggbb

where rr (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

Its usage is the same as that of RGB, and the shadow part also passes the same value of three colors.

HSL and HSLA colors

HSL stands for hue, saturation and lightness.

HSLA color values are an extension of HSL with an alpha channel (opacity).

HSL ( hue , saturation , lightness ))

Hue is a degree on the color wheel, from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% is a shade of gray and 100% is a full color.

Brightness is also a percentage value. 0% is black and 100% is white.

Shades of gray are usually defined by setting Hue and Saturation to 0, and adjusting Lightness from 0% to 100% for darker/lighter shades:

HTML style - CSS (divided into style and link)

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control multiple layouts for all web pages at once.

What is CSS?

Cascading Style Sheets (CSS) are used to format the layout of web pages.

With CSS, you can control colors, fonts, text size, spacing between elements, how elements are positioned and laid out, backgrounds using images or background colors, different displays and screen sizes for different devices, and much more!

Tip: The word cascading means that styles applied to the parent element will also be applied to the parent. So if you set the color of your body text to "blue", all headings, paragraphs and other text elements in the body will also get the same color (unless you specify something else)!

use css

CSS can be added to HTML documents in 3 ways:

Inline - by using attributes in HTML elementsstyle
Internal - by using the element in the section<style><head>
External - link to an external CSS file by using the element<link>

The most common way to add CSS is to keep the styles in an external CSS file. However, in this tutorial, we'll use inline and internal styles, as this is easier to demonstrate and easier for you to try out yourself.

Inline CSS uses properties of HTML elements (applied to a single HTML element).style

例如：<h1 style="color:blue;">A Blue Heading</h1>

Internal CSS is defined in sections of the HTML page, (applied to all elements of a certain tag).<head><style>

For example:

<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

External CSS stylesheet , add a link to the stylesheet in the section of each HTML page:<head>

For example:
<head>
<link rel="stylesheet" href="styles.css"> //Point to the style file.
</head>

"style.css":

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS border

CSS property to define a border around an HTML element.border

CSS padding (distance between text and border)

CSS property defining padding (space) between text and border.padding

CSS margins (the distance between the border and the outside world)

CSS property to define margins (spaces) outside the border.margin

HTML Links - Syntax

HTML tags define hyperlinks . It has the following syntax:<a>

target attribute

By default, the linked page will be displayed in the current browser window. To change this setting, another target must be specified for the link.

This property specifies where to open the linked document.target

This property can have one of the following values:target

_self- breach of contract. Open document in same window/tab when clicked
_blank- Open the document in a new window or tab (most commonly used)
_parent- Open the document in the parent frame
_top- Open the document in the entire body of the window

example

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

use image as link

To use an image as a link, just put the tag inside a tag:<img><a>

link to email address

Used in properties to create a link that opens the user's email program (to have them send a new email): mailto: href

<a href="mailto:[email protected]">Send email</a>

button as link

To use HTML buttons as links, you have to add some JavaScript code.

JavaScript allows you to specify what happens on certain events, such as button clicks:

<button οnclick="document.location='default.asp'">HTML Tutorial</button>

HTML Links - Different Colors (Change the link's style)

An HTML link is displayed in a different color depending on whether it is visited, not visited or active.

By default, the link will appear as follows (in all browsers):

Unvisited links are underlined and blue
Visited links are underlined and purple
Active links are underlined and red

You can change the link state color with CSS:

Example (this needs to be remembered, a:link ( unvisited ), a:visited ( after visiting ), a:hover ( mouse hovering ), a:active ( active link ))

Here, unvisited links will be green and not underlined. Visited links will be pink and not underlined. Active links will be yellow and underlined. Also, when the mouse is over the link (a:hover), it will turn red and underlined:

Complete example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>

Link button: (just use some styles, not the button method of vant component, I will learn this later)

Links can also be styled as buttons by using CSS:

HTML Links - Create Bookmarks (interesting pinch)

HTML links can be used to create bookmarks so readers can jump to specific sections of web pages.

Bookmarks can be useful if the webpage is long.

To create a bookmark - first create a bookmark, then add a link to it.

When a link is clicked, the page will scroll down or up to be bookmarked.

For example:

First, create a bookmark with this attribute:id

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4") from the same page:

<a href="#C4">Jump to Chapter 4</a>

When clicking on chapter 4, it will jump to Jump to Chapter 4.

Grammar of images

HTML tags are used to embed images in web pages.<img>

Labels have two required attributes:<img>

src - specifies the path to the image
alt - specifies the alternate text for the image

width and height

You can use this attribute to specify the width and height of the image.style

style="width:500px;height:600px;">

Pay attention to the difference between the use of style sheets and the use of width and height (in fact, the difference between inline css and outline css)

To use an image as a link, put the tag inside a tag:<img><a>

image floating

Use CSS properties to float images to the right or left of the text:float

例如：<p><img src="smiley.gif" alt="Smiley face" style="float:right; width:42px;height:42px;">
The image will float to the right of the text.</p>

image map

HTML tags define image maps. Image maps are made with clickable areas. Regions are defined by one or more labels.<map><area>

Insert images using tags. The only difference from other images is that you have to add the attribute:<img>usemap

The value starts with a hash tag followed by the name of the imagemap and is used to create a relationship between an image and an imagemap.usemap#

Tip: You can use any image as an image map!

step:

1. Create an image map (First insert the image using the tag img src='', then create the image map.)

<map name=" ">

Then, add an element.<map>

This element is used to create image maps and uses required attributes:<map name="workmap">

The value of this attribute must be the same as the attribute of .<img usemap=“#workmap”>

2. Create fields

Then, add a clickable area.

Clickable areas are defined using elements.<area>

shape

You have to define the shape of the clickable area and can choose one of the values:

rect- Define a rectangular area
circle- Define a circular area
poly- define polygonal area
default- define the entire area

You also have to define some coordinates to place the clickable area on the image

shape="rectangle"

The coordinates for appear in pairs, one for the x-axis and one for the y-axis.shape="rect"

Coordinates at 270 pixels left margin and 350 pixels top:270,350

Get the bounds of the drawn rectangle:

How to get the x and y position of a page?

Reference article:

How can I see the X Y position of my mouse on the desktop_Baidu Know (baidu.com)

It is also possible to use qq, in fact, it is to use the method of screenshot, and then it will appear, the size of the page you screenshot, and then that size, if you start from the upper left, then its end point is the value of x and y we need.

Similarly: shape = "rectangle" 337, 300 is the coordinates of x, y, 44 is the radius of the image.

shape="polygon"

Contains multiple coordinate points used to create shapes formed from straight lines (polygons).shape="poly"

This can be used to create any shape.

例如：<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Imagemaps and JavaScript

Clickable areas can also trigger JavaScript functions.

Add an event to an element to execute a JavaScript function: <area shape="circle" οnclick= "myFunction()">

Background images for HTML elements

To add background images on HTML elements, use HTML attributes and CSS properties:style background-image

For example: <p style="background-image: url('img_girl.jpg');">

Or: use it in a stylesheet.

Note: If the background image is smaller than the element, the image will repeat , both horizontally and vertically, until the end of the element is reached.

Correction: To avoid the background image repeating itself, set the property from.background-repeat no-repeat

For example:

background cover

If you want the background image to cover the entire element, you can set the property tobackground-sizecover.

Additionally, to ensure that the entire element is always covered , set the property tobackground-attachment fixed:

This way, the background image will cover the entire element, without stretching (the image will keep its original proportions):

<image> element (meaning, choose which image to use according to the screen size. This method is used in mobile mode and web mode)

HTML elements allow you to display different images for different devices or screen sizes.<picture>

Each element has an attribute that defines when an image is most appropriate.<source media=“”>

This element has two main purposes:<picture>

1. Bandwidth

If you have a small screen or device, there is no need to load large image files. The browser will use the first element with a matching attribute value and ignore any following element elements.<source>

2. Format support

Some browsers or devices may not support all image formats. By using the element you can add all image formats and the browser will use the first format it recognizes and ignore any following elements.<picture>

favicon

A favicon is a small image that appears next to the title of a page in a browser tab .

The generic name for the icon image is "favicon.ico".

For example:

<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

sheet

Table row: <tr> <tr>

table cell<td></td>

Header: <th> </th>

(th is placed under tr, generally only used once, and td is used most)

table border

Inside the CSS style:

table, th, td {
border: 1px solid black;
}

However, there is a little problem with this kind of problem: there will be a problem of double borders.

Collapsed into a single border:

Set the CSS property to .border-collapse collapse

Add in the above css style: border-collapse: collapse;

for example:

Set the background color of each cell and give the border white

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

round table border

For this property, the border becomes rounded:border-radius

th, td { //Omit table to become border
border: 1px solid black;
border-radius: 10px;
}

dashed table border

Using this property, you can set the appearance of the border.border-style

border color

Using this property, you can set the color of the border.border-color

table size

Set the width of the table to 100%:

Note: Using percentages as the size unit for width means the width of this element compared to its parent element, which in this case is the element.<body>

table column width

To set the size of a specific column, add an attribute on the or element:style<th><td>

Set the width of the first column to 70%: <th style="width:70%">Firstname</th>

table row height

Same as above: <tr style="height:200px">

Align table title

By default, table headings are bold and centered:

To left-align table titles, use the CSS property:text-align

For example: th { text-align: left; }

headers for multiple columnscolspan<th>

Headers can span two or more columns: <th colspan="2">Name</th>

Table caption: <caption>

Cell padding: padding

padding-bottom padding-left padding-right

Cell Spacing:border-spacing table

By default, Space is set to 2 pixels.

例：table {
border-spacing: 30px;
}

To make a cell span multiple columns, use the following properties:colspan （前面讲了一次）

Same row span: rowspan

Zebra Stripes: Add background color on every other table row

Use a selector like this::nth-child(even)

tr:nth-child(even) {
background-color: #D6EEEE;
}

vertical zebra stripes

Set the for table data element::nth-child(even)

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Horizontal divider:border-bottom tr

tr {
border-bottom: 1px solid #ddd;
}

Hoverable table:hover tr

Use selectors. For example: tr:hover {background-color: #D6EEEE;}

Table group elements:

This element is used to set specific stylesheet columns.<colgroup>

hide column

You can hide columns using the following properties:visibility: collapse