【干货】Html与CSS入门学习笔记1-3
从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 , 必须成组使用，不能单独也不能搭配其他使用。
特殊字符要用字符实体来表示。&是所有实体的第一个字符，例如< 是< ，但是&不能单独使用，要用实体&。
3、元素杂烩
<a>建立链接
<q>短引用
<p>段落
<code>代码显示
<em>强调文本，一般是斜体
<time>告诉浏览器这是个时间
<ul>无序列表
<ol>有序列表
<li>列表项
<strong>强调文本，一般是加粗
<pre>希望浏览器原样显示文本，按照你输入的方式，如空格换行等
<br>换行
<img>插入图像
<blockquote>长引用
【干货】Html与CSS入门学习笔记1-3的更多相关文章
- 【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...
- 【干货】Html与CSS入门学习笔记9-11
九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...
- 【干货】Html与CSS入门学习笔记12-14【完】
十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
随机推荐
- 使用GEO数据库来筛选差异表达基因，KOBAS进行KEGG注释分析
前言 本文主要演示GEO数据库的一些工具,使用的数据是2015年在Nature Communications上发表的文章Regulation of autophagy and the ubiquiti ...
- invalid loc header的解决办法
eclipse 运行程序,报invalid loc header,网上一查,删除maven仓库(默认位于%USERPROFILE%\.m2\repository\org)中的下载包,然后重新下载.
- eros --- Windows Android真机调试
1.下载并安装JDK 2.下载并安装Android Studio 上面两项不管用weex还是eros都是前置条件,度娘有大量教程. 开始eros 手脚架安装: $ npm i -g eros-cli ...
- Spark Checkpoint 概述
有时候,Transformation 的 RDD 非常多或者具体 Transformation 产生的 RDD 本身计算特别复杂和耗时,此时我们必须考虑对计算结果数据进行持久化.与 persist 不 ...
- “Enterprise Architect”和数据库的不解之缘
前言 在这个大数据盛行的时代,和数据打交道变的必不可少了,所有如果有工具来规范我们的数据库会更加方便我们的生活.这次机房,我们利用EA(Enterprise Architect)自动生成SQL语句来达 ...
- 洛谷P1772 [ZJOI2006]物流运输
P1772 [ZJOI2006]物流运输 题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线 ...
- Jmeter中JDBC Request和BeanShell PostProcessor的结合使用（SQL模糊查询）
[前言] 今天记录一下Jmeter中JDBC Request和BeanShell PostProcessor的结合使用的方法(SQL模糊查询) [步骤] 1.下载对应数据库的驱动包到jmeter安装目 ...
- 我的省选 Day -13
Day -13 10:18:46 早上360浏览器的网站一直显示 证书错误! 打开洛谷,一脸懵逼,网页根本不能正常显示.(一直到刚刚改了一下系统时间才恢复正常) 好在已经把昨天那道矩阵乘法的题目做完了 ...
- Java Script 第二章.
对象: JavaScript中的所有事物都是对象:字符串,数组,数值,函数..... JavaScript中提供多个内建对象,比如说 String, Date, Array等等.对象只是带有属性和 ...
- 时间format函数引爆的知识点和年末有话说
年末感慨 转眼之间,一年的最后一天来了. 2017,技术界貌似正在飞跃.多年的量变终于引起了质变. 人工智能,区块链.对此,我很激动,激动着有点害怕,害怕中有点紧张,还有点渴望.未来的至高点,未来的风 ...