Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

html basic knowledge

How to use basic HTML knowledge to build a basic web page skeleton? The picture below will help you learn from the basics and build a basic web page skeleton step by step. From HTML basics, grammatical specifications to basic structure tags, systematically learn the basic knowledge of HTML and lay a solid foundation for subsequent web page learning.

Edited at 2020-07-03 15:40:47

PlotWizard

Recent works View more works>>

html basic knowledge

PlotWizard

Recent works View more works>>

Recommended to you
Outline

HTML learning

Base

path

Directory folders and root directories

Directory folder: an ordinary folder that stores all materials related to web pages, such as html files, multimedia files, etc.

Root directory: Open the first level of the directory folder

Relative path: the directory path created using the "referenced file" as a reference

Sibling path <img src="img.jpg" />

Next-level path <img src="images/img.jpg" />

Previous level path <img src="../img.jpg" />

Absolute path: a location on your computer or an address on the network

Create html files with vscode

Open VS code, create a new file (Ctrl N), save (Ctrl S) as a ".html" file, enter "!", and press the Tab key Or a newer version can create html files directly

Grammar specifications

The html tag is a keyword surrounded by angle brackets such as <html>, usually appearing in pairs such as <html></html>. The first is the start tag, the second is the end tag, and the end tag has one more backslash "/" than the start tag. There are also a few special cases where it is a single tag, such as <br/>, and there is a "/" closing mark after the keyword.

relationship between tags

Contains (nested)

juxtapose

Basic structure tag (skeleton)

"<html></html>" HTML tag

The largest tag on the page, also known as the "root tag"

"<head></head>" The head of the document

The title tag must be included in the head tag

"<title></title>"The title of the document

"<body></body>" The body of the document

The code written in the notebook can be opened after being saved as html format, and the text "Awesome Plus" in the body will be displayed.

HTML comments and special characters

Note: For programmers to see, not displayed on the page:  Shortcut key: ctrl /

Special characters: Some symbols are difficult or inconvenient to use directly and are replaced with special characters. For example: If you want to display "<p>" on a web page, you need to change it to "< p >". For example, the space is &nbsp

HTML common tags

title tag

There are six levels in total, namely <h1>-<h6> (h is the abbreviation of head) Function: Used as a title, and in descending order of importance, the first level is the most important

<h1>The title tags are all double tags and have an end tag. </h1>

Effect: The text is bolded and enlarged, and it occupies an exclusive line.

paragraph tags

Display text in segments

<p>Paragraph</p> "Paragraph one P"

There is a large gap between segments

Line break label (single label)

force line break

This is the line to be replaced<br/>

Only line spacing, no large intervals

text formatting tag

Bold

italics

strikethrough

Underline

<div> and <span> tags

No semantics, equivalent to a storage box, used to store content

<div> represents a partition, and one row is an exclusive zone</div> <span>Indicates span</span><span>One line can have multiple</span>

image tag

single label

src is a required attribute of <img/> and is used to specify the path and file name of the file.

Other attributes of <img/>

alt

Text displayed when the image cannot be displayed normally

title

The text displayed when the mouse is placed on the image

width/height/border

Set image width/height/border thickness

Format: <img space attribute="attribute value" space attribute="attribute value" ... />Attributes are not in order, and spaces must be added between attributes

hyperlink tag

Jump from current web page to another page

href: URL address used to specify the link target target: used to specify how to open the linked page, where "_self" means opening the current page, and "_blank" means opening in a new window

Link classification

external website

Internal Links: Interlinks between pages within a website

Empty link: herf="#"

Download link: herf="***.zip/doc/exe"

Anchor link: quickly locate a certain location on the web page

Steps: 1. Attribute setting #name is in the form of <a href="#name">His name is</a> 2. Add the id attribute = name to the tag of the target location, such as <h1 id="name">Peppa Pig</h1>

layout

table label

Function: display and display data

basic grammar

<table></table> is used to define tables

<tr></tr> is used to define rows in the table and must be nested in the table tag

<td></td> is used to define cells in the table and must be nested in tr

Header cell label

<th></th>Bold and centered display

Table related properties

align

Alignment

border

Border, default is ""no border

cellpadding

The space between the cell edge and the content, default 1 pixel

cellspacing

Space between cells, default 2 pixels

width/height

table width/height

Table structure tag

Head: <thead>

There must be a <tr> tag inside, usually on the first line

Body: <tbody>

Merge Cells

Way

Merge across rows: rowspan="Number of merged cells"

Merge across columns: colspan="Number of merged cells"

target cell

Across rows: the top cell

Across columns: leftmost

step

Determine the merge method

Find the target cell and write the merge code, such as <td colspan="2"></td>

Delete redundant cells

list tag

Function: layout

unordered list

<ul>Define unordered list, <li>Define list items

Only <li> tags can be placed in <ul>, but other content can be placed in <li> tags

ordered list

<ol>Define an ordered list, <li>Define list items (in a certain order)

custom list

<dl> describes a custom list, <dt> and <dd> are list items, usually one <dt> corresponds to multiple <dd>

form tag

Function: Collect user information

composition

form fields

<form> is used to define form fields. The <form> tag will submit the form elements within the range to the server.

<form action="url address" method="get/post" name="Form field name"> Various form elements </form>

Common properties

Attributes

attribute value

effect

action

url address

URL address used to specify the server that receives and processes data

method

get/post

The way to submit data, its value is get or post

name

Used to specify the name of the form to distinguish multiple form fields on the same page

form elements

input form element

<input type="Attribute value" name="Attribute value" value="Attribute value" /> (single label)

Common attributes of type

button

Define clickable buttons

checkbox

Define checkbox

file

Define input fields and "Browse" button for file upload

hidden

Define hidden input fields

image

Define the submit button for the image

password

Define the password field. Characters are masked

radio

Define radio buttons

reset

Define the reset button. All data in the form will be clear

submit

Define the submit button and send it to the server

text

Defines a single-line input field where the user can enter text, with a default width of 20 characters

name

Define element name

Radio buttons and checkboxes must have the same name value

value

Define element value

checked

Specifies that this input element should be selected when it is first loaded

maxlength

Specifies the maximum length of characters in an input field

select drop-down form element

If selected="selected" is defined in <option>, this option will be selected by default.

textarea text area

<textarea cols="50"(each line can display 50 characters) rows="10"(can display 10 lines)> text content </textarea>

<label> is used to bind a form element