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

一、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>
<html>
  <head>
    <meta charset="utf-8">
    <title>路飞学城</title>
  </head>
  <body>

    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>

  </body>
</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 超链接

<body>
	<a href="https://www.luffycity.com">这是一个链接使用了 href 属性</a>
</body>


<a href="https://www.luffycity.com" target="_blank" >访问路飞学城</a>

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

3.4 显示图片

<img src="black_girl.jpg" width="600" height="500" >

3.5 HTML表格

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

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

先做个最简单的

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

输出

表格的表头

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

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

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

可以加上边距

<table border="1" cellpadding="10">

3.6 列表

分为有序列表 和 无序列表

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

效果

无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

嵌套列表

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

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 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>
设置背景颜色
<body style="background-color:yellow;">
  <h2 style="background-color:red;">这是一个标题</h2>
  <p style="background-color:green;">这是一个段落。</p>
</body>

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

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

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

3.8.2 内部样式表

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

<head>
  <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
  </style>
</head>

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

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

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

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

3.8.3 外部样式表

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

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3.9 网页布局

网页布局主要使用div

<body>
<div id="header" style="background: darkorange; height: 100px;text-align: center ">
    Menu
</div>
<div id="content" style="background: aliceblue; height: 600px">

    <div id="left-menu" style="height: 100%; width: 15%; background: deepskyblue; float: left">
        菜单
        <ol>
            <li>HMTL</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ol>
    </div>
    <div id="content-panel" style="background: aqua; height: 95%; width: 85%;float: left">
        <p>这里是真正写内容的地方。。。</p>
    </div>

</div>

<div style="background: greenyellow; height: 50px">
    footer
</div>
</body>

效果

3.10 Html 表单

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

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

用户注册示例

<form action="baidu_url">
     姓名: <input type="text" name="name"> <br>
     电话: <input type="number" name="phone"> <br>
      <button>注册</button>
</form>

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

其它常用输入类型

<body>
    <form action="baidu_url">

        姓名: <input type="text" name="name"> <br>
        电话: <input type="number" name="phone"> <br>
        姓别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex"  value="女">女  <br>
        爱好: <input type="checkbox" name="hobbie" value="girl">姑娘
             <input type="checkbox" name="hobbie" value="潜水">潜水
            <input type="checkbox" name="hobbie" value="Python">Python  <br>

        喜欢的姑娘类型：<br>
        <select name="gilr_type">
            <option value="1">胸大貌美大长腿</option>
            <option value="2">气质小可爱</option>
            <option value="3">妖娆性感</option>
            <optgroup label="按区域">
                <option value="4">欧美</option>
                <option value="5">日韩</option>
                <option value="6">河南开封</option>
            </optgroup>
        </select> <br>

        个人简介: <br>
        <textarea name="intro" placeholder="输入不省于50字的个人介绍" rows="3" cols="50" ></textarea> <br>

        输入密码：<input type="password" name="password"> <br>

        <button>注册</button>
    </form>

</body>

输出效果

Fieldset 表单集合

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

效果

四、CSS样式基础

4.1 CSS id \ class 选择器

id选择器

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

输出

class 类选择器

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

输出

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

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

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

4.3 组合选择器

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

<div id="layer1">
    <p>第1层</p>
    <div id="layer2">
        <p>layer 2</p>
        <h2>layer 2 h2</h2>
        <div id="layer3">
            <p>第3层</p>
            <h3>layer 3 h3</h3>
        </div>
    </div>

</div>
<p>我不在任何的div里</p>

设置好样式

<head>
    <style type="text/css">
        #layer1 {
            height: 500px;
            padding: 30px;
            border: 1px dashed blue;
        }
        #layer2 {
            height: 400px;
            padding: 30px;
            border: 1px dashed red;
        }
        #layer3 {
            height: 300px;
            padding: 30px;
            border: 1px dashed black;
        }
    </style>
</head>

效果

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;
}

效果

image-20200606180807866

4.4 盒子模型

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

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

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

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

CSS box-model

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

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

元素的宽度和高度

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

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

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

<body>
	<h2>盒子模型演示</h2>
	<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
	<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div>
</body>

效果

image-20200606182354423

4.5 常用CSS属性

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

更多的看这里：https://www.runoob.com/cssref/css-reference.html#box

4.5.1 background背景属性

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

4.5.2 边框Border 和轮廓Outline属性

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

4.5.3 内边距Padding属性

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

4.5.4 外边距(Margin) 属性

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

4.5.5 position 定位属性

属性值

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

4.5.6 字体（Font） 属性

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

4.5.7 文本（Text） 属性

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

五、练习题

5.1 开发登录注册页面

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

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

posted @ 2020-09-14 17:56  RioTian  阅读(1563)  评论(11)  编辑  收藏  举报