什么是前端？

1.解决GUI人机交互问题

2.跨终端

2.1PC/移动浏览器

2.2客户端/小程序

2.3VR/AR

3.Web技术栈

前端技术栈

HTML、CSS、JavaScript

解决的问题

功能、无障碍、安全、无障碍、性能、兼容······

前端的边界

node.js、ELECTRON、React NAtive、Web RTC、WebGL、WebASSEMBLY

HTML语法

标签属性不区分大小写，一般小写

空标签不闭合

属性值一般用双引号包裹

一些属性值可省略

HTML常用标签

1.文本标签

常⽤文本标签如下：

①<hn>...</hn>标题标签，其中n为1–6的值

②<i>...</i>斜体

③<em>...</em> 强调斜体

④<b>...</b> 加粗

⑤<strong>...</strong> 强调加粗

⑥<cite></cite> 作品的标题（引⽤用）

⑦<sub>...</sub> 下标

⑧<sup>...</sup> 上标

⑨<del>...</del> 删除线

2.HTML格式化标签

常见格式化标签如下：

①<br/>换行

②<p>...</p> 换段

③<hr/>水平分割线

④<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<li>...</li>列表项

⑤<dl>...</dl>自定义列表

<dt>...</dt>自定义列表头

<dd>...</dd> 自定义列表内容

⑥<div>...</div>常⽤用于组合块级元素，以便便通过 CSS 来对这些元素进⾏行行格式化

⑦<span>...</span> 常⽤用于包含的⽂文本，您可以使⽤用 CSS 对它定义样式，或者使⽤JavaScript 对它进行操作。

3.图像标签

img标签是一个单标签

属性：

src：图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片⾼高度
border：边框线粗细
绝对路径和相对路径：

绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)

相对路路径：相对与某个基准⽬目录的路路径。

4.超链接标签

格式：a href="链接⽬标url地址">显示⽂字</a>

属性：

href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）

5.表格标签

①<table></table>标签：定义一个表格

②<caption>标签：定义表格标题，嵌套在<table></table>中

③<tr></tr>标签：定义表格中的一行，嵌套在<table></table>中

④<th></th>标签：定义表格中的表头单元格，嵌套在<tr></tr>中

⑤<td></td>标签：定义表格中的数据单元格，嵌套在<tr></tr>中

锚点链接：

定义⼀个锚点：<a id="a1"></a>，使⽤锚点：<a href="#a1">跳到a1处</a>

6.表单标签

①<form></form> 表单标签

属性：

action属性:提交的⽬标地址(URL)
method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。

② <input>标签

表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。

属性

type属性:表示表单项的类型：
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框注意要提供value值
radio:单选框注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域。
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值

③ <select></select>标签

创建下拉列表。

属性：

name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选

④<option></option>下拉选择项标签

⽤于嵌⼊到<select>标签中使⽤的

属性：

value属性:下拉项的值
selected属性:默认下拉指定项

④<textarea></textarea>标签

属性：

name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled：是否禁⽤
readonly：只读

⑤<button></button>标签

标签定义按钮。您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

⑥ <fieldset>标签

将表单内的相关元素分组。

属性：

disabled：定义 fieldset是否可⻅。
form：定义该 fieldset 所属的⼀个或多个表单。

⑦ <legend></legend>标签

为<fieldset> 、 <figure> 以及 <details> 元素定义标题。

⑧<optgroup>标签

<optgroup> 标签定义选项组。允许自己组合选项。

8.9 <datalist>标签标签可以定义可选数据的列表，与input元素配合使⽤制作出输⼊值的下拉列表。

当然这么多的标签，使用起来也需要注意，最为基础的就是行元素和块元素以及行内块元素的注意事项，比如说<div></div>盒子是块元素，不会对同行的元素产生影响，但<span></span>盒子在不进行外部的处理情况下就会挤掉同一行的元素，这些都是要在前端编程注意的问题。

前端与HTML | 青训营