HTML and CSS tutorial for my girlfriend

The final exam is coming soon, and I suddenly remembered the final assignment assigned by our web design teacher in my freshman year:

Make a great website with HTML and CSS, no less than 7 pages. Use div layouts, paragraphs, images, lists, tables, hyperlinks, and other common elements. According to the completion of the final grade, did not directly count as failing.

This big WEB project is really messing with my girlfriend and me. It’s really messing with me.

My girlfriend doesn’t know how to do it, so she makes me do it for her. It took days and nights to make it, but luckily we both survived.

Now think about it, actually HTML and CSS are the same thing, to put it bluntly is copy and paste tags, the most important is creative and aesthetic.

1. What is HTML

Official explanation:

HTML full name HyperText Markup Language

You may still be dumbstruck after reading the official answer.

Basically, we use a front-end development tool to develop a piece of front-end code that complies with the SPECIFICATIONS of THE HTML language and then puts it in the browser.

The browser loads and renders the HTML code we wrote, and we see the rendered page.

In fact, almost all pages on the web output HTML code, we can open a website page and click on the source code to find:

2. The HTML standard

2.1 HTML element

An HTML element contains a start tag and an end tag. The content of an element is the content between the start tag and the end tag. Such as:

 <p"> < p style =" max-width: 100%; clear: both; min-height: 1em; </p> 
Copy the code

Tags for elements in HTML generally come in pairs, but there are also single tag elements, such as:

<br> Line break <hr> split line <br>imgPicture > <input> input boxCopy the code

2.2 HTML code area

• 1. DOCTYPE HTML: Declare that the document is an HTML document.
• 2. HTML: The root element of the HTML page, which is the base of the house.
• 3. Head: The header element that contains the title of the page. We sometimes write internal CSS styles inside as well.
• 4. Body: This is where we write the HTML code, and the HTML page displays the contents of the body.

Conclusion:

The HTML specification defines the layout of HTML code elements. We write HTML code mainly inside the body tag, so other fixed parts (such as the root tag and the header element) can be copied and pasted directly.

2.3 Development Tools

We know that the suffix of an HTML document is.html, so whatever editor you use, after you write the HTML code, as long as the suffix of the document is.html, you can open it in a browser.

But a good development tool can save us a lot of time. VSCODE is recommended here. Why is it recommended? Look at the picture:

1. English input method, input! To initialize the HTML page element.

2. Quickly print paired labels or single label elements: After entering elements, press Tab.

3. Quickly type multiple labels and sub-labels. Use + for sibling tags and > for child tags.

4. Add the ID and class to the label. The id attribute uses #, and the class attribute uses.

So writing HTML code with this development tool is fun! Of course, what others recommend is not always the best, but you can find tools that suit you, such as Sublime, WebStorm, etc.

3. Basic usage of HTML

3.1 HTML attributes

1. Attributes represent additional information about an element.
2. Attributes always appear as name/value pairs, for example: title=” This is the title “.
3. The browser does not display information about attributes.

Such as:

<img id="img" src="www.baidu.com"Alt =" baidu home page" title=" click to display Baidu website ">Copy the code

HTML common attributes:

The property name	describe
id	A unique identifier for the element, like a person’s ID card.
class	Define one or more class names for an element. The class names can be repeated.
style	The inline style of the element will be covered by CSS next.

3.2 Block elements and inline elements

Block-level elements are displayed on a single line in the browser, for example:

  <h1"> < p style =" max-width: 100%; clear: bothh1>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
Copy the code

Running results:

Inline elements are displayed as part of a line, where single-label elements are inline elements. Such as:

<a href="https://www.baidu.com
      
      
 name"> text" name="The name" id="name" />
Copy the code

Running results:

Common block-level elements and inline elements in HTML:

A block element	Inline element
div	a
p	img
h1-h6	span
ul	em
ol	strong

3.3 div layout

I think the layout of a web page is a very important part of HTML. It divides the web page into different areas based on its functionality. So the layout of the page reflects the overall look of the page.

In HTML, we use div tags to design the layout of web pages, usually in conjunction with CSS. Such as:

<body>
    <div id="container" style="text-align: center;font-weight: bold;font-size: 50px;" >
        <div id="header" style="height:130px;background: #00acee;line-height:130px;" > This is the header information </div>
        <div id="main"  style="height:700px;background: gainsboro;line-height:700px;" > <div id="left" style="width:50%;height:700px;background: palegreen;float: left;" > center left </div>
            <div id="right" style="width:50%;height:700px;background: #f5df2e;float: right;" > center right </div> 
        </div>
        <div id="footer" style="height:100px;background: #eff3f6;line-height:100px;" > Copyright ©2010-2021A rebus </div>
    </div>
</body>
Copy the code

Running results:

3.4 the hyperlink

Click on the hyperlink to jump to another page, for example:

<a href="https://www.baidu.com/< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

In addition to jumping to different pages, hyperlinks can jump to different places on the same page, which are anchors in HTML. Anchor points are linked to the # ID attribute, for example:

<body>
    <a href="#d1"> jump to d1 position </a>
    <pId ="a1"> </p>
    <pId ="b1"> </p>
    <pId ="c1"> </p>
    <pId ="d1"> </p>
</body>
Copy the code

3.5 HTML framework

3.5.1 Displaying different Pages in the same Browser Window

By using the iframe tag, you can nest multiple pages in the same browser window. For example: hello. HTML:

<body>
    <pId ="a1"> </p>
    <pId ="b1"> </p>
    <pId ="c1"> </p>
    <pId ="d1"> </p>
    <iframe src="aa.html" frameborder="5">66666</iframe>
</body>
Copy the code

aa.html:

<body>
    <a href="https://www.baidu.com/< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

Running results:

3.5.2 Removing borders

The frameborder attribute is used to define the border size of the iframe. When the attribute value is 0, the border of the iframe is removed, for example:

<iframe src="aa.html" frameborder="0">66666</iframe>
Copy the code

3.5.3 Setting the Height and Width

The height and width attributes define the height and width of the iframe tag, for example:

<iframe src="aa.html" width="500" height="500" frameborder="5"> < /iframe>
Copy the code

3.5.4 Displaying the target Link page

The target attribute of the target link must be the value of the name attribute of the iframe, for example:

<body>
   <p><a href="https://juejin.cn/" target="iframe_a1
 " frameborder="5" name="iframe_a1">66666</iframe>
</body>
Copy the code

Running results:

3.6 the image

The IMG tag is used to display image information on the page.

3.6.1 Setting the Height and Width

The height and width properties are used to set the height and width of the image. Such as:

<body>
    <img src="http://photo.tuchong.com/2318623/f/975709119.jpg" alt="The beauty" title="Aww!!! The beauty" width="280px" height="500px">
</body>
Copy the code

3.6.2 title attribute

Moving the mouse over the image will display the title property text specified by the image.

3.6.3 Alt attribute

If the image is not downloaded or fails to load, the text set by the Alt attribute is used instead of the image display.

4. What is CSS

If web design is like building a house, HTML code is like building a blank house, CSS is like building a hardcover house.

CSS is used to change the style of HTML elements, such as font size, border color, page layout, and so on. CSS works like makeup to make pages look super nice.

5. The CSS specification

The CSS specification consists of two parts: selectors and attribute key-value pairs.Such as:

6. There are three import modes of the CSS

6.1 Inter-line Styles

Interline style means to style the element directly on this line. Syntax:

Word-wrap: break-word! Important; "> < span style=" max-width: 100%;

Such as:

<p style="font-size: 20px;" "> < p style =" max-width: 100%; clear: both; min-height: 1emp>
Copy the code

6.2 Internal Styles

Internal styling is equivalent to defining CSS styles elsewhere in the same code file, syntax format:

<style> Attribute key value pair </style>Copy the code

Such as:

<body>
    <p"> < p style =" max-width: 100%; clear: both; min-height: 1emp>
    <style>
        p {
            font-size: 20px;
            color: red;
        }
    </style>
</body>
Copy the code

However, for the sake of specification, we usually write internal styles in the HTML head, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A Rebus</title>
    <style>
        p {
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <p>I love your country</p>
</body>

</html>
Copy the code

6.3 External Styles

External styling is when we put a CSS style in a file with a.css suffix, and then introduce that style into an HTML file. Such as:

Introduction format:

 <link href="XXXXX.css" rel="stylesheet" type="text/css"/>
Copy the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A Rebus</title>
    <link href="hello.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <p>I love your country</p>
</body>

</html>
Copy the code

7. CSS selector

We know that elements of an HTML document are basic selectors, such as:

<style>
    html{
        text-align: center;
    }
    body{
        margin: 10px;
    }
    p{
        font-size: 20px;
    }
    h1{
        font-size: 20px;
    }
</style>
Copy the code

But what if we want to style a single element or a bunch of the same elements?

Yeah, set the selector for the element.

7.1 ID selector

CSS id selectors are defined as #, and id selectors are unique, just like a person’s ID card. Such as:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        #p1 {font-size: 10px; }#p2 {font-size: 20px; }#p3 {font-size: 30px; }#p4 {font-size: 40px; }</style>
</head>

<body>
    <p id="p1">Before my bed a pool of night</p>
    <p id="p2">Can it be hoarfrost on the ground</p>
    <p id="p3">Looking up, I find the moon bright</p>
    <p id="p4">Bowing, In homesickness I'm drowned</p>
</body>

</html>
Copy the code

Running results:

7.2 Class selectors

Class selectors in CSS. Class selectors represent the same class. Such as:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        .poet {font-size: 20px;color: red; }</style>
</head>

<body>
    <p class="poet">Before my bed a pool of night</p>
    <p class="poet">Can it be hoarfrost on the ground</p>
    <p class="poet">Looking up, I find the moon bright</p>
    <p class="poet">Bowing, In homesickness I'm drowned</p>
</body>

</html>
Copy the code

Running results:

7.3 Combining Selectors

A composite selector indicates the relationship between two selectors.

7.3.1 Child selectors

The child element selector selects the immediate child elements of an element, separated by >, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        div > p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>The eight masters of tang and Song dynasties</h2>
        <p>Tang Dynasty: Liu Zongyuan, Han Yu, Song Dynasty: Ouyang Xiu, Su Xun, Su Shi, Su Zhe, Wang Anshi, Zeng Gong</p>
    </div>
</body>
</html>
Copy the code

Running results:

7.3.2 Descendant selectors

Descendant selectors select the descendant children of an element, separated by Spaces, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        div p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>The eight masters of tang and Song dynasties</h2>
        <p>Tang Dynasty: Liu Zongyuan, Han Yu, Song Dynasty: Ouyang Xiu, Su Xun, Su Shi, Su Zhe, Wang Anshi, Zeng Gong</p>
        <h2>Four beautiful men in ancient times</h2>
        <p>Pan An, Wang Lanling, Song Yu, Wei Jie</p>
    </div>
</body>
</html>
Copy the code

Running results:

7.3.3 Sibling selectors

1. Adjacent sibling element selector: Selects the first sibling element next to it that has the same father between the two elements. Two elements are separated by +, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        h2+p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>The eight masters of tang and Song dynasties</h2>
        <p>Tang Dynasty: Liu Zongyuan, Han Yu, Song Dynasty: Ouyang Xiu, Su Xun, Su Shi, Su Zhe, Wang Anshi, Zeng Gong</p>
        <p>Four beautiful men in ancient times</p>
        <p>Pan An, Wang Lanling, Song Yu, Wei Jie</p>
    </div>
</body>
</html>
Copy the code

Running results:

2. All sibling elements selector: Selects all sibling elements of the specified element. These elements must have the same parent. Elements are separated by ~, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        h2 ~ p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>The eight masters of tang and Song dynasties</h2>
        <p>Tang Dynasty: Liu Zongyuan, Han Yu, Song Dynasty: Ouyang Xiu, Su Xun, Su Shi, Su Zhe, Wang Anshi, Zeng Gong</p>
        <p>Four beautiful men in ancient times</p>
        <p>Pan An, Wang Lanling, Song Yu, Wei Jie</p>
    </div>
</body>
</html>
Copy the code

Running results:

7.4 Attribute selector

The style, syntactic format used to set a particular property:

[Attribute name]{}[Attribute name ="Attribute value"]{}Copy the code

Such as:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        [title]{
            color: red;
        }
        input[type="password"]{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
       <a title="Registered name" href="http://register/">Registered name</a><br>Name:<input type="text" name="name" id=""><br>Password:<input type="password" name="password" id=""><br>
    </div>
</body>
</html>
Copy the code

Running results:

8. CSS common styles

8.1 the font

8.1.1 Font size

Font size is set with font size, for example

p{font-size: 20px; }Copy the code

8.1.2 color

Font color is set with color, for example:

p{color:red; }Copy the code

8.1.3 bold

Font bold with font-weight, for example:

p{font-weight:bold}
Copy the code

8.2 pseudo-classes

8.2.1 Hyperlink pseudo-classes

A pseudo-class is a selection of elements in a certain state. Syntax format:

Element: state {attribute key-value pair}Copy the code

There are generally four states for hyperlinks, such as:

state	grammar
No access	a:link {color:red; }
Have access to	a:visited {color:red; }
The mouse is suspended	a:hover {color:red; }
Has been selected	a:active {color:red; }

Note: Set the sequence as LVHA.

Hyperlink pseudo-class examples:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        a:link {color: black; }a:hover { font-size: 20px;color: red; }</style>
</head>

<body>
    <div>
        <a title="Staff management" href="javascript:;">Staff management</a><br>
        <a title="Department Management" href="javascript:;">Department of management</a><br>
        <a title="Payroll management" href="javascript:;">The salary management</a><br>
    </div>
</body>
</html>
Copy the code

Running results:

8.2.2 Form pseudo-classes

Common form pseudo-classes:

The selector	case	describe
:checked	input:checked	Select all selected form elements
:disabled	input:disabled	Select all disabled form elements
:enabled	input:enabled	Select all enabled form elements
:required	input:required	Select the element with the required attribute

8.3 Element Display

8.3.1 Hidden Elements

p {display:none; }Copy the code

8.3.2 Display elements as inline elements

p {display:inline; }Copy the code

8.3.3 Displaying elements as block elements

span {display:block; }Copy the code

8.4 Box Model

All HTML pages can be thought of as a box.

• Margin: Indicates the distance between a div and the browser, or between a div and a div.
• Border: Represents the border of the div.
• Padding: Indicates the distance between the content inside the div and the div.

8.4.1 Setting the width and height of div

div{
    width: 20px;
    height: 100px;
}
Copy the code

Width and height can be percentages in addition to pixels, for example

div{
    width: 20%;
    height: 50%;
}
Copy the code

8.4.2 Setting div borders

Syntax format:

 border: Line size line style line color;Copy the code

Such as:

div{
   border: 1px solid red;
}
Copy the code

8.4.2 Setting Margin and padding

Before you set it up

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        div{
            background-color: gainsboro;
            width:50%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
       <p>I love your motherland!!</p>
    </div>
</body>
</html>
Copy the code

After setting

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Rebus</title>
    <style>
        div{
            background-color: gainsboro;
            width:50%;
            height: 100px;
            border: 2px solid red;
            margin: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div>
       <p>I love your motherland!!</p>
    </div>
</body>
</html>
Copy the code

Note: Margin and padding can be used to describe the distance between the top, left, right and bottom. Margin: 0 auto; }.

8.5 positioning

Positions in HTML are represented by the position property.

• Fixed positioning:

position:fixed;
Copy the code

Features: fixed position, does not occupy the position, only to the browser positioning.

• Relative positioning:

position:relative;
Copy the code

Features: Relative to their original position for positioning.

Use top, left, right and bottom to move and still hold your original position.

• Absolute positioning:

position:absolute;
Copy the code

Feature: Positioned relative to the nearest and already positioned element.

If the parent element is not positioned, align it with the current screen of the browser. If the parent is positioned, it is positioned with the most recently positioned parent element. Use top, left, right, bottom to move, positioning does not occupy the position.

Note: If there are parent elements, the parent element is usually positioned relative to the child element, and the child element is positioned absolutely.

8.6 the floating

8.6.1 Floating definition

The keyword for float in CSS is float. Float causes an element to float to the left or right without taking up position. Grammar:

float:left; orfloat:right;
Copy the code

Before using floating case:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8"> < span style>div#a1 {
            background-color: pink;
            width: 300px;
            height: 300px;
        }
        div#a2 {
            background-color: palegreen;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <divId ="a1"> I love your country!! </div>
    <divId ="a2"> I love your country!! </div>
</body>
</html>
Copy the code

Running results:

Use left float:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8"> < span style>div#a1 {
            background-color: pink;
            width: 300px;
            height: 300px;
            float: left;
        }
        div#a2 {
            background-color: palegreen;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <divId ="a1"> I love your country!! </div>
    <divId ="a2"> I love your country!! </div>
</body>
</html>
Copy the code

Running results:

Explanation: From the example above we can see that the first div uses a left float. It floats towards the upper left corner, so the following div takes its place.

8.6.2 Clearing floats

Use the clear property to specify that no floating elements can appear on either side of an element.

div {clear:both; }Copy the code

Margin: 0 auto} {margin: 0 auto} {margin: 0 auto}} {margin: 0 auto} {margin: 0 auto}

9 Recommended learning sites

Other uses of HTML and CSS can be searched on the web. Here are two recommended self-study sites:

https://www.runoob.com/ Rookie tutorialCopy the code

https://www.w3school.com.cn/  W3School
Copy the code

10 summary

I think the most important thing in HTML is div layout, and the most important thing in CSS is box model, positioning and float. These need to be well understood, others do not need to memorize too much, if you forget to go to the Internet to search.