《Head First HTML,CSS AND XHTML》_持续更新

本篇文章为《Head First HTML,CSS AND XHTML》一书的读数笔记,仅供学习使用--严禁转载

HTML:hypertext markup language

超文本标记语言,一种语言,也是构成网页文档的主要语言。定义了基本的标签和元素,浏览器可以识别标签,并合理显示出来,HTML就是负责网页的结构方面。

一 要点:结构,标记,元素,链接,路径

  1. 基本结构:非严格的HTML

    <html>
    <head>
        <titile>....</title>
        <style type="text/css">
            body {
                background-color: #d3b48c;
                margin-left:20%;
                margin-right:20%;
                border: 5px dotted gray;
                padding: 10px 10px 10px 10px;
                font-family: dans-serif;
            }
        </style>
    </head>
    <body>
        <h1>...</h1>
        <img src="tupiam.gif/jpg">
        <p>....<!仅注释自己看的>...<em>斜体斜体斜体</en>..........
        ...........<a href = "xxx.html">被链接</a>......................
        ...................................</p>
        <h1>...</h1>
        <h2>...</h2>
        <p>.........</p>
    
    </body>
    </html>`
  2. 从上面可以看出,有以下特点:
    1. html, head, title, body, h1, p,a, img, hr, em, strong等都是是基本的标记符,靠这些标记和浏览器进行交流,这些标记符都是有头有尾。
    2. 元素 = 开始标记符+内容+结束标记符,HTML主要作用就是定义了这些元素,用来和浏览器进行交流。
    3. 文本内容之间的单个空格、多个空格、换行,在显示的时候都成为单个空格

二 结构:结构,标记,元素,链接,路径

  1. 基本内容:

    a.内联元素,q(quote引用"")的使用
    b.块元素,blockquote的使用注意:结合`<p>...</p>`才能将引用块独立起来!!!
    c.空元素独个换行,与`</p>...<p>`的区别。

    介绍一下概念:内联元素--属于元素一种,位置一般是在文本中间,随之流动的,有a, img, q, strong, code, br, hr等;块元素--除了内联元素,其他的都是块元素了。

  2. HTML列表:有序、无序和自定义列表:
    a.有序列表:
        <ol>
            <li>...</li>
            ...
        </ol>
    b.无序列表:ol改为ul
    c.自定义列表:
  3. 元素
    1.<style>样式元素,<style type=‘text/css‘>...</style> #type属性
    
    2.<a>,<a href=‘xxx.html‘>the context will be a linking</a> #href属性 ,hyper reference超链接
    
    3.<img src = ‘a/b/pic.git‘ wigth=‘40‘ high=‘20‘ alt=‘something‘> #img元素的src属性,当图片无法显示时显示alt消息作为提醒
    
    4.<q>, 双引号表示引用,<q>To be or not to be</q>
    5.<blockquote>,大段落的引用,<blockquote>......</blockquote>
    #说明,blockquote是块元素,它的前后自动有换行符,q是内联元素(online),在文字中流动的。#块元素特立独行,内联元素随波逐流
    
    6.<br>, 独立一个起换行作用
    7.</code>,</em>,</address>,</strong>,<hr>该行文字上方一条水平线</hr>
    8.<a id=‘python‘>Book:python</a>...#id属性, 作为目标锚,在另外一个页面下,<a href=‘allbooks.html#python‘>点击我查看python书籍描述</a>
    9.<a target=‘_blank‘ href=‘xxx.html‘>...</a> #target属性值为_blank就可以在新的标签下打开页面了。
    10.<a herf=‘xxx.html‘ title=‘查看帮助‘>...</a> #title属性就是鼠标放在上面自动出来的提示。
    
    11.<img href=‘images/red.gif with=‘40‘ alt=‘一个红色图片‘>图片显示错误的时候显示alt内容‘
    
    12.缩略图转向原图显示:
    缩略图页面下 <a herf=‘myphoto.html‘ target=‘_blank‘ atl=‘查看原图‘><img src=‘../thu-myphot.gif‘></a>
    在myphoto.html中,有<img src=‘../myphoto.jpg‘>
    #需要注意的是,原图和缩略图是两个独立的图片,这样做的目的是为了避免原图太多造成阅读不便、不美观。
  4. 严格HTML 4.01的基本规范,从元素角度来说,将块元素各个分开来,分的越开越好,如下:
    1. html, head, body最基本标记不可少;
    2. title,style标签滚定在head中;
    3. body就是用p,blockquote,h1有内容的块元素填充;
    4. 块元素决不能在p中。
    5. blcokquote中只能是块元素
    6. 内联元素相互嵌套要小心!
  5. XHTML 1.0大概就在HTML4.01基础上有一些额外的修改,如:
    1. 将DOCTYPE改为严格的XHTML1.0;
    2. 添加xmlns、lang属性到元素中;
    3. 所有的空标记都以/>结尾,而不是>,如<img src=‘../abc.gif‘ />
    4. 说明,这里仅仅作为介绍。目前无视吧。

CSS

cascading style sheet,层叠样式表,层叠的意思就是一个元素前后附加多个样式,对于某个元素来说,若是其前后样式表中某个属性有重叠部分,如p元素,前面样式表中color=‘red‘, 后面样式表中又定义了color=‘maroon‘,那么后面会覆盖之前样式。样式表,就是我们一个.css文件吧,其中集成了我们所有的样式。

打个比方,HTML负责网页结构的,好比一个房子,其中head是屋顶,body是房间等,css就负责装饰美化,我们取出来一个房间来装饰,或者干脆将一个窗帘元素赋予color=‘marron‘属性装饰起来。

  1. 最基本的用法,在head头部,添加style元素,将所有样式放进去即可,有明显很多缺点:

    <!DOCTYPE html>
    <html>
    <head>
        <title>For example</title>
        <style type="text/css">
            body {background-color: maroon;
                font-family: sans-serif;
                margin-left: 20%;
                margin-right: 20%;
                padding: 20px 10px 10px 10px /*上右下左*/
            }
            h1, h2 {
                font-size: 170%
                color: #25d54a;
            }
    
            h2 {
                font-size: 150%;
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>

    缺点明显,1.css穿插到HTML中,不利于工作的分工;2.复杂css 样式添加进去,影响HTML的阅读性;3.css样式的使用率不高,最好的办法是独立出来,链接到HTML中,方便统一样式和管理修改。

  2. 继承属性,这个和层叠含义很相似,就是元素可以继承父类的属性赋值。
  3. 自定义元素类。HTML定义了一部分元素类,但是也不能满足我们的全部要求,这个时候,进化版本XHTML出来了,可以自定义元素类,详见下面。
    1. 一个网页,不同的p元素需要不同的属性,这个时候,自定义类的优点就出来了。

      index.html 文件
      <html>
      ...
      <p class="red" >The paragraph are red</p>
      ...
      <p class="blue" >The paragraph are another color, blue</p>
      ...
      </html>
      
      index.css 文件
      p.red {
          color: red;
      }
      p.blue {
          color: blue;
      }
      #同一个类的所有元素应用,有简写方法
      .black {
          color: black;
      }
  4. 常见属性:
    1.background-color :元素背景颜色;
    2.background-image:url(photo/background.gif);
    2.color: 文本元素颜色;
    3.font-family: 文本字体样式;
    4.font-size: 文本字体大小 170%,1.6em;
    5.font-weight: 文字粗细;
    6.line-height: 文字行间距;
    7.letter-spacing: 字母之间 的 距  离;
    8.border:元素周围边框 1px solid black;
    9.margin: 元素周边的空白;
    10.padding: 补白;
  5. 字体样式、颜色等详细介绍
    1. font-family:字体;字体样式如 arial;body {font-family: Verdana, Arial, sans-serif;}
    2. font-size: 字体大小; 浏览器默认是16px大小。一般有em, %, px, 关键字(small,medium)三种表示。扩充一下h1-200%,h2-150%, h3-120%
    3. font-weight: 字体粗细; 有lighter, normal, bold, bolder
    4. text-decoration: 其他样式; 有none, underline, overline, line-through, blink
    5. font-style: 字体样式; 如 italic, oblique,
    6. line-height:1.6em;
  6. 字体颜色:
    1. 颜色名字来定义,16中颜色。如 blue,red...
    2. 用rgb比例表示,color: rgb(80%,20%,50%);或者 background-color: rgb(250,200,0);等。
    3. 十六进制代码定义颜色,如#cc6600;分别是红绿蓝,每种颜色两个代码。

盒模式

the box model,在CSS看来,它把每一个单一的元素看成是一个盒子。一个盒子有内容区、补白、边框和边界四个主要区域。盒子的作用,就是为了改变浏览器的默认布局!另外还有一个就是背景图片设置。基本上就是这五个内容了。

 .guarantee {
            /*边框*/
            border-color:  black;
            border-width: 1px;
            border-style: dashed;
            border-right-width: thick;
            background-color: #a7cece;

            /*补白默认顺序是上右下左*/
            padding: 25px;
            padding-left: 80px;

            /*边界margin*/
            margin: 20px;
            margin-right: 35px;

            /*背景图片*/
            background-image: url(photo/1.gif);
            background-repeat: repeat;
            background-position: center;

        }
  1. 重点是理解盒模式概念,最终还是落到了具体属性的设置。
  2. 在这一章穿插了id属性,还记得<a id=‘python‘> Book:python </a>来添加目标锚嘛?现在升级了另外一种方法,就是像类一样使用<p id=‘footer‘>A example</p>,这样设置的话,我们就可以在样式表中操作了p#footer {...}或者 #footer{...}和普通类有细微的差别。想想id属性和class属性什么时候用比较好?(id属性添加到p元元素中,效果和class一样,二者差别就是id一般作用对象是单个的,具体性更强从id赋值可以看出来去用途;而class呢,范围大了,我们可以多处定义一个class=‘example‘类,这样我就可以一起操作其属性。)
  3. 问题,元素的宽度怎么算???

div和span

对于XHTML来说,<div><span>元素的作用十分强大。前者作用于块元素,后者作用于内联元素。

  1. <div>就是一个容器,简单地说,可以装下很多块元素,这样一个<div>元素就是一个大大大大大大大的块元素了,也就是逻辑部分,我们可以定义div属性,得到我们希望的效果。常用属性有

    html文件:
    <div id=‘example‘>
        <p>....
        <h2>...
        <blockquote>...
        <p>...</p>
    </div>
    
    css文件:
    #example {
            border-width: thin;
            border-style: solid;
            border-color: #007e7e;
            width: 200px;
    
            padding: 20px;
            padding-top: 0px;
    
            margin-left: 20px;
    
            text-align: center; #注意这个属性text-align.
    
            line-height: 1.7em;
    }
    
    #example h2 {
    ...;
    }

    注意:在这里,再次出现id属性!!!联系前面的<p id=‘example>...和<p class=‘example‘>分辨一下。

  2. 元素div说到底,最终还是一个块元素,自带一些确定-为了避免块元素的缺点(前后自带换行等),出现一个span元素了,作用于内联元素。

    HTML文件:
    <ul>
        <li><span class="book">web开发 </span>, <span class="author">张三</li>
        <li><span class="book">大数据 </span>, <span class="author">李四</span></li>
        <li><span class="book">爬虫 </span>,       <span class="author">老王</span></li>
    </ul>
    
    #css文件:
    /*span元素使用*/
    
        .book {
            font-style: italic;
        }
        .author {
            font-weight: bolder;
        }

    注意:从span到div我们可以看出来,二者的作用就是集合多数对象的属性,可以批量更改属性

  3. div和span对比:
    1. 前者使用id属性,后面使用class属性;
    2. 前者作用很很强大,后者怎么感觉和内联元素em, strong相似呢;--主要是为了批量处理。
  4. 伪类,这个书本拿一个连接来说,在点击之前、正在点击、之后,链接颜色是不一样的,浏览器有自己一套默认的规范,暂且不更改吧。

排版和布局

  1. ,浏览器用流来布置页面上的XHTML元素,浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示,它遇到的每个元素,比如块元素,就会有换行(两个元素之间必须有换行)。一直到末尾。这就是流。
  2. 漂移,在流中,我们的元素就可以漂移了。float属性!!!
  3. 排版-分栏:
    1. 详细的过程没必要列出,作者给了一个例子,就是分栏,左右两栏。自己尝试,失败了,对照了书本知道了问题的根源--作者在这里将body元素划分为两个div元素。
    2. 到这里,body内容划分为两个div 元素:sidebar和main,从页面看出,这两个元素的相对关系了。和之前很不一样,现在在css样式表中,body的属性值有很大的变动-属性种类减少很多。更多的是将属性选项赋予给了那两个元素,这样也符合其思想:合久必分,分久必合。有点扯了。回想起来,最开始,我们贪心地将body作为一个基准,里面赋予了绝大多数的属性。后面的h1,p等元素再层叠覆盖。现在呢???为了达到我们需要的分两栏效果,又把body拆分为两个div元素,和前面理论相悖。总体来说,为了达到目的,选择最合适的办法吧!
  4. clear属性,留着再说吧,时间不够!
  5. auto凝胶物,流动和冻结设计,float和absolute,
  6. 表格table,简单的要素caption,td, th,比较复杂的合并单元格样式。

交互工作

  1. 表单:表单就是带有一块输入信息区域的网页。当提交表单时,表单中的信息被打成一个数据包发送给web服务器,web应用程序对之进行处理。

    1. 表单的工作:在浏览器中加载含有表单的网页-输入数据-提交submit表单-服务器的响应。
  2. 表单几种类型:
    <form action=‘下一步操作,常见的就是一个处理方法或者一个url‘ method=‘POST‘ >
    <p>
        邮箱:<input type="text" name="email" /> <br>
        密码:<input type="password" name="password"> <br>
        <input type="submit" value="确认">
    </p>
    <p>
        是否包邮?<br>
        <input type="radio" name="itrable" value="yes" checked="" />包邮<br>
        <input type="radio" name="itrable" value="no"  >不包邮<br>
        <input type="submit" value="确定." />
    </p>
    <p>
        调料选择(可选多种):<br>
        <input type="checkbox" name="flavor" value="11" checked="" />辣椒<br>
        <input type="checkbox" name="flavor" value="22" />大蒜<br>
        <input type="checkbox" name="flavor" value="33" />葱末<br>
        <input type="submit" value="确定.">
    </p>
    <p>
        赠品(选一种赠品):<br>
        <select name="gift">
            <option value="11">袜子</option>
            <option value="22"> 纸巾</option>
            <option value="33">礼品袋</option>
        </select>
    </p>
    <p>
    写下你的建议,我们将尽心为你服务:<br>
    <textarea name="doc" rows="10" cols="48" >...</textarea>
    </p>

    注意几点:

    1. name属性在每个表单元素中都可以赋值,代表的是变量名。但是对submit来说,name没有必要添加了。
    2. value属性要注意,本质代表的是上述变量的值。普通的单个文本框没有添加value属性;对于单选、多选、以及select都有的。
    3. 单选、多选以及select中,name代表的变量名都是一致的,name即是变量名,代替的是提交的value数据包。3/1/2018 11:41:03 AM 增
    4. 接上面,name代表的变量名是一样的,其目的是就是在实现交互公共的前提下,减少变量的数量。
    5. 将表单的method变为get,点击提交按钮就可以在地址栏的url中看到用户输入的信息了-明文传输。

      12/5/2017 1:37:27 PM

  3. <label for=‘ ‘>标签,是为与其相关的input元素进行标注,其for属性和input元素的id属性应该一致。本身不呈现显示效果,当你点击label元素内的文本时,浏览器就会把焦点转到对应的表单控件上。在这里,就是input元素了。3/1/2018 2:11:34 PM

    Male
    Female

    #上例代码
    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form>

原文地址:https://www.cnblogs.com/lengqian/p/8531446.html

时间: 2024-10-29 17:17:47

《Head First HTML,CSS AND XHTML》_持续更新的相关文章

【原创】实用API拾遗_持续更新

1.int android.widget.AbsListView.pointToPosition(int x, int y):将坐标映射成list位置序号!!    2014.08.08 Maps a point to a position in the list. Parameters: x X in local coordinate y Y in local coordinate Returns: The position of the item which contains the spe

MySQL乱码收集_持续更新

1.在mysql中执行下句成功,可添加中文的. insert into book(bookName,author,publish) values('好','hao','hao'); 但是在jsp中执行这个insert 语句就会出现乱码. 解决方案:在url后面加上?useUnicode=true&characterEncoding=utf-8 2.导入txt文件中的sql语句,乱码. 先是执行show variables like '%char%'; +---------------------

收藏网站_持续更新

keyword: 收录网站 内容较多,持续更新 1------------------------------------------------------------------ 2018-09-08 https://www.linuxidc.com/Linux/2016-08/134336.htm Python基础教程(第2版)高清晰PDF+源代码 2------------------------------------------------------------------ 3--

《 MySQL必知必会》笔记_持续更新

< MySQL必知必会> structured querylanguage,MySQL是一个数据库系统管理软件软件,也可以理解为为数据库服务器.读音,my sequel,/?si?kw?l / see kuo 第1.2.3章 schema,提要纲要,column列.row行 数据库:一某种有组织的方式来储存的数据集合 DBMS databasemanegersystem数据库管理系统 table,表,某种特殊类型数据的结构化清单 一个数据中,表名称有唯一性 表的特性,我们用schema[模式]

Flask,web框架学习_持续更新

<Flask web 开发:基于python> Always believe that something wonderful is about to happen 第1章 安装 1.1virtualenv模块安装 #在shell窗口 easy_install virtualenv #即可 或者 pip isntall virtualenv #查看版本 virtualenv --version 1.2创建虚拟环境venv 及激活 virtualenv venv#venv为名字,可随意改,但常用

css高级应用(持续更新)

1.混合选择器样式定义: .button.icon:before {    content: "";    position: relative;    top: 1px;    float:left;    width: 12px;    height: 12px;    margin: 0 0.75em 0 -0.25em;    background: url(gh-icons.png) 0 -288px no-repeat;} 这个样式定义的意思: 含有“.button”和“.

常用css属性集(持续更新…)

禁止换行,超出部分显示-:a. 代码: .hide_word{ max-width: 100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } b. 效果: 原文地址:http://blog.51cto.com/12173069/2067661

Git教程_持续更新

Git教程 更新12/14/2017 5:21:57 PM 更新11/22/2017 6:27:24 PM 写在前面,在heroku上部署了python web应用,迎合大众,所有操作都是在Ubuntu上操作.由于git版本管理没有掌握好,在Ubuntu和Windows上面的命令有一定的不同,造成了迥异的报错.现整理归类一下: 方法一 在电脑本地生成ssh,并添加ssh keys到GitHub设置中.如此,电脑可以和GitHub repository进行通信. 1.ssh-keygen -t r

C语言中的常用函数_持续更新

isspace函数: 背景:之前遇到scanf()输入时会把换行符留在输入队列的情况,如果下次要用到getchar(),但是会导致其先返回这个我们不需要的换行符:从而导致不希望出现的行为: 说明:检查参数c是否为空格字符,也就是判断是否为空格(' ').水平定位字符 ('\t').归位键('\r').换行('\n').垂直定位字符('\v')或翻页('\f')的情况.若参数c为空格字符,则返回TRUE,否则返回NULL(0). 注:位于ctype.h中,是宏定义,非真正函数: 例子: 1 int