zoukankan      html  css  js  c++  java
  • HTMLCSS学习笔记(二)---- 标签、选择符、超链接及SEO

    • img标签和a标签

    1. img标签 (单标签)

    <img src="xx.jpg" alt=xxx> 单标签 alt后是名字,被搜索引擎识别

    alt的命名有图片出现时不显示,若图片无法加载,某些浏览器会显示名字

    2. a标签

    • 连接作用

    <a herf="http://cnblog.com/"  >a标签链接</a>

    点击“a标签链接”会跳转至网页

     target="_blank" 会新打开一个空白页

    target="_self"在当前页面打开

    <base target="_blank"> 定义页面中所有链接打开方式

    • 下载作用

    <a href="xxx.ppt">点击下载</a>

    当a标签href内是文件时,点击会直接下载文件

    • 跳转作用(锚点)

    <a href="#b1">1111</a>

    <a href="#b2">2222</a>

    <div  style="height:10000px;" id="b1">

    1111

    </div>

    <div style="height:10000px;" id="b2">

    2222

    </div>

    点击1111或2222会跳转相应的模块


    • 常用标签

    <hx></hx>(x 1~6) 标题

    从上往下重要度减小,标题字号减小

    <p></p>  段落

    <strong>强调(页面展示为粗体)</strong>

    <em>强调(页面展示为斜体)</em>

    <span>区别样式</span>

    <ol><!--有序列表-->

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    </ol>

    <ul><!--无序列表-->

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    </ul>

    <dl><!--定义列表-->

      <dt>定义列表标题</dt>

      <dd>定义列表项</dd>

      <dd>定义列表项</dd>

      <dd>定义列表项</dd>

    </dl>


    • SEO(搜索引擎优化)

    部分方法:

    1.页面标签语义化

    2.使用对SEO有利的标签:h1/h2/strong....(尽量合理)

    3.提高页面关键词密度

    4......

    SEM:搜索引擎营销(包含SEO)


    • 基础选择符

    id 选择符(选择唯一) #box1{xxx}

    群组选择符 #box1,#box2{xxx}

    class(类)选择符【可以重复使用的id】

    包含 选择符 父级内加空格 div p{xxx}


    • 选择符优先级

    同级默认后者样式覆盖前者

     样式优先级

    类型选择符(1)<class (10)< id(100)< style(行间样式)(1000)< js

    名字的先后顺序和样式优先级的顺序无关!!


    • a伪类详解

    <a href="#">a 标签(链接,下载,锚点)</a>

    伪类:元素在特定情况下出现的样式。

    /*

    link 未访问(默认) a:link{font-size:20px;text-decoration:none;color:green;}

    visited 访问过后(点击过后)a:{visited:color:black;}

    hover 鼠标悬停(鼠标划过)a:{hover:color;text-decoration:underline;font-size:100;}

    active 链接激活(鼠标按下)a:{active:color:yellow;}

    顺序不可变!!!!

    */

    div等可以让鼠标划过的基本支持使用伪类。

    IE6不支持a标签以外的任何标签的伪类。

    IE6以上的浏览器支持所有标签的hover伪类。

    伪类应用

    1.四个伪类全用(搜索引擎,新闻门户,小说网)

    2.一般网站只有两个(a{} a:hover{})

  • 相关阅读:
    Windows 2008 R2 安装 Windows phone 7 开发环境
    win 7,win2008 无法给新建用户完全权限
    基于Ajax的Asp.Net 简易在线聊天室
    phpwind ecshop 用户整合
    UVALive 3942 Remember the Word(字典树+DP)
    UVA 11732 strcmp() Anyone? (压缩版字典树)
    UVA 11992 Fast Matrix Operations(线段树:区间修改)
    hdu 2222 Keywords Search(AC自动机模版题)
    动态规划基础练习笔记
    递归与分治策略基础练习笔记
  • 原文地址:https://www.cnblogs.com/BBeyes/p/6511905.html
Copyright © 2011-2022 走看看