《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等；块元素--除了内联元素，其他的都是块元素了。

  1. HTML列表:有序、无序和自定义列表:

     a.有序列表：
 	<ol>
 		<li>...</li>
 		...
 	</ol>
 b.无序列表：ol改为ul
 c.自定义列表：

  2. 元素

     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'>
 #需要注意的是，原图和缩略图是两个独立的图片，这样做的目的是为了避免原图太多造成阅读不便、不美观。

  3. 严格HTML 4.01的基本规范，从元素角度来说，将块元素各个分开来，分的越开越好，如下：

    1. html, head, body最基本标记不可少；
    2. title，style标签滚定在head中；
    3. body就是用p,blockquote,h1有内容的块元素填充；
    4. 块元素决不能在p中。
    5. blcokquote中只能是块元素
    6. 内联元素相互嵌套要小心！

  4. 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中，方便统一样式和管理修改。

  1. 继承属性，这个和层叠含义很相似，就是元素可以继承父类的属性赋值。

  2. 自定义元素类。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;
 }

  3. 常见属性：

     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： 补白；

  4. 字体样式、颜色等详细介绍

    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；

  5. 字体颜色：

    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我们可以看出来，二者的作用就是集合多数对象的属性，可以批量更改属性

  1. div和span对比：

    1. 前者使用id属性，后面使用class属性；
    2. 前者作用很很强大，后者怎么感觉和内联元素em, strong相似呢；--主要是为了批量处理。

  2. 伪类，这个书本拿一个连接来说，在点击之前、正在点击、之后，链接颜色是不一样的，浏览器有自己一套默认的规范，暂且不更改吧。

排版和布局

  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

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


    #上例代码

posted @ 2018-03-08 23:04  Jarhead  阅读(1478)  评论(0)  编辑  收藏  举报