Article catalog
1. Label introduction in < head > < / head >
2. Label introduction in < body > < / body >
preface
In the summer vacation of 2021, I plan to teach myself the knowledge of web front-end to strengthen my skills. Through consulting relevant materials, I learned that HTML, CSS and JavaScript are the most basic and core skills that need to be mastered in front-end development. Therefore, in order to achieve my goals, I learned these three skills by myself. However, considering that I am a beginner, I still have many deficiencies in understanding the specific content. Therefore, this article is intended to summarize what I learned during the holiday, Deficiencies or mistakes will be corrected in the future.
Tip: the following is the main content of this article. The following cases can be used for reference
1, What is HTML?
HTML refers to Hypertext markup language (Hyper Text Markup Language) is the most commonly used language in our web pages. If front-end development is compared to building a house, html is the brick and tile needed by the house. All websites are built on HTML, so it will be the first step in our front-end learning.
The process of learning html is also the process of constantly understanding HTML tags. Tags are the basic unit of HTML, which are divided into paired tags and single tags. We can simply think of labels as the process of selecting different bricks and tiles in the process of building a house. Choosing different tags in different parts of the web page will produce different effects. Choosing the right label can make us get twice the result with half the effort.
format <Tag name property name 1=""，Property name 2=""></Tag name>
2, HTML tags
When we use pycharm to create an html file, we will automatically generate some code, which is the most basic part of the html file. The whole body is mainly composed of < head > < / head > header tag and < body > < / body > tag.
This article lists the functions of some commonly used labels. For details, you can refer to relevant documents.
<!DOCTYPE html> //Indicates the file type
<html lang="en">
<head>
<meta charset="UTF-8"> //Indicates the character type, generally UTF-8
<title>Title</title>
</head>
<body>
</body>
</html>1. Introduction to common tags in < head > < / head >
1,<head lang="en">
lang by language The main language of the property declaration on the page, en In English, zh-cn Express Chinese
2,<title></title>Page title label
3,<meta charset="">Set character
<meta http-equiv="refresh" content="Time, jump to your website">Refresh and jump to the target URL
<meta name="keywords" content="">Keywords (easy for crawlers to crawl)
<meta name="description" content="">Description, description of the page
4,<link rel="relationship" type="type" href="address"/>Defines the connection between two documents
5,<style>
Load here css
</style>set up p Content styles in labels
6,<script>
Write here javascript code
</script>Pop up prompt2. Label introduction in < body > < / body >
1,<p></p>Labels: paragraph labels,One line apart from the up and down text.
align Property controls content orientation left,center,right
title attribute
2,<b></b>Labels: bold definitions,Physical marking
3,<strong></strong>Label: bold definition, logical marking (emphasis)
4,<i></i>Labels: italic
5,<em></em>Label: italic, accent
6,<br/>Labels: wrapping
7,<hr/>Labels: horizontal line labels
width Attributes: width
align Attributes: positional alignment
color Attributes: color
size Attributes: size
8,<u></u>Labels: underlined labels
9,<del></del>Labels: delete line labels
Understand that it is no longer used:<font></font>Labels: font labels
10,<h1></h1>Labels: Title labels (h1-h6)
11,<bdo></bdo>Labels: overwriting the original text direction
dir Attributes: text orientation
12,<sub></sub>Labels: Subscripts
13,<sup></sup>Labels: superscript
14,<details></details>label:Detailed information expansion
15,<summary></summary>Labels: and details Use together to change the detail name
16,<dialog></dialog>Labels: dialog window labels
open attribute open=True
17,<figure></figure>Labels: packaging combinations
18,<pre></pre>Labels: raw format output
19,<mark></mark>Labels: tag text
20,<small></small>Labels: small font labels3. Semantic label
1,<span></span>Row label 2,<div></div>Block label 3,<header></header>Web page header 4,<footer></footer>Bottom of page 5,<nav></nav>Webpage navigation 6,<aside></aside>sidebar 7,<section></section>Define a block 8,<article></article>Define article block 9,<address></address>Define an address
4. List label
1,<ul></ul>Define unordered lists (and<li>Tags (used together)
2,<ol></ol>Defined sequence table (and<li>Tags (used together)
start = ""Attribute start sequence number
type = "" Sequence number attribute
reverse = "reverse"Reverse sequence of serial number
3,<li></li>List properties
4,<dl></dl>Define a definition list
5,<dt></dt>Define a list item
6,<dd></dd>Defines the description of the item in the list5. Hyperlink label
<a></a>
1,href Property jump URL, must add protocol
2,target Property to set the opening method
_blank New window
_self current window
Anchor application
3,id attribute
When href="#ID "jump to this < a id =" ">
catalog:
./current directory
../Upper level directory
Hyperlinks can pass parameters6. Multimedia Tags
Multimedia Tags
1,<progress></progress>Progress bar label
min,max Min max
value Current value
2,<meter></meter>Define metrics in scope
min,max Min max
value Current value
low,high,optimum Demarcation
3,<img/>Define image
src Image path
width,height Width and height
alt Replace the text message when the picture fails to load
title Put the tips on the picture
ismap Property to display picture coordinates
usemap Attributes, image mapping and<map></map>Tagged name Property.
4,<map></map>Labels: defining client image mappings
5,<area />Define image mapping area
shape Define area shape
coodrs Defines the coordinate value of the area
href Click area to jump to position
target Open mode
6,<audio></audio>audio frequency
controls
src
loop Loop Playback
preload Advance loading
7,<video></video>video
controls
src
poster title
loop Loop Playback
preload Advance loading
8,<embed />Load multimedia
9,<source />Define media resources7. Table label
1,<table></table>
boder frame
align position
widen, height Width and height
cellspacing Border distance
cellpadding Distance between text and border
bordercolor Border color
background Background map
2,<caption></caption>Title Line
3,<tr></tr>that 's ok
4,<td></td>column
rowspan enjambment
colspan Cross column
height high widen wide(Cell td)
valign Up and down alignment
align Left right alignment
bgcolor Background color
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
5,<th></th>Center bold8. Form label
1,<form></form>Create form label
Input type, button type, click type
action Attribute: user input content transfer location
method Properties: post All information related to users is not displayed, and there is a lot of information, get Display information, less information
2,<input></input>
type Represents how the input field is displayed:
text text password password submit click
radio Single choice(name The same value can be controlled value Value to ensure single selection, checked Property is selected by default to ensure that the whole can be selected and used<label>Encapsulate)
checked Multiple choice(name Post addition[]Represent a group)
file file
reset The reset button returns to the original state
hidden Hide transmission
image
button
New form type
date date
time time
week week
month month
datetime-local Full date
url domain name
nunmber Digital range min max
range Scope Verification
search search form
email Mailbox form
color Color selection
tel Phone form
name Form item name
value Form item defaults
readonly read-only
disabled Disable
autofocus Get cursor automatically
placeholder Default display
required The user must assign a value
multiple Select multiple files at the same time (file)
Multiple selections must be in name Back plus[]
pattern[regular] Specify the characters entered
as[a-z]Can only be a reach z One of, case sensitive
step Set skip interval, which is mostly used in numerical form
novalidate Cancel form validation, in form In label
formaction Used to modify the submission page of the current form in the submit button url
formmethod Used to modify the submission method of the current form in the submit button get post
formenctype It is used to modify the submitted data code type of the current form in the submit button (generally not used, used when uploading files)
formnovalidate Used to cancel the validation of the current form in the submit button
tableindex tab Key toggle index properties(Subsequent write access order)
3,<label</label>
1) label Add one to the label for Properties, in input Riga id Property, and the two properties are associated.
2) Write directly together
4,<textarea></textarea>Multiline text data
rows Number of rows
clos Number of columns
5,<select></select>Drop down list
Name to get information name=""
When option have value Value acquisition value Value, otherwise get content
6,<option></option>Drop down options
selected Property is selected by default
7,<optgroup></optgroup>classification
need label Attribute definition group name
8,<fieldset></fieldset>Form classification
use<legend></legend>Named group name
9,<datalist></datalist>Define optional data list
definition id,stay input In label list relation9. Frame label
1,<iframe></iframe>Open a space in the page to link sub pages
src Child link address
widen broadband
height height
2,<frameset></frameset>representative body Label the frame page and define how many rows or columns the frame page will be divided into
cols Defines the number of columns in the frame page and the size of the columns by column
rows Define the number of frame page rows and the size of rows by row
3,<frame/>definition frameset The content of each frame page in the label
src Define content address
name Define a name for each frame page
Note:<frameset>You need a few pieces<franm/>