[一]HTML+CSS基础(学习笔记)

一，软件架构

• C/S，客户端/服务器
  • 1.一般我们使用的软件都是C/S架构
  • 2.比如系统的中的软件QQ、360、office、XMind
  • 3.C表示客户端，用户通过客户端来使用软件
  • 4.S表示服务器，服务器负责处理软件的业务逻辑
  • 5.特点：
    • 1.软件使用前必须得安装
    • 2.软件更新时，服务器和客户端得同时更新
    • 3.C/S架构的软件不能跨平台使用
    • 4.C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全
• B/S*，浏览器/服务器(这是我们要开发的，即 我们的重点在这里)
  • 1.B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端
  • 2.B/S架构软件通过使用浏览器访问网页的形式，来使用软件
  • 3.比如：京东 淘宝 12306 知乎 新浪微博
  • 4.特点:
    • 1.软件不需要安装，直接使用浏览器访问指定的网址即可
    • 2.软件更新时，客户端不需要更新
    • 3.软件可以跨平台，只要系统中有浏览器，就可以使用
    • 4.B/S架构的软件，客户端和服务器之间通信采用的是通用的HTTP协议，相对来说不安全

二，网页的组成

一个网页主要由三部分组成：结构，表现，行为

compose.png

HTML：用于描述页面的结构

HTML下只有骨架(>﹏<)o不要啊.png

CSS：用于控制页面元素的样式

CSS之后就是一只可爱的小萌猫(>^ω^<)喵.png

行为：JS用于响应用户操作

有行为之后我可以跳舞给你看，看我优美的舞姿(>^ω^<)喵.gif

三，进制

几进制就是满几进一

• 二进制：

  • 满二进一
  • 0 1
  • 10 11 100 101 110 111

• 十进制：

  • 0 1 2 3 4 5 6 7 8 9
  • 0 1 2 3 4 5 6 7 8 9

• 十六进制：

  • 满16进1
  • 0 1 2 3 4 5 6 。。。 9 a b c d e f
  • 16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15
  • 使用a b c d e f分别表示10 11 12 13 14 15

• 八进制:(用的比较少)

  • 满8进1
  • 0 1 2 3 4 5 6 7

四，乱码问题

乱码出现的原因

• 计算机是一个非常笨的机器，它只认识两个东西 0 1

• 在计算机中保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容

• 比如：中国，在计算机底层，可以能需要转换为 1010001001010101011010

• 在读取内容时，需要将二进制编码，在转换为正确的内容

• 编码：

  • 依据一定的规则，将字符转换为二进制编码的过程

• 解码：

  • 依据一定的规则，将二进制编码转换为字符的过程

• 字符集：

  • 编码和解码所采用的规则，我们称为字符集
  • 常见的字符集：
    • ASCII
    • ISO-8859-1
    • GBK
    • GB2312：中文系统的默认编码

    • UTF-8*：万国码，支持地球上所有的文字

    • ANSI：自动以系统的默认编码来保存文件

• 产生乱码的根本原因是，编码和解码采用的字符集不同

• 在中文系统的浏览器中，默认都是使用GB2312进行解码的

解决：

• 告诉浏览器，网页采用的编码字符集
• meta标签用来设置网页的一些元数据，如网页的字符集，关键字，简介
• 写在head，title上

关于meta更多的使用说明，可以参考偶的SEO运用meta标签进行网站优化，链接：http://www.jianshu.com/p/baf5b67794ba

五，HTML简介

HTML（Hypertext Markup Language）超文本标记语言

一个最基本的HTML 页面

        
    
        
    



    
网页正文

• 1.doctype：

  • 为了让浏览器知道我们使用的HTML版本，需要在网页的最上面进行doctype声明，来告诉浏览器的版本。
  • 如果不写文档声明，则会导致有些浏览器进入怪异模式，进而导致页面无法正常显示

  浏览器的两种解析模式：
  1.怪异模式(Standards Mode):浏览器按W3C标准解析执行代码；
  2.标准模式(Quirks Mode):浏览器按W3C标准解析执行代码

• 2.标签：

  • 1.HTML中的标记指的就是标签

  • 2.HTML使用标记标签来描述网页

  • 3.结构：两种

       <标签名>标签内容     
                   
        标签内容<标签名/>
    

  • 4.常用标签：

    • 1)，标题标签h1~h6：6级标题中h1最重要，表示一个网页最重要的内容，h2-h6重要性依次降低。对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1的内容。所以会影响到页面在搜索引擎中的排名(页面中只能写一个h1，如果超过一个，则 物极必反)
    • 2)，段落标签
      ：p标签中的文字默认独占一行
    • 3)，换行标签
:使其标签后的内容另起一行
    • 4)，水平线标签

      ---

      :水平线可以将页面分为上下两个部分
    • 5)，图片标签:alt是其中的一个属性，搜索引擎可以通过alt来识别不同的图片，如果提供的图片比想要的图片大，那么最好是通过改变图片自身的大小，通过width等改变的图片大小，是无法改变内存中图片的实际大小的

src属性(熟悉在第四点有介绍)配置的是图片路径，目前我们所要使用的都是相对路径
那么问题来了，何为相对路径呢？
相对路径指相对于当前资源所在的目录的位置
可以使用../返回上一级目录，返回几级目录就写几个../


img标签中引入的图片格式：
1.JPEG(JPG):支持的颜色比较多，图片可以压缩，但是不支持透明，一般使用其来保存照片等颜色丰富的图片
2.GIF:支持的颜色少，只支持简单的透明，支持动态图
3.PNG:支持的颜色多，并且支持复杂透明


图片使用原则：
1.效果不一致，使用效果好的
2.效果一致，使用小的

+ 6)，超链接标签``````:

回到顶部

 去底部
........
去顶部

• 3.元素：

  • 一个完整的标签还成为元素，如

    就可以称为元素

  • 块元素：独占一行的元素，无论他的内容有多少，都会独占一行，div就是块元素，还有

    ..

    • div元素没有任何的语义，就是一个纯粹的块元素，并且不会为他里面的元素设置任何默认样式，主要用来对页面进行布局的

  • 内联元素：是值只占自身大小，不会占一行，常见内联元素：..

    • sapn元素也没有任何意义，专门用来选中文字，然后为文字设置样式的

  一般情况下，只是用块元素去包含内联元素，而不使用内联元素去包含块元素；a元素可以包含任意元素，但是除了他本身；p元素不可用包含任何其他的块元素，包括其本身

• 4.属性：可以通过W3School离线手册.chm进行标签属性查阅

  • W3School离线手册.chm下载地址(百度网盘地址)：http://pan.baidu.com/s/1miGwp5Y
  • 可以为HTML标签设置属性，通过属性为HTML元素提供附加信息
  • 属性需要设置在开始标签或自结束标签中
  • 属性总是以名称/值对的形式出现，如:name='value'
  • 有些属性是任意值，有些则必须是指定值，如

- 常见属性：
  >+ id：标签的唯一标识，在同一个网页中不能出现相同的id属性值
  + class：用来为标签分组，拥有相同class属性的标签则被认为是一组的，可以出现相同的class属性，可以为一个元素指定多个class
  + title：用来为元素指定标题，指定title后，鼠标移动到元素上面会出现提示文字

• 5.HTML注释

• 6.实体(转义字符)

在HTML中，一些如< >这种特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊的字符，这些特殊的符号我们称为实体(转义字符串)。

实体的语法：

&实体的名字;

例如：

名称	转义字符	名称	转义字符
小于号<	<	版权 ©	©
大于号>	>	引号"	"
空格		注册商标 ®	®
和符号 &	&	商标 ™	™

当然喽 还可以去W3School离线手册.chm中的HTML实体查找啦**

六，HTML规范(建议按规范走)

• HTML中不区分大小写，但是我们一般使用小写
• HTML注释不能嵌套
• HTML结构必须完整：要么成对出现，要么自结束标签
• HTML标签可以嵌套，但是不能交叉嵌套
• HTML标签的属性必须有值，且值需加引号

参考资料：尚硅谷视频学习整理