html知识点回顾--标签

二、标签

1、标题标签:h1~h6

标题标签分为:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

h1标签一般喜欢用在logo、网站标题或者头条新闻上,需要自己选个合适的标签。h2主要出现在页面的主体内容的文章标题和栏目标题上,可与h3搭配使用。h3一般主打页面的边侧栏。h4是它的辅助,出现频率不高。
h1~h6默认字体属性:font-weight:blod;有默认margin值。

2、段落标签:p

定义段落,是块级标签。有默认margin。一般在css中p{margin:0; padding:0}就可以清除默认样式带来的空白问题。

3、链接标签:a

<a href="#" title="" target=""></a>

a标签是一个经常用到的标签,他有三个属性。

  • href可以是一个完整的链接地址,如“http://www.baidu.com”;
    • 可以是“#”,点击后页面跳到最顶端;
    • 可以是“javascript:;”或者“javascript:void(0);”,鼠标移上去有小手,但点击过后不会跳到页面顶端。
  • title可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。这里有个小技巧,如果希望注释多行显示,可以使用 作为换行符。

可以将鼠标移上去试一试哦!

<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>

百度网站

<a href="http://www.baidu.cn" title = "百度的&#10;中文站点">百度网站</a>

百度网站

  • target属性规定了在何处打开超链接的文档。(以下摘抄自:http://www.cnblogs.com/Tally/archive/2013/02/19/2916475.html)

    有 4 个保留的目标名称用作特殊的文档重定向操作:
    _blank
    浏览器总在一个新打开、未命名的窗口中载入目标文档。
    _self
    这个目标的值对所有没有指定目标的a标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题标签中的 target属性一起使用。
    _parent
    这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
    _top
    这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

4、em标签和strong标签

两者都是表示强调,但strong在语义上表示强烈的强调。可以看一下他们的区别:

我是em标签
我是strong标签

5、div标签和span标签

div标签可以把文档分割为独立的、不同的部分。它是一个块级元素。

<div style="background-color:#00FF00">
      <p>This is a paragraph.</p>
</div>


This is a paragraph.


span标签用来组合文档中的行内元素。没有固定的格式表现,需要对它进行css样式设置。

<p><span>some text.</span>some other text.</p>

6、img标签

img用来插入图片,它有三个属性:

* src:可以是一个网上的图片路径,也可以是本地的图片路径。
* title:鼠标滑过图片时显示的文本
* alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;


sorry

需要注意的是,img在加载不出来时,会有默认的图片border

7、q、blockquote、br、hr、address、code、pre标签

  • q 短文本引用 比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么”标签是你所需要的“。
<p>Here comes a short quotation: <q>This is a short quotation</q></p>

Here comes a short quotation: This is a short quotation

请注意,浏览器在引用的周围插入了引号。

  • blockquote 长文本引用
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

请注意,浏览器在blockquote 元素前后添加了换行,并增加了外边距。

<hr/>
<address>样式为斜体</address>


样式为斜体

问题:address这里应该是斜体,为什么不是斜体呢???

code 在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用code标签了

<code>
    var i = 0;
    i++;
    alert i;
</code>


var i = 0;
i++;
alert i;

问题:code这里应该是一行,为什么会自动分行呢???

pre 预格式化的文本 要插入多行代码时不能使用code标签,如果是多行代码,可以使用pre标签

<pre>
    var i = 0;
    i++;
    alert i;
</pre>

运行结果是:

    var i = 0;
    i++;
    alert i;

meta标签(我好像只会用,不知道为什么是要这个样子。。。亲们就看看就好)

meta标签是位于html头部的标签,为html提供数据,该数据不会显示在页面上。

  • 申明编码
<meta charset='utf-8'>
  • 优先使用IE最新版本和Chrome
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  • 浏览器内核控制

因为国内很多浏览器都是双内核,即webkit和Trident。webkit内核高速浏览器,IE内核兼容网页和旧版网站。该标签可以控制浏览器选择何种内核渲染。

<meta name='renderer' content='webkit|ie-comp|ie-stand'>
  • 页面关键字
<meta name='keywords' content='your tags'/>
  • 页面描述
<meta name='description' content='120|150 words'/>
  • 搜索引擎方式
<meta name='robots' content='index,follow'/>

它的content值有以下几种情况:

  • all:文件将被检索,且链接可以被查询
  • none:文件将不被检索,且链接不可以被查询
  • index:文件将不被检索
  • follow:链接可以被查询
  • noindex:文件将不被检索
  • nofollow:链接不可以被查询
  • 页面重定向和刷新
<meta http-equiv='refresh' content='0;url="####"'/>

content内的数字代表多少时间后刷新,如果有url,则会重顶想到指定网页,一般不建议使用!!!

  • 网页作者信息
<meta name='author' content='author name'/>
  • 移动设备
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
  • webApp全屏模式:伪装app,离线应用
<meta name='app-mobile-web-app-capable' content='yes'/>
  • 隐藏状态栏、设置状态栏颜色:只有在开启webApp全屏模式才生效。content的值为default|black|black-translucent
<meta name='app-mobile-web-app-status-bar-style' content='black-translucent'/>
  • 添加到主屏后的标题,content的值为default|black|black-translucent
<meta name='app-mobile-web-app-title' content='标题'/>
  • 忽略数字自动识别为电话号码
<meta name='format-detection' content='telephone=no'/>
  • 忽略识别邮箱
<meta name='format-detection' content='email=no'/>

关于meta方面,还有form,有其他见解吗?欢迎交流!