自学HTML 1,HTML基础,HTML语法以及结构

OK,虽然很困,但是我也要完成今天的任务。

那我就从html的基本语法开始学吧。

一.Html语法:

HTML主要由标签构成,标签是HTML中比较重要的,但可能后边学了css可能就用不到标签了吧,不管怎样我都要整理下标签

1. 标签由开始标签起头,一定要有对应的结束标签收尾,如<body>起头的标签必须有</body>结束。但是呢也有特殊,有部分标签,默认情况下省略结束标签如<p><div>

2. 标签中的属性必须在标签内部的括号内。

3. 对一个文本使用多个标签时必须要按照嵌套的原则。

二.Html文档的结构

Html文档由<html>标签启并由</html>结束,然后就是几个必有的标签,<head>标签,<title>标签以及很重要的<body>标签这是我们最主要写的地方。

1. 头标签<head>

  头标签比较特别一般来说只能有6个标签放在头标签内,这个地方具体头标签能做什么还没了解,除了<meta>,<title>还有<link>,<base>,<style>,<script>这四个标签,下面分别介绍这几个标签

1.1<meta>标签

  <meta>HTML文档<head>标签的一个辅助标签。<meta>标签有两个重要的属性:namehttp-equiv,通常被用于优化页面被搜索的可能。具体的写法是在name后边输入属性,在content后边输入对应的属性的具体描绘的词汇。

(1)首先说他的第一个作用就是给搜索引擎的一些东西那什么可以告诉搜索引擎呢主要有下边几个。

   <1> keywords:向搜索引擎说明页面的关键字,content后边输入供搜索的具体关键字。

   <2>description:向搜索引擎描述主要的内容

   <3>generator:向页面描述生成的软件名,content后边输入具体的软件名称。

   <4>author:网页设计者,content后面输入设计者的名称

   <5>robots:限制搜索的防暑,content后面输入all,none,index,noindex,follownofollow,分别有不同的作用,限制页面被搜索的方式。

(2)第二个属性http-equiv,其作用是反馈给浏览器一些明确的信息,来帮助浏览器更精确的展示页面。如下面的代码

<head>

  <meta http-equiv=”content-type”content=”text/html;charset=gb2312”>

</head>

是告诉浏览器该页面是使用字符集gb2312,即国际汉子码。如果当使用者浏览器有这段代码的页面时,计算机内又没有gb2312字符集,浏览器会提示使用者“需要下载xx语支持”,还有一些很实用的特殊的效果我就归为第三类吧,实际他是第二个属性下的,但介于他的重要性就归为第三类吧。

<3>页面自动跳转效果看下下边的代码

<html>

  <head>

<tile>页面跳转实例</tile>

<meta http-equiv=”refresh”content=”6;url=http://www.baidu.com/”>

</meta>

</head>

<body>

6s后自动跳转到百度

</body>

</html>

此例子中注意以下几点

1. refresh:对属性的具体描述,说明是令页面自动跳转的效果

2. Content:后边输入等待的时间,url后面输入跳转的网页的链接地址

3. Content=”6;url=...”:作用是令页面在6秒后自动跳转到设置好的某个网页。如果去掉url跳转的地址,所起的作用是令页面6秒刷新一次。

1.2头标签的<link>标签。

<link>标签定义一个外部文件的链接,经常用于连接外部的css样式。

1.3<base>标签

目前还不知道有啥用,到接触到了再回来补充吧

需要注意的是,<link><base>这两个标签不需要结束标签。

1.4<style>标签

<style>标签用来定义css的样式。后边学到css就明白了

需要注意的是<style type=”text/css”>XML的标准格式,更严格的写法。一般情况下,省略text/css也是可以,大部分浏览器都能识别<style>标签,不过不提倡这种写法,严格写法才能避免出错。

1.5<script>标签

<script>标签用来定义页面内的脚本,如页面中常用的脚本语言JavaScript,通过<script>的事

件属性放入HTML文档中。使用方法如下

<script type=”text/javascript”>

</script>

1.6标题标签<title>这个就是页面标题吗,不需要过多介绍。

2. .以上全为头标签中的几个标签而主体标签<body>标签是我们主要的施工现场。

  不过body标签也没啥好说的就是一个身体吗,具体内容还是看自己往里边加什么

小结:HTML像人的身体分为头和身体,头又包括那6个标签,身体是人的主体。

另外复制了别人的一个博客具体的meta标签的作用以及例子

页头meta标签

1.meta标签特性

meta标签在网站中有很强大的功效,一个设计较好的meta标签,可以大大提高网站被搜索到的可能性,对搜索引擎优化具有至关重要的作用。以下是meta标签的特性:

  • meta标签是单标签,格式如下:

          <meta 属性="值" />

  • meta标签永远位于head元素内部

  • meta标签分两大部分:http标题信息(http-equiv)和页面描述信息(name)

2.meta标签的http标题信息

http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是:

<meta http-equiv="参数" content="参数变量值"/> 

其中http-equiv属性主要有以下几种参数:

(1)expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

举例:

<meta http-equiv="expires" content="Wed, 20 June 2016 10:30:00 GMT">  

注意:必须使用GMT的时间格式。

(2)pragma(cache模式) 

说明:禁止浏览器从本地计算机的缓存中调阅页面内容。

举例:



<meta http-equiv="pragma" content="no-cache"/>  

注意:这样设定,访问者将无法脱机浏览。

(3)refresh(刷新)

说明:定时刷新让网页自动链接到其它网页。

举例:

<meta http-equiv="refresh" content="5;URL=http://www.baidu.com"/>

注意:其中的5是指停留5秒钟后自动刷新到URL网址,秒数和URL直接用分号隔开。

(4)content-type(显示字符集的设定)

说明:设定页面使用的字符集。

举例:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

charset选项:

GB2312、GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码。只是对于我们中国人的网站来说,用这三种编码比较多。

  • UTF-8 (UTF-8包含全世界所有国家需要用到的字符,是国际编码,通用性强,又称万国码。如:阿里云、淘宝网等都采用这种编码方式)
  • GBK  (GBK是包括中日韩字符的大字符集合。如:京东网采用的是GBK编码)
  • GB2312  (GB2312是GBK的子集,是一种简体中文编码,通行于中国大陆。如:腾讯网、网易等都采用该种编码)

3.meta标签的页面描述信息

name是描述网页的,对应于content(网页内容),以便于搜索引擎机器人查找、分类,目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。

meta标签的name属性语法格式:

<meta name="参数" content="具体参数值" />

(1)keywords (关键字)

说明:告诉搜索引擎你网页的关键字是什么。

举例:

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

注意:上面代码来自于京东网,关键词之间用英文逗号隔开。

(2)description (网页描述)

说明:description用来告诉搜索引擎你的网页主要内容。

举例:

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!">

fpYd9OJh1n4hXYA2.png

上图是从百度搜索京东,红框内的信息就是meta标签,description描述的内容。

(3)robots (机器人向导)

说明: robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。

举例:

<meta name="robots" content="all"/>

参数说明:

all:搜索引擎将索引此网页,且页面上的链接可以被查询,等价于index和follow

none:搜索引擎将忽略此网页,且页面上的链接不可以被查询,等价于noindex和nofollow

index:文件将被索引

follow:搜索引擎通过此网页的链接,索引搜索其它的网页。

noindex:文件将不被检索,但网页中的链接,可以索引搜索其它的网页

nofollow:文件将不被检索,搜索引擎不可以通过此网页的链接,继续索引其它网页 

(4)author (作者)

说明:标注网页的作者或制作组。

举例:

<meta name="author" content="作者的名字"/>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值