HTML一小时入门，半天掌握

还没有写完，后续持续更新

首先来熟悉一下html的基本结构

<!DOCTYPE HTML> 
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
这里是文档的主体
<!--这是一行注释，注释不会在浏览器中显示！-->
</body>
</html>

写在前，定义文档类型，大小写均可。

html标签：其作用是告知浏览器其自身是一个 HTML 文档。

Head标签：其作用是定义关于文档的信息。其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息

页面编码
常用的编码格式有utf-8和gb2312（中文）, 在标签内定义
其目的是告知浏览器此页面属于什么字符编码格式

Title标签：通常放在浏览器窗口的标题栏或状态栏上

Body标签：定义文档的主体，我们所敲得代码主要在这里面

注释
例：

<!--这是一行注释-->

用于换行

特殊字符
> 大于号 (>)
< 小于号 (<)
” 引号 (“)
“ 左引号 (“)
” 右引号 (“)
® 注册商标(®)
™ 注册商标(™)
® 版权(©)
& and（&）
— 破折线（—）
– 短破折线（–）
£ 英镑（£）
€ 欧元（€）
¥ 日元（¥）
占位符，表示1个空格，直接敲空格无论连续敲多少个，都只显示一个空格，用敲几次就有几个空格

例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊符号</title>
</head>

<body>
<p>大于号&gt;</p>
<p>小于号&lt;</p>
<p>引号&quot;</p>
<p>左引号&8220;</p>
<p>右引号&8221;</p>
<p>版权&reg;</p>
<p>注册商标&8482;</p>
<p>and&amp;</p>
<p>破折线—</p>
<p>短破折线–</p>
<p>英镑&pound;</p>
<p>欧元€</p>
<p>日元&yen;</p>
<p>十个个空格          直接敲得</p>
<p>十个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用占位符表示</p>
</body>
</html>

段落标签
可以利用align来对段落进行左中右对齐。align的值为left, center, right, justify
其中justify是对行进行伸展，这样每行都可以有相等的长度

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落</title>
</head>

<body>
<P>这是一个最基本的段落</p>
<P align="left">这是一个左对齐的段落</p>
<P align="right">这是一个右对齐的段落</p>
<P align="center">这是一个居中的段落</p>
<center><P>这是一个用&lt;center&gt;居中的段落</p></center>
<P align="justify">每行都可以有相等的长度</p>
<!--感觉justify好像没有什么用，那位大佬可以指点一下-->
</body>
</html>

标题。

标题一共有6级，分别为

~

.
从一级至六级，字体依次减小
例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>

<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!-zhi-->
<p>&nbsp;</p>
</body>
</html>

文本格式

粗体
斜体
^{字的上标
_{字的下标

例：}}

<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 正常 粗体 斜体 x2 x1 </body> </html>

有序列表

type= disc/circle/square
disc 实心圆点
circle 为空心圆
square 正方形

无序列表

Type=1/a/A/i/I
例：
“`

视频

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

pubg

Ring of Elysium

Cyberpunk 2077

lol

gta

“`

超链接

超链接可以是一个字，一个词，或者一组词，一幅图，通过点击这些内容来跳转到指定的界面，当鼠标移动到超链接上时，箭头会变为一只小手
到达指定网址
 拨打指定电话
 发送短信到指定号码
 向指定邮箱发送电子邮件
 访问指定服务器
 访问指定服务器
例：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>超链接</title> </head> <body> <a href="https://www.cnblogs.com/yphnb/">欢迎访问我的博客</a> <a href="https://www.cnblogs.com/yphnb/" target="_blank">欢迎访问我的博客</a>  <a href="tel:110">报警电话</a> <a href="sms: 110">发送短信到指定号码</a>  <a href = "mailto:yupengsmail@gmail.com">给我发电子邮件</a> <a href = "ftp://服务器IP地址或域名">访问指定服务器</a> <a href = "telnet://服务器IP地址或域名">访问指定服务器</a> <!-zhi-->   </body> </html>

锚点

#号不能省略！

例：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>锚点</title> </head> <body> <center> 点击以下按钮，直达歌词目录 <a href="#maodian0">My Heart Will Go On</a>  <a href="#maodian1">Bohemian Rhapsody</a> <a href="#maodian2">Call Me Maybe</a> <a name="maodian0"><h3>My Heart Will Go On</h3></a>  Every night in my dreams I see you I feel you That is how I know you go on Far across the distance And spaces between us. You have come to show you go on Near far, wherever you are I believe that the heart does go on Once more, you open the door, And you're here in my heart. And my heart will go on and on Love can touch us one time. And last for a lifetime And never let go till we're gone, Love was when I loved you One true time I hold to. In my life we'll always go on. Near far, wherever you are I believe that the heart does go on Once more, you open the door, And you're here in my heart, And my heart will go on and on You're here, You're here, there's nothing I fear. And I know that my heart will go on we'll stay forever this way. You are safe in my heart, and my heart will go on and on     <a name="maodian1"><h3>Bohemian Rhapsody </h3></a> Is this the real life Is this just fantasy Caught in a landslide No escape from reality Open your eyes, look up to the skies and see I'm just a poor boy, (oooh, poor boy) I need no sympathy Because I'm easy come, easy go Little high, little low Anyway the wind blows, doesn't really matter to me To me Mama, just killed a man Put a gun against his head Pulled my trigger now he's dead Mama, life had just begun But now I've gone and thrown it all away Mama, oooh, ooh, ooh, ooh Didn't mean to make you cry If I'm not back again this time tomorrow Carry on, carry on, as if nothing really matters Too late, my time has come Sends shivers down my spine Body's aching all the time Goodbye everybody, I've got to go Gotta leave you all behind and face the truth Mama, oooh, ooh, ooh, ooh (Anyway the wind blows) I don't wanna die I sometimes wish I'd never been born at all I see a little silhouetto of a man Scaramouche, Scaramouche will you do the fandango? Thunderbolts and lightning Very, very frightening me Galileo, galileo Galileo, galileo Galileo, figaro Magnifico-o-o-o-oh I'm just a poor boy, nobody loves me He's just a poor boy from a poor family Spare him his life from this monstrosity Easy come, easy go, will you let me go Bismillah! No, we will not let you go, let him go Bismillah! We will not let you go, let him go Bismillah! We will not let you go, let me go Will not let you go, let me go Never, never, never, never let me go-o-o-o-oh (Never let you go) No, no, no, no, no, no, no Oh, mama mia, mama mia Mama mia let me go Beelzebub has a devil put aside for me, for me, for me So you think you can stone me and spit in my eye? So you think you can love me and leave me to die? Oh, baby, can't do this to me baby Just gotta get out, just gotta get right outta here Ooooh, ooooh, ooooh Oooh yeah, oooh yeah Nothing really matters Anyone can see Nothing really matters Nothing really matters to me Anyway the wind blows Producers : Roy Thomas Baker / Queen Lead & Backing Vocals : Freddie Mercury Piano : Freddie Mercury Electric Guitar : Brian May Bass Guitar : John Deacon Drums, Timpani & Gong : Roger Taylor Operatic Vocals : Freddie Mercury (Middle Register) / Brian May (Low Register) / Roger Taylor (High Register) Recorded at Rockfield Studio, Roundhouse, Sarm East Studios, Scorpio Sound, and Wessex Sound Studios   <a name="maodian2"><h3>Call Me Maybe</h3></a> I threw a wish in the well, Don't ask me, I'll never tell I looked to you as it fell, and now you're in my way I trade my soul for a wish, pennies and dimes for a kiss I wasn't looking for this, but now you're in my way Your stare was holdin', Ripped jeans, skin was showin' Hot not, wind was blowin' Where you think you're going, baby? Hey, I just met you, and this is crazy, but here's my number, so call me, maybe? It's hard to look right, at you baaaabeh, but here's my number, so call me, maybe? Hey, I just met you, and this is crazy, but here's my number, so call me, maybe? And all the other boys, try to chaaase me, but here's my number, so call me, maybe? You took your time with the call, I took no time with the fall You gave me nothing at all, but still, you're in my way I beg, and borrow and steal Have foresight and it's real I didn't know I would feel it, but it's in my way Your stare was holdin', Ripped jeans, skin was showin' Hot not, wind was blowin' Where you think you're going, baby? Hey, I just met you, and this is crazy, but here's my number, so call me, maybe? It's hard to look right, at you baaaabeh, but here's my number, so call me, maybe? Hey, I just met you, and this is crazy, but here's my number, so call me, maybe? And all the other boys, try to chaaase me, but here's my number, so call me, maybe? Before you came into my life I missed you so bad I missed you so bad I missed you so, so bad Before you came into my life I missed you so bad And you should know that I missed you so, so bad It's hard to look right, at you baaaabeh, but here's my number, so call me, maybe? Hey, I just met you, and this is crazy, but here's my number, so call me, maybe? And all the other boys, try to chaaase me, but here's my number, so call me, maybe? Before you came into my life I missed you so bad I missed you so bad I missed you so so bad Before you came into my life I missed you so bad And you should know that So call me, maybe?     </center> </body> </html>

相对路径

./ 当前html文件所在目录

../ 回到html文件所在目录的上一层目录

muluming/ 进入到html文件所在目录的同级目录muluming

../muluming/ 进入到html文件所在目录的上一层的目录下的muluming

绝对路径

C:\Users\yupeng\Desktop

图像

例：
“`

图片

Ladygaga

世界上第二帅的头像

####视频： <video src="路径" autoplay controls loop ></video>

<!doctype html>

视频

本地视频

在线视频

“`

本文链接：https://www.cnblogs.com/yphnb/p/15244831.html

HTML一小时入门，半天掌握

还没有写完，后续持续更新

首先来熟悉一下html的基本结构

标题。

~

.
从一级至六级，字体依次减小
例：

文本格式

有序列表

无序列表

超链接

锚点

相对路径

绝对路径

图像

Ladygaga

世界上第二帅的头像

本地视频

在线视频