html的头部标签<head>和</head>中,可以嵌套用来表达页面内容的标签,除了用<title>指定文件标题,用<meta charset="UTF-8">指定页面编码之外,还有另外的好几个标签。特别是用于SEO的那些标签。
SEO是搜索引擎优化的意思,意思就是你在某搜索工具中,搜索某个内容时,为什么指向并跳转到你的网站中,而不是别的网站,这就涉及到SEO可了。如果想要搜索引擎搜索到你,你必须保证用户要搜索的内容出现在你的Meta说明中。
为搜索引擎定义的关键词,提供给SEO搜索。
<meta name="keywords" content="Python, 前端, 小程序, App,Java,嵌入式">
为网页定义描述内容,也是SEO的一部分。
<meta name="description" content="老陈说编程,编程界的刘德华">
页面定时刷新,在H5之前,实时更新页面数据的时,常用这种方法。但很不科学,因为浪费资源。在H5时,改用Websocket了。
<meta http-equiv="refresh" content="15">
定义页面作者是谁。
<meta name="author" content="老陈">
在<head></head>中,用<link>标签,引入外部资源。一个是CSS文件,一个是icon。引入CSS文件如下。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
引入顶部icon的方式。
<link rel="shortcut icon" href="图片url">
引入共用的javascript文件。
<script type="text/javascript" src="scripts.js"></script>
如果你定义的CSS或JavaScript代码,只当前页面应用,那可以在<head></head>中用<style></style>和</script>标签对。有关CSS和Javascript的应用,后面再说。
<head>
<style type="text/css">
body {background-color:red}
</style>
<script type="text/javascript">
document.write("老陈说编程");
</script>
</head>
好了,有关HTML头部标签常用的内容,也就这么多了。如果你喜欢,那就转发出去,如果你不喜欢,那就点个赞。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。
#前端##程序员##HTML5##CSS##鸿蒙#
、关于HTML语义化,你知道都有哪些标签?
语义化就是让计算机能够快速读懂内容,高效的处理信息。搜索引擎只能通过标签来判断内容的语义,因为页面的很大一部分流量来自搜索引擎,要使页面尽可能地对搜索引擎友好,所以尽可能地使用语义化标签,如:
div是division分离,span是span范围,table是表格,ol是orderList有序列表,ul是unorderList无序列表,li是list item列表选项,html5进一步推进web语义化的发展,使用了一些新的标签有header、artical、address等。
2、HTML标签分类有哪些?都有啥特点?
默认宽度是100%
块级标签独占一行
块级标签可以使用height设置高度
常见块级标签:div、p、h1~h6、ol、ul、table、form等等。
默认宽度由内容撑开
行级标签不会自动换行,从左到右一次排列
行级标签height设置高度失效,高度由内容撑开。
常见行级标签:span、a、br、strong、lable、i、em。
结合行级和块级的优点
可以设置元素的宽高
还可以将多个元素显示在一行从左到右一次排列。
常见行内块标签:img、input。
3、网页编码设置有几种方式?
Charset属性规定HTML文档的字符编码,常见的属性值有以下几个:
4、HTML的框架优缺点有哪些?
Html框架有iframe和frame两个,将多个页面通过一个浏览器窗口显示。
框架的优点:
缺点:
5、HTML5有哪些新特性,移除了哪些元素?
H5新增了图像、位置、存储、多任务等功能。
新增元素:
移除元素:
Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
6、如何区分HTML和HTML5?
DOCUMENT声明方式是区分的重要元素。
根据新增加的结构、功能来区分。H5有好多新增语义化标签。
7、H5文件离线存储怎么使用,工作原理是什么?
在线情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有改变,就不会有任何操作,如果文件改变了,那么就会重新下载资源,并进行离线缓存。
页面头部加入manifest属性。如:<html manifest="demo.appcache">
在cache.manifest文件中编写离线存储的资源。
8、Cookies,sessionStorage和localStorage的区别?
共同点:都是保存在浏览器端,而且都是同源的。
区别:
9、title与h1的区别、b与strong的区别、i与em的区别?
title属性没有明确意义,只表示标题,h1表示层次明确的标题,对页面信息抓取也有很大的影响。
strong标明重点内容,语气加强含义,b表示无意义的视觉表示
em表示强调文本,i是斜体,是无意义的视觉表示
视觉样式标签:b、u、i、s
语义样式标签:strong、em、ins、del、code
10、viewport 所有属性 ?
viewport是用户网页的可视区域,使用meta设置viewport时有很多属性,分别对以下各个属性介绍
安卓中还支持:target-densitydpi,表示目标设备的密度等级,作用是决定css中的1px 代表多少物理像素。
11、meta标签的name属性值?
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索机器人查找信息和分类信息用的。
Meta标签的name属性语法格式是:
<meta name=”参数”content=”具体的参数值”>
Name主要有以下几个参数:
Content的参数主要有name的参数来决定,如果是关键字的时候,多个关键字之间使用逗号隔开,一般使用5个关键字为宜;如果是描述的时候,描述长度一般控制在200字左右;如果是索引的时候,一般使用inde、noindex、none、all,默认是all。
作为一个前端,经常写html文档,但是却很少去在意头部的标签有哪些,也很少在意每个标签的作用,下面我们来详细了解下。
头部的标签,也就是写在<head><head/>里。通常会有6个标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head>
<body> 文档内容...... </body>
</html>
一、<title>元素。
1.title 标签定义了文档的标题,在HTML文档中是必须的。它会展示在浏览器的工具栏上。
2.如果要展示一个图标,可以再加一个<link>标签,<link>标签的 rel属性为“icon”,后面的
href跟上图片的地址。
<link rel="icon" href="图片url">
二、<base>元素。
base标签描述了基本的链接地址,该标签作为HTML文档中所有的链接的默认链接
<head>
<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
<body>
<img src="banner7.jpg"/>
</body>
上面的img标签的src链接的地址就是base里的地址加上img里的地址。
三、<link>元素。
link标签定义了文档与外部资源之间的关系,它通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
四、<style>元素。
style标签定义了HTML文档的样式,这个我们经常会使用到,都不会陌生。
五、<meta>元素。
meta标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。它常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
// 编码格式定义
<meta charset="utf-8">
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用">
// 定义网页作者:
<meta name="author" content="Runoob">
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
// 视图层的参数定义
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
// content属性值 :
// width:可视区域的宽度,值可为数字或关键词device-width
// height:同width
// intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
// maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
// maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
// user-scalable:是否可对页面进行缩放,no 禁止缩放
六、<script>元素。
script标签用于加载脚本文件,比如说javascript,可以直接书写js,也能用于链接外部的js文件。
<script>
document.write("Hello World!")
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
*请认真填写需求信息,我们会在24小时内与您取得联系。