web development basics

Learn the basics of web development

1. Three Musketeers of Web Development

The web pages we see are implemented through codes , which are interpreted and rendered by the browser into the colorful page effects you see. This browser is equivalent to the Python interpreter, which is responsible for interpreting and executing (rendering) web page code. The code for writing web pages is a specialized language, mainly divided into Hmtl \ CSS \ JavaScript, known as the three swordsmen of web development. Their respective functions are as follows:

Html: HyperText Markup Language (English: HyperText Markup Language, referred to as: HTML) is a standard markup language used to create web pages. Mainly responsible for writing the page structure, a bit like building a rough house when building a house .
CSS: (Cascading Style Sheets) Styles used to render HTML element tags. Make your web page style rich and colorful, you can change the font, color, arrangement, background color, etc. It is equivalent to decorating your rough house.
JavaScript: A web scripting language that can animate your web page. For example, a picture will automatically enlarge when you put the mouse on it, a button will automatically change color, and when submitting a form, fill in less or fill in the wrong fields and an error will be reported, etc., all implemented by JavaScript. .

The above three components are the skills that must be mastered to build a website.

2. HTML

Introduction:
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>路飞学城</title>
  </head>
  <body>

    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>

  </body>
</html>
```
- <!DOCTYPE html>Declared as HTML5 document
- <html>element is the root element of the HTML page
- <head>The tag is used to define the head of the document, which is a container for all head elements. Elements in can reference scripts, instruct the browser where to find style sheets, provide meta information, and more.
- <meta>The element contains the metadata of the document, such as defining the web page encoding format as utf-8 , keywords, etc.
- <title>The element describes the title of the document
- <body>Element contains visible page content
- <h1>Element defines a large title
- <p>element defines a paragraph
what is html

HTML is a language used to describe web pages.
- HTML refers to Hypertext Markup Language: H yper T ext M arkup L anguage
- HTML is not a programming language but a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
- HTML documents contain HTML tags and text content
- HTML documents are also called web pages
HTML tag

HTML markup tags are often called HTML tags.
- HTML tags are keywords surrounded by angle brackets , such as
- HTML tags usually appear in pairs . For example <b> 和 </b>, the first tag in the tag pair is the opening tag, and the second tag is the closing tag.
html web page structure

Note: Only <body>the content of the area (white part) will be displayed

Getting Started with Common Elements

<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 and span elements

Most htmlelements are defined as block-level elements or inline elements
- Block level elements:
  
  When block-level elements are displayed in the browser, they usually start (end) with a new line, such as<h1>,<p>,<ul>,<table>
  
  <div>element is a block-level element that can be used to compose a container for other HTML elements: has no specific meaning, and if used with CSS, can be used to set style attributes on large content blocks
  
  <div>Another common use of elements is document layout.
- html inline element
  
  Usually the display does not start with a new line, for example<b>,<td>,<img>
  
  <span>The element has no specific meaning. It is an inline element that can be used as a container for part of the text. It can be used with CSS to set style attributes for part of the text.
First introduction to css style

CSS (cascading style sheets) styles used to render HTML element tags

CSS can be added to html in three ways:
- styleInline styles: attributes are used in html elements
- Internal style sheet - used in the html head area

3. CSS style basics

Selector

id selector

ID is like the ID number of an element. It can uniquely represent a certain element in a web page. You can quickly find its corresponding element object through this ID.
Class selector: To set the same style for multiple elements, you can use the class selector
Set the style directly through the element name: add the same style to all tags <p>or tags on the page, you can set the style directly through the element name in batches<input>

Note: The style priority of the id&class selector is greater than that of the element name selector.

Combination selector

box model

box-model

Description of the different parts:

Margin - clears the area outside the border and makes the margin transparent.
Border - A border around the padding and content.
Padding - clears the area around the content and makes the padding transparent.
Content - The content of the box, showing text and images.

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

<body>

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

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

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


</body>

Effect:

Common css attributes: see the novice tutorial

Positioning and layout:.position

fixed	Generates a fixed-positioned element, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
relative	Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
static	default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).