WEB基础入门一:基本结构

一、软件主要分两种架构C/S和B/S

  • B/S中的B指的是browsers,是浏览器的意思,SServer服务器的意思。
  • B/S架构的软件一般都是通过访问一个网页的形式来使用的,而将一些运算等操作放到远端的服务器上。

二、软件开发流程:

1、 网页设计师根据需求设计网页;
2、 前端工程师将设计做成静态网页;
3、后台工程师将静态网页修改为动态网页。

三、网页由三部分组成:

1、结构:HTML:用于描述页面的结构;
2、 表现 :CSS:用于控制页面中元素的样式;
3、行为:JavaScript:用于响应用户的操作。**

万维网联盟(W3C):万维网联盟World Wid Web Consortium,W3C专门为了定义网页相关的标准而成立 。

四、HTML(Hypertext Markup Language)超文本标记语言。

  • HTML使用标签的的形式来标识网页中的不同组成部分。
    超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。
    一个最基本的HTML页面:
<!DOCTYPE  html>
<html>
<head>
        <meta  charset="UTF-8">
        <title>网页标题</title>
</head>
<body>
        <h1>网页正文</h1>
</body>
</html>

HTML中的标记指的就是标签。结构:<标签名>标签内容</标签名>

我们还将一个完整的标签称为元素。

1. 可以为HTML标签设置属性,通过属性为HTML元素提供附加信息。属性需要设置在开始标签或自结束标签中。属性总是以名称/值对的形式出现。比如:name=“value”

1、id:id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值;
2、class:用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class;
3、title:title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。

2. 注释:< !-- 注释内容 -->;注释不能嵌套!

3.meta的用法:

1、设置页面的字符集:– <meta charset="utf-8">;
2、设置网页的描述:– <meta name="description" content="">;
3、设置网页的关键字:– <meta name="keywords" content="">;
4、请求的重定向:– <meta http-equiv="refresh" content="5;url=地址"/>。

4.<html>:用于告诉浏览器这个文档中包含的信息是用HTML编写的。一个页面中html标签只能有一个。

5.<head>:– <head>标签用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。一个网页中只能有一个head。

6.<title>:表示网页的标题,一般会在网页的标题栏上显示。

7.<body>:用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。

8.<h1> ~ <h6>:h1 ~ h6都是网页中的标题标签,用来表示网页中的一个标题,不同的是,从h1~h6重要性越来越低。

9.<p>:<p>标签表示网页中的一个段落。一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行。

10.<br />:<br />标签表示一个换行标签,使用br标签可以使br标签后的内容另起一行。

11.<hr />:<hr />标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。

12.<img />:< img />标签是图片标签,可以用来向页面中引入一张外部的图片;– src:指向一个外部的图片的路径;– alt:图片的描述

13.<a>:<a>标签是超链接标签,通过a标签,可以快速跳转到其他页面;– href:指向一个链接地址;– target:设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口

14.字符实体:

1.小于号 <:– & lt;
2.大于号>:– & gt;

3.空格:– & nbsp;
4.和符号&:– & amp;
5.版权©:– & copy;
6.引号”:– & quot;
7.注册商标®:– & reg;
8.商标™:– & trade;**

五、 CSS:层叠样式表 (Cascading Style Sheets)所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。

CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。

语法:– 选择器 {样式名:样式值;样式名:样式值 ; }
– p {color:red ; font-size:12px;}

行内样式:

<p style="color: red;font-size: 30px"></p>(不推荐使用)

内部样式:可以直接将样式写到<style>标签中

<style>
     p{color:red; font-size: 30px;}
<style>

外部样式:可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。

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

推荐阅读更多精彩内容