《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-08-30 07:50:16

《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