HTML入门2
开始将注意力转移到具体的元素里和页面了。
在页面加载完成的时候,标签head里的内容不会显示出来,包含了页面的title和css样式以及一些元素据信息,比如作者,描述文档,下面将具体分析html文档里的head元素;
head标签内容不会在浏览器里显示,主要是包含一些元数据;在大型网页里会包含很多元数据,可以使用developer tools查看网页的head内容;
title标题和h1标题的区别,title是整个html文档的标题不显示给用户,而h1相对页面来说的表i,表示故事的标题,新闻标题等等;
元素title也有着其他作用,如果添加书签,可以使用bookmarks>bookmar this page,会看到title内容被作为建议的书签名;
元数据 meta
元数据就是表述数据的内容,使用该元素来为文档添加描述信息,有很多种类下面包含一些经常要用的类型;1、指定文档字符编码 <meta charset = "utf-8"> 2、添加作者和描述 许多meta元素包含 了name和content特性,name特性指定了meta元素的类型,说明该元素包含了什么类型的信息;
content指定了实际的元数据内容;因此,可以有下面的例子:
<meta name="author" content="chirs mills">
<meta name="description" content=" the MDN learning area aim s to complete beginners to the web with all they need to know to get started with developing web sites ana applications ">
指定页面内容的关键字的页面的内容的描述很有用,更加有益于搜索引擎的相关搜索出现的更多,更加利于Search Engine Optimization 也叫SEO 俗称搜索引擎优化;同时许多meta特性不再使用类似keyword <meta>元素提供给搜索引擎,但是因为作弊者错误引导keyword,会被错误搜索;
在站点增加自定义图标
为了丰富网站设计,添加对自定义图标的引用,16*16是这种图标的第一种类型,出现在标签页中或者标签面板中的书签页面中,给页面添加图标的方式如下:
1.将其保存在与网站和索引页面相同的目录中,以.ico格式保存,确保能在IE6中一样久远显示
2、添加到head中引用
<link rel="shortcut icon" href="favcicon.ico" type="iamge//x-icon">
HTML应用css和javascript
<link rel="stylesheet" href="my-css-file.css">link元素具有两个属性,表明文档的样式表和样式表文件的路径
<script>部分放在尾部会是一个更好的选择,因为这样确保在加载脚本之前浏览器已经解析了HTML内容,如果脚本加载某个不存在的元素,浏览器会报错。script看起来像是一个空元素但实际上应该有个结束标签,是具有包裹性质的元素。
为文档设定主语言,为你的站点设定语言,通过添加lang属性到HTML开始标签中实现。例如:<html lang="en-us">
这一点作用很大,设置好了语言,html文档更容易被搜索引擎索引到,对于那些使用品目阅读器的人有很多帮助,同样也可以一个span标签包裹一段日语,向其中添加lang属性。
总结,第二天的进展,内容比较少,主要讲head标签里内容构成,属性相关站点主语言,外部资源引入等问题。
HTML入门2的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问
一.反向代理 1.在192.168.189.130机器启动tomcat服务,http://192.168.189.130:8080/ 访问服务正常 2.在192.168.189.131机器配置ngin ...
- Hadoop记录-queue mysql
#!/bin/sh ip=10.116.100.11 port=8088 export HADOOP_HOME=/app/hadoop/bin rmstate1=$($HADOOP_HOME/yarn ...
- [Android] Android RxJava2+Retrofit2+OkHttp3 的使用(一) --基础篇 Retrofit2 的使用
本文是 Android RxJava2+Retrofit2+OkHttp3 的使用(一) --基础篇 Retrofit2 的使用 本文的目标是用 Retrofit写一个网络请求: 本文以从获取天气预报 ...
- PHP中的常用数组操作方法
一.数组操作的基本函数 数组的键名和值array_values($arr); 获得数组的值array_keys($arr); 获得数组的键名array_flip($arr); 数组中的值与键名互 ...
- Linux中安装C++编译器codeBlock,并配置opencv链接库
1.Linux中安装codeBlock https://blog.csdn.net/xinyunyishui/article/details/50967395 2.CodeBlock中的中文显示不完全 ...
- Javascript arguments.callee和caller的区别
一.callee 在学习callee之前,需要先学习arguments. arguments: 含义:该对象代表正在执行的函数和调用它的函数的参数. 语法: 1 [function.]argument ...
- Spring系列(二) Bean装配
创建应用对象之间协作关系的行为称为装配(wiring), 这也是DI的本质. Spring中装配Bean的方式 Spring提供了三种装配Bean的方式. 隐式的Bean发现机制和自动装配 Java ...
- Linux的vim编辑器中的翻页命令
当我们进入Linux的vim编辑器查看脚本时,按上下键查看是不是非常慢?这个时候就要用到我们的翻页快捷键了,快捷键命令如: 整页翻页命令为:Ctrl + f 键 f 的英文全拼为:forward: ...
- springMVC源码笔记
springMVC 设计总览 下图来源:https://www.cnblogs.com/fangjian0423/p/springMVC-directory-summary.html 下图来源:htt ...
- 基于scrapy-redis分布式爬虫的部署
redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...