欢迎光临
我的个人博客网站

HTML一小时入门,半天掌握


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

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

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

<!DOCTYPE HTML>

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

<html></html>

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

<head></head>

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

<meta charset= "utf-8" />

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

<title></title>

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

<body></body>

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

<!-- -->

注释
例:

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

<br />

用于换行

特殊字符

&gt;		大于号 (>) &lt;		小于号 (<) &quot;		引号 (") &#8220;		左引号 (") &#8221;		右引号 (") &reg;		注册商标(®)	 &#8482;		注册商标(™) &reg;		版权(©)	 &amp;		and(&) &#8212;		破折线(—) &#8211;		短破折线(–) &pound;		英镑(£) &#8364;		欧元(€) &yen;		日元(¥) &nbsp;		占位符,表示1个空格,直接敲空格无论连续敲多少个,都只显示一个空格,用&nbsp;敲几次就有几个空格 

<!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>破折线&#8212;</p> <p>短破折线&#8211;</p> <p>英镑&pound;</p> <p>欧元&#8364;</p> <p>日元&yen;</p> <p>十个个空格          直接敲得</p> <p>十个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用占位符表示</p> </body> </html> 

<p></p>

段落标签
可以利用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级,分别为<h1>~<h6>
从一级至六级,字体依次减小
例:

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

文本格式

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

例:

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

有序列表

<ul><li></li></ul> type= disc/circle/square disc				实心圆点    circle				为空心圆 square				正方形 

无序列表

Type=1/a/A/i/I 

例:

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

锚点

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

例:

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

图像<img />

<img src="相对路径/绝对路径/网址" width="数字" height="数字" alt="备注" />
例:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片</title> </head>  <body> <img src="000.png" width="500" height="500" alt="图像" /><br/> <!--需要你的电脑中有这个图片才能显示,必须要在与html文件所在路径相同的文件夹下,也可以修改src的参数来切换文件路径,src可以为相对路径,也可以为绝对路径,也可以直接为网址-->  <!--width,height分别设定图片的宽和高,修改此项参数可能会导致图片变形-->  <!--alt规定在图像在无法显示时的替代文本。-->  <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:UsersyupengVideos.mkv" autoplay controls loop >您的浏览器不支持</video> <!--如果想播放此视频,需要更改路径--> <!--video 与 img 基本一致,也可以定义长和宽--> <!--autoplay为自动播放,control为控制组件,loop为循环播放--> <h3>在线视频</h3> <video src="https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4" autoplay controls loop >您的浏览器不支持</video> <!--autoplay为自动播放,我在测试时chrome不能播放,但是IE可以,具体原因未知-->   </center>           </body> </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » HTML一小时入门,半天掌握
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏