前端学习笔记（1）

最新推荐文章于 2024-12-25 14:07:57 发布

Bookish丶

最新推荐文章于 2024-12-25 14:07:57 发布

阅读量202

点赞数

分类专栏：原创文章标签： html css

本文链接：https://blog.csdn.net/qq_42225915/article/details/106260569

版权

原创专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端笔记-1

首先需要了解软件主要分两种架构C/S和B/S。 C/S：C/S 中的C指的是Client，是客户端的意思，S值Server指服务器的意思。即客户机和服务器结构。 B/S：B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。即浏览器和服务器结构。

软件开发流程： 1-网页设计师根据需求设计网页 2-前端工程师将设计做成静态网页 3-后台工程师将静态网页修改为动态网页

前端了解： A：将设计师的设计转换为代码，然后交给后台工程师，在由他们去编写服务器的代码。 B：需要和设计师沟通，需要和产品经理沟通，需要和后台工程师沟通。 C：编写的网页会在整个项目的最前端由用户查看。

W3C标准一个网页主要由三部分组成：**结构、表现、行为**

结构
HTML用于描述页面的结构

表现
CSS用于控制页面中元素的样式,美化页面

行为
JavaScript用于响应用户操作，负责页面的行为

第一阶段：学习HTML，CSS，网页的布局
使用的工具有：
浏览器：火狐、谷歌、IE
编辑器：记事本、NotePad++、HBuilder等等
调试工具：FireBug
图片工具：Photoshop

万维网联盟（W3C）
万维网联盟World Wid Web Consortium。
W3C专门为了定义网页相关的标准而成立。
W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准

WHATWG
网页超文本应用技术工作小组（WHATWG）
是一个以推动网络HTML 5 标准为目的而成立的组织。
在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

什么是HTML

HTML（Hypertext Markup Language）超文本标记语言。
• 它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不同组成部分。
• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

HBuilder新建一个HTML如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<标签名>标签内容</标签名>
<p>内<span>容</span></p>
p则是一个元素,span是p的子元素，p是span的父元素。
 <标签名 />
 <br />
 <hr />

<body>
<p><em>内容</em></p>
</body>
• body也是一个元素。
• body是p和em的祖先元素。 • p和em是body的后代元素。

**属性**
• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
• 比如：name=“value”
• 有些属性可以是任意值，有些则必须是指定值。
<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

常见属性
• id
– id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
• title
– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释

<!--我是注释-->

DocType
• HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
• 为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。

<!DOCTYPE html>是html5的文档声明

HTML的发展
• 1993年6月：HTML第一个版本发布。
• 1995年11月：HTML2.0
• 1997年1月：HTML3.2（W3C推荐）
• 1999年12月：HTML4.01（W3C推荐）
• 2000年底：XHTML1.0（W3C推荐）
• 2014年10月：HTML5（W3C推荐）

怪异模式
• 为了兼容一些旧的页面，浏览器中设置了两种解析模式：
– 标准模式（Standards Mode）
– 怪异模式（Quirks Mode）
• 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
• 避免的最好方式就是在页面中编写正确的doctype。

页面乱码解决

在html5中只需要使用meta标签即可完成<meta charset="utf-8" />

meta作用：
• meta 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
• meta 标签位于文档的头部，不包含任何内容。
• meta 标签的属性定义了与文档相关联的名称/值对。
meta的用法

• 设置页面的字符集
– <meta charset="utf-8">
• 设置网页的描述
– <meta name="description" content="">
• 设置网页的关键字
– <meta name="keywords" content="">
• 请求的重定向
– <meta http-equiv="refresh" content="5;url=地址"/>

常见标签：

<body>
<html>
<title>
<a>
<p>
<img />
<hr />
<br />
<h1-h6>

实体（转义字符）
• 在HTML中预留了一些字符。
• 这些预留字符是不能在网页中直接使用的。
• 比如<和>,我们不能直接在页面中使用<和 >号，因为浏览器会将它解析为html标签。
• 为了可以使用这些预留字符，我们必须在html中使用字符实体。
• 语法: &实体名;
例如：

空格– &nbsp;
小于号< – &lt;
大于号> – &gt;

页面美化CSS

CSS

• 层叠样式表 (Cascading Style Sheets) • css可以用来为网页创   建样式表，通过样式表可以对网页进行装饰。
• 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高    的将会覆盖层次低的。
• 而css就可以分别为网页的各个层次设置样式。

基本语法

• CSS的样式表由一个一个的样式构成，一个
  样式又由选择器和声明块构成。
• 语法：
– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}

行内样式

• 可以直接将样式写到标签内部的style属性中，
  这种样式不用填写选择器，直接编写声明即可。
  <p style="color: red;font-size: 30px"></p>
• 这种方式编写简单，定位准确。
  但是由于直接将css代码写到了html标签的内部，
  导致结构与表现耦合，同时导致样式不能够复用，
  ~~所以这种方式我们不使用~~

内部样式表

• 可以直接将样式写到<style>标签中。
  <style>
	  p{color:red; font-size: 30px;}
  </style>
• 这样使css独立于html代码，
  而且可以同时为多个元素设置样式，
  这是我们使用的比较多的一种方式。
• 这种方式样式只能在一个页面中使用，
  不能在多个页面中重复使用

外部样式表

• 可以将所有的样式保存到一个外部的css文件中，
  然后通过<link>标签将样式表引入到文件中。
  <link rel="stylesheet" type="text/css"  href="style.css">
• 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使
  用的最多的方式。