web开发基础知识

web开发基础知识学习一、网页开发三剑客我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言，主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下：Html：超文本标记语言（英语：HyperText Markup L

vision_wang

8745人浏览 · 2022-02-27 22:26:18

vision_wang · 2022-02-27 22:26:18 发布

web开发基础知识学习

一、网页开发三剑客

我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言，主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下：

Html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。主要负责编写页面架构，有点像建房子时，造的毛坯房。
CSS： (Cascading Style Sheets) 用于渲染HTML元素标签的样式。让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等相当于给你的毛坯房做装修。
JavaScript：网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

以上三个组件是做网站必须掌握的技能

二、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>元素定义一个段落
什么是html

HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如<b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签
html网页结构

注意：只有<body>区域的内容（白色部分）才会显示

常用元素入门

<H2>这是一个二级标题</H2>

        <p>这是一个段落</p>    <!--一个P标签是一行，相当于自动换行-->
        <a href="https://www.wangpc.ink" target="_blank">这是我的个人主页</a>  <!--targert属性是点击网址打开新的窗口-->
        <br>                  <!--换行标签-->

        <img src="https://cdn.jsdelivr.net/gh/6vision/PicBED@latest/images/2022/02/27/868d1f3ead9430ad665ed79eb923cc16-image-20220227111922380-4537e6.png" width="500" height="">

        <table border="1" cellpadding="20">
            <tr>          <!--tr是新起一行-->
                <th>姓名</th><th>性别</th><th>年龄</th>  <!--th是表头-->
            </tr>
            <tr>
                <td>vision</td><td>男</td><td>24</td>
            </tr>
        </table>

        <ol>                      <!--有序列表-->
            <li>蛋糕</li>
                <ul>               <!--无序列表-->
                    <li>巧克力蛋糕</li>
                    <li>慕斯蛋糕</li>
                    <li>水果蛋糕</li>
                </ul>
            <li>水果</li>
            <li>零食</li>

div和span元素

大多数html元素别定义为块级元素或内联元素
- 块级元素：
  
  块级元素在浏览器显示时候，通常会以新行开始（结束），比如<h1>,<p>,<ul>,<table>
  
  <div>元素是块级元素，它可用于组合其他html元素的容器：没有特定的含义，如果与css一起使用，可用于对大的内容块设置样式属性
  
  <div>元素的另一个常见用途就是对文档布局。
- html内联元素
  
  通常显示时候不会以新行开始，比如<b>,<td>,<img>
  
  <span>元素也没有特定含义，是内联元素可做部分文本的容器，与css一同使用，可为部分文本设置样式属性
css样式初识

CSS（cascading style sheets）用于渲染html元素标签的样式

CSS可以通过以下三种方式添加到html中
- 内联样式：在html元素中是用style属性
- 内部样式表-在html头部区域使用

三、css样式基础

选择器

id选择器

id就像一个元素的身份证号，可以在网页里唯一代表某个元素，可以通过这个id快速找到它对应的元素对象
class选择器：为多个元素设置同一个样式可以使用类选择器
直接通过元素名设置样式：为页面所有的<p>或<input>标签加上同样的样式，可以直接通过元素名批量设置

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

组合选择器

盒子模型

box-model

不同部分的说明：

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

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

<body>

<h2>盒子模型演示</h2>

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

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div>


</body>

效果：

css常见属性：见菜鸟教程

定位和布局：.position

fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。