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

首先来熟悉一下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>
<p>
正常<br/>
<strong>粗体</strong><br/>
<em>斜体</em><br/>
x<sup>2</sup><br/>
x<sub>1</sub>
</p>
</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
  1. pubg
  2. Ring of Elysium
  3. Cyberpunk 2077
  4. lol
  5. gta
  1. pubg
  2. Ring of Elysium
  3. Cyberpunk 2077
  4. lol
  5. gta
  1. pubg
  2. Ring of Elysium
  3. Cyberpunk 2077
  4. lol
  5. gta
  1. pubg
  2. Ring of Elysium
  3. Cyberpunk 2077
  4. lol
  5. gta
  1. pubg
  2. Ring of Elysium
  3. Cyberpunk 2077
  4. lol
  5. gta

```

超链接

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

到达指定网址

拨打指定电话

发送短信到指定号码

向指定邮箱发送电子邮件

访问指定服务器

访问指定服务器

例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head> <body>
<p>
<a href="https://www.cnblogs.com/yphnb/">欢迎访问我的博客</a><br/>
<a href="https://www.cnblogs.com/yphnb/" target="_blank">欢迎访问我的博客</a><br/>
<!-- target="_blank"表示在新的窗口打开这个链接-->
<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>
</p>
<!-zhi-->
<p>&nbsp;</p>
</body>
</html>

锚点

#号不能省略!



例:

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

相对路径

./ 当前html文件所在目录

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

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

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

绝对路径

C:\Users\yupeng\Desktop

图像


例:
```

图片

Ladygaga

世界上第二帅的头像



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

<!doctype html>

视频

本地视频

您的浏览器不支持

在线视频

您的浏览器不支持

```

HTML一小时入门,半天掌握的更多相关文章

  1. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  2. 《Qt Quick 4小时入门》学习笔记3

    http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...

  3. 《Qt Quick 4小时入门》学习笔记2

    http://edu.csdn.net/course/detail/1042/14805?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍   1. ...

  4. 《Qt Quick 4小时入门》学习笔记

    http://edu.csdn.net/course/detail/1042/14804?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽   QML中 ...

  5. 一小时入门PHP

    [版权申明:本文系作者原创,转载请注明出处] 文章出处:[http://blog.csdn.net/sdksdk0/article/details/52332296](http://blog.csdn ...

  6. 一小时入门 Python

    因为需求, 需要用到py, 所以来学学py, 因为有java基础 一小时入门py语法是不成问题的, 但是仅仅入门基础语法而已, 不涉及算法,不涉及大数据,机器学习,人工智能, 但是py这么火爆,就在于 ...

  7. iOS 开发-- Runtime 1小时入门教程

    1小时让你知道什么是Objective-C Runtime,并对它有一定的基本了解,可以在开发过程中运用自如. 三.Objective-C Runtime到底是什么东西? 简而言之,Objective ...

  8. mongodb 两小时入门

    传统的计算机应用大多使用关系型数据库来存储数据,比如大家可能熟悉的MySql, Sqlite等等,它的特点是数据以表格(table)的形式储存起来的.数据库由一张张排列整齐的表格构成,就好像一个Exc ...

  9. Esper复杂事务处理一小时入门

    来自小韩 什么是Esper 想要认识Esper,先要了解CEP(Complex Event Processing),到处都有,并且各方理解也有偏差,我就不赘述了. Esper就是CEP的一个java的 ...

随机推荐

  1. CAS 原理 应用

    原子CAS操作 原子操作指令里,有原子加,原子减,cas到底是什么呢? 首先看一段代码, bool compare_and_swap(int *accum, int *dest, int newval ...

  2. 大数据学习(02)——HDFS入门

    Hadoop模块 提到大数据,Hadoop是一个绕不开的话题,我们来看看Hadoop本身包含哪些模块. Common是基础模块,这个是必须用的.剩下常用的就是HDFS和YARN. MapReduce现 ...

  3. anyRTC SDK 5月迭代:优化自定义加密功能,让通信更安全

    anyRTC SDK 5月上新,新增多种加密类型,让实时音视频通信更安全:新增移动端推流支持1080P分辨率的支持:此外还对事件上报.日志详情.数据统计.网络传输等多项功能进行了优化改进. 以下为更新 ...

  4. ;~ 小部分AutoHotkey脚本源代码测试模板样板.ahk

    ; ;~ 小部分AutoHotkey脚本源代码测试模板样板.ahk ;~ 请把一行或几行少量代码放到此文件中实际测试一下,;~ 看看测试结果如何,等到能够实现代码功能时再复制到自己的脚本代码文件中;~ ...

  5. DC-7 靶机渗透测试

    DC-7 渗透测试 冲冲冲,好好学习 .对管道符的理解加深了好多.最后提权时,遇到了点麻烦.想不懂一条命令为啥能执行生效,耗了一整天才算解决掉. 操作机:kali 172.66.66.129 靶机:D ...

  6. AJAX的学习与使用>前端技术系列

    目录 AJAX的学习与使用 什么是AJAX 为什么要使用AJAX AJAX接收服务器响应数据的3种格式 文本格式(重要) JSON格式(重要) 服务器端响应实体类JSON格式的3种方式 修改实体类的t ...

  7. URI 未注册(设置 | 语言和框架 | 架构和 DTD)

    创建xml文件导入资源出错 解决方法:点击左边的小红灯,选择获取外部资源,加载资源即可

  8. DASCTF七月赛两道Web题复现

    Ezfileinclude(目录穿越) 拿到http://183.129.189.60:10012/image.php?t=1596121010&f=Z3F5LmpwZw== t是时间,可以利 ...

  9. java常见面试题总结2

    JAVA必背面试题和项目面试通关要点 简单来讲,equals方法主要是用来判断从表面上看或者从内容上看,2个对象是不是相等. 一 数据库 1.常问数据库查询.修改(SQL查询包含筛选查询.聚合查询和链 ...

  10. 我的第一个开源项目 Kiwis2 Mockserver

    我的第一个开源作品Kiwis2 Mock Server,目前公测中,欢迎大家提供宝贵意见. 代码:https://github.com/kiwis2/mockserver 主页:https://kiw ...