一、什么是B/S
- 软件主要分为两种架构B/S和C/S，我们主要从事B/S的软件开发
- B/S中的B指的是browsers,是浏览器的意思，S指server是服务器的意思
二、软件开发流程
- 网页设计师根据需求设计网页
- 前端工程师将设计做成静态网页
- 后台工程师将静态网页修改为动态网页
三、网页三要素
- 结构 HTML 用于描述页面的结构
- 表现 CSS 用于空值页面中的元素样式
- 行为 JavaScript 用于相应用户操作
四、HTML
- HTML 是超文本标记语言
- 它负责网页的三个要素之中的结构
- HTML使用标签的形式来标识网页中的不同组成部分
- 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
五、HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
六、标签
- HTML中的标记指的就是标签
- HTML使用标记标签来描述网页
- 结构：
<标签名>标签内容</标签名>
<标签名 />
七、元素
- 我们还将一个完整的标签称为元素
- 这里我们可以将元素和标签认为是一个同义词
<h1>一级标题</h1>
上边的h1我们称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素
<body>
<p><em>内容</em><p>
</body>
body也是一个元素，body是p和em的祖先元素，p和em是body的后代元素
八、属性
- 可以为HTML标签设置属性
- 通过属性为HTML元素提供附加信息
- 手续ing需要设置在开始标签或自动结束标签中
- 属性总是在以名称/值对的形式出现
- 有些属性可以是任意值，有些则必须是指定值
<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />
常见属性
- id 作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
- class 用于来标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class
- title 用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字
九、注释
- HTML注释中的内容不会在网页中显示
- 格式：
<!-- 注释内容 -->
- 合理的使用注释可以帮助开发人员理解网页的代码
- 注释不能嵌套！
十、HTML5文档声明
<!DOCTYPE html>
十一、 怪异模式
- 为了兼容一些旧的页面，浏览器中设置了两种解析模式：
标准模式和怪异模式 - 怪异面膜是解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现，避免的最好方式就是在页面中编写正确的doctype
十二、常见字符集
- ASKII、ISO8859-1、GBK、GB2312、UTF-8
十三、乱码
- 如果我们保存文件时使用的时urf-8进行编码，而浏览器读取页面时使用gb2312，这样旧会导致页面中的内容不能正常显示，也就是我们所说的乱码
- 所以我们只需要统一两者使用的字符集就可以解决乱码问题
- 这里为了页面有更好的实用性，我们一般使用utf-8
-
解决
- 在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=地址"/>
十五、常用标签
- < html >
- 作用：用于告诉浏览器这个文档中包含的信息时用HTML编写的。
- 用法：所有的网页的内容都需要编写到html标签中，一个页面中html标签只能由一个
- html标签中由两个子标签head和body
- < head>
- 作用：用来表示网页的元数据，head中包含了浏览器和搜索殷勤使用的其他不可见信息
- 用法：作为html标签的子元素的出现，一个网页中只能由一个head
- < title>
- 作用：表示网页的标题，一般会在网页的标题栏上显示
- 标签中的文字，是页面优化的最重要因素，在搜索引擎的搜索时最先看到的、最醒目的内容
- 用法：建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签
- 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索
- 作用：表示网页的标题，一般会在网页的标题栏上显示
- < body >
- 作用：用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中
- 用法：作为html的子标签使用
- < h1 >~< h6 >
- 作用：都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低
- 标题标签相当于正文的标题，通常认为重要性仅次于页面的title
- 一般标题标签我们只会使用到h3,h3以后的标题标签对于搜索引擎旧没有什么意义了
- 一个页面中只会使用一个h1标签
- < p >
- 作用：表示网页中的一个段落
- 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行
- < br />
- 作用：表示一个换行标签，使用br标签可以使br标签后的内容另起一行
- < hr />
- 作用：是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分
- < img />
- 作用：是图片标签，可以用来向页面中引入一张外部的图片
- 属性：
- src:指向一个外部的图片的路径
- alt:图片的描述
- < a >
- 作用：是超链接标签，通过a标签，可以快速跳转到其他页面
- 属性：
- href:指向一个链接地址
- target:设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口
实体（转义字符）
- 字符实体
- 小于号< <；
- 大于号> >；
- 空格  ；
- 和符号& &；
- 版权 ©；
- 引号 "；
- 注册商标 ®；
- 商标 &trade；
课外知识点
- 重点注意：…/代表返回上一级目录 传图片的时候要注意src和img的路径要求