headfirst html与css第二版第六到七章

橙拳
132 阅读5分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

六.严肃的HTMl 标准及其他

1.html简史

HTML1.0-2.0HTML3HTML4HTML4.01XHTML1.0HTML5
那时候已经有了超链接，页面不好看，桌面上的东西比如铅笔等都能被认为是“web内容”Netscape和Microsoft的浏览器战争时期万维网协会（W3C：World Wide Web Consortium）创建了HTML统一的标准（分为两部分，HTML用来实现结构，CSS用来表现），结束了浏览器战争相比于HTML4做了一些修补HTML与XML（扩展标记语言，可以用来数据的读取）结合的的产物，具有严格性且提供了一些方法，但是不受人们的欢迎，人们更喜欢HTML的灵活性取代了XHTML，支持HTML4.01中大部分的特性，并且提供了一些新特性，可以用来构建web应用

2.给浏览器指定HTML版本

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 整体指定了页面的文档类型
  • ！说明其与众不同，它不是一个HTML元素
  • html 指的是页面的根元素（第一个元素）
  • public 表示标准是公共可用的
  • -//W3C//DTD HTML 4.01 //EN 表示我们在使用HTML4.01版本，另外这个HTML标记使用英文缩写
  • www.w3.org/TR/html4/st… 指向一个文件，标识这个特定（这里是HTML4.01）的标准
  • 写在同一行或者引号处换行都行

3.改进的HTML5 doctype

<!doctype html>（doctype大小写无所谓）

  • 简化为了一行
  • 不在关注版本号和标准所在的位置
  • 只需要告诉浏览器我们在使用html就行

  • html不会再有版本6、7、8，规范成为了一种活标准，随着技术的发展形成相应的文档。在实际工作中使用的是向后兼容性（支持使用的老方法，同时也支持新的方法）

  • 规范就是文档，指定了html的标准是什么，比如html有哪些元素和属性

  • h5不再只用来建立web页面，还可以建立成熟的web应用

    web页面主要是静态页面，有一些链接、图像，更多的是阅读的功能

    web应用是用来交互、完成具体的工作，比如地图应用、游戏应用

4.W3C验证工具

http://validator.w3.org

  • 输入上方url

  • 网站提供三种验证方法

    1. 输入要验证页面的url
    2. 上传url文件
    3. 直接复制代码到网站

5.使用meta指定字符编码

字符编码告诉了浏览器使用了哪一种字符

<meta charset="utf-8">

  • meta表示我们需要告诉页面的信息

  • 在charset属性中指定字符编码

  • utf-8是unicode系列中的一个编码，主要用于web页面

    unicode是很多应用和操作系统都支持的字符集

所保存的文件的编码要与meta标记中指定的编码一致

元素位置在head标签里边的首行

6.HTML5相比于HTML4.01的改进

  • 提供了新的元素的属性，更好的编写页面
  • 能够创建web应用（web应用就是像应用一样的web页面）
  • 更具健壮性，规范会记录web开发人员常犯的错误，帮助浏览器处理错误

7.编写合法web页面

  • 以<doctype>开头
  • html元素
  • head和body元素，并且一定嵌套在html中，其它内容只能在head或body中
  • head中要使用meta指定正确的字符编码
  • head中有title说明标题
  • 不使用a嵌套a的无意义嵌套，不在img等viod元素中嵌套其它内联元素
  • 检查属性，有些属性是必须要的

七、加一点样式 css入门

1.结合html与css

p{
    background-color:red;
    border:solid;
}
​
p{background-color:red;}
  • 选择需要增加样式的元素，这里是p，注意这里的元素不加<>
  • p的样式写在{}里面
  • 指定属性名和属性值，用冒号隔开，分号结尾。（这里是 background-color:red;）;可以有多个属性
  • 这一整个整体称为规则
  • 两种写法都可以
  • css通过<style>标签插入到html的head中

多个元素使用同一个规则，可以直接在选择器之间加上逗号

h1,h2 { color:red; }

2.指定第二个规则

h1,h2{
    color:red;
}
​
h1{
    border-bottom:1px solid black;
}

这样能够为h1单独添加样式而不影响h2

样式只对body里边的元素有效

3.使用样式表

使用link元素链接外部样式表，能够统一修改html文件的样式，步骤如下：

  • 创建css文件，在文件里编写样式，注意这里边不用添加style标签，因为已经是css文件了。css文件通常被称为样式表（stylesheets）

  • 在需要使用这个css文件样式的html通过link创建链接

    <link type="text/css" rel="stylesheet" href="lounge.css">

    • 不再需要style标签
    • link是一个void元素，不需要结束标记
    • type表示信息的类型，在h5中这个属性是可选的
    • rel指定了html文件与所链接文件之间的关系
    • href指向文件的地址，可以是相对链接或者url

4.继承

  • 子元素以及子元素的子元素会继承父元素的属性（前提是属性是继承的）
  • img元素不能继承文本相关的属性，因为它没文本
  • 继承覆盖：对于不想继承父元素属性的元素，单独为这个元素添加样式（增加规则）

5.class

  • 通过class来添加样式，先给html创建class属性
<p class="greentea">hello</p>

  • 在css中创建类选择器

    • 先选择类中的元素，这里是p
    • 使用“.”指定一个类
    • 选择类名

  • 这里选择器p.greentea会选择greentea类中的所有p元素（段落）

p.greentea{
    color:green;
}
  • 这里的选择器会选择greentea类中的所有元素
.greentea{
    color:green;
}
  • 一个元素可以加入多个类（类名之间使用空格隔开，顺序不重要）
<p class="greentea blueberry">

6.应用样式的常识性规则

  • 先看有没有选择器选择元素
  • 没有选择器则观察继承的情况（查找父元素、父元素的父元素，以此类推，直到找到为止）
  • 都没有则使用默认值

多个选择器选择一个元素情况：

  • 先观察哪个选择器更特定（更具针对性，范围更加明确）
  • 如果特定的程度一样，则按照在css文件中的顺序（取最后一个，注意不是类的顺序）

7.css验证工具

用法和html的验证工具一样

http://jigsaw.w3.org/css-validator/

avatar
文章
阅读
粉丝