HTML学习

最新推荐文章于 2022-10-15 16:49:19 发布

寻你的声响

最新推荐文章于 2022-10-15 16:49:19 发布

阅读量201

点赞数

文章标签： html

本文链接：https://blog.csdn.net/aetlypdlg_ys/article/details/124057863

版权

HTML结构

<title>***</title>:内容出现在标题中

<body>***</body>:内容出现在网页中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    阿尔托莉雅 潘德拉贡
</body>
</html>

HTML文本

换行： ,***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    阿尔托莉雅 潘德拉贡<br/>
    贞德
    <p>摩根</p>
</body>
</html>

为句间换行，为段落换行

标题

<hn></hn>，n为1~6，表示n级标题，大小越来越小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    <h1>FGO</h1>
    <h2>阿尔托莉雅 潘德拉贡</h2>
    <h3>贞德</h3>
    <h4>摩根</h4>
</body>
</html>

分割线：<hr/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    <h1>FGO</h1>
    <hr/>
    <h2>阿尔托莉雅 潘德拉贡</h2>
    <h3>贞德</h3>
    <h4>摩根</h4>
</body>
</html>

注释：

空格： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    <h1>FGO</h1>
    <hr/>
    <h2>阿尔托莉雅 潘德拉贡</h2>
    <h3>贞德&nbsp;&nbsp;&nbsp;233</h3>
    <h4>摩根</h4>
</body>
</html>

转义字符：



  	&#09; //制表符Horizontal tab
  	&#10; // 换行Line feed
  	&#13; // 回车Carriage Return
  	&#32; // Space
!   &#33; // 惊叹号Exclamation mark
”   &#34; &quot; //双引号Quotation mark
# 	&#35; // 数字标志Number sign
$ 	&#36; // 美元标志Dollar sign
% 	&#37; // 百分号Percent sign
& 	&#38; &amp; //Ampersand
‘ 	&#39; // 单引号Apostrophe
( 	&#40; //小括号左边部分Left parenthesis
) 	&#41; //小括号右边部分Right parenthesis
* &#42; //星号Asterisk
+ &#43; //加号Plus sign
, &#44; //逗号Comma
- &#45; //字号Hyphen
. &#46; //句号Period (fullstop)
/ &#47; //斜杠Solidus (slash)
0 &#48; //数字0 Digit 0
1 &#49; //数字1 Digit 1
2 &#50; //数字2 Digit 2
3 &#51; //数字3 Digit 3
4 &#52; //数字4 Digit 4
5 &#53; //数字5 Digit 5
6 &#54; //数字6 Digit 6
7 &#55; //数字7 Digit 7
8 &#56; //数字8 Digit 8
9 &#57; //数字9 Digit 9
: &#58; //冒号Colon
; &#59; //分号Semicolon
< &#60; &lt; //小于号Less than
= &#61; //等于符号Equals sign
> &#62; &gt; //大于号Greater than
? &#63; //问号Question mark
@ &#64; //Commercial at
A &#65; //大写A Capital A
B &#66; //大写B Capital B
C &#67; //大写C Capital C
D &#68; //大写D Capital D
E &#69; //大写E Capital E
F &#70; //大写F Capital F
G &#71; //大写G Capital G
H &#72; //大写H Capital H
I &#73; //大写J Capital I
J &#74; //大写K Capital J
K &#75; //大写L Capital K
L &#76; //大写K Capital L
M &#77; //大写M Capital M
N &#78; //大写N Capital N
O &#79; //大写O Capital O
P &#80; //大写P Capital P
Q &#81; //大写Q Capital Q
R &#82; //大写R Capital R
S &#83; //大写S Capital S
T &#84; //大写T Capital T
U &#85; //大写U Capital U
V &#86; //大写V Capital V
W &#87; //大写W Capital W
X &#88; //大写X Capital X
Y &#89; //大写Y Capital Y
Z &#90; //大写Z Capital Z
[ &#91; //中括号左边部分Left square bracket
\ &#92; //反斜杠Reverse solidus (backslash)
] &#93; //中括号右边部分Right square bracket
^ &#94; //Caret
_ &#95; //下划线Horizontal bar (underscore)
` &#96; //尖重音符Acute accent
a &#97; //小写a Small a
b &#98; //小写b Small b
c &#99; //小写c Small c
d &#100;// 小写d Small d
e &#101;// 小写e Small e
f &#102; //小写f Small f
g &#103; //小写g Small g
h &#104; //小写h Small h
i &#105; //小写i Small i
j &#106; //小写j Small j
k &#107; //小写k Small k
l &#108; //小写l Small l
m &#109; //小写m Small m
n &#110; //小写n Small n
o &#111; //小写o Small o
p &#112; //小写p Small p
q &#113; //小写q Small q
r &#114; //小写r Small r
s &#115; //小写s Small s
t &#116; //小写t Small t
u &#117; //小写u Small u
v &#118; //小写v Small v
w &#119; //小写w Small w
x &#120; //小写x Small x
y &#121; //小写y Small y
z &#122; //小写z Small z
{ &#123; //大括号左边部分Left curly brace
| &#124; //竖线Vertical bar
} &#125; //大括号右边部分Right curly brace
~ &#126; //Tilde
— &#127; //未使用Unused
&#160; &nbsp; //空格Nonbreaking space
? &#161; &iexcl; //Inverted exclamation
￠ &#162; &cent; //货币分标志Cent sign
￡ &#163; &pound; //英镑标志Pound sterling
¤ &#164; &curren; //通用货币标志General currency sign
￥ &#165; &yen; //日元标志Yen sign
| &#166; &brvbar; or &brkbar; //断竖线Broken vertical bar
§ &#167; &sect;// 分节号Section sign
¨ &#168; &uml; or &die; ///变音符号Umlaut
? &#169; &copy; //版权标志Copyright
a &#170; &ordf; //Feminine ordinal
? &#171; &laquo; //Left angle quote, guillemet left
? &#172; &not //Not sign
? &#173; &shy; //Soft hyphen
? &#174; &reg; //注册商标标志Registered trademark
ˉ &#175; &macr; or &hibar; //长音符号Macron accent
° &#176; &deg; //度数标志Degree sign
± &#177; &plusmn; //加或减Plus or minus
2 &#178; &sup2; //上标2 Superscrīpt two
3 &#179; &sup3; //上标3 Superscrīpt three
′ &#180; &acute;// 尖重音符Acute accent
μ &#181; &micro; //Micro sign
? &#182; &para; //Paragraph sign
? &#183; &middot; //Middle dot
? &#184; &cedil; //Cedilla
1 &#185; &sup1; //上标1 Superscrīpt one
o &#186; &ordm; //Masculine ordinal
? &#187; &raquo; //Right angle quote, guillemet right
? &#188; &frac14; //四分之一Fraction one-fourth
? &#189; &frac12; //二分之一Fraction one-half
? &#190; &frac34; //四分之三Fraction three-fourths
? &#191; &iquest; //Inverted question mark
à &#192; &Agrave; //Capital A, grave accent
á &#193; &Aacute; //Capital A, acute accent
? &#194; &Acirc; // Capital A, circumflex
? &#195; &Atilde; //Capital A, tilde
? &#196; &Auml; //Capital A, di?esis / umlaut
? &#197; &Aring; //Capital A, ring
? &#198; &AElig; //Capital AE ligature
? &#199; &Ccedil; //Capital C, cedilla
è &#200; &Egrave; //Capital E, grave accent
é &#201; &Eacute; //Capital E, acute accent
ê &#202; &Ecirc;// Capital E, circumflex
? &#203; &Euml; //Capital E, di?esis / umlaut
ì &#204; &Igrave; //Capital I, grave accent
í &#205; &Iacute; //Capital I, acute accent
? &#206; &Icirc; //Capital I, circumflex
? &#207; &Iuml; //Capital I, di?esis / umlaut
D &#208; &ETH; //Capital Eth, Icelandic
? &#209; &Ntilde; //Capital N, tilde
ò &#210; &Ograve; //Capital O, grave accent
ó &#211; &Oacute; //Capital O, acute accent
? &#212; &Ocirc; //Capital O, circumflex
? &#213; &Otilde; //Capital O, tilde
? &#214; &Ouml; //Capital O, di?esis / umlaut
× &#215; &times; //乘号Multiply sign
? &#216; &Oslash; //Capital O, slash
ù &#217; &Ugrave; //Capital U, grave accent
ú &#218; &Uacute; //Capital U, acute accent
? &#219; &Ucirc; //Capital U, circumflex
ü &#220; &Uuml; //Capital U, di?esis / umlaut
Y &#221; &Yacute; //Capital Y, acute accent
T &#222; &THORN; //Capital Thorn, Icelandic
? &#223; &szlig; //Small sharp s, German sz
à &#224; &agrave; //Small a, grave accent
á &#225; &aacute; //Small a, acute accent
a &#226; &acirc; //Small a, circumflex
? &#227; &atilde; //Small a, tilde
? &#228; &auml; //Small a, di?esis / umlaut
? &#229; &aring; //Small a, ring
? &#230; &aelig; //Small ae ligature
? &#231; &ccedil; //Small c, cedilla
è &#232; &egrave; //Small e, grave accent
é &#233; &eacute; //Small e, acute accent
ê &#234; &ecirc; //Small e, circumflex
? &#235; &euml; //Small e, di?esis / umlaut
ì &#236; &igrave; //Small i, grave accent
í &#237; &iacute; //Small i, acute accent
? &#238; &icirc; //Small i, circumflex
? &#239; &iuml; //Small i, di?esis / umlaut
e &#240; &eth; //Small eth, Icelandic
? &#241; &ntilde; //Small n, tilde
ò &#242; &ograve; //Small o, grave accent
ó &#243; &oacute; //Small o, acute accent
? &#244; &ocirc; //Small o, circumflex
? &#245; &otilde; //Small o, tilde
? &#246; &ouml; //Small o, di?esis / umlaut
÷ &#247; &divide; //除号Division sign
? &#248; &oslash; //Small o, slash
ù &#249; &ugrave; //Small u, grave accent
ú &#250; &uacute; //Small u, acute accent
? &#251; &ucirc; //Small u, circumflex
ü &#252; &uuml; //Small u, di?esis / umlaut
y &#253; &yacute; //Small y, acute accent
t &#254; &thorn; //Small thorn, Icelandic
? &#255; &yuml; //Small y, umlaut

//符号，数学符号和希腊字母 

? &fnof;
Α &Alpha;
Β &Beta;
Γ &Gamma;
Δ &Delta;
Ε &Epsilon;
Ζ &Zeta;
Η &Eta;
Θ &Theta;
Ι &Iota;
Κ &Kappa;
Λ &Lambda;
Μ &Mu;
Ν &Nu;
Ξ &Xi;
Ο &Omicron;
Π &Pi;
Ρ &Rho;
Σ &Sigma;
Τ &Tau;
Υ &Upsilon;
Φ &Phi;
Χ &Chi;
Ψ &Psi;
Ω &Omega;
α &alpha;
β &beta;
γ &gamma;
δ &delta;
ε &epsilon;
ζ &zeta;
η &eta;
θ &theta;
ι &iota;
κ &kappa;
λ &lambda;
μ &mu;
ν &nu;
ξ &xi;
ο &omicron;
π &pi;
ρ &rho;
? &sigmaf;
σ &sigma;
τ &tau;
υ &upsilon;
φ &phi;
χ &chi;
ψ &psi;
ω &omega;
? &thetasym;
? &upsih;
? &piv;
? &bull;
… &hellip;
′ &prime;
″ &Prime;
￣ &oline;
? &frasl;
? &weierp;
? &image;
? &real;
? &trade;
? &alefsym;
← &larr;
↑ &uarr;
→ &rarr;
↓ &darr;
? &harr;
? &crarr;
? &lArr;
? &uArr;
? &rArr;
? &dArr;
? &hArr;
? &forall;
? &part;
?&exist;
?&empty;
? &nabla;
∈ &isin;
? &notin;
? &ni;
∏ &prod;
∑ &sum;
? &minus;
?&lowast;
√ &radic;
∝ &prop;
∞ &infin;
∠ &ang;
∧ &and;
∨ &or;
∩ &cap;
∪ &cup;
∫ &int;
∴ &there4;
～ &sim;
? &cong;
≈ &asymp;
≠ &ne;
≡ &equiv;
≤ &le;
≥ &ge;
? &sub;
? &sup;
? &nsub;
?&sube;
? &supe;
⊕ &oplus;
? &otimes;
⊥ &perp;
? &sdot;
?&lceil;
? &rceil;
? &lfloor;
?&rfloor;
? &lang;
? &rang;
? &loz;
? &spades;
? &clubs;
? &hearts;
? &diams;

//标记显著和国际化字符:  

“ &quot;
& &amp;
< &lt;
> &gt;
? &OElig;
? &oelig;
? &Scaron;
? &scaron;
? &Yuml;
? &circ;
? &tilde;
&ensp;
&emsp;
&thinsp;
? &zwnj;
? &zwj;
? &lrm;
?&rlm;
– &ndash;
— &mdash;
‘ &lsquo;
’ &rsquo;
? &sbquo;
“ &ldquo;
” &rdquo;
? &bdquo;
?&dagger;
? &Dagger;
‰ &permil;
? &lsaquo;
? &rsaquo;
€ &euro;

图片和链接

插入图片：<img src="" alt="" width="px" height="px">

src:图片的路径

alt:图片不能显示，用文字替代

width,height:控制图片大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    <h1>FGO</h1>
    <hr/>
    <h2>阿尔托莉雅 潘德拉贡</h2>
    <h3>贞德&nbsp;&nbsp;&nbsp;233</h3>
    <h4>摩根</h4>
    <img src="images/mx.jpg" alt="玛修" width="600px" height="500px">
</body>
</html>

超链接：<a href=".html"></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿尔托莉雅</title>
</head>
<body>
    <h1>FGO</h1>
    <hr/>
    <h2>阿尔托莉雅 潘德拉贡</h2>
    <h3>贞德&nbsp;&nbsp;&nbsp;233</h3>
    <h4>摩根</h4>
    <a href="玛修.html">玛修</a>
</body>
</html>

点击后

打开新网页：<a href="玛修.html" target="_blank">玛修</a>

寻你的声响

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML结构<title>***</title>:内容出现在标题中<body>***</body>:内容出现在网页中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫