Web开发初探（系统理解Web知识点）

发布日期：2021-05-09 00:11:47 浏览次数：31 分类：博客文章

本文共 8192 字，大约阅读时间需要 27 分钟。

一、Web开发介绍

我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。

写网页的代码是专门的语言，主要分为Hmtl 、 CSS 和 JavaScript, 被称为网页开发三剑客，分别作用如下：

Html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

主要负责编写页面架构，有点像建房子时，造的毛坯房。

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等

相当于给你的毛坯房做装修

JavaScript

网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

以上3个组件是做网站开发都必须掌握的技能，我们接下来依次体验下~吧

二、HTML

2.1 HTML简介

路飞学城

我的第一个标题

我的第一个段落。

<!DOCTYPE html>声明为 HTML5 文档

<html>元素是 HTML 页面的根元素

<head> 标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

<meta>元素包含文档的元数据，如定义网页编码格式为 utf-8、关键词啥的

<title>元素里描述了文档的标题

<body>元素包含了可见的页面内容

<h1>元素定义一个大标题

<p>元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

2.2 什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如<b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签

2.3 HTML网页结构

下面是一个可视化的HTML页面结构：

注意：只有 <body> 区域 (白色部分) 才会在浏览器中显示。

三、HTML常用元素入门

3.1 HTML标题

3.2 段落

3.3 超链接

	这是一个链接使用了 href 属性

访问路飞学城

target="_blank"会打开一个新窗口

3.4 显示图片

3.5 HTML表格

想在页面上显示这种表格怎么做？

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

先做个最简单的


   
                           row 1, cell 1               row 1, cell 2          
                       row 2, cell 1               row 2, cell 2

输出

表格的表头

表格的表头使用 <th> 标签进行定义。


   
                           Header 1               Header 2          
                       row 1, cell 1               row 1, cell 2          
                       row 2, cell 1               row 2, cell 2

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

大多数浏览器会把表头显示为粗体居中的文本

可以加上边距

3.6 列表

分为有序列表和无序列表

有序列表


     
    Coffee
  
    Tea
  
    Milk
   
     
    Coffee
  
    Tea
  
    Milk

效果

无序列表


     
    Coffee
  
    Tea
  
    Milk

嵌套列表


     
    Coffee
  
    Tea    
           
      Black tea
      
      Green tea
    
     
  
  
    Milk

3.7 div区块元素

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>,<p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML `<div>` 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。

`<span>` 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

3.8 CSS样式初识

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件

3.8.1 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

这是一个段落。

设置背景颜色

这是一个标题

这是一个段落。

设置字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

一个标题

一个段落。

3.8.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

3.8.3 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

3.9 网页布局

网页布局主要使用div


   
        Menu
   
       
    
             菜单        
                 
      HMTL
            
      CSS
            
      Javascript
        
     
    
    
    
            
     这里是真正写内容的地方。。。
    
    
   
   
        footer

效果

3.10 Html 表单

当你想收集用户数据，提交到后台服务器时，你就可以用html 表单元素

表单元素分为文本框、下拉列表、单选、复选、按钮

用户注册示例

一点击按钮，<form>.....</form> 表单里的数据都会被提交到action="baidu_url" 这个地址

其它常用输入类型

输出效果

Fieldset 表单集合


    
      
     Personalia:  Name: 
     
     
  Email: 
     
     
  Date of birth:

效果

四、CSS样式基础

4.1 CSS id \ class 选择器

id选择器

id就像一个元素的身份证地址，可以在网页里，唯一代表某个元素，我们也可以通过这个id快速找到它对应的元素对象

输出

class 类选择器

当你想给多个元素批量设置同样的一个样式的话，就可以使用类选择器

输出

4.2 直接通过元素名设置样式

若你想给页面所有的<p> 或<input>标签加上同样的样式，可以直接通过元素名批量设置

注意：id & class 选择器的样式优先级大于元素名选择器

4.3 组合选择器

为了测试效果，先准备好3层div

第1层

layer 2

layer 2 h2

第3层

layer 3 h3

我不在任何的div里

设置好样式

效果

4.3.1 后代选择器

给指定元素的所有指定后代，设置样式

比如，我给上图第一层div下面所有的

标签设置颜色

#layer1 p {	color: red;	background: yellow;}

效果

4.3.2 子元素选择器

又可称为儿子选择器，是指可给指定元素的下一层儿子元素设置格式，注意，只是儿子，孙子不管

给layer1的div的儿子设置样式

#layer1 > p {    color: red;    background: yellow;}

4.3.3 相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。

#layer2 > p+h2 {  color: red;  background: yellow;}

效果

4.3.4 多个元素组合

可同时给不相干的多个元素设置同一个样式

比如把整个页面所有的

和

标签同时设置样式

p,h3 {  color: red;  background: yellow;}

效果

4.4 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

元素的宽度和高度

重要: 当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

下面的例子中的元素的总宽度为300px：

div {    width: 300px;    border: 25px dashed yellow;    padding: 25px;    margin: 25px;}

盒子模型演示

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。

效果

4.5 常用CSS属性

css有很多属性，我们先只讲几个基本的

更多的看这里：

4.5.1 background背景属性

属性	描述	CSS
	复合属性。设置对象的背景特性。	1
	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。	1
	设置或检索对象的背景颜色。	1
	设置或检索对象的背景图像。	1
	设置或检索对象的背景图像位置。必须先指定background-image属性。	1
	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。	1
	指定对象的背景图像向外裁剪的区域。	3
	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3
	检索或设置对象的背景图像的尺寸大小。	3

4.5.2 边框Border 和轮廓Outline属性

属性	描述	CSS
	复合属性。设置对象边框的特性。	1
	复合属性。设置对象底部边框的特性。	1
	设置或检索对象的底部边框颜色。	1
	设置或检索对象的底部边框样式。	1
	设置或检索对象的底部边框宽度。	1
	置或检索对象的边框颜色。	1
	复合属性。设置对象左边边框的特性。	1
	设置或检索对象的左边边框颜色。	1
	设置或检索对象的左边边框样式。	1
	设置或检索对象的左边边框宽度。	1
	复合属性。设置对象右边边框的特性。	1
	设置或检索对象的右边边框颜色。	1
	设置或检索对象的右边边框样式。	1
	设置或检索对象的右边边框宽度。	1
	设置或检索对象的边框样式。	1
	复合属性。设置对象顶部边框的特性。	1
	设置或检索对象的顶部边框颜色	1
	设置或检索对象的顶部边框样式。	1
	设置或检索对象的顶部边框宽度。	1
	设置或检索对象的边框宽度。	1
	复合属性。设置或检索对象外的线条轮廓。	2
	设置或检索对象外的线条轮廓的颜色。	2
	设置或检索对象外的线条轮廓的样式。	2
	设置或检索对象外的线条轮廓的宽度。	2
	设置或检索对象的左下角圆角边框。	3
	设置或检索对象的右下角圆角边框。	3
	设置或检索对象的边框样式使用图像来填充。	3
	规定边框图像超过边框的量。	3
	规定图像边框是否应该被重复（repeated）、拉伸（stretched）	3
	规定图像边框的向内偏移。	3
	规定要使用的图像，代替 border-style 属性中设置的边框样式。	3
	规定图像边框的宽度。	3
	设置或检索对象使用圆角边框。	3
	定义左上角边框的形状。	3
	定义右上角边框的形状。	3
box-decoration-break	规定行内元素被折行	3
	向方框添加一个或多个阴影。	3

4.5.3 内边距Padding属性

属性	说明	CSS
	在一个声明中设置所有填充属性	1
	设置元素的底填充	1
	设置元素的左填充	1
	设置元素的右填充	1
	设置元素的顶部填充	1

4.5.4 外边距(Margin) 属性

属性	说明	CSS
	在一个声明中设置所有外边距属性	1
	设置元素的下外边距	1
	设置元素的左外边距	1
	设置元素的右外边距	1
	设置元素的上外边距	1

4.5.5 position 定位属性

属性值

值	描述
	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。

4.5.6 字体（Font）属性

属性	说明	CSS
	在一个声明中设置所有字体属性	1
	规定文本的字体系列	1
	规定文本的字体尺寸	1
	规定文本的字体样式	1
	规定文本的字体样式	1
	规定字体的粗细	1
	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	3
	为元素规定 aspect 值	3
	收缩或拉伸当前的字体系列	3

4.5.7 文本（Text）属性

属性	说明	CSS
	设置文本的颜色	1
	规定文本的方向 / 书写方向	2
	设置字符间距	1
	设置行高	1
	规定文本的水平对齐方式	1
	规定添加到文本的装饰效果	1
	规定文本块首行的缩进	1
	控制文本的大小写	1
	设置元素的垂直对齐方式	1
	设置怎样给一元素控件留白	1
	设置单词间距	1
	向元素的文本应用重点标记以及重点标记的前景色。	1
	指定一个标点符号是否可能超出行框	3
	指定一个标点符号是否要去掉	3
	当 text-align 设置为 justify 时，最后一行的对齐方式。	3
	当 text-align 设置为 justify 时指定分散对齐的方式。	3
	设置文字的轮廓。	3
	指定当文本溢出包含的元素，应该发生什么	3
	为文本添加阴影	3
	指定文本换行规则	3
	指定非CJK文字的断行规则	3
	设置浏览器是否对过长的单词进行换行。	3

五、练习题

5.1 开发登录注册页面

请参考下面的注册页面，模仿开发一个一样的注册页面，只写好静态页面样式就行，不需要能真的获取验证码等。

Ps：部分内容来自博主线上课程的教程的文件内容

上一篇：POJ 1985.Cow Marathon(DFS求树的直径模板题)

下一篇：经典Python案例实现

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！