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>大于号></p>
<p>小于号<</p>
<p>引号"</p>
<p>左引号&8220;</p>
<p>右引号&8221;</p>
<p>版权®</p>
<p>注册商标&8482;</p>
<p>and&</p>
<p>破折线—</p>
<p>短破折线–</p>
<p>英镑£</p>
<p>欧元€</p>
<p>日元¥</p>
<p>十个个空格 直接敲得</p>
<p>十个空格 用占位符表示</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>这是一个用<center>居中的段落</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> </p>
</body>
</html>
<!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> </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
- 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>
<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> </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> </p>
<p> </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 & 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 & 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> </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> </p>
<p> </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一小时入门，半天掌握的更多相关文章
- 《Qt Quick 4小时入门》学习笔记4
http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...
- 《Qt Quick 4小时入门》学习笔记3
http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...
- 《Qt Quick 4小时入门》学习笔记2
http://edu.csdn.net/course/detail/1042/14805?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍 1. ...
- 《Qt Quick 4小时入门》学习笔记
http://edu.csdn.net/course/detail/1042/14804?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽 QML中 ...
- 一小时入门PHP
[版权申明:本文系作者原创,转载请注明出处] 文章出处:[http://blog.csdn.net/sdksdk0/article/details/52332296](http://blog.csdn ...
- 一小时入门 Python
因为需求, 需要用到py, 所以来学学py, 因为有java基础 一小时入门py语法是不成问题的, 但是仅仅入门基础语法而已, 不涉及算法,不涉及大数据,机器学习,人工智能, 但是py这么火爆,就在于 ...
- iOS 开发-- Runtime 1小时入门教程
1小时让你知道什么是Objective-C Runtime,并对它有一定的基本了解,可以在开发过程中运用自如. 三.Objective-C Runtime到底是什么东西? 简而言之,Objective ...
- mongodb 两小时入门
传统的计算机应用大多使用关系型数据库来存储数据,比如大家可能熟悉的MySql, Sqlite等等,它的特点是数据以表格(table)的形式储存起来的.数据库由一张张排列整齐的表格构成,就好像一个Exc ...
- Esper复杂事务处理一小时入门
来自小韩 什么是Esper 想要认识Esper,先要了解CEP(Complex Event Processing),到处都有,并且各方理解也有偏差,我就不赘述了. Esper就是CEP的一个java的 ...
随机推荐
- Mysql命令语句
常用的管理命令 SHOW DATABASES; //显示当前服务器下所有的数据库 USE 数据库名称; //进入指定的数据 show tables; ...
- etcd raft 处理流程图系列2-transport
本章给出了raftexample中使用的传输层代码,补全了上一节中传输层与raft节点(raft server和channel server)的交互细节.下图中流程的核心在于传输层中的streamRt ...
- Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 （有数据保护）2021年7月29日 - Copy
Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy https://www.autoahk.com/archives/367 ...
- Optional解决空指针
Java 8 Optional 类 Java 8 新特性 Optional 类是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会返回该对象. O ...
- 3个月零基础入门Python+数据分析，详细时间表+计划表分享
大家好,我是白云. 今天想给大家分享的是三个月零基础入门数据分析学习计划.有小伙伴可能会说,英语好像有点不太好,要怎么办?所以今天我给大家分享的资源呢就是对国内的小伙伴很友好,还附赠大家一份三个月学 ...
- 超详细Java基础-多态
茫茫人海千千万万,感谢这一秒你看到这里.希望我的能对你的有所帮助!共勉! 愿你在未来的日子,保持热爱,奔赴山海! Java基础知识(多态) 多态 多态就是指程序中定义的引用变量所指向的具体类型和通过该 ...
- 分时函数 & 节流函数
分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下 ...
- 十进制转十六进制 BASIC-10
十进制转十六进制 import java.util.Scanner; public class 十进制转十六进制 { /* 十六进制数是在程序设计时经常要使用到的一种整数的表示方式. * 它有0,1, ...
- QZEZTEST2021.7.27分析
T1 qzez 错误检测 题意 思路 代码 T2 qzez 比赛 题意 题面 有\(AB\)两队,每队\(n\)人,两队间进行\(n\)场比赛,每个人都要参赛,对手随机且概率均等.每人都有一个实力值, ...
- 题解 [HNOI2008]GT考试
传送门 这题暴力对拍都难搞,差评 一般的题解里思路是考虑一般DP: 令\(dp[i][j]\)为枚举到第i位时匹配到第j位的方案数,令\(g[k][j]\)为将匹配到k位的情况补到匹配到j位的方案数 ...