search
HomeWeb Front-endHTML TutorialSummary of HTML basic knowledge (1)_html/css_WEB-ITnose

Overview
HTML is a language that combines content and content display form. It controls the content display form mainly through the attributes of tags (elements), because it controls the "content display form" There were many disadvantages, so CSS appeared later, which is equivalent to the attributes of HTML tags.

HTML element in the form of
empty element. Example:

An empty element with attributes. Example:



An element with content. Example: http://blog.csdn.net/jiben2qingshan
An element with content and attributes. Example: http://blog.csdn.net/jiben2qingshan
Note: For tags like
, we’d better write like this

Link
Internal link
Theory
1. Create a named anchor, its syntax:
2. Establish a link (link to the corresponding anchor), its syntax:

Example (main code):
AClick this and it will jump to B

; BThis is the position after the jump
Purpose
In the same webpage; open the specified location of the specified webpage (href="index.html#1", which can be an absolute address)

External link

                                                                                                                                                  E-mail
                                                                                                                                                                                                                                                                                                 >            Click here to link to the corresponding FTP server (generally you need to enter your username and password to access the FTP server)
Link to Telnet

Click here to link to the corresponding Telnet server

target attribute
Values: _blank, open the linked document in a new window; _self, by default, open the linked document in the same frame; _parent, open the linked document in the parent frame; _top, open the linked document in the entire window Link document; framename, open the linked document in the specified frame

Download file

If the hyperlink points not to a web page file, but to other files such as zip files, etc., click the link The file will be downloaded when Song name

Picture
No picture to display Chinese characters
Explanation of img note attributes
src: The address of the image
alt: When the image is not displayed, it appears at this location ( (originally displayed picture) text
title: the text that appears after the mouse is moved over the picture
border: the side width of the picture, the default is 0, the color of the border is black, if it is a hyperlink, it will be the same as the link text color Consistent
vspace: vertical margin, the distance between the picture and its nearest element in the vertical direction
hspace: horizontal margin, the distance between the picture and its nearest element in the horizontal direction
width, height: If the width and height attributes are not written, the image will be displayed according to its original size, or if it is, it will be displayed according to the size of their values ​​
align: the layout between the image and "text"
bottom: picture The bottom of the picture is aligned with the bottom of the text of the current line
top: The bottom of the picture is aligned with the top of the text of the current line
middle: The horizontal center line of the picture is aligned with the center line of the text of the current line
left: The picture is left aligned
Right: Align the image to the right
Center: Align the horizontal center line of the image with the text center line of the current line (test center and middle on your own for the same effect)

Note: Addresses are generally written as relative addresses, try not to write absolute addresses; "../" represents the directory one level above the current directory, and "../../" represents the one level above the current directory.

Table Table is an indispensable tool for web page layout. Tags commonly used to create tables:

, ,
,
and . Main operation objects: tables, rows, cells,

                                                                                                                                                                                   > Width, height: Set the width and height of the table. The value can be a number or a percentage (the length and width of the table are relative to the browser and will change as the browser size changes). If the value is large If it is, the system will automatically allocate blank positions according to the amount of data. If its value is very small, the system will mainly display the complete data, and the setting value will automatically become invalid; if its attribute value is not specified, the system will automatically calculate the field data in the table. The width and height of the table are displayed in the smallest unit that can accommodate the data.

bgcolor, background: Set the background color and background image of the table. Both properties are used to set the background. Usually only one of them is designed. If both are set, the background image will be displayed.

Border, bordercolor: Set the table border width and table border color.

Border defaults to 0, and the browser does not display any borders (around the table and cells). Border can only affect the size of the borders around the table, but does not affect the size of the cell borders;

The default color of bordercolor is black, and the color of the table border (surroundings and cells) is changed. Center alignment within the page range, but the alignment of the cells in the table will not be changed. If you want to change the alignment of the cells, you need to define

cellspacing separately in the row, column or cell. cellpadding: Set the distance between each cell inside the table; set the distance between the cell border and the content of the cell. By default, the content of the cell will be close to the border of the table.

Example (core code):

height="50%"

bgcolor="red"

background="2.jpg "

border="5"

bordercolor="red"

align="center"

cellspacing="20"

cellpadding="20">

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),