<i id='048cv6hm'><tr id='zcel1m89'><dt id='xqt4cw01'><q id='ces9fxru'><span id='a4b3yd6i'><b id='rmjr51vy'><form id='cwujfbh7'><ins id='yng32iqb'></ins><ul id='rec81c96'></ul><sub id='1k42097c'></sub></form><legend id='efky61bj'></legend><bdo id='upea7dvt'><pre id='i99g9tqg'><center id='9aveh1rs'></center></pre></bdo></b><th id='bnbt9lh3'></th></span></q></dt></tr></i><div id='unmpsba2'><tfoot id='yeht4xgx'></tfoot><dl id='8ipyvv7n'><fieldset id='dq2z9wka'></fieldset></dl></div>

      <tbody id='80jaqymc'></tbody>

  1. <small id='9uyqsnpn'></small><noframes id='etskeioa'>

  2. <legend id='q9tlciwl'><style id='ezfy97s5'><dir id='3iee1hau'><q id='viq3ahqn'></q></dir></style></legend>
      <tfoot id='4qtfw9x2'></tfoot>
      网站建设公司当前位置 : 网站建设公司 > 知识普及

      写给零基础小白的网站开发入门

      发布时间:2021-08-30 16:45   浏览次数:次   
      本教程针对零基础同学,讲解网站开发三个基础技术:HTML、CSS、JS,带你快速入门!
       
      本教程的所有知识点,均为核心,必须掌握!
       
      看完本教程,你将学会:
       
      理解HTML、CSS、JS各自的作用
      学习HTML、CSS、JS基本语法
      能写一个简单的网页
      为快速上手练习,可以使用在线编辑器,学会基础语法后,再下载专业的网站开发编辑器/开发环境(详见本教程资源部分)。
       
       
       
      1. HTML
      HTML即超文本标识语言,是网站开发最基础的语言,简单易懂。
       
      HTML用于定义网站的结构及内容,文件名后缀为.html。
       
      当我们在浏览器里查看网站源码( ctrl + u )或按F12打开开发者工具,首先看见的是网站的HTML源代码:
       
       
       
      下面花 5 分钟,学习下 HTML 语法。
       
      1.1 标签
      HTML使用标签语法定义网页内容和结构,工整简单。标签又可叫做元素。
       
      一个基本的HTML文件内容如下:
       
       
      8
      标签具有如下特点:
       
      对称:每组标签有开有闭,如 <html> 对应 </html> ,同组标签尖括号里单词相同。
       
      层级:标签可嵌套标签,体现了网站结构层级关系,比如一个框里可以嵌套文字内容。
       
       
       
      简易:标签名为英文单词或简写,方便联想记忆。
       
      下面介绍常用标签:
       
      HTML中,使用<!-- 注释内容 -->表示注释,不会显示在页面中。
       
      结构标签,所有标准网页都必须有且仅有一个:
       
      <html> <!-- html根标签,最外层 -->
        <head> <!-- 头标签,包括网站基本信息、资源引用 -->
          ...
        </head>
       
      8
      很好记忆,把一个网页比喻成一个人,head是我们的大脑,存储重要的信息,body是我们的身体,用来表示内容。head在body上。
       
      元信息标签,用来定义网站的基本信息,放在head标签中:
       
      <head>
        <title>网页标题</title>
        <meta charset="utf-8"/> <!-- 元信息,定义字符集为utf-8(中文) -->
      </head>
      1
      2
      3
      4
      我们发现 meta 标签内部以 / 结尾,没有和它对应的标签,我们把这种标签叫做自闭标签。
       
      内容标签
       
      <html>
        <head>
      ...
        </head>
        <body>
          <h1>一级标题</h1> <!-- heading的缩写,h1-h6对应一至六级标题,加粗显示,字号依次缩小 -->
          <h2>二级标题</h2>
          <h6>六级标题</h6>
          <p>段落<br/>换行啦</p> <!-- paragraph的缩写,表示一段文章 --> <!-- br表示换行 -->
          <div>容器</div> <!-- 最重要的标签,几乎可嵌套任何内容,代替其他任何标签 -->
          <a href="https://www.baidu.com">超链接</a> <!-- 超链接,点击后跳转 -->
          <img src="https://t.cn/RCzsdCq"/> <!-- image的缩写,显示图像 -->
          <button>按钮</button>
        </body>
      </html>
       
      其中,br、img 标签都是自闭标签。
       
      代码运行效果如下:
       
       
       
      其他标签如table(表格)、ul(无序列表)、ol(有序列表)等可先不了解,均可用div标签替代。
       
      1.2 属性
      在上面的代码中,你可能发现,有些标签中除了标签名,还有其他内容,比如:
       
      <img src="https://t.cn/RCzsdCq"/>
      1
      图像标签中的src是img标签的属性。属性用于改变标签的样式或行为,一个标签可以设置多个属性。语法为:
       
      <标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
      1
      由于很多属性可用CSS或JS替代,此处了解常用属性即可,不同标签具有的属性也不同。
       
      2. CSS
      CSS即层叠样式表,是美化网页的语言,简单易懂。
       
      CSS用于定义网站的样式和动画,文件名后缀为.css。
       
      2.1 引入
      想要在html中应用css样式,需要先引入css,有三种方式:
       
      文件引入
       
      通过link标签(head标签内)引入css文件:
       
      <head>
        <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css" rel="stylesheet">
      </head>
      1
      2
      3
      href:要引入的css文件地址(绝对路径/相对路径)
       
      rel:对于css文件,固定为stylesheet
       
      内置样式
       
      在style标签中(head标签内)书写css样式代码,仅对当前页面有效:
       
      <head>
        <style>
          div {
            color: red;
          }
        </style>
      </head>
      1
      2
      3
      4
      5
      6
      7
      内联样式
       
      在要应用样式的标签中,添加style属性,仅对当前标签有效:
       
      <div style="color: red;">容器</div>
      1
      2.2 选择器
      网页中有那么多的标签,如何给指定的标签应用样式呢?比如有两个框,怎么让它们一个白色一个红色,或者都变成红色呢?
       
      选择器是CSS核心概念,定义了一套选择标签的语法,可以给指定的标签应用指定的样式。
       
      必须了解常用选择器:
       
      假设我们有如下html内容:
       
      <div id="box1" class="box">盒子1</div>
      <div id="box2" class="box">盒子2</div>
      <div>盒子3</div>
      1
      2
      3
      初始运行效果如下:
       
       
       
      通配选择器
       
      选择页面的所有标签(元素),语法如下:
       
      * {
        ...
      }
      1
      2
      3
      使用较少。通常用于初始化一个页面,为所有元素清除浏览器自带的默认样式。
       
      标签选择器
       
      选择指定名称的所有标签,语法如下:
       
      标签名 {
        ...
      }
      1
      2
      3
      可以将下面css代码应用到上述html内容中,改变所有div标签的字体颜色:
       
      div {
        color: red;
      }
      1
      2
      3
      运行效果如下:
       
       
       
      id选择器
       
      上面讲到,同一个页面中,id值必须唯一(像身份证),可以用id选择器改变唯一元素的样式。语法如下:
       
      #id值 {
        ...
      }
      1
      2
      3
      可以将下面css代码应用到上述html内容中,给两个盒子不同的背景颜色:
       
      #box1 {
        background: red;
      }
      #box2 {
        background: yellow;
      }
      1
      2
      3
      4
      5
      6
      运行效果如下:
       
       
       
      class选择器
       
      当我们要改变多个元素样式时,可以给它们添加相同的class属性,然后用class选择器改变它们的样式。语法如下:
       
      .class值 {
        ...
      }
      1
      2
      3
      可以将下面css代码应用到上述html内容中,给所有box盒子添加相同背景色:
       
      .box {
        background: red;
      }
      1
      2
      3
      运行效果如下:
       
       
       
      其他选择器如子父节点选择器、兄弟节点选择器、伪选择器等可先不了解,使用较少,且均可用上述选择器替代。
       
      2.3 样式
      CSS可以控制布局、块(元素)、内容(块内的文字、图片)等样式,以及增加动画效果。
       
      下面介绍CSS常用的样式:
       
      CSS中,注释用/* 注释内容 */表示。
       
      2.3.1 布局
      * {
      float: left; /* 元素浮动:left 左浮动 | right 右浮动 */
        position: unset; /* 定位方式:absolute 相对父元素定位 | fixed 相对页面定位 | relative | sticky 弹性 | unset 不设置*/
      }
      1
      2
      3
      4
      运行效果如下:
       
       
       
      可以发现,本来每个盒子独立占一行,用了float布局后,变为了一行,从左往右依次排列。这和块级行级元素有关,后续教程会讲到。
       
      2.3.2 块
      div {
        display: block; /* 元素展现形式:block | inline | inline-block | none 不展示,隐藏块 */
        background: red; /* 背景色 */
        margin: 10px 15px 20px 5px; /* 外间距(上右下左)px为像素值 */
        padding: 10px 15px 20px 5px; /* 内边距(上右下左)px为像素值 */
        margin-top: 1px; /* 上外间距 */
        padding-bottom: 1px; /* 下内边距 */
        height: 25px; /* 块高度 */
        width: 100px; /* 块宽度 */
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      运行效果如下:
       
       
       
      2.3.3 内容
      div {
        text-align: center; /* 文字对齐方式:center 居中 | left 左对齐 | right 右对齐 */
        color: red; /* 文字颜色 */
        font-size: 16px; /* 文字大小 */
        font-weight: bold; /* 文字加粗 */
        font-style: italic; /* 文字倾斜 */
        font-family: SimHei; /* 字体 */
        text-decoration: underline; /* 文字装饰:underline 下划线 | line-through 删除线 */
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      运行效果如下:
       
       
       
      CSS中支持多种颜色表示方式(background、color等属性):
       
      常用颜色英文单词:red\green\yellow 等
      rgb值:如rgb(0, 0, 0)或rgba(0, 0, 0, 0.8)
      16进制颜色值:如#000000
      以上是CSS常用样式,一定要自己多加练习,查看不同样式带来的网页效果变化。
       
      3. JS
      JS全称JavaScript,是可以运行在浏览器中的脚本语言,非常灵活强大。NodeJS出现后,为JavaScript带来了更多的可能性,也可以作为后端开发语言。
       
      JS用于定义网站的交互行为,文件名后缀为.js。
       
      交互行为有很多种,比如点击按钮弹窗、填写提交表单、动态更新页面内容等。JS能极大地增强网站的功能和趣味性。
       
      JS和CSS一样,都需要被html文件或其他js引入才能使用。
       
      3.1 引入
      想要在html中应用js脚本,需要先引入js,有两种方式:
       
      文件引入
       
      通过script标签(通常在body标签最底部或head标签)引入js文件:
       
      <body>
        ...
        <script type="text/javascript" src="script.js"></script>
      </body>
      1
      2
      3
      4
      src:要引入的js文件地址(绝对路径/相对路径)
       
      type:对于js文件,固定为text/javascript
       
      注意,script不同于引入css的link标签,script是对称标签。
       
      内置脚本
       
      直接在script标签中(通常在body标签最底部或head标签)写js脚本,仅对当前页面有效:
       
      <body>
        ...
        <script type="text/javascript">
        let a = 1;
          ...
        </script>
      </body>
      1
      2
      3
      4
      5
      6
      7
      3.2 基本语法
      学习任何语言,都先从基本语法学起,JS也是一样。如果之前学过其他编程语言,入门会更快。
       
      下面介绍JS基本语法:
       
      JS中,单行注释用 // 注释内容 表示,多行注释用 /* 注释内容 */ 表示
       
      3.2.1 基本语法
      JS是弱类型语言,通过let关键字,能定义一个变量,支持传入各种类型(整数、小数、字符串、数组、对象等):
       
      let a = 1; // 定义变量
      const b = 2; // 定义常量(一旦赋值,不能修改)
      let c = a + b; // 求和赋值
      console.log(c); // 输出
      let d = [1, 2, 3]; // 定义数组,数组包含三个元素1、2、3
      let e = {name: 'yupi', age: 10}; // 定义对象,包含两个属性name和age
      1
      2
      3
      4
      5
      6
      console.log 是JS中最常用的函数,类似于C语言的printf,可以输出变量的值或信息,帮助我们调试。
       
      3.2.2 定义函数
      函数能够完成一个功能。给定输入参数,通过计算,得到输出结果。
       
      function doClick() {
        let a = '我好帅';
        alert(a); // 输出变量的值
      }
      1
      2
      3
      4
      现在页面有一个按钮,如何点击按钮后,触发弹窗呢?
       
      我们可以给按钮绑定一个鼠标点击事件(添加属性即可),当用户点击按钮时,触发对应的JS函数:
       
      <button onclick="doClick()">按钮</button>
      1
      运行效果如下:
       
       
       
      除了通过给标签加属性绑定事件,还可以通过JS绑定事件,后续教程会讲到。
       
      4. 总结
      让我们复习下网站开发基本语言HTML、CSS、JS的各自作用。
       
      HTML:结构层, 定义网页结构和内容
       
      CSS:表现层,定义网站的样式和动画
       
      JS:行为层,定义网站的交互行为
       

        <tfoot id='5jxu24lh'></tfoot>

            <small id='0hv6f4mt'></small><noframes id='zxkzbi64'>

              <tbody id='8mxsdn4b'></tbody>
          • <legend id='iekyjedn'><style id='s7gn1gnb'><dir id='xs4hrvvn'><q id='ktujyo0w'></q></dir></style></legend>

            <i id='lfocnxf0'><tr id='hpx3yrjk'><dt id='x7n1qgs0'><q id='l8drt97l'><span id='umdx8bt1'><b id='v9ntbajv'><form id='fv2e8nyg'><ins id='5sxji90u'></ins><ul id='vw58xhmi'></ul><sub id='cr0g4acn'></sub></form><legend id='abrijjy5'></legend><bdo id='vdu6ltvy'><pre id='qub9bxs2'><center id='ykdf1k6b'></center></pre></bdo></b><th id='p08d4tok'></th></span></q></dt></tr></i><div id='0jdftiek'><tfoot id='wqycgl0v'></tfoot><dl id='j1yj0i7i'><fieldset id='e05emy4j'></fieldset></dl></div>

            本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

            • <legend id='503hcz7z'><style id='sf3c5n8y'><dir id='5taxxfl7'><q id='detnmou9'></q></dir></style></legend>

                <small id='iy9hugun'></small><noframes id='0rkpz0cb'>

                  <tbody id='xuddn61m'></tbody>
                <tfoot id='nlqvnv5r'></tfoot>
              1. <i id='530kvvm6'><tr id='hkueci4s'><dt id='eeezot5a'><q id='ypd4cxxi'><span id='5f55sxiy'><b id='ps2ia9fl'><form id='lomwri94'><ins id='8fuok17v'></ins><ul id='8n8vokrq'></ul><sub id='9hukbff4'></sub></form><legend id='8qt4qwiv'></legend><bdo id='t4w5vksk'><pre id='5ecyadmv'><center id='lq60gtsx'></center></pre></bdo></b><th id='si22tmj7'></th></span></q></dt></tr></i><div id='8qfyn4hq'><tfoot id='2golj0zn'></tfoot><dl id='sigfcm45'><fieldset id='js256zea'></fieldset></dl></div>