HTML and CSS design 01 — HTML framework and Tags

Time:2021-6-21

HTML frames and Tags


1、 Framework
1. Set website Icon
< link rel = "shortcut icon" a
2. Set the keywords and description of the website
< meta name = "Keywords" content = "Keywords" >
< meta name = "description" content = "description content" >
3. Writing scripts
<script>
.....
</script>
4. Writing style
<style>
...
</style>
or
< link rel = "stylesheet" a
2、 Label
1. Layout label
<div>
...
</div>
2. Wrap label
<br />
3. Display horizontal line label
<hr>
4. Link label
< a = "jump URL" > jump prompt</a>
< a = "jump to URL" target = "_ Blank "> jump prompt < / a > (add a page)
< a = "jump to URL" target = "_ Self "> jump prompt < / a > (open another page on the basis of the original page)
5. Picture display
<img>
6. List

UL / OL: disorder / order

ul>li{li$}*3  :
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>

effect:
HTML and CSS design 01 -- HTML framework and Tags

ol>li{li$}*3  :
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>

effect:
HTML and CSS design 01 -- HTML framework and Tags

3、 Text formatting label
1. Bold and emphasis (line level label, not exclusive)
<b>< / b >: Bold
< strong > < / strong >: bold and emphasis (easy to extract keywords when using SEO)
2. Tilt and emphasis
<i> < / I >: tilt
<em>< / EM >: tilt and emphasis
3. Reduce the number one and increase the number one (line level label, not exclusive to one line)
< small > < / small >: reduce size one
< big > < / big >: big one (eliminated in HTML5, less used)
4. Set superscript and subscript
X < sub > 1 < / sub >: subscript
X < sup > 1 < / sup >: superscript

effect:
HTML and CSS design 01 -- HTML framework and Tags

5. Short text reference
<q></q>
6. Address information
<address></address>
4、 Entity escape character

HTML and CSS design 01 -- HTML framework and Tags

5、 Block level and row level elements

Block level elements:= display:block
Monopolize a line
Can contain block level and row level elements

Line level element: = display: inline
Not exclusive
Can only contain row level elements

<p   dispaly:inline >< / P >: block level to row level
<span   dispaly:block >< / span >: line level to block level

Recommended Today

Hot! Front and rear learning routes of GitHub target 144K

Hello, Sifu’s little friend. I’m silent Wang Er. Last week, while appreciating teacher Ruan Yifeng’s science and technology weekly, I found a powerful learning route, which has been marked with 144K on GitHub. It’s very popular. It covers not only the front-end and back-end learning routes, but also the operation and maintenance learning routes. As […]