Head first in HTML, CSS, XHTML-Note

看这个书的原因很简单,为了学JS和前端,老王非样看的。。。所以不要吐槽这书讲什么xhtml,我不会看的,宁死不看。。。(换句话说,只看到第五章,最基础的部分,虽然我觉得我会写网页,但老王还是觉得我得从基础看起,╭(╯^╰)╮)
笔记嘛,还是老规矩,一条一条的写,大类只有一章一章,就酱。

第一章

  1. HTML Hyper text markup language。虽然觉得这个特别基础,但真的没背出来,希望以后能背住。hyper text markup language...
    2.一个html文件的例子,直接在浏览器运行
<html>
    <head>
        head will show on the top of this window
    </head>
    <body>
        all contents here. eg:element(<h1>this is h1</hi>)          
    </body>
</html>
  1. CSS cascading style sheet 级联样式表,用于描述如何表现内容,元素可以有自己的属性
<style type="text/css">         
        </style>
  1. css 和HTML 是两种完全不同的语言
  2. CSS 颜色:十六进制编码
  3. HTML:结构,CSS: 外观
  4. exercise
Paste_Image.png
Paste_Image.png

第二章

  1. 属性是用来指定元素发附加信息的
  2. 属性值需要用引号引起来eg:属性名 = “属性值”,
  3. 属性不能自己创建,只能使用被支持的属性(浏览器知道的属性)
  4. 属性是用来个性化元素的
  5. 把img元素放进a中,图片也是可点击的
<style type="text/css">
使用的样式语言种类是css
</style>
<a herf="where.html"></a>
超文本链接的目的地是where.html
<img src = "pictureName.jpg">
img标记显示的图片文件名
  1. *tips:href是这么念的“h-ref”
  2. 网站文件结构:根目录-包含整个完整的顶层文件夹
组织前

把一类文件放在一个文件夹下,主页放在根目录下,组织前要规划好路径,组织后要在link和图片对应位置把旧路径更新。

组织后
  1. exercise
Paste_Image.png
Paste_Image.png

第三章

  1. *一个新词:segway,电动滑板车,北京大街小巷那种电动的,站个人的应该都算
  2. <q>:引用,比直接使用双引号更好的地方在于,q元素可以有属性,可以给被引用的文字或什么设置css样式,而直接用双引号-“”,就不能有什么属性
  3. <blockquote>块引用,一堆话,一段话要引用用这个,可以当成引用的<p>
  4. <q><blockquote>的区别
    <blockquote>是块元素(前后都有换行符),还有<h1>``<h2>``<p>都是块元素
    <q>是内联元素(inline),还有<a>``<em>都是内联元素
    注意:<br>不是块元素也不是内联元素
    *上节H5课上讲的,<a>现在可以包在<div>外面了,整个区域都可以点
  5. <br>来换行
  6. 列表 unordered list/ordered list,
<ol>或<ul>
有序或无序
    <li>aaa</li>
    <li>bbb</li>
</ol>或</ul>
  1. <ol><li>都是 块元素,
  2. 他们必须一起使用,中间不能添加其他文字或元素
  3. 列表元素可以嵌套
  4. 还有自定义列表<dl> <dt> <dd>
  5. 字符实体来指定特殊符号reference1
> &gt
< &lt
& &amp
  1. 品尝一些元素(我只能说这本书真的很中二0.0)
<code>放代码
<em>强调
<address>放地址
<strong>着重强调
<pre>格式化文本
<br>空
<hr>画水平线
  1. summary:计划好网站结构,设计草图和路径,再动手写;嵌套元素要注意标记正确匹配
  2. exercise
Paste_Image.png
Paste_Image.png

第四章

1.先讲了怎么把自己网站传到服务器上去,虽然很实用,但对我好像不是重点,所以跳过了(想到买的godaddy都没有好好弄一下,觉得肉好疼是怎么回事/(ㄒoㄒ)/~~)

  1. url介绍,每次输入一个url(url包括协议部分和网站名部分),浏览器都会用http协议向服务器申请相应的资源,找到了会把相应资源返回给浏览器,浏览器会显示,找不到返回404;网站名部分(服务器名+域名)告诉浏览器从哪台计算机获取资源
  2. http协议,hypertext transfer protocol 超文本传输协议
  3. 如果浏览器想从服务器获得一个目录,比如发过去的是一个文件夹的名字www.hi.images/服务器会在目录中找到默认文件并返回,如图:
默认文件一般是indexl.html也可能叫default.htm,由服务器供应商决定
  1. 默认端口号80
  2. a标签当前页跳转(目录,索引,回到页首一类的会用到)
<a id = "here">come here</a>
.
.
.
<a href = "index.html#here"> go there</a>
<a href = "#top"> to top(we need a id value named top first)</a>
  1. 属性顺序不重要
  2. a表情中可以有title属性,来添加对链接的描述
  3. 新窗口<a target = "_blank" href = "...">open ... in new window</a>,如果a元素中对象名都是'_blank'的话就都会在空白窗口中打开,如果起其他名字比如“keai”,那所有对象名是“keai”的链接都会在相同窗口打开(这是读两遍才能懂的一句话)
  4. exercise
Paste_Image.png
Paste_Image.png

第五章 图像

  1. 上图
jpeg Vs. gif
  1. 图片的属性,alt,如果图像不显示,就显示这段文字代替,调整图像尺寸width height
  2. 还讲ps了,jpeg格式,质量30--质量中,质量是从1-100,保存时候选save for web, 保存的文件格式是psd,还要用ps弱化边缘
  3. 如果用width height效果不好,因为需要先加载图片
  4. 通过缩略图加载,在img标签外加a标签
    树上的例子是把每个大图放在自己新创建的一个html中,也可以不创建html,a标签直接href到图片
<a href...>
<img>
</a>
  1. logo可以通过ps选透明背景和gif格式
Paste_Image.png
  1. exercise
Paste_Image.png

本书就看到这儿了,填词游戏还是挺好玩的。剩下的freecodecamp见

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,825评论 4 377
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,887评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,425评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,801评论 0 224
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,252评论 3 299
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,089评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,216评论 2 322
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 31,005评论 0 215
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,747评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,883评论 2 255
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,354评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,694评论 3 265
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,406评论 3 246
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,222评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,996评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,242评论 2 287
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 36,017评论 2 281

推荐阅读更多精彩内容