introduce

HTML and CSS are the two most basic technologies in front-end development, and they are the core of building and beautifying web pages. If you are a front-end novice, don’t worry, this article will provide you with the basic knowledge of HTML and CSS, allowing you to easily get started with front-end development.

Part 1: HTML Basics

1. What is HTML? HTML, the full name of Hypertext Markup Language (HyperText Markup Language), is a markup language used to describe the structure of web pages. It uses tags to define sections of a web page.

2. HTML document structure
A simple HTML document consists of the following basic tags:

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 在此处添加页面内容 -->
</body>
</html>

<!DOCTYPE html> : Declare the document type, indicating that HTML5 is used for writing.
<html> : The root element of the entire HTML document.
<head> : Contains information related to the document, such as title, charset, etc.
<title> : Defines the title of the webpage, displayed on the tab page of the browser.
<body> : Contains the main content of the web page.

3. Commonly used HTML tags

<h1> to <h6> : Heading tags, used to define different levels of headings.
<p>: Paragraph tags, used to define paragraph text.
<ul> and <ol>: Unordered list and ordered list tags, used to create a list of items.
<li>: List item tag, used inside <ul> or <ol>, defines each list item.
4. HTML attributes
HTML tags can use attributes to provide more information. For example, the <img> tag is used to insert images:

<img src="图片地址" alt="图片描述">

srcAttribute: Specify the URL address of the picture.
altAttribute: Display alternative text when the image cannot be displayed.

5. Hyperlinks and images

Create hyperlinks:

<a href="链接地址">链接文本</a>

Insert picture:

<img src="图片地址" alt="图片描述">

Part Two: CSS Basics

1. What is CSS?
CSS, the full name of Cascading Style Sheets (Cascading Style Sheets), is a style sheet language used to control the style and layout of web pages. It allows us to beautify web pages to make them more attractive.

2. Application of CSS styles

Introduce CSS stylesheets in HTML documents:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Write CSS styles in the styles.css file.

3. CSS selectors

Label selector:

p {
    /* 在此处添加样式 */
}

class selector:

.classname {
    /* 在此处添加样式 */
}

ID selector:

#idname {
    /* 在此处添加样式 */
}

4. Text Styles

Set font, size and color:

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

Text alignment:

h1 {
    text-align: center;
}

5. Box model and layout

The box model includes a content area, padding, borders, and margins:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

Floating elements:

.float-left {
    float: left;
}
.float-right {
    float: right;
}

epilogue

HTML and CSS are the basis of front-end development. This article introduces the basic structure of HTML documents, common tags and attributes, as well as the application of CSS styles and common selectors. I hope this introductory guide can help you quickly get started with front-end development and lay a solid foundation for your learning journey.

appendix

Great resources for further learning about HTML and CSS:

MDN Web Documentation
W3Schools Online Tutorials
CodePen online editor

I wish you a happy front-end learning and continuous progress!

HTML/CSS Basics Tutorial: A Beginner's Guide

introduce

Part 1: HTML Basics

Part Two: CSS Basics

epilogue

appendix

Guess you like