• 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.


    笔记说明

    《CSS3实战手册第3版(影印版)》可以消除Web设计工作的痛苦,并且带给你:HTML——重新入门。如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造。若你是HTML高手,你将学会如何像CSS设计者那样思考。
    全书共18章,五大部分600来页。
    可能是出版方认为本书英文很好懂,所以就不找译者翻译了。

    本来为作为一个行外人及英语渣,看这书会是很艰难的过程。但读过之后发现,相比一些拙劣的中文翻译书,居然觉得轻松了很多。
    不同于一般CSS书枯燥的“选择器-盒模型-文字效果-其它属性”这样罗列一大堆类似说明手册的文字,”本书从编写良好的html结构开始说起,讲述了CSS3基本规则,布局排版,进展,手把手教读者做出符合h5规范的网页。作者本职是做网络出版物,因此,他的设计风格带有鲜明的出版物特性。
    似乎了解css用法的人再读这书有点浪费时间。但是其中大量的tips,扩展阅读穿插其中,篇幅容纳不下的话还给出了文章链接。让你明白很多平时不知其所以然的操作。实例主要用于让读者去实践本书的思想,而不是讲述操作。我觉得,上过几堂速成课,只知道用法,做出貌似不错的效果,并不能算入门。真正入门,应该研究一两本类似这样的书。读完之后少能够辨别出初学者,或者学艺不精者写的代码。就算达到目的了。

    第一章 编写可供CSS调用的html


    开头都会说的html的黑历史——过去与现在:


    语义标签如h1等早在html语言诞生之初就有了,对Web文档有初步的的支持——但是,设计者通常用标签的自带效果来作效果,因为展示内容的需要,出现了乱用的情况。另一方面table布局的不合理性,让开发者不得不直接切图这种落后的方式做网页。——而到现在,html终于被公认应该执行网页骨架的职能,而不是拿去干其他事情。所有需要担心的样式问题,用CSS去解决吧。

    html


    思考结构:逻辑关系主次架构,不要在行间加无谓的东西。

    简化的html结构对搜索引擎是友好的。搜索引擎遍历整个页面才能简历索引,当结构过于复杂,爬虫可能没兴趣再读下去。

    注意两个标签的作用:——div和span

    div和span是万能的行级标签。你可以用它设计你想的任何效果(如果可以实现的话)。前者用于包装块状元素,后者则常用于包装文本。
    除了万能容器标签以外,H5提供了多种语义化方案。懂得它们将大大提升网页的内涵。比如h1就是用于网页中最主体的内容。其它举例如下:

    • 一组相关的元素都可以用<section>包裹。
    • 侧边栏可以用<aside>
    • <footer>定义一组通常放在网页尾部的元素
    • <nav>一般用来做主导航。
    • <figure>是用来包裹图片元素的容器。作为图片描述内容,应该使用<figcaption>
      ......

    相对于万能标签来说,h5标签的大大增强了语义。对谷歌来说,更喜欢开发者使用这些标签,然而,IE8及以前的浏览器都不能完全支持它们。解决方案是:引入js插件让他们支持。

    <!--[if lt IE 9]>
                <script src="scripts/html5.min.js"></script>
                <script src="scripts/respond.min.js"></script>
            <![endif]-->
    

    规划好你的页面


    比如最简单一个两列式布局,相似的内容合并在一个模块。头部——header,主体——article,边栏——aside/section,尾部——footer,最后再把上述的内容用一个section包起来

    废弃的标签


    • <font>已经过时。后面会讲到。
    • <b><i>尽量用<strong><em>代替。尽管html4尝试废弃这两个标签,但h5又把他们捡回来了。对于只是让它外观看上去是这样,但不是实质性强调的内容,还是可以用。对于出版物标题上的斜体,用<cite>就再好不过了。
    • <table>不是没有用,但表格本来不是专门作页面布局的。
    • 尽量避免在<body>上做文章。
    • 用margin,不滥用<br>:因为浏览器可以自动给你的标记间插入其它空格(space),如果还不满意,就用margin去调整它吧。

    作为总结就是:不要乱用——对于不适应设计要求的标签,尽可能用CSS去控制它们。而不是再建新的标签尝试控制样式。

    验证你的网页:


    xhtml要求所有元素必须被闭合,基本的元素必须放在指定的标签——比如说title必须放head标记内,而h5放松了这方面的语法要求,实际上,如果开发者忘掉这些规则。甚至导致网页不能如预期显示,甚至导致CSS停止工作。为此,可以去http://validator.w3.org/ 验证你的网页是否规范。

    几个提示


    如果你对于html结构还是不得要领,可以尝试这些做法:

    • 重要的内容尽可能放到h标记里去——重要事情说三遍。同级内容放一块。高级标题不要放到低级标题里。
    • 文本段落放到p标记里
    • 诸如标题组,导航栏放到ul-li里面去。
    • 诸如目录这样的内容,用有序列表oi-li去控制
    • 对于引用,独立成段的用<blocquote>,段内引用使用<q>
    • 类似版权声明,作者联系等,用<adress>就再好不过了
    • 所有用标记,标记属性实现的样式,CSS全部都能做到
    • 对于可能被识别的代码,又不想用code标记的,用div或span包装,再做样式化处理。别乱用其它的标记(作者建议)
    • div也不是滥用的:能用语义化的就用语义化标签。
    • 对于非自闭合标签,强烈建议闭合。而少数自闭合标记,建议不予闭合。(如<br><img>等)
    • 最后一点,做完之后拿去网上check一下。

    论Doctype的重要性


    HTML的行为是由公开声明决定的——即所谓的DTD。DTD控制了你的代码如何被解释,被哪个版本的语言解释。
    事实上这和CSS紧密相关。如果你抛开不顾doctype声明不顾,浏览器就会进入quirk模式。简单地说,浏览器会按远古时代的的网页方式(譬如IE5)去解释你的代码。

    所幸h5的doctype声明简单多了

    <!doctype html>
    

    让IE8只是IE8


    IE8解释网页的行为总体来说比较诡异。可能回退到IE7甚至更早的版本——比如用户的不当操作,quirk模式等等——为了阻止这种诡异行为,让IE8始终在正常模式下工作——应该在header标签内加上:

    <!--低版本浏览器模拟渲染-->
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    
    IE6、7或8?这是个问题

    结论就是看情况.一个是国家,一个是用户群体。至少,IE8还是不能忽略的。

    跨浏览器测试

    根据客户来选择浏览器版本。
    ie可以装个多版本测试工具,同时再装若干主流浏览器,safari可以找下windows版,或者在chrome下简单模拟一下。

    基础HTML知识讲到这里就结束了。

  • 相关阅读:
    angular基础
    函数&闭包
    springboot + 拦截器 + 注解 实现自定义权限验证
    idea点击RUN启动报错: Broken configuration due to unavailable plugin or invalid configuration dat
    解决“指定的服务已经标记为删除”问题
    Mybatis中的XML中需要用到的转义符号整理
    springboot 2.0+ 自定义拦截器
    idea中lombok的使用
    springboot集成PageHelper,支持springboot2.0以上版本
    IDEA 修改JSP和后端数据后,页面刷新可以实时更新
  • 原文地址:https://www.cnblogs.com/djtao/p/6087712.html
Copyright © 2020-2023  润新知