一、前端的语言了解

1.HTML（结构层）：

功能搭建页面骨架，描述文档的语义，放置页面的小部件

2.css（样式层）：

功能是美化页面，搭建网页的布局结构，功能作用使用浮动，盒模型等相关css属性搭建出体系和结构，以及文本和css3的一些属性来美化和装饰页面。

3.JavaScript（行动层）：

功能是给页面添加交互效果，实现表单验证，实现动态交互，实现数据请求和收发等等。

4.语言关系图：

二、HTML

1.什么是HTML

• HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。
• HTML由一系列的元素组成，这些元素用来包为不同部分的内容，使其以某种方式呈现或者工作
• 一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号等等

2.元素详解

（1） 这个元素的主要部分有：

• 开始标签（Opening tag）：包含元素的名称（本例为p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
• 结束标签（Closing tag）：与开始标签相似，只是其在元素名前包含了一个斜杠。这表示着元素的结尾——在本例中即段落在此结束。
• 内容（Content）：元素的内容，在本例中就是所输入的文本本身。
• 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

（2）元素也可以有属性：

属性应该包含：

• 属性名称：class是本例的属性名称，在属性与元素名称之间要有空格符
• 等号：属性的名称，并接上一个等号
• 属性的值：editor-note是本例的属性值，由引号所包围的属性值

3.基本语法：

• 标签和属性不区分大小写，通常有小写
• 空标签可以不闭合，如：input，meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required，readonly

4.全部标签分类：

5.head标签：

6.标签结构：

• doctype html：标记当前使用的HTML版本，浏览器会根据此代码选择渲染模式
• html：是文档的分标签，所有其他的标签都写在这个标签内
• head：放页面的原数据，页面上需要的信息，但不需要直接呈现给用户的信息
• body：需要呈现给用户的内容

7.嵌套元素

将一个元素置于其他元素之中——称作嵌套。例如：

<p>My cat is <strong>very</strong> grumpy.</p>

8.空元素

不包含任何内容的元素称为空元素。比如<img>元素：

<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是并没有结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

9.标记文本：

（1）标题（h1~h6）:

字体从1到6逐渐变小

（2）段落：

<p>元素是用来指定段落的，如下：

<p>这是一个段落</p>

（3）列表：

• 有序列表（ol）

• 无序列表（ul）

• 属性列表（dl）

<dt>:代表属性名

<dd>:代表属性值 （两者是多对多的关系）

（4）链接

• <a href="超链接的引用地址"> 链接名 </a>

• <a href="超链接的引用地址" target="_blank"> 链接名 </a>

(其中，target="_blank"是选择先打开新窗口再打开链接网页)

（5）多媒体

• 图片

<img src="图片的地址" alt="当图片加载不出来可以显示的文字" width="图片展示的宽度"/>

• 音频

<audio src="音频" controls></audio>

• 视频

<video src="视频" controls></video>

(其中，controls表示该音频或视频需要在浏览器中显示播放按键)

（6）输入

• <input placeholder="请输入用户名">

（placeholder表示占位符，输入前显示的文字）

• <input typer="range">

（界面显示划动块）

• <input type="number" min="1" max="10">

（让用户输入数字，并可以指定最大小值）

• <input type="date" min="2018-02-10">

（会弹出一个日期选择框，可以指定最小日期）

• <textarea>Hey</textarea>

（表示一个多行的输入）

（7）选择

• 选择多个：

<input type="checkbox" />

• 选择一个：

<input type="radio" />

• 下拉选择：

<select> <option>1</option> <option>2</option> <option>3</option> </select>

（8）文本

• 快捷引用: <blockquote cite="出自哪里"> <p>引用文字</p></blockquote>

• 短引用： <cite>引用文字</cite>

• 冒号引用： <q>引用文字</q>

• 短代码引用： <code></code>

• 多行代码引用： <pre><code>引用多行代码</code></pre>

• 强调：

  <strong></strong>(表示一件事的重要，紧急等)

  <em></em>(表示语气上的强调)

三、学习收获

1.从对前端毫无了解到现阶段有了一定的了解。通过学习我了解了前端的基本任务和三大语言。

2.在第一节课串讲了HTML，css和JavaScript三大语言，从中也了解了其中的关系和联系。HTML主要的是负责内容和框架部分，css主要负责美化和样式部分，最后由JavaScript进行数据的请求和页面的交互。

3.第二节课就更进一步的学习了HTML的相关语法和标签，学习了各种标签的用法和功能，让我更了解HTML如何实现网页的内容填充。

4.在接下来的课程，也希望自己能继续认真学习下去，期待有更大的收获。