current position：Home>[youth training camp] - HTML learning notes
[youth training camp] - HTML learning notes
2022-01-26 23:58:50 【A chicken with vegetables】
Three elements of web page
If the web page is regarded as a creature ,HTML It forms the skeleton of the web page , Make the web page have the basic structure ;css Forms the skin of a web page , Make web pages no longer boring ; and js Equivalent to various organs of organisms , Control the web page to realize various operations .
HTML brief introduction
html（Hyper Text Markup Language） Hypertext markup language , Markup language for building the basic structure and content of web pages .
Hypertext ： The text contains links to other text .
Markup language ： Combine the text and other information related to the text , Show about document structure .
The development history
- 1989 year —— berners - Li proposed an Internet-based hypertext system
- 1993 year ——IETF( Internet Engineering Task Force ) Release the first TML The proposal , thus HTML The first edition of language was born
- 1994 year ——W3C establish , Then took over HTML Standardization work of
- 1995 year —— After going through several drafts HTML2.0 Release （ This version mainly supplements some basic functions , Including form based file upload 、 form 、 Internationalization and other functions
- 1997 year ——1 Month issued HTML3.2, And then 12 Month issued HTML4.0（ This Many browser specific element types and attributes are used in this release
- 2014 year ——HTML5 As W3C Release of recommended standards
- One HTML The document contains multiple HTML label , Each tag has its own characteristics .
- HTML Elements = The start tag + End tag + Element content Such as ：
<P> I am a p label </p>.
- But some elements are a label Such as
：<img> ;<br>etc. .
- stay HTML Tags in are not case sensitive .
- Elements can be nested in other elements .
- Elements can have attributes , Attributes contain additional information about the element .
Build a simple page based on a few tabs ：
<!DOCTYPE html>: Put it in HTML The front position of the document , After adding it, it will follow W3C Of HTML 5 Standard to parse rendered pages .
<html>: Root element , Contains the contents of the entire page .
<head>: Invisible to users , It contains, for example, keywords for search engines 、 Page description 、 Character encoding declaration 、CSS Patterns, etc .
<body>: This element contains content that can be accessed by the user , Including text 、 Images 、 video 、 game 、 Audio etc. .
head Elements contained in
meta yes html Language head An auxiliary label for the zone , At the head of the document , It doesn't contain anything . The attribute of the tag defines the name associated with the document / It's worth it .
<meta charset='utf-8'> Defines the document character encoding
<meta name="keywords" content="HTML"> keyword , When searching , If there is a keyword of a website in the content you search , Then the engine will push you to this website .
<meta name="description" content="HTML Basics "> Page description , Describe the web page in more detail than the title , When the mouse hovers over the title, it will pop up .
<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0"> It's mainly used in mobile terminal , Defines the area on the device screen where web pages are displayed .
<meta "http-equiv="expires" content="31 Dec 2021"> Used to provide some information to specific websites .
<title>: Title of the page , Displayed on the browser tab .
<style>: css style .
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> Current page favicon
<link rel="stylesheet" href="my- CcSs file.css"> Link to style sheet
<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy"> Replaceable style sheets ( Not all browsers support )
defer Download now , Delay the , Indicates that the script can wait until dom After being fully parsed and displayed, execute , Only valid for external scripts . Yes defer Property will block DOMContentL oaded event , Until the script is loaded and parsed .
async Download script now , No interference with other operations , Such as downloading other resources or loading other scripts , Only valid for external scripts .
body The elements in
- Only occupy the space contained in the border of its corresponding label
- Only text or other inline elements can be accommodated
- You can only change the horizontal margin 、 Change the size by border or row height
- Common inline elements :
<a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>
- Occupy the entire line of its parent element , Always start with something new
- Can accommodate other block elements or inline elements
- Width and height can be controlled 、 Row height 、 Margin 、 Frame, etc. change its size
- Commonly used block level elements
<div>、<p>、 <h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>
In line block level elements
- Elements are arranged in rows , Don't monopolize a line .
- Support setting width, height and vertical margin 、 Frame .
- Common inline elements :
<img>、 <input>、 <td>
The advantages of semantics
- Easy for users to read , When the style is lost, it can make the page present a clear structure .
- advantageous to SEO, The search engine determines the context and the weight of each keyword according to the tag .
- Facilitate analysis of other equipment , For example, blind readers render web pages according to semantics
- Good for development and maintenance , Semantic is more readable , Better code maintenance , And CSS3 A more harmonious relationship .
- Present introductory information
- It usually contains a set of introductory or navigational elements , As the title 、Logo、 Search box 、 Author name, etc
- Can't put
individual <header>Element interior
<header> <h1>html<h1> <img src="https://www.bilibili.com" alt="bilibili"> </header> Copy code
- Provide navigation links in the current document or other documents , Such as menu 、 Catalog 、 Index, etc.
- Used to place some popular links , Infrequently used links are usually placed in footer Bottom in
<nav> <ul> <li><a herf="**">html</a></li> <li><a herf="**">css</a></li> <li><a herf="**">js</a></li> </ul> </nav> Copy code
- Independent documentation 、 page 、 application 、 Site
- An independently distributable or reusable structure , Such as forum posts 、 News articles 、 Blog 、 Comments submitted by users 、 Interactive components, etc
<h1> What's the weather like today? </h1> <article class="user"> <h3> On the first floor </h3> <p> That's good </p> <article class="user"> <h3> On the second floor </h3> <p> That's good </p> <article class="user"> <h3> Third floor </h3> <p> That's good </p> Copy code
- Group content by topic , There is usually a title
<section>It usually appears in the outline of the document
- Don't put the
<section>As Use ordinary containers , For example, for beautifying fragment styles , Use at this time
- If the element is an independent piece of content , You can publish a single , Is more suitable for
- Represents a section that has little to do with the rest of the page , In other words, separate disassembly will not affect the overall content
- Usually on the sidebar , For display advertising 、tips、 References, etc
- Contains content that is independently referenced ： Chart 、 illustrations 、 Code etc.
- There is usually a title
- Description of the icon associated with it 、 title
- Usually located in
<figure>The first or last of
- Block level reference elements
- cite Property represents the of the source url, Long citation
- Used to describe a set of key value pairs
- Usually used for metadata 、 Definition of terms and other scenarios
<cite>Element is usually used to reference the title of the work .
- Including papers 、 file 、 Books 、 References to movies, etc
- Machine readable time and date
- datetime Indicates that this element is off The time and date of the contact , If not specified, the element will not be resolved to date
<address> Contact information of a person or organization
<mark> Use... In references , Indicates that attention needs to be paid to
<code> code snippet
<small> disclaimer 、 Precautions, etc
- src Properties are required , The file path of the embedded picture
- alt Property contains a text description of the image , optional . Screen readers will read these descriptions to users who need to use the reader , Let them know the meaning of the image . When the image cannot be loaded ( Network error 、 When the content is blocked or the link expires ), The browser will display... On the page alt Text in attributes
- decoding Decoding method : asynchronous 、 Sync
- loading Lazy loading
- An element consists of zero or more elements and one Element to display for different / The device scene provides the corresponding image version
- media attribute : Render the corresponding pictures according to the media conditions , Similar to media query
- type attribute : MIME type , Render corresponding pictures according to browser support
- src Properties are required , Embedded video file path
- controls Whether to display the browser's own controls , You can create custom controls
- autoplay Auto play or not
- source Element represents an alternative resource for video ( Different formats 、 clarity , When reading fails or cannot be decoded, you can try in turn )
DOM( Document object model )： Structured representation of nodes , A way is defined to enable the program to access the structure web Linking pages to scripting languages
structure DOM Trees
Pattern calculation , structure CSSOM Trees
take DOM and CSSOM Combine into - - individual Render Trees
author[A chicken with vegetables],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
I don't know how to start this
Matlab simulation of transportation optimization algorithm based on PSO
MySQL slow log optimization
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
Popular Linux distributions for embedded computing
Suzhou computer research
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
Implementation time output and greetings of jQuery instance
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
How to save computer research
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command