闪黑
闪黑

HTML与CSS学习笔记--未完待续

HTML，CSS学习笔记

结合尚硅谷的视频，摘抄的笔记

一、软件架构

  1. C/S：客户端/服务端
    C：客户端，用户通过客户端来使用软件；
    S：服务器，负责处理软件的业务逻辑；
    特点：
    （1）软件使用前必须安装；
    （2）更新时，服务器和客户端同时更新；
    （3）C/S架构的软件不能跨平台使用（eg：手机端和电脑端不是同一个东西）；
    （4）C/S架构到的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。
  2. B/S：浏览器/服务器
    （1）本质上是C/S，只不过B/S架构的软件使用浏览器来作为软件的客户端；
    （2）B/S架构软件通过使用浏览器访问网页的形式来使用软件；
    （3）比如：京东，淘宝，12306，知乎
    （4）特点
    • 不用安装，用浏览器访问指定网址即可；
    • 软件更新时，客户端无需更新；
    • 软件可跨平台，只要有浏览器就可用；
    • B/S架构的软件，客户端与服务器通信采用的是通用的HTTP协议，相对来说不安全。

二、学习简介

  1. 结构：HTML用于描述页面的结构；
  2. 表现：CSS用于控制页面中元素的样式；
  3. 行为：JavaScript用于响应用户操作。
    HTML与CSS学习笔记--未完待续_第1张图片

三、HTML

  1. 纯文本只能保存文本的内容，不能插入图片、音频、视频，也不能改变样式

  2. 基本框架

    
<html> 
<head>
	<meta/>
	<title>title>
	
	
	
head>

<body>body>
html>

  3. ：h5；
    （1）要写在页面最上面；
    （2）【过渡版，严格版，框架版】
    （3）若不写文档声明，则会导致有些浏览器进入怪异模式，浏览器解析页面会导致页面无法正常显示。

（一）标签

  1. 一个完整的标签可称为元素；

  2. 乱码问题：编码与解码规则不一致，即字符集不一致；

  3. 常见字符集：

     ASCII
 ISO-8859-1
 GBK
 GB2312：中文系统的默认编码
 UTF-8：万国码，支持地球上的所有文字
 ANSI：自动以系统默认的编码来保存文件

标题标签

  1. 注意只有1-6；
  2. 文字大小并不是最关键的，重要的是标签的语义，对于搜索引擎来说h1的重要性仅次于title，搜索引擎检索完title就会立即查看h1的内容，它会影响到页面在搜索引擎中的排名，页面只能写一个h1，多了会被认为是垃圾页面；
  3. 一般页面标题标签只使用h1，h2，h3，以后的基本不会使用，与其它标签无异。

段落标签

  1. 表示内容中的一个段落；

  2. ；
  3. p标签中文字，默认会独占一行，并且段与段之间会有个间距；
  4. 检索文章内容，考虑为段落语义。
  5. 在HTML中，字符间写再多空格或者回车，浏览器也会当成一个空格解析，换行也是当做空格处理

br标签

  1. 自结束标签
  2. 表示换行

hr标签

  1. 自结束标签
  2. 在页面生成一条水平线

（二）实体

  1. 一些特殊符号无法直接使用，需要用一些特殊的符号来表示，这些特殊符号成为实体（转义字符串），浏览器解析到实体时，会自动将实体转换成其对应的字符；

  2. 实体的语法：&实体的名字；

     如：
  <			<
  >			>
  空格		 
  版权符号	©；

（三）图片标签

  1. 使用img标签向网页引入一个外部图片；

  2. img也是一个自结束标签；

  3. 属性

     src：设置一个外部图片的路径；
 alt：可以用来设置在图片不能显示时，对图片的描述；搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录。
 width：可以用来设置图片的宽度；一般用px作为单位；
 height：可以用来设置图片的宽度；一般用px作为单位；

    注意：
    （1）宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小；
    （2）如果两个值同时设定，则按你设定的值来改变；
    （3）一般开发中除了自适应的页面，不建议设置图片的宽高，直接裁成想要的大小就行，考虑内存问题；

  4. 相对路径：
    相对路径时相对于当前文件所在目录的位置；
    下一级：下一级目录名/文件名
    上一级：…/文件名
    上几级：返回几级就写几个…/

  5. 图片格式问题

jpeg：

  • 图片支持的颜色比较多，图片可以压缩，但不支持透明；
  • 一般用jpeg来保存照片等颜色丰富的图片。

gif：

  • gif支持的颜色少，只支持简单的透明，支持动态图；
  • 图片颜色单一或者是动态图是可以使用gif。

png：

  • png支持颜色多，并且支持复杂的透明；
  • 可以用来显示颜色复杂的透明的图片。

图片的使用原则：

  • 效果不一致，使用效果好的；
  • 效果一致，使用笑的。

（四）meta标签

  1. 用来设置网页的一些元数据；
  2. 是自结束标签，编写自结束标签的时候可以在开始标签中添加一个/;
  3. 使用meta标签可以来设置网页的关键字;
    <meta name="keywords" content="HTML,JavaScript,前端,Java" />
  4. 可以用来指定网页的描述;
    <meta name="description" content="发布h5，js等前端相关信息" />
  5. 搜索引擎检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名；
  6. 使用meta可以用来做请求的重定向
    <meta http-eqiv="refresh" content="5,url=http://www.baidu.com" />

（五）xHtml的语法规范（firebug插件）

  1. HTML中不区分大小写，但是我们一般都使用小写；
  2. HTML中的注释不能嵌套；
  3. HTML标签必须结构完整，要么成对出现，要么自结束标签；
    
<p>hhhp>

<p>hhh


     
    是h5的规范
 
    是XHTML的规范
  4. HTML标签可以嵌套，但是不能交叉嵌套；
  5. HTML标签中的属性必须有值，而且必须要加引号（单双引号都行）

（六）内联框架

  1. 内联框架可以引入一个外部页面

  2. 使用iframe创建一个内联框架

  3. iframe的属性

     src：指向外部页面的路径，可以使用相对路径；
 width，height：宽高
 name：可以为内联框架指定一个name属性，起个名

  4. 在现实开发中，不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

（七）超链接

  1. 超链接可以让我们从一个页面跳到另一个页面

  2. 使用a标签来创建一个超链接

  3. a标签的属性

     href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的的地址；
 target：可以用来指定打开链接的位置
 	可选值：
 	_self：表示在当前窗口打开（默认值）
 	_blank：在新窗口中打开链接
 	可以设置一个内联框架的name属性值，链接会在指定的内联框架中打开

  4. 创建超链接时如果链接地址不确定可以直接写一个#作为占位符，点击自动跳转到当前页面的顶部。

  5. 定位到当前页面的某个部分，那可以选择给那个元素加上id属性，然后超链接的href属性就设置成“#id属性值”，即可实现。

css

（一）简介

css：层叠样式表，所谓层叠，指的是将网页想成是一层一层的结构，层次高的将会覆盖层次低的，而css就可以分别为网页的各个层次设置样式。（tilt插件）

（二）样式位置

  1. 将css演示编写到元素的style属性中

     将样式直接写到style属性中，这种样式我们称为==内联样式==；
 内联样式只对当前元素中的内容起作用，内联样式不方便复用。

  2. 将css样式编写到head中的style标签里，称为内部样式表