HTML Basis

最新推荐文章于 2022-10-19 19:48:48 发布

Hadjshell

最新推荐文章于 2022-10-19 19:48:48 发布

阅读量100

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_40942772/article/details/120574978

版权

本文档提供了一份HTML基础教程，详细介绍了HTML的性质，如何创建HTML文件，标签语法，包括块级和内联元素的区别，以及页面结构、头部、主体部分的构成。还涵盖了常见的HTML元素如标题、段落、链接、表单、图像等，并强调了HTML在网页设计中的重要作用。

摘要由CSDN通过智能技术生成

Author: David Zhang
Version: 1.0
Date: 30/9/2021

HTML Notes

Based on HTML Crash Course

Intro

Hyper Text Markup Language
NOT a programming language
Building blocks of the Web

Creating a HTML file

Does NOT need a server
file with .html extension
Runs in a web browser
index.html is the root / home page of a website by default

Tag Syntax

<tagname>content</tagname>

<h1>About us</h1>
<p>This is a paragraph</p>
<br/>
<br>(fine in HTML5)

Element name surrounded by angle brackets
Normally come in pairs(start and end tags)
Self closing tag with one tag

Inline vs. Block Level Elements

Inline:

Do not start on a new line
Take only the necessary width
eg. <span>, <img>, <a>

Block:

Start on anew line
Take full width available
eg. <div>, <h1>, <p>, <form>

HTML Page Structure

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>My first heading</h1>
        <p>My first paragraph</p>
    </body>
</html>

Doctype

Explains what type of document the page is
HTML 5, HTML 4, XHTML, etc

Head

Has nothing to do with the output in the browser
Page title
Links to CSS files and JavaScript files
Metadata: descriptions and keywords

Body

Actual markup displayed in the browser

Tags

Comment

<!-- Comments -->

Heading

<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>

<!-- not a heading, just small text -->
<small>text</small>

Paragraph

<p>
    Some content
</p>

Bold and Emphasis

<p>
    Some content
    <strong>some content</strong>
    <em>some content</em>
</p>

Link

<!-- Local link -->
<a href="smth.html">smth</a>

<!-- external link -->
<!-- in this way it will leave your site -->
<a href="https://google.com">Google</a>

<!-- in this way it will save your site-->
<a href="https://google.com" target="_blank">Google</a>

Tag Attributes

<tagname attrname="attrvalue">content</tagname>

All tags can have attributes
Provide information about an element
Placed within the start tag
Key/value pairs(id=“someid”)

List

<!-- unorder list -->
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

<!-- order list -->
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

Table

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        	<td>David</td>
            <td>david@smth.com</td>
            <td>25</td>
        </tr>
        <tr>
        	<td>John</td>
            <td>john@smth.com</td>
            <td>35</td>
        </tr>
    </tbody>
</table>

Form

<form action="process.php" method="POST">
    <div>
        <label>First Name</label>
    	<!-- placeholder can show some content without deleting it when input -->
        <input type="text" name="firstName" placeholder="Enter your first name">
    </div>
    <div>
        <label>Last Name</label>
    	<input type="text" name="lastName">
    </div>
    <div>
        <label>Email</label>
    	<input type="email" name="email">
    </div>
    <div>
        <label>Message</label>
        <textarea name="message"></textarea>
    </div>
    <div>
        <label>Gender</label>
        <select name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
    </div>
    <div>
        <label>Age:</label>
        <!-- predefined value -->
        <input type="number" name="age" value="30">
    </div>
    <div>
        <label>Birthday:</label>
        <input type="date" name="birthday">
    </div>
    <!-- a button -->
    <input type="submit" name="submit" value="Submit">
</form>

Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

HTML can create the actual look of the form but cannot add functionality to the form

Line Break

<br>

<!-- Horizontal rule -->
<hr>

Button

First form is inside a <form>

<button click="someFunction">Click Me</button>

Use programming language to implement functionality and make it dynamic

Image

<a href="imageRoot">
	<img src="imageRoot" alt="somethingGoesWrong" width="200" height="500">
</a>

Self closing
alt attributes can show the text if something goes wrong with the image
With a link to the image you can click the image to open it in the browser

Quotation

<!-- not show the actual site -->
<blockquote cite="https://smth.com">
    content
</blockquote>

<p>
    The <abbr title="smth">Smth</abbr> is awesome
</p>

<!-- 斜体 -->
<p>
    <cite>HTML Notes</cite> by David
</p>

HTML Semantic Tags

A semantic element clearly describes its meaning to both the browser and the developer

Used to construct the layout

<header></header>
<footer></footer>
<aside></aside>
<main></main>
<article></article>
<nav></nav>
<section></section>
<details></details>

<header id=""></header>

Can give a id to use CSS

Meta Tags

<head>
    <meta name="description" content="Awesome notes by David">
    <meta name="keyword" content="web design blog, web dev blog, hadjshell">
</head>