七海的html和css学习笔记(一)

使用书籍:Head First Html 和Css

第一章  Web语言概述和简介

        宏观的角度看Web的工作   

                想要建立Web页面,需要使用超文本标记语言(HyperText Markup Language),也就是HTML编写文件。

                首先,把文件放在一个Web服务器上(之后会学到如何把文件放在服务器上),文件放在一个服务器上之后,任何浏览器就能通过互联网访问你的web页面,根据web页面的html,浏览器可以了解到显示页面所需的全部信息。


        Web服务器能做什么?
                服务器就是一个连接到互联网的计算机,在等待来自浏览器的请求,每个服务器会存储html文件,图像,声音等等类型的文件。当浏览器发出请求,要求得到这些文件,服务器就会找到浏览器所请求的文件并发送。

        Web浏览器能做什么?
                其实我们已经知道浏览器是怎样工作的:单击一个链接来访问某个页面,这个单击会让浏览器向Web服务器请求一个html页面,获取这个页面,并在你的浏览器窗口中显示。
                
                但是浏览器是怎么知道如何显示一个页面的呢?这个时候就要用HTML了,HTML会告诉浏览器页面的所有内容和结构。
           
         HTML所用的标记
                标记包含标记名,标记名两边有尖括号,即“<”和“>”。
                例
            <p>这个是文本段落的标记</p>
                <p>和</p>就是html的标记,分别为开始标记和结束标记,开始标记和结束标记再加上中间的内容,称之为元素。也就是说:   元素=开始标记+内容+结束标记
                我们把开始和对应的结束标记称之为匹配标记。
    
         本章介绍到的HTML标记

                

<html></html>
    //这个标记会告诉浏览器文件的内容是html
<head></head>
    //通过首部(head)可以告诉浏览器关于Web页面的有关信息,比如页面标题
<title></title>
    //在head标记中放入title标记,title中的内容会出现在浏览器窗口的顶部
<body></body>
    //页面主体包括body标记之间的所有内容,也就是页面所能看到的部分
<h1></h1>
    //代表一个一级标题,实际上标题一共有6段,从<h1>到<h6>
<p></p>
    //p标记用于标记段落
<em></em>
    //em标记可以用来倾斜文字
<img>
    //img可以用来导入图片,一般写法是<img src="***.jpg">,要注意的是,img标记一般单独使用,并没有匹配标记
<!--....-->
    //html中的注释,当然用//也可以



         注意几点

                1. 浏览器会忽略HTML文档中的制表符,回车符和大部分空格,它们会根据你的你的标记来确定在哪里换行或者分段。

                 2.  编写HTML时要把首部<head>和页面主体<body>分开。

                 3.  匹配标记不一定要在同一行上,记住,浏览器会忽略制表符,回车符和大部分空格

                

            

 简谈CSS

           Css是层叠样式表(Cascading Style Sheets)的缩写。

         要使用Css,要在页面中增加<style>元素,与其他元素类似,style元素有开始标记<style>和结束标记</style>,<style>标记还有一个可选的属性,名为type,由于要使用Css,所以可以指定"text/css"类型。<style>元素放在html元素的首部<head>里。示例:

         

<html>
   <head>
      <style type="text/css">
      //这里利用css定义页面样式
      </style>
   </head>
</html>

            元素的属性 : 通过属性,可以提供一个元素的附加信息。比如说,如果有一个html元素,属性允许你准确的指定是什么类型的样式。以后还会看到不同元素的更多属性,只要记住一点:属性能提供元素的一些额外信息。


         

      

           

           

        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值