本篇文章为《Head First HTML,CSS AND XHTML》一书的读数笔记,仅供学习使用--严禁转载
HTML:hypertext markup language
超文本标记语言,一种语言,也是构成网页文档的主要语言。定义了基本的标签和元素,浏览器可以识别标签,并合理显示出来,HTML就是负责网页的结构方面。
一 要点:结构,标记,元素,链接,路径
- 基本结构:非严格的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>`
- 从上面可以看出,有以下特点:
html, head, title, body, h1, p,a, img, hr, em, strong
等都是是基本的标记符,靠这些标记和浏览器进行交流,这些标记符都是有头有尾。- 元素 = 开始标记符+内容+结束标记符,HTML主要作用就是定义了这些元素,用来和浏览器进行交流。
- 文本内容之间的单个空格、多个空格、换行,在显示的时候都成为单个空格
二 结构:结构,标记,元素,链接,路径
- 基本内容:
a.内联元素,q(quote引用"")的使用 b.块元素,blockquote的使用注意:结合`<p>...</p>`才能将引用块独立起来!!! c.空元素独个换行,与`</p>...<p>`的区别。
介绍一下概念:内联元素--属于元素一种,位置一般是在文本中间,随之流动的,有a, img, q, strong, code, br, hr等;块元素--除了内联元素,其他的都是块元素了。
- HTML列表:有序、无序和自定义列表:
a.有序列表: <ol> <li>...</li> ... </ol> b.无序列表:ol改为ul c.自定义列表:
- 元素
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‘> #需要注意的是,原图和缩略图是两个独立的图片,这样做的目的是为了避免原图太多造成阅读不便、不美观。
- 严格HTML 4.01的基本规范,从元素角度来说,将块元素各个分开来,分的越开越好,如下:
- html, head, body最基本标记不可少;
- title,style标签滚定在head中;
- body就是用p,blockquote,h1有内容的块元素填充;
- 块元素决不能在p中。
- blcokquote中只能是块元素
- 内联元素相互嵌套要小心!
- XHTML 1.0大概就在HTML4.01基础上有一些额外的修改,如:
- 将DOCTYPE改为严格的XHTML1.0;
- 添加xmlns、lang属性到元素中;
- 所有的空标记都以
/>
结尾,而不是>
,如<img src=‘../abc.gif‘ />
-
说明,这里仅仅作为介绍。目前无视吧。
CSS
cascading style sheet,层叠样式表,层叠的意思就是一个元素前后附加多个样式,对于某个元素来说,若是其前后样式表中某个属性有重叠部分,如p元素,前面样式表中color=‘red‘
, 后面样式表中又定义了color=‘maroon‘
,那么后面会覆盖之前样式。样式表,就是我们一个.css文件吧,其中集成了我们所有的样式。
打个比方,HTML负责网页结构的,好比一个房子,其中head是屋顶,body是房间等,css就负责装饰美化,我们取出来一个房间来装饰,或者干脆将一个窗帘元素
赋予color=‘marron‘
属性装饰起来。
- 最基本的用法,在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中,方便统一样式和管理修改。
- 继承属性,这个和层叠含义很相似,就是元素可以继承父类的属性赋值。
- 自定义元素类。HTML定义了一部分元素类,但是也不能满足我们的全部要求,这个时候,进化版本XHTML出来了,可以自定义元素类,详见下面。
- 一个网页,不同的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; }
- 一个网页,不同的p元素需要不同的属性,这个时候,自定义类的优点就出来了。
- 常见属性:
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: 补白;
- 字体样式、颜色等详细介绍
- font-family:字体;字体样式如 arial;
body {font-family: Verdana, Arial, sans-serif;}
- font-size: 字体大小; 浏览器默认是16px大小。一般有em, %, px, 关键字(small,medium)三种表示。扩充一下
h1-200%,h2-150%, h3-120%
- font-weight: 字体粗细;
有lighter, normal, bold, bolder
- text-decoration: 其他样式;
有none, underline, overline, line-through, blink
- font-style: 字体样式;
如 italic, oblique,
- line-height:1.6em;
- font-family:字体;字体样式如 arial;
- 字体颜色:
- 颜色名字来定义,16中颜色。
如 blue,red...
- 用rgb比例表示,
color: rgb(80%,20%,50%);
或者background-color: rgb(250,200,0);
等。 - 十六进制代码定义颜色,
如#cc6600;分别是红绿蓝,每种颜色两个代码。
- 颜色名字来定义,16中颜色。
盒模式
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;
}
- 重点是理解盒模式概念,最终还是落到了具体属性的设置。
- 在这一章穿插了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‘类,这样我就可以一起操作其属性。) - 问题,元素的宽度怎么算???
div和span
对于XHTML来说,<div>
和<span>
元素的作用十分强大。前者作用于块元素,后者作用于内联元素。
<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‘>
分辨一下。-
元素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我们可以看出来,二者的作用就是集合多数对象的属性,可以批量更改属性
- div和span对比:
- 前者使用id属性,后面使用class属性;
- 前者作用很很强大,后者怎么感觉和内联元素em, strong相似呢;--主要是为了批量处理。
- 伪类,这个书本拿一个连接来说,在点击之前、正在点击、之后,链接颜色是不一样的,浏览器有自己一套默认的规范,暂且不更改吧。
排版和布局
- 流,浏览器用流来布置页面上的XHTML元素,浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示,它遇到的每个元素,比如块元素,就会有换行(两个元素之间必须有换行)。一直到末尾。这就是流。
- 漂移,在流中,我们的元素就可以漂移了。float属性!!!
- 排版-分栏:
- 详细的过程没必要列出,作者给了一个例子,就是分栏,左右两栏。自己尝试,失败了,对照了书本知道了问题的根源--作者在这里将body元素划分为两个div元素。
- 到这里,body内容划分为两个div 元素:sidebar和main,从页面看出,这两个元素的相对关系了。和之前很不一样,现在在css样式表中,body的属性值有很大的变动-属性种类减少很多。更多的是将属性选项赋予给了那两个元素,这样也符合其思想:合久必分,分久必合。有点扯了。回想起来,最开始,我们贪心地将body作为一个基准,里面赋予了绝大多数的属性。后面的h1,p等元素再层叠覆盖。现在呢???为了达到我们需要的分两栏效果,又把body拆分为两个div元素,和前面理论相悖。总体来说,为了达到目的,选择最合适的办法吧!
- clear属性,留着再说吧,时间不够!
- auto凝胶物,流动和冻结设计,float和absolute,
- 表格table,简单的要素caption,td, th,比较复杂的合并单元格样式。
交互工作
- 表单:表单就是带有一块输入信息区域的网页。当提交表单时,表单中的信息被打成一个数据包发送给web服务器,web应用程序对之进行处理。
- 表单的工作:在浏览器中加载含有表单的网页-输入数据-提交submit表单-服务器的响应。
- 表单几种类型:
<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>
注意几点:
- name属性在每个表单元素中都可以赋值,代表的是变量名。但是对submit来说,name没有必要添加了。
- value属性要注意,本质代表的是上述变量的值。普通的单个文本框没有添加value属性;对于单选、多选、以及select都有的。
- 单选、多选以及select中,name代表的变量名都是一致的,name即是变量名,代替的是提交的value数据包。3/1/2018 11:41:03 AM 增
- 接上面,name代表的变量名是一样的,其目的是就是在实现交互公共的前提下,减少变量的数量。
- 将表单的method变为get,点击提交按钮就可以在地址栏的url中看到用户输入的信息了-明文传输。
12/5/2017 1:37:27 PM
<label for=‘ ‘>
标签,是为与其相关的input元素进行标注,其for属性和input元素的id属性应该一致。本身不呈现显示效果,当你点击label元素内的文本时,浏览器就会把焦点转到对应的表单控件上。在这里,就是input元素了。3/1/2018 2:11:34 PMMale
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