笔记"/>
Head first html 笔记
一、书籍源码
- bethrobson/Head-First-HTML
二、学习笔记
-
chapter1
- 基本格式和组织结构
<html><head><title>Document</title> //网页标题</head><body>I am mossbaoo ! //网页内容</body> </html>
- 文本显示
<html><head><title>Starbuzz Coffee's Mission</title></head> <body><h1>Starbuzz Coffee's Mission</h1><p>To provide all the caffeine that you need to power your life.</p><p>Just drink it.</p></body> </html>
其中
<h1> </h1>
表示一级标题,同理<h2> </h2>
则表示二级标题,<p> </p>
表示新的一个段落- head 说明
- head: 包含页面有关的一些信息,其中只能放置
<title>、<meta>、<style>
元素,必须包含<title>
元素
- head: 包含页面有关的一些信息,其中只能放置
-
chapter2
- 显示图片
- 可借助
<img src="lightblue.jpg">
实现 - 当
<img src="*.jpg">
在<p> </p>
里面时则图片和文字在同一段落 - 换行可借助
</br>
来实现
- 可借助
- 插入超链接:
<a href="url">Link text</a>
<html><head><title>Head First Lounge Elixirs</title></head><body><h1>Our Elixirs</h1><h2>Green Tea Cooler</h2><p><img src="../images/green.jpg"></br> // 实现换行Chock full of vitamins and minerals, this elixircombines the healthful benefits of green tea witha twist of chamomile blossoms and ginger root.</p><p><a href="../lounge.html">Back to the Lounge</a></p></body> </html>
- 另外可设置图片的尺寸,也可在css中设置,一般不推荐设置成固定尺寸
<img src="../images/green.jpg" width="48" height="100">
- 字体加粗、倾斜
- 通过
<strong> </strong>
来实现加粗 - 通过
<em> </em>
实现倾斜
<em>Dance Dance Revolution</em>
- 通过
- 设置字体大小和颜色
- 可以通过style对整个段落文字进行设置
<p style="color:red;font-size:16px;">挺好</p>
-
效果如下
挺好
-
采用
<span> </span>
也可对段落中部分文字进行大小和颜色设置
<p> 只有 <span style="color:red;background-color:gray;">几个字</span> 有背景颜色跟字的颜色</p>
- 设定字符的编码格式:web中常用 utf-8
<meta charset="utf-8">
- 显示图片
-
chapter 3
- 文字前项目符号
- 数字编号(不需在
<p> </p>
里面)
<ol><li>Walla Walla, WA</li> <li>Magic City, ID</li> </ol>
- 圈点项目编号
<ul><li>cellphone</li> <li>and a protein bar</li> </ul>
- 数字编号(不需在
- 文字前项目符号
-
chaper4
- 设置文本为css格式
<style type="text/css">body { //在此设置这个css的特性,并应用于后面的body} </style>
- 另外css样式的属性中可有:
background-color: #d2b48c; //背景颜色margin-left: 20%; //margin 设置外边距margin-right: 20%;border: 1px dotted gray; //依次设置边框的width,style,colorpadding: 10px 10px 10px 10px; //从边界再往内缩进的尺寸,这部分不显示内容font-family: sans-serif; //字体设置,属性也可设置为:"宋体"
- 另外也可将css属性设置为一个类,其后用于其他
<html><head> <style type="text/css"> .ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ </style> </head> <body> <div class="ceshi"> 我是div css测试内容</div></body> </html>
- 设置文本为css格式
-
chapter5
- 多张图片并排放置:一个段落放置多张图片
<p><img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA"> //alt表示图片无法显示的时候,替换显示的文字<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA"> </p>
- 给图片插入超链接,实现点击图片跳转
- herf后面接着的是超链接,后面<img…>是添加了超链接的图片
<a href="html/britain.html"><img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box"> </a>
-
chapter 7
-
css文件初步
- 在html文件的 属性中添加<link type,这代替了原来的style设置,将设置放置到了css文件中,具体如下:
<head><meta charset="utf-8"><title>Head First Lounge</title><link type="text/css" rel="stylesheet" href="lounge.css"> // stylesheet表示这要链接到样式表,所以取此属性</head>
- 在其中调用了lounge.css文件中的格式配置信息,该文件的内容如下,其中包含标题和文本段落的格式:
body {font-family: sans-serif; // body 为内容主体,其设置被body中的所有元素(如H1,H2,P)继承 }h1, h2 { color: gray; } // 一个元素可以有很多规则,上面是合简写相同的规则 h1 { border-bottom: 1px solid black; // 在文字下面加入下划线 }p {color: maroon; // 将段落文本设置为茶红色 }
- Html中的元素
// 格式: // 元素名 { 属性名:属性值} // p表示段落文本,类似的有:H1表示一级标题 P {backgound-color: red;border: 1px solid gray; //表示有一个边框 }
-
html中的组成结构图如下:
html| body / / | \ \ h1 p p h2 p| / \ |img a em a
- 当设置了上层(如body)属性,其子类均会继承;但也可以对子类重新对同一属性进行赋值,修改其属性
-
在css文件中可再增加类,例如给段落文本元素p增加一个类greentea
// 格式为:元素名.类名 { 属性:属性值} p.greentea {color: green; }
- 在css文件中设置好样式之后,使用如下
<p class="greentea"> // 设置文本属性You'll find us right in the center of downtown Webville. </p>
- 另外,可以不在类名前面加元素名称,则可被所有元素使用,如下所示:
.greentea {color: green; }
- 另外,一个元素也可以具有多个类的属性:
// 假设创建了三个类: greentea raspberry blueberry // 则在html中被一个元素拥有,可写为: <p class = "greentea raspberry blueberry">
- 当继承的多个类,对同一属性的取值存在不一致时:
- 首先考虑哪个规则比其他规则更特定,例如某一个类值属于该元素,相对于其他类属于所有元素则更特定
- 特定等级相同,则考虑html中放置的先后顺序,取最后一个类的属性值
-
css中的常见属性
color //设置文本元素的颜色 background-color //设置背景颜色 top // 控制元素顶部的位置 left // 指定元素左边所在的位置 padding //内边距:元素边缘和内容之间的空间 font-size //设置文本大小 font-weight //设置文本的粗细,例如粗体 font-style //可设置文本为斜体 border //在元素周围加表框,可以是实现边框,凸起边框,虚线边框等 text-align //设置文本对其方式 letter-spacing //设置字母之间的间距 list-style //可改变列表项的外观 background-image //在元素后面放置一个图像
-
-
chapter 8
-
字体类型
- 可设置不同类型,当第一种找不到则往后找
body{font-family: Verdana, Genava, Arial, sans-serif }
- 获取web字体
// 规则以:@font-face开头 @font-face {font-family: "Emblema One"; // 为字体创建一个名字src: url(".woff"), url(".ttf"); // 字体下载的两个链接,从前往后,一旦找到一个即可 }
- 使用web字体方式:
h1 {font-family: "Emblema One", sans-serif; }
-
字体大小:
- 可设置body中的字体大小,然后其他问题相对其一个大小尺寸倍数
body {font-size: 14px//font-size: small }h1 {font-size: 220% //相对继承的父本字体2.2倍大小 }h2 {font-size: 1.2em //表示1.2倍大小,等同于120% }
-
其他字体属性
- 斜体
blockquote {font-style: italic; //斜体风格 }
- 粗细
font-weight: bold; //粗体 font-weight: normal; //继承父本的字体格式
- 装饰
h1 {text-decoration: underline //设置下划线// text-decoration: line-through; //文本中间有穿过的横线// text-decoration: underline overline; //具有 一个上划线和一个下划线// 或者设置属性值为: none }
-
指定背景或字体颜色
- 按名称制定颜色
body {background-color: silver// 其他颜色还可为:// Black, Blue, Gray, Navy// Yellow, White, Red, Maroon// Green,Purple,Olive,Lime }
- 按红绿蓝分量来指定颜色
body {background-color: rgb(80%, 40%, 0%);//background-color: rgb(200, 100, 0); 指定0-255的数值 }
- 使用十六进制码表示颜色:可通过: 在线颜色表查找
body {background-color: #cc6600;//分别用两位十六进制数表示红绿蓝取值大小}
-
-
chapter 9
-
盒模型
-
内边距: 通过padding先设置,再用padding-left等可对单一方向进行设置
-
外边距:通过margin进行设置,在用margin-left对单一方形进行设置
-
设置背景图片:
background-image: url(images/background.gif); //前面加url()
- 设置背景图片位置和是否重复:
background-position: top left; //置于左上角 ,也可按像素指定 background-repeat: no-repeat; //不重复,也可:repeat-x等
- 边框样式
border-style: groove; //槽线式 // outset (外凸) // dashed、dotted、solid、double、ridge
- 边框宽度
border-width: thin; // 5px // border-top-width: thin //指定某一边的边框宽度
- 边框颜色
border-color: red; // #ff0000 border-right-color: red; //指定某一边的颜色
- 指定边框圆角
border-radius: 15px; // border-top-left-radius: 15px; //设置左上角边框为15个像素圆角
-
-
id: 与class类似,但id具有唯一特性
// 唯一特性说明: // 一个元素不能有多个id,另外页面上不孕系多个元素具有相同的id//css中id创建方法:类似class #footer {color: red }//或者表述某个元素专属类 p#footer {color: red }//id在html文件中的使用 <p id="footer">our guarantee: </p>
-
混合样式表
- 为了满足不同的需要(例如不同显示设备,不同个性化需求),可以用多个样式表
<head> <meta charset="utf-8"> <title>Head First Lounge</title> <link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 481px)"> <link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width: 480px)"> <link type="text/css" rel="stylesheet" href="lounge-print.css" media="print"> </head>
- 其中media后面带着是查找的条件,表示输出的设备和设备平面宽度等,媒体查询规则在 css文件中也有定义:
@media screen and (max-width: 480px) {#guarantee {line-height: 1.9em;} }
-
更多推荐
Head first html 笔记
发布评论