目录
1.到底什么是前端?
1.1 什么是前端
前：代表与人直接打交道的这部分，包括界面的展现，与用户的交互等
端：代表输出终端，例如pc浏览器，手机浏览器，甚至有些app，有些应用程序
合起来的意思也就是这些浏览器，app，应用程序的界面展现以及用户交互就是前端
1.2 前端由什么组成(web标准)
W3C(万维网联盟)和其他标准画组织制定了一系列标准的集合我们称作web标准，它主要由以下三个方面构成
- 结构(Structure)
- 表现(Presentation)
- 行为(Behavior)
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，主要是JavaScript |
我们用一个例子来比喻结构表现和行为。结构就相当于我们鸟的身体，只有一个架子。我们网页也是一样，用html写出我们网页整体的结构，整体的框架。而表现就相当于羽毛，装饰整个羽毛。在我们网页中就是每一个模块每一个div每一个span的大小样式颜色。而行为便是鸟的动作，比如飞行，吃食。对应的网页中的行为便是我们用户的行为，在网页中哪个地方用鼠标点一下 应该干什么或者根据时间轮转图片
2.HTML
2.1 什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
2.2 HTML语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2.3 HTML常见元素及标签
2.3.1 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2.3.2 段落
段落是通过 <p> 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>注释：浏览器会自动地在段落的前后添加空行（<p> 是块级元素）
2.3.3 格式化文本
2.3.4 HTML链接
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
若href="#2c" 则超链接则转到本页面id=2c的元素上
2.3.5 HTML图像
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
| 属性 | 值 | 描述 |
|---|---|---|
| height |
| 定义图像的高度。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| loading |
| 规定浏览器是应该立即加载图像还是推迟加载屏幕外图像。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| referrepolicy |
| 规定在获取图像时要使用的引荐来源信息。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| width |
| 设置图像的宽度。 |
2.3.6 HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>这一段代码创建了3行两列的一个表格。<th>元素表示表头 里面的内容会自动加粗
在浏览器显示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格标签
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
2.3.7 HTML列表
列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
什么时候使用自定义列表呢 我们来看小米官网最下面的样式
<dt>就是关于小米<dd>就是下面的了解小米 加入小米等 用来描述我们定义的项目
2.3.8 HTML块
我们常用<div>和<span>这两个元素来规划我们的页面 他们并没有特别的含义
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
2.3.9 HTML类
它是一种属性 html所有元素都拥有这种属性
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
2.3.10 HTML的ID
HTML id 属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
2.3.11 HTML Iframe
iframe 用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></iframe>URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>2.3.12 HTML头部
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />name 和 content 属性的作用是描述页面的内容。
HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
2.3.13 HTML 表单
HTML 表单用于搜集不同类型的用户输入。
<form> 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
| HTML表单 |
| HTML表单属性 |
| HTML表单元素 |
| HTML输入类型 |
| HTML输入属性 |
| HTML输入表单属性 |
3.总结
今天是第一天 学习了html主要的标签 html有那么多标签和属性 我们应该怎么记忆呢 答案是不需要记忆 俗话说熟能生巧 只要多看多用多写 都能记住的 下面这个网站W3C参考书有html所有标签和属性 用的时候查一下就可以哦。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
