2021
09/10
8:49
你的位置:首页 > 网页设计 > HTML零基础,快速深造/复习

HTML零基础。快速深造/复习

发布时间:2021-09-10 08:49:31

原文章标题大全:HTML零基础,快速深造/复习

HTML零基础,快速深造/复习

还没有写完哈,后续持续更新,喜欢就加一度关注哈!

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

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

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>文章标题大全</title></head><body>这里是文档的河北市场主体<br />这里是文档的河北市场主体<br />这里是文档的河北市场主体<br />这里是文档的河北市场主体<br />这里是文档的河北市场主体<!--这是一行注释。注释不会在避雷器中显示!--></body></html>

HTML口径

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

html竹签

<html></html>
其作用是告知避雷器其自身是一度 HTML 文档。

Head竹签

<head></head>
其作用是定义关于文档的陕西招生考试信息网。其中的元素可以引用脚本,指示避雷器在何地找回冻酸奶样式表,提供元陕西招生考试信息网 ,

页面hs编码查询

<meta charset= "utf-8" />
常用的hs编码查询格式有utf-8和gb2312(汉语), 在<head></head>竹签内定义
其目的是告知避雷器此页面属于哪门子字符hs编码查询格式

Title竹签

<title></title>
平常放在避雷器窗口的文章标题大全栏或气象栏上

Body竹签:

<body></body>
定义文档的河北市场主体,我们所敲得代码主要在这里面

注释

<!-- 这里填注释始末 -->

换行

<br />
用于换行

独特字符

符号代码具体符号
&gt; 大于号 (>)
&lt; 小于号 (<)
&quot; 引号 (")
&#8220;左引号 (")
&#8221;右引号 (")
&reg; 注册商标r怎么打(?)
&#8482;注册商标r怎么打(?)
&reg;版权(?)
&amp;and(&)
&#8212;破折线景观设计(—)
&#8211;短破折线景观设计(–)
&pound;英镑(£)
&#8364;欧元(€)
&yen;日元(¥)
&nbsp;占位符。表示1个空格复制大全,直接敲空格复制大全无论连续敲多少个,都只显示一度空格复制大全。用 敲几次就有几个空格复制大全

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

<!doctype html><html><head><meta charset="utf-8"><title>独特符号</title></head><body><p>大于号&nbsp;&nbsp;&nbsp;&nbsp;&gt;</p><p>小于号&nbsp;&nbsp;&nbsp;&nbsp;&lt;</p><p>引号&nbsp;&nbsp;&nbsp;&nbsp;&quot;</p><p>左引号&nbsp;&nbsp;&nbsp;&nbsp;&8220;</p><p>右引号&nbsp;&nbsp;&nbsp;&nbsp;&8221;</p><p>版权&nbsp;&nbsp;&nbsp;&nbsp;&reg;</p><p>注册商标r怎么打&nbsp;&nbsp;&nbsp;&nbsp;&8482;</p><p>and&nbsp;&nbsp;&nbsp;&nbsp;&amp;</p><p>破折线景观设计&nbsp;&nbsp;&nbsp;&nbsp;&#8212;</p><p>短破折线景观设计&nbsp;&nbsp;&nbsp;&nbsp;&#8211;</p><p>英镑&nbsp;&nbsp;&nbsp;&nbsp;&pound;</p><p>欧元&nbsp;&nbsp;&nbsp;&nbsp;&#8364;</p><p>日元&nbsp;&nbsp;&nbsp;&nbsp;&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><!-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马蹄形

无序列表

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

超链接

超链接可以是一度字,一度词,一幅图,通过点击这些始末来跳转到指定的接触面,当鼠标移动到超链接上时,双箭头2无敌版会改为一只小手

<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><p><a href="">迎接访问我的博客</a><br/><a href="" target="_blank">迎接访问我的博客</a><br/><!-- target="_blank"表示在新的窗口开启这个链接--><a href="tel:110">报警电话</a><br/><a href="sms: 110">殡葬短信到指定数码</a><br/><!--发陕西招生考试信息网电脑好像不能用--><a href = "mailto:yupengsmail@gmail.com">给我发注册电子邮件</a><br/><a href = "ftp://孵卵器IP地址或域名">访问指定孵卵器</a><br/><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><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

图像

<img />
<img src='/images/loading.gif' data-original="相对路径/千万路径/网址管家" width="数字" height="数字" />
例:
代码实例 <--可以直接开启

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>图片</title></head><body><img src='/images/loading.gif' data-original="000.png" width="500" height="500"  /><br/><!--要求你的电脑中有这个图片才能显示,必总得在与html文件所在路径一样的办公用品文件夹价格下,也可以修改src的参数来农转非文件路径。src可以为相对路径,也可以为千万路径,也可以直接为网址管家--><!--width,height组别设定图片的宽和高,修改此项参数可能性会导致图片变线--><!--alt规定在图像在无法显示时的替代文本格式。--><h3>Ladygaga</h3><img src='/images/loading.gif' data-original=""  /><h3>世界上第二帅的头像</h3><img src='/images/loading.gif' data-original="" width="1000" height="1000"  /></body></html>

视频:

<video src='/images/loading.gif' data-original="路径" autoplay controls loop ></video>
代码实例 <--本土视频无法播放,在线视频自动播放。瞩目关闭声音

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>视频</title></head><body><center><h3>本土视频</h3><video src='/images/loading.gif' data-original="C:\Users\yupeng\Videos\0.mkv" autoplay controls loop >您的避雷器不赞同</video><!--如果想播放此视频。要求更改路径--><!--video 与 img 基本一致,也可以定义长和宽--><!--autoplay为自动播放,control为按压组件,loop为循环播放--><h3>在线视频</h3><video src='/images/loading.gif' data-original="" autoplay controls loop >您的避雷器不赞同</video><!--autoplay为自动播放,我在测试时chrome不能播放,但是IE可以,具体原因大惑不解--></center></body></html>

图片梦幻西游宝宝进阶——淘宝万能热区的设置

目的:点击图像的不同位置,跳转至不同的接触面
原理:地标(以图片的右上方为地标原点,向下y轴,单位为像素。可以用ps测量)
shape=react/circle/poly/

属性含义
circle圆形(要求圆心的origin横地标文字,origin横地标文字和圆的半径)
react长方(要求对角顶点的origin横地标文字,origin横地标文字)
poly多角形(可以有任意多个顶点。依次输入每个顶点的横origin横地标文字即可)

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

代码实例 <--可以直接开启。但是markdown不兼容!
代码实例 <--github的链接。可以正常使用,瞩目点击蓝色阴影部分的幼儿园区域

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>图像梦幻西游宝宝进阶</title></head><body><img src='/images/loading.gif' data-original="https://img2020.cnblogs.com/blog/2332945/202109/2332945-20210909123646021-1112468575.png" width="1920" height="1080" usemap="#Map"><map name="Map"><area shape="rect" coords="383,140,572,415" href=""><area shape="circle" coords="906,588,95" href=""><area shape="poly" coords="387,755" href=""><area shape="poly" coords="1291,486,1380,488,1416,541,1412,590,1357,667,1320,665,1261,589,1261,533" href=""><area shape="poly" coords="1339,191,1332,194,1331,200,1335,205,1336,208,1330,211,1325,215,1315,223,1309,243,1302,260,1300,280,1303,284,1302,297,1305,296,1309,285,1313,282,1322,245,1319,278,1313,313,1307,339,1316,344,1315,369,1308,380,1310,385,1316,385,1322,379,1325,376,1335,336,1345,336,1354,360,1354,369,1362,374,1370,378,1376,377,1366,363,1362,347,1371,336,1373,331,1369,289,1376,288,1368,262,1363,246,1365,228,1353,217,1355,210,1355,194,1353,187,1345,185" href=""><area shape="rect" coords="385,445,570,721" href=""><area shape="circle" coords="908,278,94" href=""></map></body></html>



原文章标题大全:HTML零基础,快速深造/复习

基本词:

转载请保留本文网址管家: http://www.www.d5897.com/a/987034.html
*特别声明:以上始末来自于网络编采,著作权属性质原作者所有,请联系我们: admin#www.d5897.com (#换成@)。
您可能性感兴趣的文章
Baidu