Web前端介绍

什么是网页

网页是基于浏览器的应用程序,是数据展示的载体.

网页的组成

  1. 浏览器
    • 代替用户向服务器发请求
    • 接收并解析数据展示给用户
  2. 服务器
    • 存储数据
    • 处理并响应请求
  3. 协议
    • 规范数据在传输过程中的打包方式

开发前的准备

  1. 运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
  2. 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
  3. 开发工具:不限,选用个人习惯的即可(VSCode、EditPlus、PyCharm等)。

HTML语法介绍

HTML介绍

超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容

标签

标签也称为标记或元素,用于在网页中标记内容

  1. 语法:标签使用< >为标志,在< >内部写标签名和标签属性

    • 注释语法:
    1
    <!-- 此处为注释 -->
    • 标签名不区分大小写,推荐小写表示
  2. 分类:

    • 双标签:成对出现,包含开始标签和结束标签。例:
    1
    2
    3
    <html>
    <!-- 内容或其他标签 -->
    </html>
    • 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:
    1
    2
    <br>
    或者 <br/>
  3. 标签属性:

  • 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。例:
1
<meta charset="utf-8">
  • 同一个标签中可以添加若干组标签属性,使用空格间隔。例:
1
<a href="http://www.tmooc.cn" target="_blank">达内慕课网</a>

使用

  1. 创建网页文件,使用.html或.htm作为文件后缀

  2. 添加网页的基本结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!doctype html>
    <html>
    <head>
    <title>网页标题</title>
    <meta charset="utf-8">
    </head>
    <body>
    网页主体内容
    </body>
    </html>

    专业的开发工具支持HTML代码补全功能,如VSCode中,创建好HTML页面以后可以输入英文感叹号(!)然后按tab键补全页面基本结构(不同的开发工具补全的基本结构有细微的差别,可以忽略)。

  3. 标签嵌套
    在双标签中书写其他标签,称为标签嵌套

    • 嵌套结构中,外层元素称为父元素,内层元素称为子元素;
    • 多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素
    • 平级结构互为兄弟元素

常用标签介绍

基本结构解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 -->
<head>
<!-- 设置网页标题,显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分,显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->

body中常用标签

  • 文本标签

    • 标题标签:自带加粗效果,从h1到h6字体大小逐级递减
    1
    2
    3
    4
    5
    6
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    • 段落标签:
    1
    <p>段落文本</p>
    • 普通文本标签:
    1
    <span>行分区标签,用于对特殊文本特殊处理</span>
    • 格式标签:
      浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。
    1
    <br>
    • 字符实体:
      某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
      例:
    1
    2
    3
    4
    5
    使用 &lt; 在页面中呈现 "<"
    使用 &gt; 在页面中呈现 ">"
    使用 &nbsp; 在页面中呈现一个空格
    使用 &copy; 在页面中呈现版权符号"©"
    使用 &yen; 在页面中呈现人民币符号"¥"
  • 容器标签
    常用于页面结构划分,结合CSS实现网页布局

    1
    2
    3
    <div id="top">页面顶部区域</div>
    <div id="main">页面主体区域</div>
    <div id="bottom">页面底部区域</div>
  • 图片与超链接标签

    • 图片标签 <img src="">:用于在网页中插入一张图片。

      1. 属性 src 用于给出图片的URL,必填。
      2. 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
      3. 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
      4. 属性 alt 用于设置图片加载失败后的提示文本

      语法:

    1
    <img src="" width="" height="" title="" alt="">
    • 超链接标签:用户可以点击超链接实现跳转至其他页面
      1. 属性 href 用于设置目标文件的URL,必填。
      2. 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
    1
    2
    <a href="http://www.taobao.com" target="_self">淘宝</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>

常用结构标签

  • 列表标签

    • 有序列表(ordered list)
      默认使用阿拉伯数字标识每条数据
    1
    2
    3
    4
    5
    <ol>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    </ol>
    • 无序列表(unordered list)
      默认使用实心圆点标识列表项
    1
    2
    3
    4
    5
    <ul>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    </ul>
  • 表格标签

    • 表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!-- 创建表格标签 -->
    <table>
    <!-- 创建行标签 -->
    <tr>
    <!-- 行中创建单元格以显示数据 -->
    <td>姓名</td>
    <td>年龄</td>
    <td>班级</td>
    </tr>
    <tr>
    <td>迪丽热巴</td>
    <td>20</td>
    <td>002</td>
    </tr>
    </table>
    • 单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后需要删除被合并的单元格,保证表格结构完整

      单元格属性 作用 取值
      colspan 跨列合并单元格 无单位数值
      rowspan 跨行合并单元格 无单位数值
    • 行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入中

    1
    2
    3
    4
    5
    <table border="1px" width="300px" height="300px">
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
    </table>
  • 表单标签
    表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数据给服务器,表单控件负责收集数据。

    • 表单使用

      | 属性名 | 取值 |
      | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
      | action | 设置数据的提交地址 |
      | method | 设置数据的提交方式,默认为get方式,可以设置为post |
      | enctype | 设置数据的编码类型,涉及二进制数据提交(例如图片,文件,音视频等),必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
      例如:
    1
    2
    3
    <form action="" method="" enctype="">
    <!--此处为表单控件-->
    </form>
    • 表单控件使用(重点)
      表单控件用于采集用户信息,可设置以下标签属性
    属性名 取值
    type 设置控件类型
    name 设置控件名称,最终与值一并发送给服务器
    value 设置控件的值
    placeholder 设置输入框中的提示文本
    checked 设置单选按钮或复选按钮的默认选中
    selected 设置下拉菜单的默认选中

表单控件用于采集用户信息,常用控件如下:

1
2
3
4
5
6
7
8
9
10
<input type="text">  文本框
<input type="password"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选框
<input type="file"> 文件上传
<input type="button"> 普通按钮
<input type="submit"> 提交按钮
<select></select> 下拉菜单
<option></option> 下拉菜单选项
<textarea></textarea> 文本域