zoukankan      html  css  js  c++  java
  • html+css学习笔记 2[标签]

    img标签/a标签


    <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用;


        a标签: 链接/下载/锚点 href地址等于标签id
        target 链接打开方式
        blank  新窗口
        self     当前窗口
        <base target="_blank"/> 定义页面链接默认打开方式

      常见标签


    div            块
    img           图片(单标签)
    a               链接、下载、锚点
    h1-h6        标题
    p               段落
    strong       强调(粗体)
    em            强调(斜体)
    span          区分样式
    ul              无序列表
    ol              有序列表
    li               列表项
    dl              定义列表
    dt              定义列表标题
    dd             定义列表项


    SEO :搜索引擎优化;

    部分方法:
    a、页面标签语义化;
    b、使用对SEO有利的标签:h1/h2/h3/strong/em……
    c、提高页面关键词密度;
    d、……等等;

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

    选择符

    id选择符(#)

    群组选择符(,)

    class选择符(.)

    类型选择符(div……)

    包含选择符(div p)

    通配符(*)

    选择符优先级


    基础选择符的优先级
        类型  <  class  <  id  < style(行间)  < js
       

    测试:
        A、#header #div1 .box1 div .section p .link{………………}
        B、#some .base #font #call a{………………} 

    看高级选择符的个数 id最多的优先级越高 当然这仅仅是测试

    选择符使用原则:准确的选中元素,又不影响其它。 还有一个性能问题

    a的四个伪元素 伪类


    伪类:伪类用于向被选中元素添加特殊的效果。(元素在特定情况下才具备的。)

            link            未访问(默认)
            hover         鼠标悬停(鼠标划过)
            active         链接激活(鼠标按下)
            visited        访问过后(点击过后)


    A四个伪类的顺序:
        link    visited    hover  active
        (love hate 记忆方法!)
    应用和兼容性问题


    a伪类的应用:

    a、四个伪类全用(搜索引擎、新闻门户、小说网站)

    b、一般网站只用( a{}   a:hover{}  )

    IE6不支持a以外其它任何标签的伪类;

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

    标签样式初始化

    css reset 原则:
    但凡是浏览默认的样式,都不要使用。

    body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
    ol,ul{margin:0;padding:0;list-style:none;}
    a{text-decoration:none;}
    img{border:none;}

    常用重置代码

    body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} //内外边距重置
    table {border-collapse: collapse; border-spacing: 0;}                                           //表格边框两像素bug
    img {border: 0;}                                                                                 //图片ie蓝色边框
    ol,ul{list-style: none;}                                                                    //去掉黑点
    h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}                               //标签文字字体设置 设置父级标签 无效不继承
    .clear:after{content:"";display:block;clear:both;}  //清除浮动
    .clear{zoom:1;}                     //触发haslayout

    psb

    块状元素和内联元素

    块的特征
        1、默认独占一行
        2、没有宽度时,默认撑满一排
        3、支持所有css命令

    内嵌(内联、行内)的特征
        1、同排可以继续跟同类的标签
        2、内容撑开宽度
        3、不支持宽高
        4、不支持上下的margin和padding
        5、代码换行被解析

    相互转换

    display:block        显示为块

    使内联元素具备块属性标签的特性


    display:inline        显示为内嵌

    使行块属性标签具备内联元素的特性

    Inline-block的特点和问题

    特性:
    1、块在一行显示;
    2、行内属性标签支持宽高;
    3、没有宽度的时候内容撑开宽度

    问题:
    1、代码换行被解析;
    2、ie6 ie7 不支持块属性标签的inline-block;

    inline-block的应用、cursor

    图a片1

    a、分析结构(div 包一排a)
    b、a标签支持宽高,并且在一排显示
    c、有hover效果
    d、当前状态不能点!

    cursor 指针样式 (规定要显示的光标的类型)
    cursor:pointer | text | move ……
    cursor:url(hand.cur),pointer;

    面试题


    这么一段HTML,请挑毛病:

        <P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说

    &nbsp; 空格符

    标准:
    <p>哥写的不是HTML,是寂寞。</p>
    <p>我说:<br/>不要迷恋哥,哥只是一个传说</p>

    最佳:
    <p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>,是寂寞。</p>
    <p><cite>我</cite>说:<br/><q>不要迷恋哥,哥只是一个传说</q></p>

    title  元素的额外信息
    html标签:http://www.w3school.com.cn/tags/index.asp

    前端规范

    1、所有书写均在英文半角状态下的小写;
    2、id,class必须以字母开头;
    3、所有标签必须闭合;
    4、html标签用tab键缩进;
    5、属性值必须带引号;
    6、<!-- html注释 -->
    7、/* css注释 */
    8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;
    9、p,dt,h标签  里面不能嵌套块属性标签;
    10、a标签不能嵌套a;
    11、内联元素不能嵌套块;

  • 相关阅读:
    静态页面设置缓存、动态页面设缓存
    未能加载文件或程序集“WebGrease, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
    CS0016: 未能写入输出文件“c:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Files
    asp.net mvc 重定向
    win8 应用商店。 app下载的音乐和视频软件能打开,不能正常播放 解决方法
    JS 阻止事件冒泡
    ASP.NET MVC4空MVC项目添加脚本压缩和合并
    TabHost说明
    colors.xml
    MMU (一)
  • 原文地址:https://www.cnblogs.com/aix1314/p/3868446.html
Copyright © 2011-2022 走看看