一、前端开发做什么
- 传统前端：html+css+js
- HTML5大前端：各种端的兼容开发、Ajax+服务器端的开发、高级设计模式和框架、网站安全、SEO优化、测试、源代码管理、移动APP和移动站点的开发
二、HTML要点
HTML简介
1.什么是HTML？
超文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言；
HTML 不是一种编程语言，而是一种标记语言；
标记语言是一套标记标签 ，HTML 使用标记标签来描述网页 。
2.html的文件命名
必须是小写字母开头，后接下划线、数字、字母，不可使用中文或特殊字符作为文件名。
HTML的结构
1.HTML标签的规范
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始（开放）标签，第二个标签是结束（闭合）标签
- HTML也存在单标签，例如
<br/>、<img/>
2.Html标签结构初体验（标签、属性、元素、注释）
3.结构中的每个标签的含义
（1）<!DOCTYPE>标签
<!DOCTYPE>
- 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
- 文档类型：
| 文档类型 | 分类 | 备注 |
|---|---|---|
| HTML | HTML Strict DTD | 请求比较严格的html类型 |
| HTML | Transitional DTD | 相对而言比较规范不太严禁 |
| HTML | Frameset DTD | 框架级的类型 |
| xHTML | HTML Strict DTD | 请求比较严格的html类型 |
| xHTML | HTML Transitional DTD | 相对而言比较规范不太严禁 |
| xHTML | Frameset DTD | 框架级的类型 |
| HTML5 |
注意：每个页面都必须设置一个doctype，如果不设置，浏览器会默认开启quirks mode（怪异模式）解析（quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。
（2）<html>告知浏览器这是一个html文件
| 属性值 | 作用 |
|---|---|
| lang属性 | 设置这个页面的主要语言 |
（3）<head>标签管理所有头部元素的容器
可以存放：<base>, <link>, <meta>, <script>, <style>以及 <title>
（4）<title>标签定义文档的标题
title中的文本在SEO中占有很大的权重。（不可少）
（5）<meta>标签
作用：设置页面描述信息，设置页面关键字，设置页面的编码格式
- Description：设置页面描述信息【关键信息的比重（前升排名的一种方式。）】
- Keywords：设置页面关键词。【关健词的比重（前升排名的一种方式。）】
- 设置页面的编码格式：
例如：
<meta charset=UTF-8">
Charset（字符集格式）常见：
- UTF-8:国际通用字符集
- gb2312:亚洲国家使用字符集
HTML标签详解
h系列的标签
| h系列的标签(Header) | 作用 |
|---|---|
| h1,h2,h3,h4,h5,h6 | 把页面上的文字加上标题的语义，其中h1定义标题的语义化最重 |
注意：一个页面只能有一个h1标签。
p段落标签
| p段落标签 | 作用 |
|---|---|
| p | 给页面的上一段文字加上段落的语义 |
hr标签
| p段落标签 | 作用 |
|---|---|
| hr | 在页面显示一条横线，默认占整行。hr 元素可用于分隔内容 |
br标签
| br段落标签 | 作用 |
|---|---|
| br | 换行 |
a标签
a：超链接，锚链接。
- 作用：跳转页面；
- a标签属性：
| 属性 | 属性值 |
|---|---|
| href | a标签的跳转目标地址 |
| target | 设置连接的跳转方式:target设置连接的跳转方式(1)_blank:保留原始页面，再进行跳转(2)_self:在当前页面进行跳转 |
补充：<base target=“blank”>为页面上所有a标签设置跳转方式（一般放在titile标签下面）
a标签的其它用法：
- 可以不跳转（跳转到当前页面）
href=”#” - 可以跳转到另外的页面
- 可以在当前页面进行定位
设置a标签的href属性为“#id名”
在页面的指定位置加入一个目标标签（可以是任意标签）
必须给这个标签设置一个id名：<p id=”mubiao”>这是目标</p> - 在跳转的页面进行定位。
- 可以进行下载（强烈不推荐使用）
<a href="1.zip">下载那个神奇的文件</a>
img
| 标签 | 作用 |
|---|---|
| img | 在页面显示一张图片 |
| 属性 | 属性值 |
|---|---|
| src | 图片显示的路径 |
| alt | 若图片加载不出来，显示出来文字 |
| title | 鼠标上移显示的文字（介绍图片） |
涉及到的路径问题：
第一种：绝对路径
带有盘符的路径：C:\上课内容\上课视频\firstday\源代码\wscat.jpg
缺点：可移植性不强，一般情况下不直接使用绝对路径。
第二种：相对路径
a.如果页面与图片在同一目录下面：
b.如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
总结：平时开发一般都是用相对路径：因为相对路径的可移植性要强。
文本格式化标签
（1）b , u , i , s：视觉要素
| 标签 | 作用 |
|---|---|
| b(Bold) | 加粗 |
| u (Underlined) | 下划线 |
| i(Italic) | 倾斜 |
| s(Strikethrough) | 删除线 |
没有语义的标签，<i></i>标签经常会用于不需要语义化的位置，例如放一个小图标
（2）strong,em,del,ins：表达要素
| 标签 | 作用 |
|---|---|
| strong | 加粗，加强语气 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
可以作为语义化标签使用
（3）sub、sup标签
| 标签 | 作用 |
|---|---|
| sub | 定义下标字 |
| ins | 定义上标字 |
预格式文本
HTML 输出空格
- 当显示页面时，浏览器将所有连续的空格或换行都会被算作一个空格。
- pre标签：预格式文本，保留原本的结构，保留空行和空格
表格
早期网站开发中，人们喜欢作用表格布局，使用非常的泛滥。到了2008年之后，人们意识到表格的局限性，所以改为用div+css模式。2002.Sina.com.cn、2004.sina.com.cn
作用：用来将数据以表格形式显示出来。
最简单的表格格式：
完整的表格格式：
| 常用属性 | 作用 |
|---|---|
| border | 给表格加上了边框 |
| width | 给表格设置宽 |
| height | 给表格设置高 |
| cellspacing | 规定单元格之间的空白 |
| cellpadding | 规定单元边沿与其内容之间的空白 |
| align:center,left,right | 设置table上，决定表格显示的位置 |
| 例如 | <table border="1" width="800" height="400" cellspacing="0" cellpadding="0"> |
列表：显示数据
（1）无序列表(ul)：(重点)
| 标签 | 作用 |
|---|---|
| ul | 显示一列没有排列顺序的数据 |
注意：
- ul标签是用来管理li标签，所以ul中只能出现li
- li标签是一个容器，可以放其它标签
（2）有序列表(ol)：（用的很少）
| 标签 | 作用 |
|---|---|
| ol | 显示一段有顺序的数据 |
注意：有序列表中的所有数据都是顺序的
（3）自定义列表(dl)
| 标签 | 作用 |
|---|---|
| dl,dt,dd | 显示一段数据，格式自己定义 |
注意：一个dl中可以有多个dt和多个dd。
表单：收集信息
1.表单标签（<form></form>）
<form>
...
input 元素
...
</form>
属性：
- action="url地址" ，用于指定接收并处理表单数据的服务器程序的url地址
- method="提交方式" ，设置表单数据的提交方式，其取值为get或post
- name="表单名称" ，用于指定表单的名称，以区分同一个页面中的多个表单
2. 表单元素（注册页面上能够填写的内容）
作用：用来收集用户的信息，将来提交到服务器。
| 标签 | 作用 | 属性 |
|---|---|---|
| input | type | text:文本框 |
| input | type | password：密码框 |
| input | type | button:按钮 |
| input | type | reset:重置 |
| input | type | image:图片提交 |
| input | type | submit:提交 |
| input | type | hidden:隐藏域 |
| input | type | radio:单选框 |
| input | type | checkbox:多选框 |
| input | type | hidden:隐藏域 |
| input | type | submit是提交按钮 起到提交信息的作用 |
| input | value | 给文本和按钮(text,password,button)用于设置默认值 |
| select | option | 下拉框 |
| textarea | 文本域 |
注意：
- 如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同的name属性。
- 如何给radio,checkbox设置默认值：
checked=”checked” - 给下拉框设置默认值：
selected="selected"
字符实体
往网页中输入特殊字符，需在HTML代码中，转变成以&开头的字母组合或以&#开头的数字，浏览器会用HTML命令对这些特殊代码进行翻译。常见的如：
行内元素+块级元素+行内块级元素
行内元素(行内不可置换元素)：
（1）代表标签：a,span,b,u,i,s,strong,em,ins,del
（2）特点：
- 一行里面可以显示多个
- 无法设置宽高
- 宽高由内容来决定(背景是显示在宽高上的,而不是行高)
（3）属性：display: inline（显示方式：行内元素）
块级元素：
（1）代表标签：p,h1-h6,div,ul,li,ol,dl,dt,dd
（2）特点：
- 独占一行
- 可以设置宽高
- 默认宽度一整行
（3）属性： display:block（显示方式：块级元素）
行内块级元素(行内可置换元素)：
（1）代表标签：img,input,textarea
（2）特点：
- 可以设置宽高
- 一行内可显示多个
（3）属性：display:inline-block
4.元素之间显示方式切换：修改display属性，使用浮动（后面会讲）
三、SEO
1.搜索引擎（网络爬虫）负责收集页面信息，对我们的页面进行一个归类排序。
2.搜索引擎（百度）是如何对页面进行搜索排序的？
- 花钱买排名
- 页面的优化（SEO）
实现SEO，最主要是做到标签语义化，在合适的地方使用合适的标签
发外链（网站就越受欢迎，将来被用户搜索出来的机会就要大）
