Understanding HTML, CSS, and JavaScript
The three core technologies of frontend development are HTML, CSS, and JavaScript.
1. HTML - Web Page Content
1.1 Concept
HyperText Markup Language (HTML) is a standard markup language used to create web pages.
- It is not a programming language, but a markup language composed of various tags.
- It can describe text, graphics, animations, sounds, tables, links, etc.
- HTML runs in a browser and is parsed by the browser.
1.2 Basic Skeleton
An HTML file has a standard skeleton, which includes tags automatically generated when creating an HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.2.1 Tag Concepts
- HTML tags are keywords enclosed in angle brackets, e.g.,
<html>. - They usually appear in pairs, like
<head>...</head>. - The first tag is the start tag (opening tag), and the second is the end tag (closing tag).
1.2.2 Skeleton Tag Explanation
<!DOCTYPE html>: Declares this as an HTML file.<html lang="en">...</html>: The outermost container for all HTML content.lang="en"indicates the language (English). It can be changed tolang="zh"for Chinese.<head>...</head>: Contains metadata, scripts, styles, and the page title. Content inside head is not displayed.<meta charset="UTF-8">: Sets the character set (UTF-8 is universal).<title>Title</title>: Sets the page title.
<body>...</body>: Contains all visible content on the page.
1.3 Heading Tags
HTML headings are defined with <h1> to <h6>, with <h1> being the largest and <h6> the smallest. Each heading occupies its own line.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
1.4 Paragraph Tags
Paragraphs are defined with the <p> tag.
<p>Paragraph content...</p>
Using appropriate tags for content is called semantic markup, which can improve search engine ranking and click-through rates.
1.5 Comments
HTML comments are written as:
<!-- This is a comment -->
Comments are not displayed in the browser but help document the code.
1.6 Spaces and Line Breaks
- Space:
(non-breaking space) - Line break:
<br>
1.7 Attributes
HTML tags can have attributes that provide additional information about the element. Attributes are specified in name/value pairs like name="value" and are placed in the opening tag.
Example: <a href="http://www.baidu.com">Baidu</a>
1.7.1 id Attribute
The id attribute specifies a unique id for an HTML element. It must be unique within the document.
1.7.2 style Attribute
The style attribute allows inline CSS to style elements directly.
- Background color:
style="background-color:yellow" - Font family, color, size:
style="font-family:verdana;color:red;font-size:20px;" - Text alignment:
style="text-align:center"
1.8 Images
Images are inserted using the <img> tag. It does not have a closing tag.
<img src="path/to/image.jpg" width="104" height="142" title="Tooltip text" alt="Alternative text">
src: Path to the image file.widthandheight: Dimensions of the image (if not set, the original size is used).title: Tooltip text on hover.alt: Alternative text when the image fails to load.
1.9 Hyperlinks
Hyperlinks are created with the <a> tag.
<a href="http://www.baidu.com">Click here to go to Baidu</a>
href: Destination URL (can be a local path).- The content between
<a>and</a>is the displayed link text.
1.10 Divisions (div)
The <div> tag defines a division or section in an HTML document. Its used as a container for grouping elements and can be styled with CSS.
<div class="news">
<h2>News Title</h2>
<p>News content...</p>
</div>
1.11 Forms
Forms are created with the <form> tag and contain form elements like text inputs, radio buttons, checkboxes, etc.
Text Input
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Input Types
type="radio": Radio button.type="checkbox": Checkbox.checked="checked": Pre-selected.type="button": Button (requires JavaScript).type="reset": Resets form to default values.type="submit": Submits the form.placeholder="text": Placeholder text.type="text": Text input.type="password": Password input.
Single Select Dropdown
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Use selected="selected" to pre-select an option.
Multiple Select Dropdown
<select multiple="multiple" size="3">
<option value="apple">Apple</option>
<option selected="selected">Banana</option>
<option>Watermelon</option>
</select>
Radio Buttons
<form>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female
</form>
Textarea
<textarea>This is a text area.</textarea>
2. CSS - Styling and Layout
CSS is used to control the style and layout of web pages. It can be stored in external .css files to change the appearance of multiple pages simultaneously.
2.1 CSS Syntax
A CSS rule consists of a selector and one or more declarations.
selector {
property: value;
property: value;
}
Example:
h1 {
color: red;
font-size: 14px;
}
2.2 External CSS
To link an external stylesheet:
<link rel="stylesheet" type="text/css" href="mystyle.css">
For more CSS information, visit W3Schools.
3. JavaScript - Behavior and Interactivity
JavaScript makes web pages interactive. It can change content dynamically.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function changeHeader() {
document.getElementById("myHeader_1").innerHTML = "Congratulations!";
}
</script>
</head>
<body>
<h1 id="myHeader">Learning Frontend Basics</h1>
<h1 id="myHeader_1">Choice is More Important than Effort</h1>
<button onclick="changeHeader()">Click Me</button>
</body>
</html>
