前端基础小标签2

第一部分

一、link标签里type 属性规定被链接文档的 MIME 类型。
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。

二、外联样式
     <link rel="stylesheet" type="text/css" href="outer.css"/>

三、
      <link href="../img/logo.png" rel="shortcut icon" type="image/x-icon"/>
实例：
对于不同的浏览器，方法是有差别的
1.对于IE或TT浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索
2.这大概是所有浏览器通用的在标签页加入指定图标的方法：
把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

3.对于火狐浏览器：图标格式没有IE那么严格，GIF和PNG格式的图标也可以显示，图标名称也可以不是favcion
4.把图标放在根目录后，在<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="gif_favicon.gif" type="image/gif" >
或
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="png_favicon.png" type=" image/png" >

5.最后，ICO格式的图片可以通过MagicICO这个小软件制作，注意这个软件只能识别PNG格式图片
软件下载地址：http://ishare.iask.sina.com.cn/f/9614427.html
6.链接在线的图片的时候，可以使用下面的方法（下面是CSDN图标，可以直接放在网页的head标签里面去，这样就能直接显示）
<link href="http://csdnimg.cn/www/images/favicon.ico" rel="SHORTCUT ICON">

四、
<link rel="prefetch" type="text/html" href="../html/04_表格标签.html"/>
涉及浏览器前端优化；详情请看大佬指点：
https://blog.csdn.net/yzbben/article/details/53762586?utm_source=blogxgwz4
https://blog.csdn.net/jiegeng2233/article/details/54631495
值得学习

五、
base标签是HTML语言中的基准网址标记，它是一个单标签，位于网页头部文件的head标签内，一个页面最多只能使用一个base元素，用来提供一个指定的默认目标，也算是一种表达路径和连接网址的标记。
常见的url路径形式分别有相对路径与绝对路径，如果base标签指定了目标，浏览器将通过这个目标来解析当前文档中的所有相对路径，包括的标签有（a、img、link、form），
也就是说，浏览器解析时会在路径前加上base给的目标，而页面中的相对路径也都转换成了绝对路径。
使用了base标签就应带上href属性和target属性。
1.该元素必须是空元素
2.该元素除了可以指定id属性外,还可以指定href和target
href: 指定所有链接的基准路径
target: 指定超链接默认在哪个窗口打开链接
可以取值
_blank:新的空白窗口打开
_parent:父容器窗口打开
_self: 当前窗口打开
_top：在浏览器的整个窗口打开链接，忽略任何框架。
框架标签的name值: 指定某个框架标签打开
实例：
              <head>
       <base href="http://www.baidu.com" target="_blank" />
   </head>
   <body>
       
       <a href="index.html">测试1</a>

       
       <a href="demo.html">测试2</a>
               </body>

六、<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

七、<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

八、<meta>元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
注意：<meta> 标签通常位于 <head> 区域内。

注意：元数据通常以名称/值对出现。

注意：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
HTML5 不支持 scheme 属性。
实例

实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">


<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

还有一个 viewport 属性，它用于移动端显示优化的。
可以参考这篇文章：viewport 深入理解（https://www.runoob.com/w3cnote/viewport-deep-understanding.html）
还有一个属性：minimal-ui，参考：

iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏（http://36kr.com/p/210516.html），这个在 iOS8 中已经废弃了。
实例5：

                                <meta name="author" content="xyr"/>//说明：标注网站的作者,及作者的相关信息
       <meta name="website" content="http://www.baidu.com"/>
       <meta name="copyright" content="2001-2018 sxt.com"/>
       
       <meta name="keywords" content="Java技术大数据"/>keywords用来告诉搜索引擎你的网站关键字是什么，允许多个关键字，中间用逗号隔开。
       <meta charset="utf-8"/>
       <meta name="description" content="html的meta学习,meta是html语言head区的一个辅助性标签。"> 说明：description用来告诉搜索引擎你的网站主要内容。
                               <meta name="topic" content="your website's topic">
                               <meta name="subject" content="your website's subject">
                                说明：topic、subject用来告诉搜索引擎你的网站主旨、主题。

       

       
       <meta http-equiv="expires" content="Sat Sep 27 16:12:35 CST 2018"/>
       
       <meta http-equiv="Pragma" content="no-cache"/>
       
       
       <meta http-equiv="refresh" content="2"/>
       
       <meta http-equiv="refresh" content="4;URL=http://www.baidu.com"/>
       
       <meta http-equiv="set-cookie" content="name=value expires= Sat Sep 27 16:12:30 CST 2019, path=/" />
       
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name ="viewport" content ="width=device-width,initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

为移动设备添加 viewport，content 参数：
              *   `width` viewport 宽度(数值/device-width)
              *   `height` viewport 高度(数值/device-height)
              *   `initial-scale` 初始缩放比例
              *   `maximum-scale` 最大缩放比例
              *   `minimum-scale` 最小缩放比例
              *   `user-scalable` 是否允许用户缩放(yes/no)
大佬指点：https://www.cnblogs.com/lsongyang/p/10071052.html

九、<img>标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。
1、图片四要素
           src:图片路径
           alt:
               1.有利于seo优化
               2.如果图片不存在会显示对应的提示信息
               3.某些浏览器将鼠标放置在图片上方，也会显示，但是部分浏览器不支持，可以使用
                                                title属性
           height: 图片的高
           width: 图片的宽
2、img标签的usemap属性，usemap 属性将图像定义为客户端图像映射。

图像映射指的是带有可点击区域的图像。

usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。

3、ismap 属性和 usemap 属性的应用差异：

地图就是很好地应用 ismap 和 usemap 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等。

usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。

实例：
客户器端图像映射：

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

4、area标签属性：href跳转地址，<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......shape设置热点的形状，coords设置热点的大小：

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
HTML5 中不支持以下属性：align（规定如何根据周围的文本来排列图像）、border （规定图像周围的边框）、hspace（规定图像左侧和右侧的空白）、longdesc（指向包含长的图像描述文档的 URL）、vspace（规定图像顶部和底部的空白）。

十、

       
十一、


       <video controls="controls">
           <source src="../../video/07.员工管理系统完善.mp4" type="video/mp4"></source>
           <source src="../../video/07.员工管理系统完善.ogv" type="video/ogv"></source>
           <source src="../../video/07.员工管理系统完善.webm" type="video/webm"></source>
           当前浏览器不支持 video直接播放，点击这里下载视频：
       </video>


   <audio src="../青藏高原.mp3" controls></audio>

十二、



<frameset rows="150,*">
       <frame src="top/top.html"/>
       <frameset cols="150,*">
           <frame src="left/left.html"/>
           <frame name="myframe"/>
       </frameset>
</frameset>

注意: frameset标签必须把body元素去掉

<iframe src="test04.html" width="500" height="400"></iframe>
<iframe src="test05.html" width="500" height="400"></iframe>
<iframe src="test06.html" width="500" height="400"></iframe>

<h3>导航栏</h3>
<a href="test03.html" target="mainFrame">test03</a>
<a href="test04.html" target="mainFrame">test04</a>
<a href="test05.html" target="mainFrame">test05</a>
<iframe name="mainFrame" width="800px" height="500px"></iframe>

posted @ 2019-02-26 08:25 偷偷学习被我发现阅读(396) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端基础小标签2

公告