文科编程系列课程-Web开发

第二讲 HTML再识（一）

HTML是一支网络时代的马良神笔，创造出你心里的憧憬与希冀。

1 HTML的常用标签

注：此处的常用并非是传统意义上Web开发的常用，而是指对于文科生的使用领域来讲，比较经常使用到的几种标签。

1.1 文本标签

1.1.1 段落标签`<p\></p\>`

段落标签的标签名来自于单词paragraph，括住的内容表示一个段落。

1.1.2 无序列表标签`<li></li>`

无序列表标签<li></li>的标签名来自于单词list，括住的内容表示一个列表项目。

1.1.3 加粗标签``

加粗标签的标签名来自于单词bold，括住的内容表示加粗。

1.1.4 斜体标签``

斜体标签的标签名来自于单词italic，括住的内容表示斜体。

1.1.5 换行标签` `

千呼万唤始出来，犹抱琵琶半遮面。

在文本中如何换行想必已经成为大家的迫切需求了。在前面的实践中不难发现，在HTML文档中换行并不能在网页中表现出来。其内在原因还是源于HTML的本质特征——标记，标记掌控了一切。在这个思想的指导下，任何特殊格式都需要用标记来表示，换行也不例外。所以，我们若想在文本中实现换行，就必须使用对应的换行标签来实现。换行即新建行（break row），所以换行标签的形式为 。
换行标签不同于先前所接触的标签成双成对，换行标签茕茕孑立。这并不难理解，HTML标签的产生源于我们对格式的需求，类比标点符号系统，我们有书名号表示书名，有引号表示引用，我们同样有逗号句号表示句子的停顿和结束。所以，在换行的需求只是一个点，而不是一个面，我们不需要用首尾成对的标签括住某些内容，我们只需要在某处打上一个标记即可。所以换行标签单独出现并不配对。

1.2 媒体标签

媒体标签和换行标签类似，都是单独出现不配对。类比word的操作，是以插入的形式来引入媒体的，所以媒体本身单独出现不需要配对。但也存在例外，例如video标签和audio标签。

1.2.1 图片标签`<img>`

图片标签<img>的标签名来自于单词image，表示引入一个图片文件。
插入图片有一个必不可少的操作就是找图片，换句话说就是图片的来源。所以我们必须在图片标签里写明图片来源。
来源的单词是source，所以我们给图片标签添加一个src属性，并在后面注明图片来源和名称。这里的来源既可以是本地的，也可以是互联网的。
本地图片的引入：

<img src="hello.jpg">

网络图片的引入：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

关于路径的问题会在之后详细讲到，此处大家只需要知道支持的两种来源。

1.2.2 视频标签`<video></video>`

视频标签<video></video>的标签名来自于单词video，表示引入一个视频文件。
同样需要使用src属性标注视频文件的来源。

<video src="demo.mp4"></video>

视频和音频的展示都需要播放按钮，即控件，我们需要给它额外设定控件的显示状态。

<video src="demo.mp4" controls="controls"></video>

1.2.3 音频标签`<audio></audio>`

视频标签<audio></audio>的标签名来自于单词audio，表示引入一个音频文件。
同样需要使用src属性标注视频文件的来源。

<audio src="hello.mp3"></audio>

那为什么video标签和audio标签要以成对的形式出现，笔者个人认为是和HTML5有关的。video标签在MDN中如此介绍：

和<img>元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来定义视频的宽度高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等信息。
在<video></video>标签中间的内容，是针对浏览器不支持此元素时候的降级处理。

所以笔者认为，因为这两个标签同属于HTML5的新标签，而HTML5是一个新的标准，在有些旧版本浏览器中是不支持的，因此设计了这样双标签方式可以很方便的在不支持新的媒体标签时给出提示。自然，除此之外，还和这种方式携带信息的高效性有关。

2 补充

2.1 文件名

文件名为了方便人们区分计算机中的不同文件，而给每个文件设定一个指定的名称。由文件主名和扩展名组成，文件主名和扩展名之间用英文句点.隔开。

例如：demo.html中demo为文件主名，html为文件扩展名。
在计算机编程中，我们一般使用到的文件名包括文件主名和扩展名。

2.2 路径

何为路径呢？

题破山寺后禅院
【唐】常建
清晨入古寺，初日照高林。
曲径通幽处，禅房花木深。
山光悦鸟性，潭影空人心。
万籁此都寂，但余钟磬音。

曲径通幽处，弯曲的小路通往幽深的地方。这个“径”，正是我们寻找目的的必需，是我们通往所寻之处的媒介。
同理，在计算机中，在茫茫文件中取之所需，亦缺少不了“径”。

笔者将计算机中的路径分为两类，直径（绝对路径）和曲径（相对路径）。
直径是指客观的直接到达的路径，不会受到所在位置的影响。
曲径是指主观的间接到达的路径，会受到所在位置的影响。
直径与曲径的直和曲，更侧重完成路径的抽象层面的难易程度。若走完路径直白容易，则为直；若走完路径曲折回环，则为曲。

直径的两种形式
硬盘中的位置
硬盘中的位置是指文件所在的文件夹在硬盘中的位置。
例如C:\Users\Lenovo\Documents\index.html

网址
网址本质上也是服务器硬盘中文件的位置。
例如https://www.baidu.com/index.html

曲径的形式
../表示文件所在目录的上一级目录
XX/表示XX文件夹

声明
本讲义仅用于文科编程教学，是针对于文科生编程学习的定制化讲授模式，其中个别概念的阐释及举例或与计算机专业领域有些微出入，还请各位大咖包涵！
本人资历尚浅，欢迎各位博主批评指正！

第二讲 HTML再识（一）相关推荐

java进阶第二讲-数组、String类
java进阶第二讲-数组.String类 1 回顾一下Object Object中的方法:public native int hashCode();带有native关键字的方法调用的是底层C++的dl ...
C#精髓【月儿原创】第二讲 WMI完美秀出CPU编号厂商主频百分比等全部信息
说明:准备出一个系列,所谓精髓讲C#语言要点.这个系列没有先后顺序,不过尽量做到精.可能会不断增删整理,本系列最原始出处是csdn博客,谢谢关注. C#精髓第二讲 WMI完美秀出CPU编号厂商主频电 ...
解密汽车全景行车安全系统的前世和今生——第二讲：原理讲解
解密汽车全景行车安全系统的前世和今生--第二讲:原理讲解来源:深圳市汽车电子行业协会作者:姜卫忠发布时间:2013-3-7 浏览(4648)次解密汽车全景行车安全系统的前世和今生第二讲:全 ...
UNIX再学习 -- 再识
到了Unix编程,因为之前有C语言的基础吧,看了下目录大部分内容之前都有所总结,进度应该能够加快.不过最近有点小郁闷,申请博客专家转正失败了,这也让我重新审视了自己更新博客的初心是什么.绝不是为了与自 ...
“悟道”公开课第二讲丨如何优化大模型输出结果
图片出处:https://bmk.sh/2020/05/29/GPT-3-A-Brief-Summary/ 如果你错过了上一波深度学习引发的NLP范式转换,不要再错过这一波超大预训练模型的崛起. 现在 ...
C#发现之旅第二讲 C#－XSLT开发
C#发现之旅第二讲 C#-XSLT开发袁永福 2008-5-15 系列课程说明为了让大家更深入的了解和使用C#,我们开始这一系列的主题为"C#发现之旅"的技术讲座.考虑 ...
BrnShop开源网上商城第二讲：ASP.NET MVC框架
BrnShop开源网上商城第二讲:ASP.NET MVC框架原文:BrnShop开源网上商城第二讲:ASP.NET MVC框架在团队设计BrnShop的web项目之初,我们碰到了两个问题,第一个是 ...
【阿里云 CDP 公开课】第二讲：CDH/HDP 何去何从
简介:Hadoop社区版CDH/HDP已经不再更新,也将终止服务.后续的平台路线图怎么规划?Cloudera CDP整合了CDH和HDP,有哪些性能提升和功能增强?如何平滑的进行迁移?本文结合CDH/ ...
asp.net电子商务开发实战视频　第二讲（下）
第二讲主要是讲门类列表,第二讲(下)这里主要是业务层和表示层的代码编写演示.. 这里表示的页面代码我没有详细的演示,只是复制过去再解释了一下,有朋友告诉我仔细的演示下,逐个去敲下,我在第三讲里开始表示 ...

第二讲 HTML再识（一）

文科编程系列课程-Web开发

第二讲 HTML再识（一）

1 HTML的常用标签

1.1 文本标签

1.1.1 段落标签`<p\></p\>`

1.1.2 无序列表标签`<li></li>`

1.1.3 加粗标签`<b></b>`

1.1.4 斜体标签`<i></i>`

1.1.5 换行标签`<br>`

1.2 媒体标签

1.2.1 图片标签`<img>`

1.2.2 视频标签`<video></video>`

1.2.3 音频标签`<audio></audio>`

2 补充

2.1 文件名

2.2 路径

第二讲 HTML再识（一）相关推荐

最新文章

热门文章

第二讲 HTML再识（一）

文科编程系列课程-Web开发

第二讲 HTML再识（一）

1 HTML的常用标签

1.1 文本标签

1.1.1 段落标签<p\></p\>

1.1.2 无序列表标签<li></li>

1.1.3 加粗标签<b></b>

1.1.4 斜体标签<i></i>

1.1.5 换行标签<br>

1.2 媒体标签

1.2.1 图片标签<img>

1.2.2 视频标签<video></video>

1.2.3 音频标签<audio></audio>

2 补充

2.1 文件名

2.2 路径

第二讲 HTML再识（一）相关推荐

最新文章

热门文章

1.1.1 段落标签`<p\></p\>`

1.1.2 无序列表标签`<li></li>`

1.1.3 加粗标签`<b></b>`

1.1.4 斜体标签`<i></i>`

1.1.5 换行标签`<br>`

1.2.1 图片标签`<img>`

1.2.2 视频标签`<video></video>`

1.2.3 音频标签`<audio></audio>`