提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

first head in html 笔记

笔记HTML in First head
2023-09-14 08:58:29 时间 
目录：
    1、了解HTML
    2、学会简单构建网页
    3、学会将单个的网页放在web上，组成网站
    5、学会使用图片
    6、严格HTML规范
    7、HTML->XHTML
    8、学会一点CSS样式
    9、了解盒模型
    10、学会div和span块级标签
    11、简单的布局和排版
    12、表格和列表
    13、表单
    

开始了解HTML：    
    B/S模式。例子：各种网站，如www.baidu.com 
    服务器工作：接到请求然后找到资源，然后发送到对应浏览器上
    浏览器工作：接受并展示网页
    得到：HTML是浏览器显示网页    
    创建HTML:
        1、新建文本文档，将后缀名改为.html
        2、将内容输入HTML中
        3、调试网页,使用HTML标记文本，构建HTML结构
        用包围文本的成对标记告诉浏览器网页的结构。元素 = 开始标记 + 内容 + 结束标记
        <h1></h1> ~ <h6></h6>标题标签
        <p></p>段落标签
        <html></html>标记你的HTML，通知浏览器文件内容是HTML
        <head></head>标记头部，包含了网页的信息，比如标题
        <title></title>标记标题，在<head></head>中嵌入
        <body></body>标记内容主体
        标签一般都有开始和关闭，标记可以互相嵌套
        
    想要精致的网站，前面HTML确定了网站结构，现在可以改善它的外观，使用CSS。
    CSS（Cascading Style Sheet级联样式表），提供了方法，来告诉浏览器网页中的元素应该如何表现。
    为了加入样式，添加一个新的元素到网页中————<style>元素。
        style放在HTML头部中。
        style有开始和结束标记
        style标记需要一个名为type的属性，用来告诉浏览器你使用样式的属性。使用CSS所以指定为“text/css”
        元素的属性是为了为元素提供附加信息。
        CSS中的“body”意味着"{"和"}"之间的所有CSS将应用于HTML<body>元素中的内容
        
深入理解超文本
    hypertext，将引领我们将一个网页链接到其他网页。
    使用<a>元素创建超文本链接到另外一个网页。
    <a>元素中的内容在网页中是可选的，Href属性告诉浏览器链接的目的地。
    属性：
        我们前面的<a>元素和<img>元素都使用到了属性，为元素提供附加信息。
        属性通常用同一的方法书写：首先是属性名，接下来是等号，然后是用双引号括起来的属性值
    网页上的图片也是可点击的，也可以使用a链接实现
    可以在<a>标记之间加入任意内容使其变得可点击吗？
        不是任何元素都可以放到<a>元素中，通常只能是文字和图像（或者两者都有）。
    href的路径：
        链接到子目录中：beverages/elixir.html  进入文件夹，/分离，找到文件
        上溯到父文件夹：.. 
        上溯可以多次使用，每使用了一次，就上溯了一层
        
创建网页
    1、浏览内容，它是网页设计的基础
    2、设计草图
    3、使用HTML的基本模块将它翻译绘制成天HTML能识别的略图
    4、有了略图后，翻译成HTML
    5、基本也完成后再做些改进
    
    <q></q>引用标签
    除去双引号并用<q>元素取代，就是为了显示双引号？
        不是，只是想把事物变得更加结构化并使得其更加有意义。

    <blockquote>引用标签
    <q>是短引用，长引用使用<blockquote>，引用一大块文字并独立显示
    <blockquote>创建了一段单独的文字（功能如同<p>标记），另外，文本也有缩进
    
    <blockquote>和<p>是两种不同类型的元素。<blockquote>元素是块（block）元素而<q>元素是内联（inline）元素。两种元素的区别：
        块元素前后都有换行符号，而内联元素总是在网页中随着文字流出现在“行内”。
        <h1>,<h2>,.....,<h6>和<blockquote>都是块元素
        <q><a>和<em>都是内联元素
    
    换行元素<br>
    前面说过元素 = 开始标记 + 内容 + 结束标记，<br>元素没有任何内容，甚至没有结束标记。
        的确，它没有任何内容。<br>元素是个没有任何内容的元素。为什么？因为它只代表换行，没有其他的意思。所以，当一个元素设计为没有任何实际内容的时候，我们就是用缩写（不写结束标签）来代表这个元素，就像<br>一样。
        <br>不是唯一一个没有实际内容的元素。还有其他的，它们有一个共同的名字：空元素。前面我们已经见过一个空元素了:<img>元素
        缩写不是为了懒惰而是为了有效
        
    任何元素都可以为空吗？例如我想有个链接，但是不想有任何内容，那我可以写成<a href="mypage.html">吗？
        不行。世界上有两种类型的元素：一般元素，例如<p>、<h1>和<a>；还有空元素，例如<br>和<img>。不能混用两种元素。如果你输入<a href="mypage.html">，那它不是一个空元素————而是一个没有内容和结束标记的开始标记
        
    列表
        使用p元素做一个列表
            <p>
                1. Red Segway
            </p>
            <p>
                2. Blue Segway
            </p>
        总是要选择方法与内容结构最接近的HTML元素。
        创建列表：
            1、将每个列表项目放入到一个<li>元素中
            2、使用<ol>或者<ul>封装列表元素。
                如果使用<ol>元素来封装列表元素，那么它们将显示为有序列表。如果使用<ul>，列表将显示为无序列表
        <ol>和<li>都是块元素，都换行
        <ol>和<li>必须一起使用吗？
            是的，你必须一起使用<ol>和<li>(或者<ul>和<li>)。记住，列表是一组项目：<li>元素用来确定每个项目，<ol>元素是将它们组成一组
        可以在<ol>和<ul>中添加其他文字或者元素吗？
            不能，<ul>和<ol>元素的诞生只是为了配合<li>元素一起工作
        想要在列表中添加列表，可以嵌套吗？
            当然可以。
        HTML中有有序列表和无序列表。还有其他列表类型吗？
            确切来说还有一种类型：自定义列表。自定义列表的是形式是：
                <dl>
                    <dt>xxx</dt>
                    <dd>xxx</dd>
                    <dt>xxx</dt>
                    <dd>xxx</dd>
                </dl>
            列表项中的每个项目都有一个项限<dt>和一个描述<dd>
            
        我创建了一个网页来展示我才能够这本书上学到的知识，我还希望在网页中提及<html>元素。这会不会使得嵌套混乱。我需要添加双引号或者其他什么吗？
            是的，会出现问题。HTML提供了一个简单的缩写形式来指定这些特殊符号。这是它们的工作原理：被看做"特殊"的，或者你想在在网页中使用可能在你的编辑器找那个无法输入（例如版权标记）的字符，in只须查出缩写并输入到HTML。例如>符号的缩写是&gt；而<是&lt;.
            &在HTML中使用实体字符&amp;代替。
            
        元素大杂烩
            <em>使用这个元素老标识你想强调的文本,会产生斜体效果
            <strong>使用这个元素来标识你着重强调的地方，效果会产生粗体
            <a>创建链接的元素
            <address>这个元素告诉浏览器这段内容是个地址
            <pre>当浏览器显示你输入的文本时，使用这个元素来格式化文本。会保留换行和缩进等
            <q>短引用
            <ul>需要显示一个列表，无序的
            <br>换行符
            <hr>水平线
            <ol>有序列表
            <code>代码元素用来显示计算机程序的代码
            <li>用于列表项目
            <blockquote>长引用，块元素
开始链接：
        把网站发布到服务器上
        URL
            http 使用协议为http
            ://
            www.startbuzzcoffee.com 网站名
            /index.html 从根目录到资源的绝对路径
        绝对路径告诉浏览器如何从根目录去获得特定的页面或者文件
        怎么链接到其他网页？
            在<a>元素中加入URL，例如：
                <a href="http://buzz.headfirstlabs.com">Caffeine Buzz</a>
            使用相对链接以链接到网站的其他页面，用URL链接到外部
            系统内链接最好使用相对链接，为了避免更改域名等带来的问题。
        添加标题使得链接更易理解
            有一种方式可以在你点击链接时提供更多的信息。<a>元素中有一个叫title的属性，正是为这个目的而生.
        完善链接的技巧：
            1、链接标签剪短一些。在 title属性内添加附加信息
            2、链接具有提示新。不要使用"click here"这样无意义的标签
            3、避免将链接紧挨在一起：链接靠的太近的话用户不易于区别
        链接做得非常好！我希望人们能更加直接地链接到Buzz网站的coffee专区。能做到吗？
            当你链接到一个页面，浏览器总是从顶部开始显示网页。但是CEO要求你链接到页面的一个特定区域————coffee专区。
            使用<a>元素，<a>元素有两种作用：你已经见识过它的跳跃性，从一个页面到另外一个页面；但是它还可以在页面中设置登陆点，或者链接的目的地。
        使用<a>元素创建目的地
            使用<a>元素创建目的地时，我们称它为“目标锚”。创建一个目标锚的步骤：
                1、找到网页中需要创建登陆点的地方。它可以是文本中的任意位置，不过通常是文章标题的一部分
                2、用<a>元素把文本包围起来
                3、选择目的地的标识名，比如“coffee”，并在<a>元素中插入id属性
        如何链接到目标锚
            学会使用相对链接或者URL来链接到网页了。无论采用哪种方式，你都要在链接后面添加#，后面再加目标标识符。这样能更明确地链接页面中的目标锚。所以加入你想链接到"chai"目标锚”，你需要这样改写<a>元素：
                <a href="index.html#chai">See Chai</a>
                
        目标，连接到http://buzz.headfirstlabs.com的Coffee区域。下面是步骤：
            1、指出目标锚的id（这个可以到网页中查看源代码进行观看html元素）
            2、改变Starbuzz Coffee中“index.html”的原有<a>元素，使其指向目标锚
            3、重载"index.html"页并测试链接
            
        元素属性的顺序重要吗？
            不重要
        链接到新窗口
            CEO提出了新要求。他希望有这种效果：当你点击Startbuzz Coffee页的“Caffeine Buzz”链接时，Startbuzz Coffee页不要消失，Caffeine Buzz在一个新的窗口里出现。
            
            使用target（对象）打开一个新窗口
                如果要在一个新窗口中打开一个网页，你需要告诉浏览器那个新窗口的窗口名。如果没有指定具体的窗口，浏览器将在原来的窗口中显示网页。target属性的值就是浏览器页的“对象窗口”。如果把对象值指定为"_blank"，浏览器将总是打开新窗口来显示网页
            如果有多个<a>元素含有对象(target)呢？如果已经打开一个“_blank”新窗口，是在这个窗口中打开，还是在另外一个新的"_blank"窗口中打开？
                如果全部<a>元素中的对象名都是"_blank"的话，那么每个链接都会在新的空白窗口中打开。你问的很好，因为它告诉了我们一个药店：你不需要把所有对象都起名为"_blank".如果你给它起另外一个名字，例如"coffee",所有对象名为"coffee"的链接都会在相同的窗口中打开。原因是当你给对象一个特定名字如"coffee"时，就为显示链接的页面的新窗口起好名字了。"_blank"是个特例，它告诉浏览器总是使用一个新窗口。
            
给你的网页添加图像
    浏览器处理<img>元素的方式和处理其他元素不同。以<h1>或者<p>位例。当浏览器在页面中遇到这些标签，只需显示它们，非常简单。但是当浏览器遇到一个<img>元素时，就要进行特殊处理：浏览器必须先接受图像，然后才能在该页面中显示图像。
    <img>存在一个与服务器交互的过程。如果从指定地点得到了图像，则正常展示，否则展示失败。
    <img>:
        <img src="images/drinks.gif">
            src属性指定了要在网页上显示的图像文件的位置
            <img>元素是个内联元素，前后不会插入换行
            <img>元素是个“空元素”
            <img>:src属性不只用于相对路径：也可以把URL放到src属性中。
    
    总是提供可选项：
        <img>需要进行一次交互获取资源，如果获取不到资源呢？在这些不确定的设备中你可以做好准备。即使浏览器不能显示你页面中的图像，还有其他选择。你可以使用<img>元素中的alt属性来为访问者提供图像信息：
            <img src="http://www.headfirstlabs.com/trivia/pencil.gif" alt="Pencil line 35 miles long">如果图像不能显示，就用alt的文字替代。
    调整图片大小
        <img>元素还有一个属性你应该了解，事实上它们是一对属性：width(宽度)he height(高度)。你可以使用这两个属性预先告诉浏览器页面中图像的带下。
            <img src="images/drinks.gif" width="48" height="100">
        为什么不能使用width和height来调整网页上的图像的尺寸？
            因为浏览器在缩小放大图像来配合网页之前要先下载整个大图像
        调整图像大小以符合浏览器规格：
            1、用图像编辑软件打开图像
            2、减小图像尺寸到原来的一半（这个视情况）
            3、保存图像
            
    如何创建图片链接？
        使用<a>元素嵌套<img>元素
规范以及夸夸其谈：
    文档声明：
        过度模式：
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.orgf/TR/html4/loose.dtd" >
        严格模式：
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.orgf/TR/html4/strict.dtd" >
            将版本中的Transitional去掉，后面的dtd变成strict.dtd
        目前模式中要求内联元素必须包裹在块级元素中
        严格的HTML 4.01 web镇手册:
            1、<html>必不可少的元素之一
            2、记得使用<head>和<body>让你的网页更好
            3、<head>里面放置一个<title>,<head>是可以放置<title>元素、<meta>元素和<style>元素的唯一地方
            4、只使用有用的块元素填充<body>.只能在<body>元素里直接放置块元素（<h1>,<h2>...<p>等）。所有的内联元素和文本都必须在块元素中才能运行。
            5、让块元素原理内联元素 只有文本和其他内联元素可以嵌入内联元素中。块元素在任何情况下都不允许包含在内联元素里
            6、块元素禁止包含在<p>元素中 
            7、列表只能包括列表项目
            8、列表项可以是任意内容
            9、<blockquote>只能放块元素
    XHTML
        HTML的元素是固定的。XML的元素可以随便编。使用XML改造HTML
        将HTML改为XHTML，需要做如下几件事：
            1、把DOCTYPE更改为严格的XHTML
            2、添加xmlns属性、lang属性和xml:lang属性到<html>开始标记 
            3、<html>标记必须是DOCTYPE之后的第一个标记，而</html>必须是文档的最后一个标记
            4、所有的元素名称必须用小写字母表示
            5、所有的额开始标记都须对应有结束标记。如果一个元素是空的话，那么它的标记必须以空格结尾，后面跟这/>
            6、所有的属性值必须非空，并且带双引号
            7、在HTML里不能使用&,&表示实体的开始，因此，应当使用&amp;除此之外，把特殊字符转换为实体。
        将严格的HTML转化为XHTML1.0
            1、更改DOCTYPE为严格的XHTML1.0
                <!DOCTYPE html
                    PUBLIC  "-//W3C/DTD XHTML 1.0 Strict//EN"
                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    PUBLIC :表示公共文档类型
                    "-//W3C/DTD XHTML 1.0 Strict//EN" ： 表示使用的XHTML版本
                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"执行严格的XHTML定义的URL
            2、添加xmlns属性、lang属性和xml:lang属性到<html>元素
                xmlns属性指定html属于哪种语言
                lang属性和xml:lang属性指定在xml文档中使用的语言（可只是用其中一种，也可以两者都使用）
                <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
            3、所有的空标记都应以“/>”结尾，而不是“>”
            
开始学习CSS
    使用CSS设计XHTML
        需求： 将你要的<p>元素的墙漆弄成红色。设计的是段落的background-color属性
            p{
                background-color: red;
            }
            p:元素
            {}包裹规则内容
            属性:属性值
            ;分号结尾
        更多样式：
            p{
                border: 1px solid gary;  /* 边框，设置宽度为一个像素，实线，灰色 */
            } 
        在你的XHTML中引入css。为了在你的XHTML中直接添加CSS样式，必须在<head>元素中添加样式<style>元素，style元素还有一个type类型选择：text/css”.你的css规则将位于元素内。
            <head>
                <style type="text/css">
                </style>
            </head>
        p{
            color: marroon; /* 设置字体颜色为栗色，不会改变段落中的链接 */
        }
        如果多个元素的规则完全一样，我们可以将它们写在一起，使用逗号分隔：
            h1, h2 {
                font-family: sans-serif;
                color: gary;
            }
        给h1添加下边框：
            h1 {
                border-bottom: 1px solid black;
            }
    选择符如何工作？
        h1 {
                border-bottom: 1px solid black;
            }
        这里的h1我们称为选择符，
        选择多个元素，使用逗号分隔，如：
        h1, h2 {
            color: gray;
        }
    使用外部css文件
        创建一个css文件，然后将你的css规则复制进入。不要讲<style>元素也复制进去了。
        html中引入外部样式：
            <link type="text/css" rel="stylesheet" href="lounge.css" />
            link: 使用link元素来链接外部信息
            type=“text/css” 消息类型是“text/css”也就是一个CSS样式表
            rel=“stylesheet” rel属性指明XHTML文件和你要的链接的东西之间的关。我们要链接到一个样式表，因此设置属性值为“stylesheet”。
            href连接到外部样式
    样式的继承
    继承的覆盖：就近原则
        引入类：
            段落中不同的段落容易区分，不一定只是段落
            <p class="greentea">
            ...
            p.greentea {
                color: green;
            }
            如果想要对所有<blockquote>进行相同的操作呢？那么你可以这样做：
                blockquote.green, p.greentea {
                    color: green;
                }
            还有一个方法。如果你想让greentea类的所有元素拥有同一个样式，可以这样编写规则：
                .greentea {
                    color: green;
                }
        关于样式应用的最快捷最小巧的手册：
            1、是否有选择符选择你的元素
            2、继承呢？观察该元素的父母，父母的父母，依次上推，知道你找到被定义的属性。
            3、还是没有找到？那么使用默认值
            4、如果有多个选择符选择一个元素呢？
                <p class="greentea respberry blueberry">
                如果有三个选择符匹配这个元素并且都定义了颜色属性。我们称之为“冲突”。哪个规则能胜出呢？如果一个规则比其他的而更具体，那它将胜出。
                    p { color: black;} 这是选择所有段落的规则
                    .greentea { color: green; }    这条规则选择了绿茶类的所有成员。此规则比上一条规则稍微具体一点
                    p.greentea { color: blue; } 这条规则只选择绿茶类里的段落，比上一条更具体
                    p.raspberry { color: blue; }  这条与上一条一样具体
                    p.blueberry { color: purple; } 这条与上一条的一样具体
                好像还是没有一个明显的胜出者？
                    像最后三个有同样的具体性，那怎么办呢？选择css文件里最靠后的规则。这里注意，是css文件里最靠后的。
        css中的其他属性:
            color:设置文本元素的字体颜色
            font-weight：控制文本的粗细
            left：用它告诉元素如何放置它的左侧
            line-height：这个用来设置文本元素之间的行高
            top：控制元素顶部的位置
            letter-spacing：设置字母之间的间距
            background-color：这个属性用来控制元素之间的背景颜色
            border：这个属性用来在元素周围加边框
            margin：如果想在元素的边缘和内容之间有一些空间，就是用边界
            font-size：将文字变大或者变小
            text-align：这个属性让文本左对齐、右对齐或者居中
            font-style：这个属性得到斜体文本
            list-style：这个属性用来设置列表项的样式
            background-image：这个属性把一个图像方到元素后面
    字体和颜色样式
        font-family： 定义网页中的字体
            body {
                font-family: Verdana, Geneva, Arial, sans-serif;
            }
            这里是查找计算机内有没有Verdana字体，如果有则使用它，否则查找Geneva字体，有则使用它，。。。
        font-size: 控制字体大小
            body {
                font-size: 14px;
            }
            14px;数字必须紧跟px，中间不能有空格
            body {
                font-size: 150%;
            }
            150%表明字体大小应该是另一个字体大小的150%。另一个字体大小指的是父元素的字体大小
            body {
                font-size: 1.2em;
            }
            1.2em表明字体大小应该按比例放大1.2倍。em不是指定百分数，而是指定比例因数。
        color:给文本添加颜色
            color {
                color：silves;
            }
        font-weight：设置字体的粗细
            body {
                font-weight: bold;
            }
            bold 加粗， normal 正常， bolder 更粗， lighter 更细
        font-style：这个属性得到斜体文本
            body {
                font-style: italic;
            }
            italiche oblique都是斜体。前者是使用倾斜的字体，后者是将字体倾斜显示
        text-decoration:给文本添加更多的样式
            使用text-decoration属性，可以使用overlines、underlines和line-through等来修饰文本
            body {
                text-decoration: underline;
            }
            也可以同时有underline和overline的修饰效果，就可以像这样定义文本修饰：
            em {
                text-decoration: underline overline;
            }
            如果文本继承了你不想要的文本修饰，可以使用值“none”去掉它
            em {
                text-decoration: none;
            }
盒模型：
    从css的角度看，每个元素是一个盒子
    每个盒子的内容区及可选的（optional）补白、边框和边界组成
    内容区包括内容（例如文本或图像）
    内容区周围是可选的、透明的补白
    可选的边框可以放在补白周围
    可选、透明的边界包围着所有东西
    
    边界是什么？
        如果两个盒子相邻，边界就相当于它们之间的空间
            
    background-repeat:
        no-repeat: 图片只显示一次，不重复
        repeat-x：在水平方向上重复
        repeat-y：在垂直方向上重复
        inherit：继承父元素的值
    border-style控制边框的外观。一共8种边框样式：实现、虚线、凸出线、凹进线等。
        solid 实线 
        dotted 一系列点
        double 两条线
        dashed 虚线 
        groove 看起来凹进页面
        insert 看起来嵌入页面中
        outset 从页面升起的一块凸出
        rides 页面 中凸出的边界
    border-width 边框宽度
    border-color 边框颜色
    定义边框的一侧：
        border-top-color等其他方向属性也可以这样，还有其他属性
    
    id属性：
        只需要添加id属性，并选择一个唯一的id名
        id必须以字母大头，后面跟数字或字母。不允许有空格或特殊字符
    class中使用id：
        #footer{
            color: red；
        }
        p#footer{
            color: red;
        }
    样式表的顺序非常重要
        <link>元素拥有media属性，它可以指定样式适用的设备，这样就可以在不同设备之间使用不同的样式了
            screen 屏幕（电脑）
            print    打印机
            handheld 移动设备和移动电话
            aural    应用于高速浏览器
            Braille    给需要读盲文的人
            projection，tty  电传打字机和终端
            
    text-align 只能作用域块
    
    选择子孙元素的方法：父名和子孙名之间有空格
        div h2{
            color: black;
        }
    
    走捷径：
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 10px;
        缩写： padding: 0px 20px 30px 10px;
        如果各侧的补白和边界值都相等，缩写就会更简单：
        padding: 20px;
        
        margin-top" 0px;
        margin-right: 20px;
        margn-bottom: 0px;
        margin-left: 20px;
        缩写：margin：0px 20px;
        
        border-width: thin;
        border-style: solid;
        border-color: #007e7e;
        缩写：border: thin solid #007e7e; 顺序不限
        
        background-color: white;
        background-image: url(images/cocktail.gif);
        background-repeat: repeat-x;
        缩写：background: white url(images/cocktail.gif) repeat-x; 顺序不限制
        
        font: font-style font-variant font-weight font-size/line-height font-family    
            前三个都是可选的，必须在font-size之前
            line-height是可选的。在fong-size右边加上一个/再加属性值
            
    <span>标签 
    
    <a>元素和它的几个特征
        unvisited link未访问过的链接 默认是蓝色
        visited link 已访问的链接，默认是紫色
        还有三个状态： 鼠标悬停hover、聚焦focus、active激活
        
    css (Cascading Styling Sheet)层叠样式表
    
    布局和排版
        浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始，从头到尾跟这元素的流显示它遇到的每个元素。
        内联元素从左流到右
        
        float：属性将块级标签漂移：
            1、浏览器跟平常一样往页码流入元素
            2、当浏览器遇到漂移元素，就把它放到最右边，同事把段落从流中移走，就像它漂在页面上了。
            3、因为把漂流段落从正常的流中移走，并用块元素替代了。那一段落根本就像不在那里似的。
            4、注意，块元素放置在漂移元素直下，因为漂移元素不再是正常流的一部分
            5、不过当放置内联元素的时候，不考虑漂移元素的边界，所以它们流到它的周围
        
        clear属性
            clear：right
            清除右边的漂移元素，右边不能有漂移元素
            
    流动和冻结设置
        到现在为止，我们做的设计都叫做流动布局，因为无论我们把浏览器调整到多大，它们都会扩展到填满浏览器为止
    流动和冻结的之间的状态？凝胶物布局。锁定了页面中内容区的宽度，但把它放在浏览器中央。
    
    绝对布置：
        CSS做什么？
            当一个元素被绝对放置了，浏览器做的第一件事是把它从流中完全移走。接着浏览器把元素放在指定的top，right的位置
        绝对布置和漂移不同，因为漂移的额元素要调整它们的行内容还需要考虑到漂移元素的边界
        绝对布置的额元素的另一点有趣的地方时，你可以把它们互相层叠放置。但是如果你把几个绝对布置的元素放在一个页面的同一位置，你怎么知道层次呢？
            z-index属性
    
    有没有方式创建不易破坏的两栏布局？
        CSS背后的动机之一是把结构和样式分开
        漂流布局： float
        凝胶物布局：
            使用固定大小的div包围内容创建冻结布局，然后auto属性让边界扩展成凝胶物布局
        绝对布局
    
    绝对布置的重要一件事：
        当你放置一个元素的时，你就把它指定为跟最近放置的祖先元素相关的位置
        固定布置：
            position: fixed
            这个固定是相对浏览器窗口而并非页面
    
    相对布置
        不像绝对布置和固定布置，相对布置的元素仍然是页面流中的一部分.相对于父容器\
        
    表格：
        <table>
        <caption>标题，表格标题
        <th>
        <tr>
        <td>
        设置标题位置： caption-side: bottom;
        单元格间距只能全部设置
        border-spacing:边框间距
        border-collapse属性可以消除边框间距，将相邻的两个边框合并为一个边框
        跨行跨列： rowspan、clospan
        
    列表：
        list-style-type: disc;默认情况下标识类型为圆点disc、circle圆圈、square方块、none没有任何标识
        list-style-image: url(images/backpack.gif); 列表标识为自定义图片
        
    表单：
        form
        input type="text"
        input type="password"
        <input type="radio">
        <input type="checkbox">
        <textarea>
        <button type="submit">
        <button type="reset">
        
        get和post：
            post和get都能完成相同的事情——把表单数据发送给服务器——不同的是它们使用的方式。post把表单变量打包后隐藏在后台发送给服务器，get也把表单变量打包，不过在它向浏览器发送请求之前，附在URL的末端位置。
    把表单元素放入表格。
    
    表单中还有哪些元素？
        Fieldsets和legends
        label
            <input type="radio" name="hotornot" value="not" id="not"/>
            <label for="not">not</label>
        file域
        hidden域
        
    其他信息：
        1、伪元素选择器
            用来选择元素的一部分
                p:first-letter {
                    font-size: 3em;   //段落第一个字大号
                }
                p:first-line {
                    font-style: italic; //段落第一行斜体
                }
        2、属性选择器
            img[width] {
                border: black thin solid; //选择所有包含width属性的图像边框黑色的细实线
            }
            img[height="300"] {
                border: red thin solid; //选择包含height属性且height值为300的图片
            }
        3、基于兄弟进行选择：
            h1+p {
                fong-style: italic; //所有选择紧跟着<h1>元素的段落
            }
        4、组合选择器
            .blueberry p {
                color: purple; //选择blueberry类中一个元素子孙的所有段落
            }
            
            这里有一种模式，你就可以用来构造一个复杂的选择器。
                1、定义要选择的元素的上下文，如：
                    div#freentea > blockquote ">"是子孙选择符，表示父元素是id为freetea的div的blockquote
                2、写出你要选择的元素
                    div#freentea > blockquote p  段落p是前面的后代，就是选择父元素是父元素是id为freetea的div的blockquote的p
                3、相信说明伪元素选择符或者伪类：
                    div#freentea > blockquote p:first-line { font-style: italic;}
                    
    框架：
        frameset和frame
            <frameset rows="30%, *, 20%">
                <frame name="header" src="header.html" />
                <frame name="content" src="content.html" />
                <frame name="footer" src="footer.html" />
            </frameset>
            以单个name为锚点，使用<a>元素在目标连接中指定框架名，如：
                <a href="newpage.html" target="content">new content</a>
                
            <iframe>匀速你在页面的任何地方放置框架。下面是用法：
            <iframe name="inlinecontent" src="newcontent.html" width="500" height="200" />
            
        如果要使用框架，需要在含有框架布局的网页中使用DOCTYOE。框架布局的DOCTYPE被认为是一种过渡性文本，所以不能设置框架和规范。
        html4用法：
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                                  "http://www.w3.org/TR/html4/frameser.dtd">
        xhtml 1.0用法：
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
                                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

相关文章