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

第一章 认识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. Async Programming - 1 async-await 糖的本质（2）

    上一篇讲了这么多,其实说的就是一个事,return会被编译器重写成SetResult,所以如果我们的异步函数返回的是一个Task<int>,代码就要改成这样: using System; ...

  2. Python DES 加密解密，就是大家所谓想要的那个非常快速的方法

    这个要借助Crypto.Cipher这个插件来实现的,引用后只需要写如下代码即可 from Crypto.Cipher import DES class MyDESCrypt: key = chr(1 ...

  3. Android 通过广播获取网络状态

    Android系统网络连接状态的改变会发一个广播,注册一个广播接收者,实时动态的检测网络状态,及时提醒用户,优化用户体验.          本文仅提供WIFI 状态的检测作为参考,其他网络连接方式请 ...

  4. Unity3D优化总结

    1.在使用数组或ArrayList对象时应当注意 length=myArray.Length; for(int i=0;i<length;i++) { } 避免 for(int i=0;i< ...

  5. Mono自定义图片按钮

    首先,我们编写一个MyImageButton类,继承自LinearLayout public class MyPhoneImageButton:LinearLayout { private Image ...

  6. cpio命令用法

    [转自]流浪妖精のSKY    http://www.cnitblog.com/flutist1225/articles/18974.html cpio命令用法 cpio命令     利用cpio 可 ...

  7. MCV之行为

    在Controller中的方法都称为行为,所以的公共方法都可以在浏览器中调用,返回值为:ActionResult的类型或其子类,这个类为抽象类,所以这为抽象编程,方法的结果返回为直接或间接继承自Act ...

  8. 《开源安全运维平台OSSIM最佳实践》

    <开源安全运维平台OSSIM最佳实践> 经多年潜心研究开源技术,历时三年创作的<开源安全运维平台OSSIM最佳实践>一书即将出版.该书用80多万字记录了,作者10多年的IT行业 ...

  9. Spark Streaming源码解读之Driver中ReceiverTracker架构设计以具体实现彻底研究

    本期内容 : ReceiverTracker的架构设计 消息循环系统 ReceiverTracker具体实现 一. ReceiverTracker的架构设计 1. ReceiverTracker可以以 ...

  10. AngularJS-chapter1-2-四大特性

    4大特性 MVC MVC实例  数据模型,控制器,视图 HelloAngular_MVC.html 图中的 ng-controller="HelloAngular"  定义了Hel ...