Objective: To master the basic knowledge of HTML and CSS, and be able to use HTML and CSS proficiently to write pages

Note before the task: The content of section 1-6 of this task is for those who have no basic knowledge. If you already have some basic knowledge, you can skip the previous content that you feel sure you have mastered. For those who have no basic knowledge, one day is recommended for section 1-5 and two to three days for section 6.

1. Build your first web page

In this page, you need the following:

  • A level 1 title that says your Github account
  • An unordered list of 2 items, each of which is a link totask0001.htmlAnd your Twitter (or whatever)
  • A secondary title, casual (no illegal, reactionary, pornographic, etc.)
  • One paragraph, optional (no illegal, reactionary, pornographic, etc.)
  • An image (not illegal, reactionary, pornographic, etc.).

Expected effect:

Task Analysis:

  1. Insert your Github account in the H1 tag.
  2. Note that the dots at the beginning of the paragraph are out of order. Use ul, LI tags. Insert link because use a tag.
  3. The secondary title tag is H2.
  4. The paragraph is labeled P.
  5. Tag the image as IMG and insert a link to the image in SRC within the tag.

Final code:

<h1>Uris863</h1>
<ul>
<li><a href="task0001.html">HomePage</a></li>
<li><a href="https://juejin.cn/user/369882145764535">Blog</a></li>
</ul>
<h2>This is a secondary heading</h2>
<p>This is my first HTML page, and I have a paragraph here</p>
<img src="./img/1.png" alt="">
Copy the code

End result:

2. Add style to your web pages

Learn how CSS works below, then create a file called Task0001.css and introduce it into task0001.html, then do something to make task0001.html a bit more fancy:

  • Make the text color of the level 1 title blue
  • The text size of the secondary heading becomes14px
  • The text size of the paragraph becomes12pxThe text color is yellow with a black background color
  • The picture has a red one,2pxThe frame of coarse

Expected effect:

Task Analysis:

  1. Create a task001. CSS file and introduce it in the HEAD area of the HTML file with the link tag.
  2. Add color and assign to the H1 tag in the CSS file.
  3. Add font size to the H2 tag and assign a value
  4. Add font size, color, and background-color to the p tag and assign values.
  5. Add a border to the img tag and assign a value.

Final code:

h1 {
    color: blue;
}

h2 {
    font-size: 14px;
}

p {
   font-size: 12px;
   color: yellow;
   background-color: black;
}

img {
    border: 2px solid red;
}
Copy the code

End result:

3. Relax a little

Take a look at the history of HTML and CSS and see what happened with HTML4 and 5

At its core, HTML is a fairly simple, disparate markup language that can be applied to fragments of text to give them different meanings in a document (is it a paragraph? Is it a list of items? Is it a form? , structure the document as logical blocks (does the document have headers? There are three columns, right? Is there a navigation menu?) , and can embed pictures, images and other content into the page.

Cascading Style Sheets (CSS) are the code that adds Style to web pages. Like HTML, CSS is not really a programming language, or even a markup language. It is a stylesheet language, which means that people can use it to selectively style HTML elements.

Click here to see the changes from HTML4 to HTML5.

4. The CSS

Please click here.

5. Enrich your page

Text-indent: set the front interval, 0, 30%, -3em; Text-transform: Capitalize, capitalize, uppercase, lowercase Text-decoration: underline, dotted, red; Text-align: define the alignment of content in a line. Use left, right, center, justify, etc. Word-spacing: word spacing Settings; White – space; Set to handle whitespace in elements, normal, no-wrap, etc. Color: the color of a font; The line – height: line height; The font, font; Font-family: allows you to set the font for selected elements by giving a sequential list of font names or font family names. Font size: The size of the font. Font-weight: the weight of a font. Font-face: Defines the external properties of a font.

6. Box model and positioning

  • There are two ways to achieve a background color ofredAnd width for960pxthe<DIV>Center in the browser
  • Some rounded rectangles are complicated and cannot be directly used with border-radius. Please implement a reusable rounded rectangle with adaptive height and width without using border-radius
  • A three-column layout is implemented in two different ways, with the left and right portion of the width fixed, and the middle portion of the width adjusting to the browser width
  • Implement a floating layout where the number of blue containers in each row of the red container changes with the width of the browser

Task Analysis:

  1. To centralize the div element in the browser:

Using absolute positioning, set the values of the four directions to 0, and set the margin to auto. Since the width and height are fixed, the corresponding directions are evenly divided, and the horizontal and vertical directions can be centered. Using absolute positioning, position the top left corner of the element to the center of the page with top:50% and left:50%, and then adjust the center point of the element to the center of the page with margin negative values. Using flex layout, the container is centered vertically and horizontally with align-items: Center and context-Cotent: Center, and then its children can be centered vertically and horizontally as well. 2. Rounded rectangles that do not apply to border-radius: link. 3. Three-column layout:

.container{ display: flex; height: 300px; } .left{ width: 100px; background-color: red; } .middle{ flex: 1; background-color: green; } .right{ width: 100px; background-color: blue; } <div class="container"> <div class="left">qqq</div> <div class="middle">qqq</div> <div class="right">wwww</div> </div> Or.container{display: flex; height: 300px; } .left { width: 100px; flex: 0 0 100px } .middle { flex: 1 1 auto; } .right { width: 100px; flex: 0 0 100px }Copy the code
  1. The number of containers varies with the browser width:
<div id="float-container">
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
</div>

#float-container {
    background-color: red;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.float-element {
    float: left;
    width: 50px;
    height: 30px;
    background-color: blue;
    margin: 10px;
}
Copy the code