一、Web前端介绍

一.什么是网页

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

二.网页的组成

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

三.开发前的准备

运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
开发工具:不限,选用个人习惯的即可。(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">
```

四.使用

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

添加网页的基本结构<!doctype html>

<html>
<head><title>网页标题</title><meta charset="utf-8">
</head>
<body>网页主体内容
</body>
</html>

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

```

三、常用标签介绍

一.基本结构解析

<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html lang="en">
<!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 -->
<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的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
例如:
使用 &lt; 在页面中呈现 "<"
使用 &gt; 在页面中呈现 ">"
使用 &nbsp; 在页面中呈现一个空格
使用 &copy; 在页面中呈现版权符号"©"
使用 &yen; 在页面中呈现人民币符号"¥"

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>

Python-Web之前端基础介绍(上)相关推荐

python web开发 JavaScript基础
文章目录 1. script 标签 2. 字面量.变量 3. 数据类型 4. 运算符 5. if 条件 6. switch分支 7. for循环 8. while循环 9. break, contin ...
python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...
python web开发 HTML基础
文章目录 1. 简介 2. 标签元素属性 3. 表格 4. 列表 ol 有序 ul 无序自定义列表 5. 表单输入域标记 input 选择域标记 select, option 文字域标记 text ...
python web开发 jQuery基础
文章目录 1. 引入 jQuery 2. 基本语法 3. jQuery 选择器 3.1 元素选择器 3.2 #id 选择器 3.3 .class 选择器 4. jQuery事件 5. 获取内容和属性 ...
java大数据开发训练营--Java Web 后端技术基础（上）
题记: 文章内容输出来源:拉勾教育大数据开发高薪训练营本篇文章是java学习课程中的一部分笔记. 本博文主要是记录一些基础的知识点,通过实操更容易理解这章主要讲的是JAVA Web后端基础一 W ...
无字天书之Python第七页(基础数据结构—上)
博客内容传送门前言 list列表 list列表的基本操作通过索引取出列表的元素列表连接列表循环遍历 for while 查看list中是否有某个元素删除列表以及列表中的值获取最大值 li ...
python web开发c6——阿里云上ubuntu+flask+gunicorn+nginx服务器部署(一)简单测试
简述 Nginx在服务器部署中的作用请求通过Nginx实现反向代理,将请求提交给代理服务器.本文中只用了一台服务器,所以是代理到本机. gunicorn的作用作为服务器代码的容器.接收Nginx的 ...
个人python学习-Day7面向对象基础（上）
一.面向对象介绍 1.概述面向过程:根据业务逻辑从上到下写代码函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可面向对象编程:将数据与函数绑定到一起,进行封装,这样能够更快速的 ...
python实验结论_Python基础（上）实验报告
写在前面:这是Python语言的学习之路,大家可以跟着一起学习,绝对是从零开始. Gvim (图形化界面Vim) Brackets(前端友好编辑器) Gedit(编辑器) 使用环境 python 2. ...

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

一、Web前端介绍

一.什么是网页

二.网页的组成

三.开发前的准备

二、HTML语法介绍

一.HTML介绍

二.标签

1.分类

1.双标签

2.单标签

三.标签属性

四.使用

三、常用标签介绍

一.基本结构解析

二.body中常用标签

1.文本标签标题标签

2.段落标签

3.普通文本标签

4.格式标签

5.水平线标签

6.字符实体(转义符)

7.容器标签

8.图片与超链接标签

9.超链接标签

Python-Web之前端基础介绍(上)相关推荐

最新文章

热门文章