从23号开始用了4天时间看完了《Head First Html与CSS》这本书，本书讲解方式深入浅出，便于理解，结合习题，便于记忆，是一本不错的入门书。下面是本书的学习笔记：

一、认识HTML

HyperText Markup Language，超文本标记语言的缩写。标记文本来告诉浏览器文本的结构。

注释放在<!--和-->之间，浏览器会忽略其中内容。

1、在电脑上创建一个html文件

打开记事本，另存为后缀名为.html，编码为UTF-8。

本地测试，直接在浏览器中打开，可以直接将文件拖进去。

2、html文件基本结构

<html>

<head>

</head>

<body>

</body>

</html>

一个完整的元素：<h1> Starbuzz Coffee Beverages</h1> 开始标记+内容+结束标记

3、增加样式，<style>元素

放在头部里，制定类型，加属性type为css(也可不指定)，可以在头部标记里加属性。

<head>

<style type="text/css">

</style>

</head>

css是另一门语言是层叠样式表的缩写，cascading style sheets，语法结构跟html不同。html 负责页面结构(布局)，css负责页面样式（表现）。

css基本语法是：元素名 {属性1：值；

属性2：值；

}

例：body {

background-color: #d2b48c;

border: 2px dotted black;

margin-left: 20%;

margin-right: 20%;

padding: 10px;

}

二、深入了解超文本HT，hypertext

1、超链接，元素<a>

<a href="direction.html">detailed derections</a>

href属性来指定链接的目标文件，> <中间的内容是浏览器显示的文本（标签），通常带有一个下划线，代表可点击。href是缩写，hypertextreference，超文本引用。

2、引用路径

在本网站内容用相对地址，外网站内容用绝对地址url

如果相对本网页，要引用的内容是在下级子文件夹：images/coffee.jpg

如果相对本网页，要引用的内容是在兄弟文件夹，则要先返回上级父文件夹，在下行到该兄弟文件夹：../images/coffee.jpg，一个".."代表上行一级。如果要上行两级则用../..。

如果相对本网页，要引用的内容就在本级，则直接用coffee.jpg

注："/"只用做分隔。

三、构建模块 Web页面建设

首先根据草图建一个页面略图，就是用html元素标识出基本的框架，然后再把元素和内容补充完整，形成基本布局。

1、块元素block，内联元素inline

块元素：<p> <blockquote> <ol> <ul> <li>，单独显示，前后有换行。

内联元素：<q> <em> <img>，没有换行。

2、其他

<br>是换行符，没有任何内容，没有结束标记。是一个void元素。<img>也是void元素，有属性，但是没有内容和结束标记。

ul: unordered list 无序列表

ol: ordered list 有序列表

li: list item 列表项

ul 与 li ，ol 与 li , 必须成组使用，不能单独也不能搭配其他使用。

特殊字符要用字符实体来表示。&是所有实体的第一个字符，例如< 是&lt ，但是&不能单独使用，要用实体&amp。

3、元素杂烩

<a>建立链接

<q>短引用

<p>段落

<code>代码显示

<em>强调文本，一般是斜体

<time>告诉浏览器这是个时间

<ul>无序列表

<ol>有序列表

<li>列表项

<strong>强调文本，一般是加粗

<pre>希望浏览器原样显示文本，按照你输入的方式，如空格换行等

<br>换行

<img>插入图像

<blockquote>长引用

【干货】Html与CSS入门学习笔记1-3的更多相关文章

  1. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  2. 【干货】Html与CSS入门学习笔记9-11

    九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...

  3. 【干货】Html与CSS入门学习笔记12-14【完】

    十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...

  4. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  5. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  6. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  7. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  8. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  9. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

随机推荐

  1. JDBC编程之程序优化

    -----------------siwuxie095 首先下载 MySQL 的 JDBC 驱动,下载链接: https://dev.mysql.com/downloads/connector/j/ ...

  2. SDK和JDK的区别

    刚开始工作时,还以为两者是一样的,只是版本换新给了个新名字罢了.最近又关注到这个问题,才发现自己大错特错,故整理了下分享给大家,共勉! jdk,是Java开发工具包,主要用于编写Java程序:也就是说 ...

  3. 26.【转载】挖洞技巧：绕过短信&邮箱轰炸限制以及后续

    邮箱轰炸可能对企业来说危害很小,但对用户危害很大.短信轰炸相比邮箱轰炸,带来的危害涉及到企业和用户. 那么这些问题都存在在哪些方面呢? ①:登录处 ②:注册处 ③:找回密码处 ④:绑定处 ⑤:活动领取 ...

  4. 关于export环境变量生存期

    今天对export方式设置的环境变量的生存期有很大疑惑. 按变量的生存周期来划分,Linux变量可分为两类,它们的修改方法如下:(1)永久的:需要修改配置文件,变量永久生效.    常见的配置文件包括 ...

  5. vue + eCharts 实现图表展示

    一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...

  6. 2014-11-3 NOIP模拟赛3

    字符串 string.pas/c/cpp 1S/256MB [题目描述] 现在给一个字符串,你要做的就是当这个字符串中存在两个挨着的字符是相同的时就将这两个字符消除.需要注意的是,当把这两个字符消除后 ...

  7. tomcat与jetty接收请求参数的区别

    [场景] 服务端点对点通知.A服务发起请求B服务,B同步返回接收成功:然后B开始处理逻辑:B处理完成后异步通知给A:A接收请求并处理,同步回写响应给B:完成. [先上代码] 服务端(接收端)代码: i ...

  8. 安居客scrapy房产信息爬取到数据可视化(上)-scrapy爬虫

    出发点 想做一个地图热力图,发现安居客房产数据有我要的特性.emmm,那就尝试一次好了~ 老规矩,从爬虫,从拿到数据开始... scrapy的配置 创建一个项目(在命令行下敲~): scrapy st ...

  9. 机器学习(四) SVM 支持向量机

    svr_linear = SVR('linear') #基于直线 svr_rbf = SVR('rbf') #基于半径 svr_poly = SVR('poly') #基于多项式

  10. haoi2018奇怪的背包题解

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5302 对于一个物品,设它体积为v,那么,在背包参数为p的情况下,它能达到gcd(v,p ...