为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 一周一章前端书·第12周:《HTML与C...

一周一章前端书·第12周:《HTML与CSS进阶教程》S01E01

2018.09.06 09:36 1689浏览

第01章 HTML基础知识

1.1 HTML和CSS的进阶简介

  • HTML、CSS、JavaScript是前端最核心的三大技术。其中HTML和CSS是基础,入门也很容易,以致于很多人觉得HTML和CSS没什么技术含量。

  • 真是这样吗?试着思考以下问题:

    • 什么是HTML语义化?对于标题、图片、表格、表单,如何更好的实践这些内容的语义化?

    • 什么是外边距叠加?出现外边距叠加的根本原因是什么?

    • 在CSS中,关于命名、书写以及注释都有哪些规范,以利于团队开发和后期维护?

    • 说一下display属性的理解,属性值blockinlineinline-blocktable-cell的区别?

    • 是否深入了解过text-indenttext-alignline-height以及vertical-align属性,有哪些高级技巧?

    • 为什么overflow:hidden可以清除浮动?

    • CSS有哪些性能优化技巧?如何使用更高性能的选择器?

    • 如何使用CSS实现各种图形效果,例如三角形、圆、椭圆等。

    • 解释一下包含块、BFC和IFC、层叠上下文等概念。

  • 如果以上问题有一半都答不上来,说明连“熟悉CSS”的程度都算不上,更别说“精通CSS”。

1.2 HTML、XHTML和HTML5

  • HTML (HyperText Mark-up Language)超文本标记语言:把HTML和XHTML和HTML5一起谈时,通常指的是HTML 4.0;

  • XHTML (EXtensible HypeText Mark-up Language)扩展的超文本标记语言:这是XML风格的HTML 4.0,可以说是语法更严谨、结构更纯净的HTML过渡版本。比如:

    • 标签必须闭合:<br>(×错误),<br/>(√正确);

    • 标签和属性必须小写:<DIV></DIV>(×错误),<div></div>(√正确);

    • 标签属性值必须用引号括起来:<input type=text>(×错误),<input type="text">(√正确);

    • 用id属性替代name属性:<div name="wrapper">(×错误),<div id="wrapper">(√正确);

  • HTML5 :是新一代的HTML标准,HTML 4.0的升级版。HTML5版本不仅仅是规范了一些标签,还增加了一系列新技术,包含canvas、SVG、websocket、本地存储等。举例:

    省略形式等价于
    checkedchecked='checked'
    readonlyreadonly='readonly'
    deferdefer='defer'
    ismapismap='ismap'
    nohefnohref='nohref'
    noshadenoshade='noshade'
    nowrapnowrap='nowrap'
    selectedselected='selected'
    disableddisabled='disabled'
    multiplemultiple='multiple'
    noresizenoresize='noresize'

    HTML 5允许的简写属性:

    省略形式等价于
    checkedchecked='checked'
    readonlyreadonly='readonly'
    deferdefer='defer'
    ismapismap='ismap'
    nohefnohref='nohref'
    noshadenoshade='noshade'
    nowrapnowrap='nowrap'
    selectedselected='selected'
    disableddisabled='disabled'
    multiplemultiple='multiple'
    noresizenoresize='noresize'
    • 定义HTML5文档的类型更简化:<!DOCTYPE html>

    • 标签不区分大小写:<div>测试</DIV>

    • 标签的属性值允许不加引号:<div id=wrapper>容器</div>

    • 某些标签的属性值可忽略不写:<input type="checkbox" checked>

1.3 <div>和<span>

  • <div><span>都是没有语义。

  • div是块元素(block),可以包含其他元素,常用于页面较大块的结构划分和布局;

  • <span>是行内元素(inline),只用来包含文字;

1.4 id和class

  • 我们在写jQuery代码时,经常通过元素的idclass来选择元素,似乎并没什么区别。但在定义HTML元素时,具体什么时候要用id,什么时候用class呢?

  • id是HTML元素的唯一标识,同一个页面相同的id只允许出现一次。W3C建议,只对页面关键性的结构或者大结构才使用id 比如LOGO、导航、主体内容、底部信息栏等。这是因为搜索引擎识别页面结构时,主要是根据标签的语义以及id属性来识别的,因此id属性不能滥用。

  • class是抽取相同的样式代码,应用到多个元素上,以减少重复代码。 通常元素会应用多个class样式,一个是公共样式,一个是单独样式。

  • 示例,三个<div>标签应用了column样式的同时,还拥有自己的样式:

<div class="column blog"></div><div class="column manual"></div><div class="column tool"></div>

1.5 设置浏览器标题小图标

<link rel='shortcut icon' type="image/x-icon" href="./image/favicon.icon">
  • reltype两个属性值是固定形式,href是小图标的URL地址。

注意:小图标必须是.ico格式



作者:梁同学de自言自语
链接:https://www.jianshu.com/p/bda3729a8eed


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
70
获赞与收藏
458

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消