HTML基础知识4
- 字体样式
- 短语样式
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本,这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架,将html文件括起来-->
<head>
<!--设置一些配置信息-->
<title> <!--设置html的标题是什么-->
第二个Html文件
</title>
<!--指定html文件的编码方式-->
<meta charset="utf-8">
</head>
<!--代码主体-->
<body>
茶的种类 :
<ul> <!--unordered list-->
<li>红茶</li>
<li>绿茶</li>
<li>可乐</li>
</ul>
<ol start = 2> <!--ordered list-->
<!--start 表明序号是从哪一个编号开始-->
<li>黑茶</li>
<li>白茶</li>
</ol>
<ul>
<li>咖啡</li>
<ol>
<li>空心圆圈</li>
</ol>
</ul>
<dl>
<dt>方糖</dt> <!--这是一个词条-->
<dd>方的糖,甜的</dd> <!--对于词条进行解释-->
</dl>
<a href="#here" target="">
<!--可以跳转到后面的语句,在一个页面内部设置目的地-->
跳转到后面的语句
<!--target : 在哪里打开 有以下选项 : "_blank"空白页 -->
</a>
<!--
<a href = "you.html#here">
跳转到you.html文件的here的地方
-->
放置图片
<!--在html中图片是一个字符-->
<img src = "tile.png" width="20%" height="10%" alt = "星号" usemap="#map">
<!--alt的意思是看图片是否能够装过来,在装载的过程中先看alt为文字-->
<!--usemap : 建立映射,建立地图名字叫做map-->
<map>
<!--建立相应区域和相应网站的链接-->
<area shape = "rect" coords="0,0,50,50" href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_52d873b1bd7a4c93a7b4eb521b738e92" alt = "apple">
<!--点击图片的哪个哪个区域链接到什么地方-->
</map>
<img src = "https://img2.baidu.com/it/u=61586980,1756570663&fm=26&fmt=auto&gp=0.jpg" alt = "庐江">
<iframe src = "https://www.apple.com.cn/iphone-12/key-features/"></iframe>
<!--iframe : 将另外一个网站的内容实时的显示在本界面上-->
<br>
<!--超链接-->
<!--http : // 一定要打上,这样才能链接到其他的地方-->
<a href = "http : //www.baidu.com">
<!--<a> : 中间放置的是连接,可以是图片,或者是链接都可以-->
百度一下,你就知道
</a>
<p>
遥襟甫畅,逸兴遄飞。爽籁发而清风生,纤歌凝而白云遏。睢园绿竹,气凌彭泽之樽;邺水朱华,光照临川之笔。四美具,二难并。穷睇眄于中天,极娱游于暇日。天高地迥,觉宇宙之无穷;兴尽悲来,识盈虚之有数。望长安于日下,目吴会于云间。地势极而南溟深,天柱高而北辰远。关山难越,谁悲失路之人?萍水相逢,尽是他乡之客。怀帝阍而不见,奉宣室以何年?
</p>
<p id = "here">
<!--id给段落起一个名字叫……-->
</p>
<p>
前面有一些文字
<table border="1">
<!--border = 1有格子线 border = 0没有格子线-->
<caption>
<!--显示表格的名字-->
表格
</caption>
<tr>
<!--<th> : 表头-->
<th>
China
</th>
<th>
USA
</th>
<th>
French
</th>
</tr>
<tr> <!--table row-->
<td>
iOSS
</td>
<td>
yes
</td>
<td>
yes
</td>
</tr>
<thead>
<!--包裹起来的是表头,当表格特别长的时候,翻转页面,表格会留在上面-->
表头
</thead>
<tr>
<td colspan="2">Windows</td>
<!--colspan : 格子扩展,单元格合并,参数指明合并几个格子-->
<td></td>
</tr>
</table>
后面也有一些文字
<table>
<thead>表头</thead>
<tbody>表格中间</tbody>
<tfoot>表尾</tfoot>
<!--通过这三个命令,将表格分为三段,页面翻转的时候,将表格保存在页面上-->
</table>
</p>
</body>
</html>
显示效果