Python-Web之前端基础介绍(上)

一、Web前端介绍

一.什么是网页

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

二.网页的组成

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

三.开发前的准备

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

二、HTML语法介绍

一.HTML介绍

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

二.标签

  • 标签也称为标记或元素,用于在网页中标记内容
  • 语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示

1.分类

1.双标签

  • 成对出现,包含开始标签和结束标签

    例如:
    <html>html>
    

2.单标签

  • 只有开始标签,没有结束标签,可以手动添加“/”表示闭合

    例如:
    <br>
    <br/>
    

三.标签属性

  • 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。

    例如:
    <meta charset="utf-8">
    
  • 同一个标签中可以添加若干组标签属性,使用空格间隔。

    例如:
    <img src="lily.jpg" width="200px" height="200px">
    

四.使用

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

  2. 添加网页的基本结构

    <html>
    <head>
        <title>网页标题title>
        <meta charset="utf-8">
    head>
    <body>
        网页主体内容
    body>
    html>
    
  3. 标签嵌套:在双标签中书写其他标签,称为标签嵌套

    1. 嵌套结构中,外层元素称为父元素,内层元素称为子元素;
    2. 多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素平级结构互为兄弟元素
  4. HTML语法规范
    标签名不区分大小写,建议使用小写

    注释语法:
    
    

三、常用标签介绍

一.基本结构解析




<html lang="en">

<head>
    
    <title>网页标题title>
    
    <meta charset="utf-8">
head>

<body>
    网页主体内容
body>
html>

二.body中常用标签

1.文本标签标题标签

自带加粗效果,从h1到h6字体大小逐级递减
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>

2.段落标签

<p>段落文本p>

3.普通文本标签

<span>行分区标签,用于对特殊文本特殊处理span>
<b>加粗标签b>
<strong>强调标签,效果同b标签strong>
<label>普通文本标签,常与表单控件结合实现文本与控件的绑定label>
<i>斜体标签i>
<u>删除线标签u>

4.格式标签

浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。
<br>

5.水平线标签

在页面中插入一条水平分割线
<hr>

6.字符实体(转义符)

某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
例如:
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用   在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"¥"

7.容器标签

常用于页面结构划分,结合CSS实现网页布局
<div id="top">页面顶部区域div>
<div id="main">页面主体区域div>
<div id="bottom">页面底部区域div>

8.图片与超链接标签

图片标签:用于在网页中插入一张图片。
(1)属性 src 用于给出图片的URL,必填。  
(2)属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。  
(3)属性 title 用于设置图片标题,鼠标悬停在图片上时显示  
(4)属性 alt 用于设置图片加载失败后的提示文本
语法:
<img src="" width="" height="" title="" alt="">

9.超链接标签

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

你可能感兴趣的:(Web)