web ⑧：Write web pages in HTML (Review) #回来要看哪

最新推荐文章于 2021-01-27 19:31:57 发布

还不算晚

最新推荐文章于 2021-01-27 19:31:57 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/yuan_xiao_only/article/details/106170264

版权

老规矩了，本篇文章当中呢，我们要学习的部分是：
头部、实体、URL、URL编码

一、

head：

HTML文档有<head>部分，里面可以有<title>部分，还可能有<style> ?

二、

“实体” ：

HTML网页中，连续多个普通空格会被看成一个空格。

如果要在HTML网页中呈现多个空格，其中的每个空格可以写成：

&nbsp; 或&#32;

其中：

&nbsp;	//nbsp(据说)意为：non-break space。

&#32;	//32是空格字符的ASCII码。

网页中这一类需要特殊表示的符号叫“实体”(entity)，
要在网页上呈现这类实体，就需要使用规定的实体名或编码。

关于实体：

①理解概念；
②记住最常用的，比如：

&nbsp;

在这里插入图片描述
行叭，呜呜呜，卑微xiao看眼花了 … …

三、

URL编码：

在浏览器地址栏敲入(或显示)的“网址”就是URL，
如果留心，会看到这种URL中有诸如%20之类的特殊符号。

有些字符(比如空格)在URL中需要以特定的(编码)形式表示，这就是URL编码。

比如：
空格的URL编码是 %20 ，，，hhh来看实例：
URL编码样例hhhh
以上样例是xiao在上一篇文章当中的个人小练习呀，嘿嘿嘿~

以上图片地址栏里的%20其实就是xiao自己设定文件夹名字里面的空格位置lalala

额，我在图片上标识的时候好像只是划出了%？嗯哼？捂脸）没事，大家知道就好，不要介意，("▔㉨▔)汗 … …

通常不需要我们去“编码”，但需要理解这种现象。

四、

HTML最新版本是HTML5：
HTML5视频、音频
下面是，一个(蝴蝶)图片、一个电话拨号音(文件)、一段(MV)视频：

emmm … … CSDN暂时不支持插入音频文件，，，行叭，感觉它真的好多地方需要改进，在我没有建一个自己的网站之前，我咋且，先忍忍你。。。

视频：

柏松《世间美好与你环环相扣》MV（完美剪辑版）

以下的网页将尝试包含(链如)上述资源：

<!Growing xiao>
<html>
<body>
<br/>
<br/>
<br/>
	<img src="imgButterfly.jpg" />
<br/>
<br/>
	<video src= "世间美好.mp4" controls= " controls' '> Not support HTML5 video </video>
</body>
< /html>

其中，

<br/>   =   换行

接下来：

下载或分享一个mp3音频文件；
在上图所示网页的基础上练习一下；
阅读w3school网站上有关HTML5音频、视频的本课“未尽事宜”，如果还有时间就进一步练习呀。

至此，网页可以“载歌载舞”了。

练习：

自己独立完成上图所示网页文档，
调试通过后，连同资源文件(图片、音频、视频)放到一个文件里面，自己打开康康怎么样~

【练习过程中，如果浏览器是IE，可能出现问题，比如视频不显示，这时，留意屏幕底部是否有一行字提示：

Internet Explorer 已限制网页运行脚本及ActiveX控件… 允许(被)阻止的内容?

这时如果选择"允许"，通常可以解决问题。】

咳咳，xiao的小练习，，，感觉想做视频的已经好久了，就，自己瞎剪了一个，大家有兴趣的话，康康哦Lalala
不过，这个要在自己电脑上看原版的话，还是有点麻烦的，毕竟要下载视频和音乐。。。

我先把我半成品的代码小练习写上来叭~，主要是xiao不想让这篇文章一直放在草稿箱里，就加快速度整了个半成品，捂脸）

并且我还偷懒用了我上一篇文章一样的布局，咳咳，大家不要介意，咱，主要还是看这篇文章的知识点和应用嘛ahahh

<!--Growing xiao-->
<html>
<head>
<title>Xiao's audio & video</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* body 样式 */
body {
    font-family: Arial;
    margin: 0;
}

/* 标题 */
.header {
    padding: 90px;
    text-align: center;
    background-image:url("http://5b0988e595225.cdn.sohucs.com/images/20170820/a4634ffd4f364a259acee1c38a3edb50.jpeg");
    color: white;
}

/* 标题字体加大 */
.header h1 {
    font-size: 40px;
}

/* 导航 */
.navbar {
    overflow: hidden;
    background-color: #66CCCC;
}

/* 导航栏样式 */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* 右侧链接*/
.navbar a.right {
    float: right;
}

/* 鼠标移动到链接的颜色 */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* 列容器 */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* 创建两个列 */
/* 边栏 */
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-image:url("http://img2.3lian.com/2014/f5/172/d/40.jpg");
    padding: 20px;
}

/* 主要的内容区域 */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-image:url("http://www.kedo.gov.cn/upload/resources/image/2016/11/24/136241.png");
    padding: 20px;
    color: #E8D098;
}

/* 测试图片 */
.fakeimg {
    background-image:url("https://bdrip.org/wp-content/uploads/2015/11/7a0c897dgw1ewfvrjmrdfg20b4069npl.gif");
    width: 100%;
    padding: 20px;
}

.left {
    background-image:url("http://imgsrc.baidu.com/forum/w%3D580/sign=b12e96930bfa513d51aa6cd60d6c554c/531930fae6cd7b89bef039cc0c2442a7d8330efa.jpg");
    width: 100%;
    padding: 20px;
}

.end {
    background-image:url("http://5b0988e595225.cdn.sohucs.com/images/20171006/1f85724093cf4e8aaf22d9874a41bb6f.jpeg");
    width: 80%;
    padding: 20px;
}


/* 底部 */
.footer {
    padding: 10px;
    text-align: center;
    background-image:url("http://i-7.vcimg.com/trim/e946b130e1fa2452c6171e84e470a3ef54307/trim.jpg");
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
      <p>听歌啦~</p>
      <p>不变的永恒</p>
      <audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="C:\Users\袁箫箫\Desktop\Hair Loss Xiao\Web\html\Xiao's audio & video\演奏曲 - 穿越时空的少女插曲－不变的永恒.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
  <h1>Xiao's audio & video</h1>
  <p>時をかける少女</p>
  <p>穿越时空的少女</p>
  <h3 style="color:#66CCCC;text-align:center;">"记忆或会消失，但我的心会记着承诺。"</h3>
</div>

<div class="navbar">
  <a href="https://baike.baidu.com/item/穿越时空的少女/5150836">Introduction</a>
  <a href="https://music.163.com/#/playlist?id=2019822453">Video song list</a>
  <a href="https://baike.baidu.com/item/筒井康隆">original author</a>
  <a href="https://www.bilibili.com/bangumi/media/md2687/?from=search&seid=8679478250806924026" class="right">Click to view</a>
</div>

<div class="row">
  <div class="side">
      <h2>About</h2>
      <h5>Photo:</h5>
      <div class="fakeimg" style="height:220px;" > </div>
      <p>有关我的介绍：</p>
      <h3>More:</h3>
      <div class="left" style="height:60px;">①青春伤痕系列</div><br/>
      <div class="left" style="height:60px;">②我在未来等你</div><br/>
      <div class="left" style="height:60px;">③穿越时空，以科幻之名留存住一个近乎完美的青春之梦<br/></div>
  </div>

  <div class="main">
      
      <h1>時をかける少女</h1>
      <h4 style="color:black;text-align:center;"> 白驹飞驰，青春过隙。</h5>
      <h4 style="color:black;text-align:center;"> 能在无尽的时间洪流中与你相遇这件事，比任何事都更令我坚强。
</br>以后再哭着说，当初该和她交往也晚了哦。</h4>
</br>
<h3>我在未来等你   --恩，一定去，跑着去。</h3>
      <p>下面的视频是xiao瞎剪的，捂脸）可以全屏观看哦~</p>
      <video text-align:center; width="720" height="330" controls="controls">
      <source src="/i/movie.ogg" type="video/ogg">
      <source src="C:\Users\袁箫箫\Desktop\Hair Loss Xiao\Web\html\Xiao's audio & video\穿越时空的少女video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      
  </div>
</div>

<div class="footer">
  <h4 style="color:black;text-align:center;"> 原来每一个改变，每一个随性，都是有着自己理由的,</br>经历了很多，放下了很多，自然也轻松了很多，豁达了很多 ... ...
<p style="color:#F0DAD2;">如果你获得了穿越时空的能力，你最想回到什么时候？</p>
      <p>某场考试前？某次告白前？还是只有自己知道的某个人生转折点？</p>
      </br>
      <p>还是说，到目前为止你的人生完美到没有一丝的遗憾，并不想回到过去？</p>
      <p">这样的话，回到几天前让你念念不忘的大餐，再吃一顿如何。</p>
      <p">我确定知道自己很想回到过去的某一刻，却不知道应该回到何时？</p>
      <p style="color:#F0DAD2;">因为,人生里遗憾的事情太多了。</p>
<p>emmm现在xiao真的是发现了复习电影的很好的方式，就是做网页，这里面选择照片，找音乐，找视频，找经典句子，以及，说出心灵的感悟，真的能将你带回那个时候 ... ...</p>
<h3 align="center">ʕ๑•㉨•๑ʔ Bye~ ʕ๑•㉨•๑ʔ</h4>
</div>

</body>
</html>

xiao花费了午休，，，确实，困啊，并且错过了休息时间困真的就很难睡着了，惨兮兮，以后的话，我就要做一个好好午休的人啦，就这样，bye~

还不算晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web ⑧：Write web pages in HTML (Review) #回来要看哪

老规矩了，本篇文章当中呢，我们要学习的部分是：一、head：HTML文档有<head>部分，里面可以有<title>部分，还可能有<style> ?二、“实体” ：HTML网页中，连续多个普通空格会被看成一个空格。如果要在HTML网页中呈现多个空格，其中的每个空格可以写成：&nbsp; 或&#32;其中：&nbsp; //nbsp(据说)意为：non-break space。&#32; //32是空格字符的AS
复制链接

扫一扫