前端入门（一）初步了解html

学习目的

了解并初步学习html5、css、JavaScript以及前端的前沿技术

了解html5的常用标签的作用以及用法

---

前端简介

通过学习我了解到网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。

（1）Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

Ajax是前后端交互的技术，主要实现在前端。

（2）SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。

---

HTML

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

---

html中的标签类型以及用法

html中的标签分为双标签 <标签名></标签名>和单标签两种 <标签名/>

常用标签: div, p, ul, li, ol, img, video, audio

表单标签: form, input, button

ul标签中type属性: circle square

ol标签中type属性: A a I i 1

---

通过学习，我们简单了解了几个标签的使用方法

<img src=" " alt=" " width=" " height=" " title=" ">

src:图片的路径或者指向的网络地址

alt:规定在图像无法显示时的替代文本。

width,height:图片在屏幕上显示的宽度和高度

title：规定元素的额外信息（可在工具提示中显示）

---

我们可以通过Tab键或Enter键快捷创建标签：

---

标签名.类名#id名

div.box#box快速生成类名以及id名

<div class="box" id="box"></div>

---

标签名*个数 快速生成个相同类型的标签。

div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

---

标签名1>标签名2 生成一个带有子标签2的标签1

div>p

<div>
    <p></p>
</div>

---

标签名{文本内容}

div{文本}

<div>文本</div>

---

$自动生成从1开始排序的数字

div.box${$$$}*3

 <div class="box1">001</div>
 <div class="box2">002</div>
 <div class="box3">003</div>

---

关于路径： 相对路径:

​ ./ 代表当前文件路径

​ / 进入某个文件夹

../ 跳出当前文件所在文件夹

---

---