美文网首页
WEB基础入门一:基本结构

WEB基础入门一:基本结构

作者: 瘦不下去了 | 来源:发表于2018-09-06 23:39 被阅读0次

    一、软件主要分两种架构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>
    

    相关文章

      网友评论

          本文标题:WEB基础入门一:基本结构

          本文链接:https://www.haomeiwen.com/subject/sfgfgftx.html