zoukankan html css js c++ java

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

效果

4.4 盒子模型

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

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

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

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

CSS box-model

不同部分的说明：

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

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

元素的宽度和高度

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

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

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

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

效果

4.5 常用CSS属性

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

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：部分内容来自博主线上课程的教程的文件内容

The desire of his soul is the prophecy of his fate
你灵魂的欲望，是你命运的先知。

查看全文

相关阅读:
增删改查, SQL语句，注意事项
 形参
 接收前台的GET/POST请求
 数据库能查出数据，但mybatis查询出返回的结果是null
resultType
日期和字符串互转、数据库处理日期
 ajax的简单应用
 设置
 深度解密Go语言之unsafe
golang中，map作为函数参数是如何传递的

原文地址：https://www.cnblogs.com/RioTian/p/13668124.html