<!--声明是html5文件-->
<!DOCTYPE html>
<!--声明语言类型-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<!--head的内容除了title外，其他内容在网页上都不会显示-->
<head>
<!--meta必须在head内，且大小应小于1024B，可以有很多meta元素，meta可以表达很多内容诸如：编码/作者/关键词/跳转网页等，如下：-->
<meta charset="UTF-8">
<!-- meta标签 name属性 必须跟一个content属性用来表明前面name的内容-->
<meta name='author' content="文件的作者信息">
<meta name='keywords' content="文件的关键词，方便搜索软件搜索，如果有多个关键词彼此间用逗号隔开，如：姓名，年龄，地址">
<meta name='description' content="文件的描述，该描述内容会出现在搜索软件中">
<meta name='generator' content="文件用什么软件生成">
<meta name='revised' content="文件版本最新信息">
<!--meta http-equiv 属性 -->
<!-- 经过5秒后刷新该页面 -->
<meta http-equiv="refresh" content="5">
<!--经过5秒后跳转到www.baidu.com-->
<meta http-equiv="refresh" content="5;http://www.baidu.com">
<!--在head标记只能设定一次title，标题会出现在浏览器标题/浏览器标记列/浏览器记录及收藏列表中 -->
<title>范枝洲正在学习HTML+CSS</title>
<!--base 设置路径基准位置,一下代码将HTML文件夹设置为基准base位置,故该HTML中的相关的子文件夹/父文件夹均以此为基准-->
<!-- <base href="C:\Users\User\PycharmProjects\Django\mywebsite\templates">-->
<!--结束标签-->
</head>
<!--body是网页主体，这里面的内容会在页面上显示-->
<body>
<!--header区指文件首页区，指的是网页或文件上方的区域，通常将网页大标题/简单批注说明等数据放在此区-->
<header>
<h1>接下来要吟诗一首</h1>
<p>来一首陶渊明的歌</p>
</header>
<!--section：使用section标记多个区域，如数个段落或者多个小标题, 该区块内的H标签会被自动降1级，如H1会被降级为H2-->
<section>
<!--Hn标签，表示段落标签，n取值为1-6，后面的数据会自动换行-->
<h1>自动降级后的-标题1</h1>
<h2>自动降级后的-标题2</h2>
<h3>自动降级后的-标题3</h3>
<h4>自动降级后的-标题4</h4>
<h5>自动降级后的-标题5</h5>
<h6>自动降级后的-标题6</h6>
<!--hr: 输出一条水平线-->
<hr>
<!--br 为换行符; em为斜体; id是全局属性:可以在很多元素内使用,主要用于标记-->
<h4 id="mybook">《饮酒·其五》</h4>
--<em>陶渊明</em><br>
<!--p表示一个段落: 段落结尾自动换行-->
<p>
结庐在人境，而无车马喧。<br>
问君何能尔？心远地自偏。<br>
采菊东篱下，悠然见南山。<br>
山气日夕佳，飞鸟相与还。<br>
此中有真意，欲辨已忘言。<br>
</p>
<hr>
<!--保持原文格式： pre， 常用对格式要求较高的诗词或者代码-->
<pre>
#从1打印到10
for i in range(1，11):
print(i)
</pre>
<hr>
<!--斜体<em> 和<i> , i 不仅表示斜体，还代表声音/情感/思考/船舶名/或不同的语言类别。 -->
<!-- 底纹 mark：高亮显示-->
<p><mark>斜体介绍:</mark><br> <p>i</p> <i>不仅表示斜体，还代表声音/情感/思考/船舶名/或不同的语言类别。em虽然也是将所标识的文字以斜体显示，但是此元素的语义重点是强调，
如果表示重要内容则建议使用strong元素.</i><br>
cite元素<cite>可以让内容以斜体显示，主要用在引用源的标题</cite>。<br>
q元素可以让内容前后自动加上<q>引号</q>，主要用在引用短篇文章火段落元素时。如果引用的短文位于英特网，则应使用cite元素。<br>
blockquote主要用于引用长篇文章，<blockquote>所引用的文章会有缩排和换行效果，如果引用的短文位于英特网，则也应使用cite元素</blockquote><br>
</p>
<hr>
<!-- kdb:显示计算机键盘或语音输入的内容；samp：显示计算机程序产生的结果；var：显示变量如长须语言的变量和数据公式的变量；code：显示程序语言，HTML，CSS元素的名称和属性等 -->
<h3>显示与计算机有关联的文字kbd/samp/var/code元素</h3><br>
<p>打开网页在用户名处输入<kbd>username</kbd> 再输入密码； 修改的变量<var>data</var>的值，然后窗口会提示<sanp>修改成功</sanp></p>
<p>CSS主要是使用<code>style</code>进行设计与排版</p>
<pre><code>
for i in range(10):
print(i)
</code></pre>
<hr>
<!--abbr 用于定义缩写，鼠标放在网页上会显示全写-->
<p>百度/腾讯/阿里简称：<abbr title="baidu tengxun, ali">BAT</abbr></p>
<!--dfn：用于定义用语，数据将以斜体输出-->
<p>
<dfn>范枝洲</dfn>是这篇笔记的主人
</P>
<!--ins表示新增内容，将以下划线的方式表示；del表示要删除的元素，将以删除线的方式处理-->
<p>
<ins>这是新增内容</ins>,<del>这里需要删除</del>
</p>
<!--bdi: 强制从左到右，否则遇到阿拉伯文，则显示是从右到左；目前ie不支持该元素，只有chrome和opera支持-->
<p>
<bid>范枝洲</bid>:20，<br>
<bid>John</bid>:20<br>
<bid> عرب عربى</bid>:20<br>
:20 عربي/عربى<br>
</p>
<!--指定文字走向：bdo-，-->
<p><bdo dir="ltr">从左到右</bdo></p>
<p><bdo dir="rtl">从右到左</bdo></p>
<!--ruby元素可以为每个汉字加上注意或者拼音；rt元素是ruby的子元素，放置的是拼音，rp元素也是其子元素当浏览器不支持ruby时显示rp元素内容，不过现在几乎所有浏览器都支持ruby了-->
<p><ruby>范枝洲<rt>fan zhi zhou</rt></ruby></p>
<!--sup：商标元素，比如x^3; sub:下标元素如H2O-->
<p>X<sup>3</sup>表示X的三次方</p>
<p>H<sub>2</sub>O表示水</p>
<!--特殊字符-->
<p>空格： </p>
<p>小于：<</p>
<p>大于：">></p>
<p>引号："</p>
<p>&：&</p>
<p>英镑：£</p>
<p>日元：¥</p>
<p>欧元：€</p>
<p>版权：©</p>
<p>注册商标：®</p>
</section>
<hr>
<section>
<!--设计含有超链接的网页-->
<p>超链接的主要作用：1. 从网络的某一结点条到另一节点；2.从一个HTML文件跳到另一个HTML文件；3.在同一个HTML文件中，从某一段跳到另一段落，类似书签</p>
<a href="https://www.baidu.com">点击我，跳转到百度</a>
<!--target:指定跳转页面是新增窗口打开还是不是，还是其他打开方式-->
<!--self系统默认，在当前页面打开 -->
<p><a href="https://www.baidu.com" target="_self">点击我，跳转到百度，当前页面打开</a></p>
<!--blank新增页面打开 -->
<p><a href="https://www.baidu.com" target="_blank">点击我，跳转到百度,新建页面打开</a></p>
<!--top 在目前浏览器的最顶端显示 -->
<p><a href="https://www.baidu.com" target="_top">点击我，跳转到百度，在目前浏览器的最顶端显示</a></p>
<!--parent 如果当前的页面有父级，则在父级层面显示 -->
<p><a href="https://www.baidu.com" target="_parent">点击我，跳转到百度，如果当前的页面有父级，则在父级层面显示</a></p>
<!--建立网页时，很可能建立许多页面，每一个页面其实就是一个html文件，下面将说明如何在不同html文件之间跳转，分为相对路径和绝对路径两种场景-->
<!-- 1. 所有HTML都在同一个文件夹 -->
<a href="APP01.html">点击我,显示另一个html文件内容</a>
<!-- 2. 其他HTML在子文件夹 -->
<p><a href="当面目录中其他文件夹的名字/APP01.html">点击我,跳转其他子文件夹html文件内容</a></p>
<!--3. 其他HTML在父文件夹 -->
<p><a href="../APP01.html">点击我,跳转到父目录的html文件</a></p>
<!--4. 绝对路径 -->
<p><a href="file:///d:/APP01.html">点击我,显示绝对路径下的另一个html文件内容</a></p>
<!--5. 同一个文件中的超链接:首先要使用id属性标记需要跳转到的位置,然后生成超链接 -->
<p> <a href="#mybook">点击我,跳转到当前html页面陶渊明一节</a></p>
</section>
<hr>
<section>
<!--无序列表-->
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!--有序列表,start表示列表从什么值开始,取值必须是int,包括0,系统默认n=1,type表示序号类型,取值为:1/a/A/i;reserved表示逆序递减-->
<ol start="-1" type="A" reversed="reversed">
<li>有序列表</li>
<li>有序列表</li>
<!--value 用于更改列表的取值 -->
<li value="4">有序列表</li>
</ol>
<!--自定义清单,类似小标题-->
<dl>
<dt>在dt中定义一个名词用于,如 HTML</dt>
<dd>定义对名词HTML的说明,如,HTML是xxxxx</dd>
</dl>
</section>
<hr>
<!--设计表格-->
<section>
<p>这一节介绍表格</p>
<p>border表示外框线的宽度</p>
<table border="1">
<caption>表格标题:HTML5+CSS3学习</caption>
<colgroup>
<col style="background-color:green">
<col span="2" style="background-color:lightgray">
</colgroup>
<thead>
<tr><th colspan="3">表格标签介绍</th></tr>
<tr><th>标签</th><th>功能说明</th><th>备注</th></tr>
</thead>
<tbody>
<tr><td>caption</td><td>表格的标题,再table中任意位置均能再表格前面形成标题,但是建议再table之后tbody之前</td><td></td></tr>
<tr><td>colgroup</td><td>单元格的群组化,其位置必须在caption之后,thead/tbody/tfoot/tr之前</td><td></td></tr>
<tr><td>col</td><td>col是colgroup的子元素,有属性span=n,n默认为1,表示需要定义的列数,他没有结束标签</td><td></td></tr>
<tr><td>table</td><td>表格的开始标记,所有表格规划就是在这个标签中</td><td></td></tr>
<tr><td>thead</td><td>建立表头,也就是表格的标题行,在表头内通过th定义表头的单元格</td><td rowspan="2">这里使用了rowspan=2纵向合并</td></tr>
<tr><td>tbody</td><td>定义表体部分</td><td></td></tr>
<tr><td>tr</td><td>定义具体的行</td><td></td></tr>
<tr><td>td</td><td>通常位于tbody或tfoot中中,定义单元格</td><td></td></tr>
<tr><td>tfoot</td><td><a href="http://www.baidu.com">表尾:做一份整体表格的注记,不懂就点击我,送你去百度</a></td><td></td></tr>
</tbody>
<tfoot>
<!-- 图片的大小将依照宽度自动调整-->
<tr><td><a href="https:///view/digibyte-dgb-ball-3d-meme-gif-20139201"><img src="/static/images/blueball.gif" width="12"></a>google logo</td><td colspan="2"><img src="/static/images/google.png" width="100">插入图片到表格.注意google logo多了个小不点<img src="http://gifgifs.com//animations/sports/track-and-field/Golden_runner.gif" border=0 alt="http://gifgifs.com" ></td><td></td></tr>
<tr><td colspan="3">这是表尾tfoot,是对这张表格的描述,需要注意的是,这里再td标签中应用了colspan=2属性,表示横向合并两个单元格</td></tr>
</tfoot>
</table>
</section>
<hr>
<section>
<p>img没有结束标记,格式为"img src=图片的URL,HTML5图片格式为gif/png/jpg/svg/pdf等,当某些原因图片不能显示时通过alt显示其替代的文字:alt=替代的文字 height=高度 width=宽度"</p>
<img src="/static/images/google.png" alt="我也不知道为什么打不开" height="100" width="200"><br>
<img src="/static/images/google.png" alt="我也不知道为什么打不开">
<figure>
<figcaption>pdf文件如下:这种方式表格也适用,这种方式会换行哦</figcaption>
<img src="/static/files/TCP-IP详解(卷一、二、三).pdf" alt="这是个pdf文件,我不知道能不能打开">
</figure>
<!--制作响应地图 -->
<img src="/static/images/world-map.gif" usemap="#Map" alt="我也不知道为什么打不开">
<map name="Map">
<area shape="circle" coords="100 100 100" href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%9C%B0%E5%9B%BE/2693620?fr=aladdin" alt="中国地图">
<!--以上shape表示形状,可选值为circle圆圈,rect矩形,poly多边形,default,默认行为; coords是对应形状的取值,对于圆形需要原点坐标和半径;对于矩形需要左上角对角线端点坐标
对于多边形,按照顺时针提供能构成封闭图形的点-->
</map>
</section>
<hr>
<section>
<p>这一节将多媒体网页</p>
<p>HTML支持的视频格式:MP4/OGG/WEBM</p>
<pre>
video属性如下:
1. src:指定video路径;
2. poster:视频播放前的图片, 换句话说就是海报
3. preload: 这个属性用于设定当浏览者进入网页时是否需要预览下载影片.有以下三种值可选:
3.1 auto: 预设值,由浏览器决定;通常PC设备的浏览器因为带宽使用方便会直接下载,但是移动设备的浏览器因为网络流量牵涉费用比较哦啊昂贵,所以不会实现下载
3.2 metadata: 值下载meta数据,如播放时间/影片尺寸/第一个画格图片和影片标题等
3.3 none: 不下载
4. autoplay:如果设定这个属性,则当影片加载完成就自动播放.
5. mediagroup: 如果要同时播放多个影片,且文件的URL相同时,可以用这个属性组成群组方式播放
6. loop:若使用这个属性,影片会重复循环播放
7. muted: 若使用这个属性,影片播放时会静音
8. controls: 若使用这个属性,影片播放时会出现播放控制器,类似电视遥控器
9. height/width: 高度和宽度设置,若设置其中一个值,另一个会自动设置,建议只设置宽度.
</pre>
<H1>看美女视频</H1>
<!-- <video src="/static/videos/girl01.MP4" width="300" poster="/static/images/google.png" controls loop ></video>-->
<!-- 但是也可以用source替换src, source可以指定多个文件,按序匹配是否可以执行,一旦确认文件可以执行,将忽略后面的文件.-->
<hr>
<P>使用source替换src:</P>>
<pre>
MIME可以让浏览器判断是否可以执行,常见配置格式为 src="" type="type/subtype",详见格式如下:
一 常见type格式:
1. text:文本
2. image:图片
3. audio:声音
4. video:影片
二 subtype格式
1. text/plain:存文本
2. text/html: html文件
3. image/gif: gif图像
4. image/png: png图像
5. image/jpeg: jpeg图像
6. video/MP4:
7. video/ogg:
8. video/webm
</pre>
<video width="300" poster="/static/images/google.png" controls loop >
<!--下面这一行是错误的格式名称,不会被执行,会继续寻早第二条执行-->
<source src="/static/videos/girl01.MP4" type="video/mp24">
<source src="/static/videos/girl01.MP4" type="video/mp4">
<P>浏览器不支持此类型的文件</P>
</video>
<H1>听听音乐</H1>
<P>声音audio和video属性用法一样,支持的格式MP3/OGG/AAC/MP4/M4A/</P>
<audio src="/static/videos/Wonderful+U+-+张含韵.mp3" controls autoplay loop></audio>
<p>使用object嵌入mp3 到网页,也可以设置height="0" width="0"</p>
<object data="/static/videos/Wonderful+U+-+张含韵.mp3" ></object>
<p>iframe建立浮动框架</p>
<pre>
1. src:定位要展示的资源
2. srcdoc:如果浏览器支持该参数,将覆盖src的功能
3. name:设定框架的名称.如果用a元素的target属性引用此名称,就可以执行超链接.利用这个特性,可以进行多个HTML文件的超链接.
</pre>
<ul>
<li><a href="/static/videos/girl01.MP4" target="iframe">girl01.mp4</a> </li>
<li><a href="/static/videos/blue_movie.mp4" target="iframe">blue_movie.mp4</a> </li>
</ul>
<H1>iframe展示</H1>
<iframe src="/static/images/google.png" width="600" height="400" name="iframe">
<P>如果用户浏览器不支持iframe元素,将显示此信息</P>
</iframe>
</section>
<section>
<hr>
<p>开始学习如何制作输入表单,这一节很重要</p>
</section>
<!--small: 可以让字变小，主要应用场景在于批注信息，例如网页脚注区的法律声明/警告声明/著作权声明等-->
<!--footer指网页火文件下方的区域，通常会将公司联络信息/版权信息火相关链接放在此区域-->
<footer>
<br>
<p><small>CopyRight 2021, 范枝洲</small></p>
<!--address: 主要显示个别内容或是整个网站内容的联络信息,比如又是需要在网页下凡共设置联系信息,便可以使用这个元素-->
<address>欢迎来范枝洲的博客<br>
<a href="Mailto:xxx@">邮件联系,标准格式</a><br>
<a href="Mailto:xxx@?subject=consulation">邮件联系,增加主题</a><br>
<a href="Mailto:xxx@?cc=bbb@">邮件联系,增加抄送</a><br>
<a href="Mailto:xxx@?bcc=bbb@">邮件联系,增加加密抄送</a><br>
<a href="Mailto:xxx@?body=hello">邮件联系,增加邮件内容</a><br>
</address>
</footer>
<!--结束标签-->
</body>
<!--结束标签-->
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
