menu
more_vert
【2017.7.27】Html与CSS学习笔记1-3

作者:dayu

从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。

【2017.7.27】Html与CSS学习笔记1-3

原文地址:http://www.cnblogs.com/ziye89/p/7244433.html