pre { white-space: pre !important; overflow-y: scroll !important; height: 30vh !important }

HTML零基础，快速学习／复习

还没有写完哈，后续持续更新,喜欢就加一个关注哈！

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

代码实例 <--可以直接打开

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>标题</title>
</head>
<body>
这里是文档的主体 
这里是文档的主体 
这里是文档的主体 
这里是文档的主体 
这里是文档的主体

</body>
</html>

HTML规范

<!DOCTYPE HTML>
写在<html>前，定义文档类型，大小写均可。

html标签

<html></html>
其作用是告知浏览器其自身是一个 HTML 文档。

Head标签

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

页面编码

Title标签

<title></title>
通常放在浏览器窗口的标题栏或状态栏上

Body标签：

<body></body>
定义文档的主体，我们所敲得代码主要在这里面

注释

换行

用于换行

特殊字符

符号代码
具体符号

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

代码实例 <--可以直接打开

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

段落标签

可以利用align来对段落进行左中右对齐。align的值为left, center, right, justify
其中justify是对行进行伸展，这样每行都可以有相等的长度
代码实例 <--可以直接打开

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

<body>
这是一个最基本的段落
这是一个左对齐的段落
这是一个右对齐的段落
这是一个居中的段落
<center>这是一个用<center>居中的段落</center>
每行都可以有相等的长度

</body>
</html>

标题

标题一共有6级，分别为<h1>~<h6>
从一级至六级，字体依次减小
例：
代码实例 <--可以直接打开

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

<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<!-zhi-->
 
</body>
</html>

文本格式

代码
含义

<strong>	粗体
<em>	斜体
<sup>	字的上标
<sub>	字的下标

例：
代码实例 <--可以直接打开

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>字体</title>
</head>

有序列表

<ul><li></li></ul>
type= disc/circle/square

属性值
含义

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

无序列表

<ol><li></li></ol>
Type=1/a/A/i/I

代码实例 <--这个链接的格式没有正常编译，应该是因为markdown不兼容，代码并没有错！！！

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>视频</title>
</head>

<body>
<ul type=\"circle\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ul type=\"disc\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ul type=\"square\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ol type=\"1\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type=\"a\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type=\"A\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type=\"i\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type=\"I\">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
</body>
</html>

超链接

超链接可以是一个字，一个词，或者一组词，一幅图，通过点击这些内容来跳转到指定的界面，当鼠标移动到超链接上时，箭头会变为一只小手

<a href=”URL”>到达指定网址</a>
<a href=”tel:电话号码”>拨打指定电话</a>
<a href=\"sms: 电话号码\">发送短信到指定号码</a>
<a href = \"mailto:邮件地址\">向指定邮箱发送电子邮件</a>
<a href = \"ftp://服务器IP地址或域名\">访问指定服务器</a>
<a href = \"telnet://服务器IP地址或域名\">访问指定服务器</a>

代码实例 <--可以直接打开

<!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>

锚点

<a href=\"#所取名字\"> </a> #号不能省略！
<a name=\"所取名字\"> </a>

代码实例 <--可以直接打开

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>锚点</title>
</head>

点击以下按钮，直达歌词目录
<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

图像

<img />
<img src=\"相对路径/绝对路径/网址\" width=\"数字\" height=\"数字\" alt=\"备注\" />
例：
代码实例 <--可以直接打开

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>图片</title>
</head>

<h3>Ladygaga</h3>
<img src=\"https://inews.gtimg.com/newsapp_bt/0/13799345350/1000\" alt=\"ladygaga\" />
<h3>世界上第二帅的头像</h3>
<img src=\"https://pic.cnblogs.com/avatar/2332945/20210908171548.png\" width=\"1000\" height=\"1000\" alt=\"我的头像\" />

</body>
</html>

视频：

<video src=\"路径\" autoplay controls loop ></video>
代码实例 <--本地视频无法播放，在线视频自动播放，注意关闭声音

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>视频</title>
</head>

<body>
<center>
<h3>本地视频</h3>
<video src=\"C:\\Users\\yupeng\\Videos\\0.mkv\" autoplay controls loop >您的浏览器不支持</video>



<h3>在线视频</h3>
<video src=\"https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4\" autoplay controls loop >您的浏览器不支持</video>

</center>
</body>
</html>

图片进阶——热区的设置

目的：点击图像的不同位置，跳转至不同的界面
原理：坐标（以图片的右上角为坐标原点，向右为x轴，向下y轴，单位为像素，可以用ps测量）
shape=react/circle/poly/

属性
含义

circle	圆形(需要圆心的横坐标，纵坐标和圆的半径)
react	矩形(需要对角顶点的横坐标，纵坐标)
poly	多边形(可以有任意多个顶点，依次输入每个顶点的横纵坐标即可)

下面这个是原图，感兴趣可以自己试一下

代码实例 <--可以直接打开，但是markdown不兼容！
代码实例 <--github的链接，可以正常使用，注意点击蓝色阴影部分的区域

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"utf-8\">
<title>图像进阶</title>
</head>

来源：https://www.cnblogs.com/yphnb/p/15249482.html
图文来源于网络，如有侵权请联系删除。

HTML零基础，快速学习／复习

HTML零基础，快速学习／复习

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

HTML规范

html标签

Head标签

页面编码

Title标签

Body标签：

注释

换行

特殊字符

段落标签

标题

文本格式

有序列表

无序列表

超链接

锚点

相对路径

绝对路径

图像

视频：

图片进阶——热区的设置

相关推荐

热门文章