我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。但这些内容知识点十分繁多，我们学了也不一定记得住，而且也不需要全部都记住，那么从这篇文章开始记录自己的笔记，写这个期间会参考一些教程和博客，方便以后自己的查阅，也希望对大家有所帮助。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号 包围的关键词，比如 <html>
HTML 标签通常是成对出现 的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签 和 闭合标签
<标签>内容</标签>
(1)HTML标签整个网页是从<html>这里开始的，然后到</html>结束。
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
表1 <head>内部标签
标签描述<head>的内部标签也非常重要，在前期大家只需要感性认知就可以。
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续笔记讲解的标签都是在<body>标签内部的各种标签。
3.HTML 元素"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
(1)、段落与文字标签
表1 段落与文字标签
标签语义说明（2)、文本格式化标签
表2 文本格式化标签
标签语义说明<sub>
subscripted（下标） 下标网页特殊符号只需要记忆几个就行了，HTML空格 <是 <>是 >，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。
(三)、自闭合标签HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例：<body></body>
(2)、自闭合标签
举例：<br/>、<hr/>
(四)、图片标签在HTML中，我们使用img标签来表示图片。
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面 会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时，会显示title中的内容。
语法：
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)"> 表1 img标签常用属性 属性说明相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。
绝对路径，指的是文件的完整路径。
详细复习内容，请查看相对路径和绝对路径
(六)、超链接标签（重点）
超链接使用a标签，语法如下：
<a href="链接地址" target="目标窗口的打开方式">
表1 <a>标签target属性 target属性值说明我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
超链接根据链接对象的不同分为：
外部链接: 例如 < a href=" "> 百度</a >。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>超链接标签</title> </head> <body> <h4>1.外部链接</h4> <a href="" target="_blank"> 腾讯</a> target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面 <a href="" target="_blank">传智播客</a> <h4>2.内部链接: 网站内部页面之间的相互链接</h4> <a href="gongsijianjie.html" target="_blank">公司简介</a> <h4>3.空链接:#</h4> <a href="#">公司地址</a> <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4> <a href="img.zip">下载文件</a> <h4>5.网页元素的链接</h4> <a href=""><img src="img.jpg"/></a> </body> </html> (七)、列表标签3种列表的语义记忆：
表1 3种列表记忆 标签语义说明列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表 <ol> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> </ol> 表1 有序列表type属性 type属性值列表项的序号类型学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。
(2)、无序列表无序列表是三个列表中最为重要的列表。
语法：
<ul type="列表项符号"> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> </ul> 表1 无序列表type属性 type属性值列表项的序号类型学习了CSS之后，无序列表列表项符号由list-style-type定义，到时候应该摒弃type属性。
(3)、自定义列表语法：
<dl> <dt>定义名词</dt> <dd>定义描述</dd> …… </dl>说明：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
(八)、表格标签通过语义化记忆表格标签：
表1 表格基本标签 标签语义说明合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
(1)、合并行
语法：
<td rowspan="跨度的行数">
(2)、合并列
语法：
<td colspan="跨度的列数">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>合并单元格</title> </head> <body> <table width="500" height="249" border="1" cellspacing="0"> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
(3)、 单元格边距(Cell padding)
就是特殊的padding
(4)、单元格间距(Cell spacing)
HTML 表单
表单是一个包含表单元素的区域。
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
概念:用于采集用户输入的数据。用于和服务器进行交互
表单项元素中的一些属性
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要–提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改 disabled:表示禁用，该元素不能改而且背景是灰色
大部分表单都是用input标签完成的。
语法：
<input type="表单类型"/>
说明：
表1中的表单都是使用input标签，所不同的就是type属性值不同。
语法：
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
表现形式如下：
下拉列表由<select>标签和<option>标签配合使用。
语法：
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
有两种形式，见下图：
button标签可以与input实现的按钮相互替换
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe> <p>一些旧的浏览器不支持 iframe。</p> <p>如果浏览器不支持 iframes 则不会显示。</p>
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"> <p>您的浏览器不支持 iframe 标签。</p> </iframe>
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p> <p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p> </body> </html>点击前：
点击后：
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……
1. title ：网页标题标签
2. description ：网页描述标签
3. keywords ：网页关键词标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小兔鲜儿-新鲜、惠民、快捷！</title> <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" /> <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" /> </head> <body> </body> </html> （4）ico图标设置
