HTML Basic Basics

What is a HTML5 for?
Psd2html
Information
Poor information (asymmetric information)

Two HTML file New process:
Create a new text file
Web page file suffix. html
Modified encoding: ANSI format, UTF-8 no BOM format
=======================
Three HTML5
Narrowly defined: Hypertext Markup Language (5th generation)
Html4-xhtml-html5
Generalized: H5
Structural layer: HTML5
Style layer: CSS3
Behavior Layer: Dom,javascript

=======================

Four HTML tags (elements)

Syntax structure:
< Tag Start property name = "attribute value" > label content </label End >
< Tag Start property name = "attribute value" >
< tags Start >

All the language structures that appear in pairs are entered at the beginning end, and then the content is filled

Five: Commonly used tags (most commonly used tags, basically write out the site's 90% content)

1: Hyperlink: In line
<a href= "http://baidu.com/" > Baidu </a>
<a href= "http://baidu.com/" target= "_blank" > New window open </a>
<a href= "AAA" >aaa folder </a>
<a href= "bbb.html" >bbb file </a>
<a href= "Aaa/ccc.rar" >aaa folder of CCC, download </a>
<a href= "# # #" > Click to Not Move </a>

2: Picture, in line
in the same directory, abbreviated
in the same directory, full name

* * * subordinate directory, commonly used

Superior Directory
First Superior, then subordinate directory

root directory

3: line break: Inline
<br>

4: Universal block-level container, block-level
<div> General-purpose block-level containers </div>

5: Universal inline container, inline
<span> Universal Line Content device </span>

6: Title

7: Paragraph
<p> paragraphs </p>

8: Unordered list
<ul>
<li> unordered list 1</li>
<li> unordered list 2</li>
<li> unordered list 3</li>
</ul>

9: Notes
<!--
This is a comment
-
Annotations cannot be nested

Complete a Web page with the minimum required tags:

<a href= "# #" >baidu</a>

<div> block-level containers </div>
<span> Line Content Device </span>

<p> paragraphs </p>
<ul>
<li> unordered list 1</li>
<li> unordered list 2</li>
<li> unordered list 3</li>
</ul>

-------------------------------------
Six traditional categories of HTML elements:
Block-level elements: Div,h1,p,ul,li
General: Multiple block-level elements or block-level and inline elements are wrapped in a line
inline (inline) elements
Multiple inline elements, no wrapping
A,img,br,span

can also be divided into:
Semantic Tags: a,img,h1,p,ul,li
Non-semantic Tags: br,div,span

Seven page structure analysis:
Web page is a three-dimensional structure
tags nested within code to represent hierarchies

The semantics of eight HTML:
Basic requirements: The basic structure of HTML code should be correct
Advanced requirements: Try to make the semantic tags, not find the semantics of tags and then use non-semantic tags
What labels are used for Web pages
To see what this HTML module really is.
Instead of looking at what this module looks like

HTML Writing
Ideal state: 100% to pursue the semantic nature of Web pages
Reality: The semantic degree of Web pages is limited by cost and cannot pursue infinite semantics
In the case of basic semantic implementation, choose the least fast

Nine HTML semantics and efficiency to achieve balance:
Example: Website logo
Efficiency:
<a href= "# # #" ></a>
Semantic nature:
Css:
H1 width and height
Logo as a background image
TEXT-INDENT:-9999PX Indent

------------------------------------
Ten common HTML properties: Hooks for HTML ELEMENT nodes
Id:id Name
Class: Category name
Same: All used to identify elements
Different:
ID Name, value is unique
In the same page, the ID of the same name can only have 1
An ID name that can only have 1 values
Class name, value not unique
In the same page, a class of the same name can have multiple
A class name that can have multiple values, separated by spaces
Note: ID and class naming conventions:
1: Cannot start with a number
2: Naming as semantically as possible
3: Generally speaking: Overall block module General with ID, small block with class

<div id= "A1" >11111111</div>
<div class= "B2 cc D3" >2222222</div>
<H2 class= "B2" >333333----------------------------------------
11 About label Nesting:
Block-level elements can be nested inside other block-level elements and inline elements
Inside inline elements can only nest inside other inline elements
Exception: The P tag is block-level, but the P tag can only nest inline elements, for example

<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br>

HTML Basic Basics