引言

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。

Web标准由结构、表现、行为三方面构成

结构标准→Html 网页元素的整理与分类
表现标准→Css 网页元素外观样式
行为标准→JavaScript 网页模型定义与交互编写

HTML基础

HTML基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>	<!--声明文档类型-->
<html>
<head>
<title>标题:hello</title>
<meta http-equiv="Content Type" content="text/html;charset=utf-8"/> <!--指定了对应的编码格式-->
</head> <!--head标签中间的部分为网页头部内容,不会在网页中显示-->
<body bgcolor="red"> <!--标签中可以加入属性-->
<h1> <!--h1标签到h6标签是标题标签-->
什么是HTML
</h1>
<p> <!--p标签是段落标签,-->
hello html!
HTML是<br/>超文本标记语言!
</p> <!--<br/>表示换行-->
<hr/> <!--生成一个分割线-->
</body>
</html>
  • 段落标签align属性

    • left:左对齐
    • center:居中对齐
    • right:右对齐
    • justify:伸展对齐
  • &nbsp;在html语言中表示空格,在<pre></pre>中的pre标签内容为预格式化标签,也就是展示效果与编辑框中显示效果保持一致。

  • 关于修饰标签:

    • <i></i>以及<em></em>——斜体标签
    • <b></b>以及<strong></strong>——加粗标签
    • <sup></sup>——上标标签
    • <sub></sub>——下标标签
  • 关于特殊符号:
    1570438837308

  • 关于列表标签(Eg.可用于实现网站导航与站内列表,带摘要的列表,带缩略图的列表等)

    i)无序列表

    1
    2
    3
    4
    5
    6
    <ul>
    <li>Tag1</li>
    <li>Tag2</li>
    <li>Tag3</li>
    <li>Tag4</li>
    </ul>

    无序列表的type属性值(属性是添加在表明列表开始的ul标签内)

描述
disc(默认值) 圆点
square 正方形
circle 空心圆

​ ii)有序列表

1
2
3
4
5
6
 <ol>
<li>Tag1</li>
<li>Tag2</li>
<li>Tag3</li>
<li>Tag4</li>
</ol>

有序列表的type属性值(属性是添加在表明列表开始的ol标签内)

描述
1(默认值) 数字1、2……
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字

​ iii)定义列表

1
2
3
4
5
6
7
8
9
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
……
</dl>
<!--<dt>与<dd>是同级标签,且这两者使用时必须放在<dl>标签内-->

开发经验:在网站开发中,UI和OI的编号去掉,而是使用图片代替

  • 关于图像标签

    1
    <img src="" alt="" .../>

    img属性:

    属性 描述
    src(必写) URL 显示图像URL
    alt 文字 图像替代文本
    height 数值和百分比 图像的高
    width 数值和百分比 图像的宽

    关于路径——注意绝对路径与相对路径的写法
    相对路径:同级文件夹下图片引用,则直接写地址即可,”../“代表上一级,下一级目录的话则写为”文件夹名/图片名”

    当由于网速过慢、src设置错误、浏览器禁用图像等原因导致用户无法查看图像时,alt可以代替图像显示在网页中,也有利于搜索引擎的SEO优化

    注意,当设置height和width为百分比形式时,设置的是图片在父容器(这里是浏览器)中占比,也就是说图片的高和宽分别被设置为浏览器的百分之多少

  • 关于超链接标签

    1
    2
    <a href="" >内容</a>
    <!--href可以使内部链接,也可以是外部链接,href设置为"#"则为空链接-->

    链接的属性

    属性 描述
    href 链接地址
    target 链接的目标窗口:_self,_blank,_top,_parent
    title 链接提示文字
    name 链接命名
    • 锚链接

      • 同一页面的锚链接

        定义锚

        1
        2
        3
        4
        5
        6
        7
        8
        <a href="#锚名1">目录1</a>
        <a href="#锚名2">目录2</a>
        <a href="..." name="锚名1">内容</a>
        ……
        ……
        <a href="..." name="锚名2">内容</a>
        ……
        ……
* 不同页面的锚链接


  
1
2
网页1:<a href="网页名称#锚名">...</a>
网页2:<a href="..." name="锚名">内容</a>

扩展的超链接:

  • 电子邮件链接:

    1
    <a href="mailto:example@example.com">内容</a>
  • 文件下载:

    1
    <a href="文件下载地址">内容</a>

HTML表格与表单

HTML表格操作与布局

  • HTML表格基础知识

    <table>代表表格开始,</table>代表表格结束(余者推)

    <tr>代表行,<td>代表单元格

    为了提高用户体验,我们可以给表格设置结构信息,下面三个标签一般结合使用

    thead:表格头

    tbody:表格主体

    tfoot:表格的脚

    基本语法结构如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <table>
    <caption>...</caption> <!--表格标题,居中展示-->
    <thead> <!--表格头-->
    <tr> <!--行开始-->
    <th>……</th> <!--表格头,内容居中加粗显示-->
    <td>……</td> <!--单元格开始-->
    ……
    </tr>
    </thead>
    <tbody> <!--表格主体-->
    <tr>
    <td>……</td>
    ……
    </tr>
    </tbody>
    <tfoot> <!--表格脚-->
    <tr>
    <td>……</td>
    ……
    </tr>
    </tfoot>
    </table>
  • 表格属性

    • <table>表格属性

      image-20191102204914067

      image-20191102205152808

      fame属性的可选值有void、above、box等

    • <tr>标签属性

      image-20191102205910955

    • <td><th>标签属性

      image-20191102210344134

    • <thead><tbody><tfoot>的标签属性

      image-20191102210607292

  • 表格跨行列

    • 跨列属性colspan

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <table>
      <tr>
      <td colspan="2">...</td>
      <td>...</td>
      </tr>
      <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      </tr>
      </table>
  • 跨行属性rowspan

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table>
    <tr>
    <td>...</td>
    <td rowspan="2">...</td>
    <td>...</td>
    </tr>
    <tr>
    <td>...</td>
    <td>...</td>
    </tr>
    </table>
  • 一个实际案例

    若要绘制下面的表格,代码如下(注意理解):

    image-20191102154859062

    代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <table border="6" width="500px" bgcolor="#f2f2f2" align="center">
    <caption>前端工程师平均工资</caption> <!--表格标题,居中展示-->
    <thead align="center" valign="middle">
    <tr align="center" bgcolor="#d8e4bc" valign="middle">
    <th rowspan="2">城市</th>
    <th colspan="2">2014年</th>
    <th rowspan="2">2015年</th>
    <th rowspan="2">2016年</th>
    </tr>
    <tr align="center" bgcolor="#d8e4bc">
    <th>上半年</th>
    <th>下半年</th>
    </tr>
    </thead>
    <tbody align="center" valign="middle">
    <tr align="center" valign="middle">
    <td bgcolor="#b8cce4">北京</td>
    <td>8000</td>
    <td>9000</td>
    <td>10000</td>
    <td>12000</td>
    </tr>
    <tr align="center" valign="middle">
    <td bgcolor="#b8cce4">上海</td>
    <td>6000</td>
    <td>7000</td>
    <td>8000</td>
    <td>10000</td>
    </tr>
    </tbody>
    <tfoot align="center" valign="middle">
    <tr align="center" valign="middle">
    <td bgcolor="#b8cce4">合计</td>
    <td>7000</td>
    <td>8000</td>
    <td>9000</td>
    <td>11000</td>
    </tr>
    </tfoot>
    </table>

HTML表单

1
2
3
4
<form action="" method="" name="" ...>
表单元素
</form>
<!--表单本身只是网页中的一个区域,并不可见,只有表单元素可见-->

image-20191103165029397

<input>标签

1
<input type="类型属性" name="名称" ....../>

image-20191103165439122

单行文本域

image-20191103170239437

文件域

用于网页访问本地文件.

1
2
3
<form>
<input type="file" name="..." />
</form>
单选框
1
2
3
4
<form>
<input type="radio" name="..." value="..." checked />
</form>
<!--注意:同一组单选框的name需要相同-->
复选框
1
2
3
4
<form>
<input type="checkbox" name="..." value="..." checked />
</form>
<!--注意:同一组复选框的name建议设置为相同-->
按钮
1
2
3
4
5
<form>
<input type="button" name="..." value="..." />
<input type="submit" name="..." value="..." />
<input type="reset" name="..." value="..." />
</form>
图像域(图像提交按钮)
1
<input type="image" name="..." src="imageurl" />
隐藏域
1
<input type="hidden" name="..." value="..." />

<select>标签

1
2
3
4
5
<select>
<option value="..." >选项</option>
<option value="..." >选项</option>
...
</select>

select标签属性

image-20191103172723090

option标签属性

image-20191103172952148

<optgroup>标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name="" >
<optgroup label="组1">
<option value="..." >选项</option>
<option value="..." >选项</option>
...
</optgroup>
<optgroup label="组2">
<option value="..." >选项</option>
<option value="..." >选项</option>
...
</optgroup>
...
</select>

<textarea>多行文本域

1
2
3
<textarea name="..." rows="..." cols="..." ...>
内容...
</textarea>

表单属性

<form>标签

image-20191103193621985

get一般用于URL传递参数,用于信息获取;post一般作为HTTP请求体的一部分,一般用于修改服务器上的资源

HTML页面结构搭建

<div>标签

是一个区块容器标记,标签内是一个容器,可以包含段落、表格、图片等HTML元素

<span>标签

没有实际意义,为了应用样式

块级标签和行内标签:每个块级标签都占据一行,不同的块级标签之间会换行;行内标签即使有多个标签,也会出现在同一行而不换行
块级标签:一般用于搭建网页结构,承载网页布局

1
2
>  <div><ul><ol><li><dI><dt><dd><h1>~<h6><p><form><hr>
>

行内标签:在一行,不换行

1
2
>  <b><em><img><input><a><sup><sub>< textarea><span>
>
  • 块级元素可以包含行内元素和某些块级元素
  • 行内元素不能包含块级元素,只能包含其他行内元素
  • 块级元素不能放在<p>标签内
  • 某些特殊的块级元素(如<h1>~<h6>,<p><dt>)只能包含行内元素,不能再包含块级元素
  • 块级元素与块元素并列,行内元素与行内元素并列