初学前端开发，记录下自己的学习笔记。

第一章 认识HTML

1:关于HTML

　　HTML是超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构。

　　它只会根据标记来确定在哪里换行或者分段。所以浏览器会忽略HTML文档中的制表符、回车和空格。

　　共有六级标题，从<h1>到<h6>，字体由大到小。

　　HTML注释放在<!--和-->之间，浏览器会把它们完全忽略，可以有多行。

　　<em>元素表示强调。

　　<head>的HTML页面的头部，它包含了web页面的相关信息。

2、关于CSS

　　CSS是层叠样式表（cascading style sheets）的缩写。它提供了一种方法来告诉浏览器页面中的元素如何显示。

　　想要增加样式，要在页面中增加<style>元素。它放在HTML的首部里。

　　它有一个可选的属性type，告诉浏览器在使用什么类型的样式。使用CSS，对应的类型是"text/css"。

第二章 深入了解超文本

<a>元素创建一个超文本链接，元素的内容会成为web页面上可以点击的文本，href属性会告诉流浪器链接目标。

文本和图像都可以当做链接的标签。

第三章 构建模块

<q> 短引用：作为现有段落的一部分，大部分浏览器会加上引号，是quotation的缩写。

<blockquote> 长引用 ： 这是一个块元素，创建了一个单独的文本块，还会将文字稍微缩进，看起来更像一个引用。若果想引用一段或者多段文字，可以使用这个元素。

在<blockquote>中使用<q>这是引用的引用，使用<p>的话可以形成多个段落。

　

　 块(block)元素,前后都有一个换行, 如<h1> ~ <h6>, <p> , <blockquote>,<ol>,<ul>,<li>等，特点是: 特立独行

内联(inline)元素,总在“行内”出现, 如<q>, <a>, <em>,特点是: 随波逐流

void元素,这个元素没有实际内容，会用简写来表示，如<img>, <br>,这样能提高效率。

如果想插入自己的换行是，使用<br>元素。

<ol> order list 有序列表

<ul> unorder list 无序列表

<li> list item

　字符实体：如果想输出 The <html> element，通过使用字符实体 可以这样写  The &lt; html &gt; element ，更多的字符实体可以访问http://www.unicode.org/charts/

第四章 连接起来

　　www.starbuzzcoffee.com 中 starbuzzcoffee.com 是域名， www是域中特定服务器的名字。

www.starbuzzcoffee.com只是 starbuzzcoffee.com这个域上的一个网站。

　　URL(Uniform Resource Locateor)统一资源定位符，是一个全局地址，可以定位web上任意资源，包括html页面，音频，视频以及其他形式的web内容。

　 web服务器默认文件名为"index.html"或"default.htm",所以如果浏览器请求目录，服务器会在该目录下寻找"index.html"或"default.htm"，如果找到则返回。如果末尾没有正斜杠，如果该目录确实存在，那么浏览器会自动帮你加上末尾的斜线。

　　文件URL有3个斜线而不是2个，http url中删去网站名也会有3个斜线

　　web服务器默认端口为80

　　

　　<a href="index.html#chai">See Chai Tea</a>或者href = "http://wickedlysmart.com/buzz/#Teas_and_other_infusions,点击这个链接就会跳转到index.html中id为chai或者Teas_and_other_infusions的部分显示，否则默认是链接到top位置。

<a target="_target" href="http://www.google.com">Google</a>  在一个新的窗口打开这个链接

第五章 为页面增加图像

　　照片和复杂图像使用 jpeg（jpeg有损、不支持透明度、比较小、不支持动画）

　　单色图像、logo和几何图像使用png或gif（png可包含上百万中颜色、无损、可透明、图像下面的东西可以显示出来、相对于jpeg而言png更大；Gif类似png、256种颜色、无损、支持透明度，不过只允许一种颜色设置为透明、比jpeg更大、支持动画）

第六章 标准及其他


使用W3C严重工具来验证：http://validator.w3.org

 

 

Head First Html and CSS学习笔记之HTML的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. 为什么在ucos向stm32f103移植时说os_cpu_c.c中有三个函数如OS_CPU_SysTickInit()需要注释掉

    我在看os_cpu_c.c代码时对下面这段话困惑了半天总是在百度的帮助下找到了答案 /*  申明几个函数,这里要注意最后三个函数需要注释掉,为什么呢?    OS_CPU_SysTickHandler ...

  2. 有关TabBar的一些性质

    // 计入导航控制器时,要使得底部的TabBar消消失 test.hidesBottomBarWhenPushed = YES; /** *  布局子控件 */ - (void)layoutSubvi ...

  3. 解决Dropbox无法连接的问题

    同步共享服务Dropbox从6月18日开始再次遭到封锁,原因是DNS污染.Dropbox上次在2010年5月曾遭到IP封锁和网址关键字过 滤,2012年5月除文件外链功能外其它功能可正常访问:2014 ...

  4. Java基础语法目录

    一.Java相关科普知识1.Java的发展历程2.Java的发展方向3.Java的体系特性二.Java第一个程序1.JavaJDK的安装与环境的配置2.记事本开发Java程序的注意事项与常见问题3.J ...

  5. LeetCode 371. Sum of Two Integers

    Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. Exam ...

  6. Python基础篇【第7篇】: 面向对象(2)

    上一篇<初识面向对象>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公 ...

  7. 使用PerfView诊断.Net GC的问题

    PerfView 概述: PerfView是一个可以帮助你分析CPU和内存问题的工具软件.它非常轻量级也不会入侵诊断的程序,在诊断过程中对诊断的程序影响甚微. Visual Studio自带的性能分析 ...

  8. win7远程桌面恢复全屏状态快捷键

    不同的电脑可能有不同的快捷键(有些笔记本电脑甚至没有相应的键值):①台式机:ctrl+alt+break 组合键.②CTRL+ALT+PAGEDOWN 组合键.③有的笔记本没有break键,可以尝试加 ...

  9. Jmeter分布式测试

    随着并发量的增大,一台机器就不能满足需求了,所以我们采用分布式(Master-Slaver)的方案去执行高并发的测试 注意事项: Master机器一般我们不执测试,所以可以拿一台配置差些的机器,主要用 ...

  10. iOS各种开源类库

    KissXml——xml解析库 相关教程:http://www.iteye.com/topic/625849 http://sencho.blog.163.com/blog/static/830562 ...