search
HomeWeb Front-endHTML TutorialThe basic uses of html include links, style sheets, span and div, etc._HTML/Xhtml_Web page production

1. Links
Hypertext links in HTML are very important. The basic format is as follows:

Link text

1. Local link
①Absolute road strength:
Absolute road strength links to local pictures
②Relative road strength
Relative road strength links to local pictures
③ Link to the upper-level directory

Link to the upper-level directory

2. URL link
Format: protocol name: //host.domain name/roadjin /filename
Protocols include:
file local system file
http WWW server
ftp ftp server
telnet TELNET based protocol
mailto email
news Usenet news group
gopher GOPHER server
wais WAIS server

Such as: Baidu

3. Directory link
First set a certain paragraph as the link position, format For:

Then call the file in this link part and define the link:
Link text
Of course, if you jump within a file, the file name You can omit it and don’t write it.

2. Multi-view window FRAMES
HTML files designed using the FRAMES structure can divide the entire window into several independent small windows. Each small window can load different files and can communicate with each other.
1. Basic structure:







...


2. Size settings of each window
We divide the window into several pieces, using the ROWS attribute for horizontal division and vertical division Using the COLS attribute, the size of each block can be implemented by the values ​​of these two attributes.

The value of
# is a pair of strings enclosed in quotation marks. The numbers in the string represent the size of each window, separated by commas, where The number can also be replaced by "*", indicating that the size is automatically allocated by the browser. For example,


Evenly distribute the windows beyond 100 pixels
3. Interaction between windows
①The src attribute of the frame is used to specify the link content, the name attribute specifies the name of the window, and the target attribute is used to specify which window the linked file appears in. Its value can be the name defined by name, or it can be the following four types of values:
Display A new window
Displayed in the same window
Displayed in the window of the previous file in Frameset
Displayed in the entire browser window
②Other properties of frame
#=yes,no
frameborder specifies the setting of each window border: yes means there is a border, no means no border

The value of
# is the pixel point. The properties are used to set the width of the top, bottom, left and right borders of the window. If not set, the browser will automatically determine it.

#=yes,no,auto
Scroll bar setting, yes means yes, no means no, auto means automatically set by the browser, the default value is auto.


The noresize attribute specifies that the user cannot resize the frame. By default, frames can be resized by dragging the "walls" between them, and this property locks the size of the frames.

3. Style sheet
1. The most important role of style sheet is to provide a method to keep the style of all web pages consistent.
The three levels of style sheets, in order from low level to high level, are:
①. Built-in (inline) style sheet: applicable to the content of a single element
②. Document level (document level) style sheet : Applicable to the main body of the entire document
③. External (external) style sheet: Can be applied to the main body of multiple documents
When used, if a conflict occurs, the low-level style sheet has priority in use. .
2. Issues to note when using CSS:
① Some browsers may not support certain attribute values. In this case, the browser will either ignore these attribute values ​​or replace them with an optional value.
②The built-in style only adapts to a single element, which actually violates the original design intention of the style sheet, so it should be used with caution.
③Document level style description appears in the header of the document and applies to the entire body of the document. Therefore, this is how the overall style of website construction can be kept consistent.
④The external style sheet is not part of the document in which it is used. The external style sheet needs to be stored separately and must be explained when using it. External style sheets can be written into some text files using the MIME type text/css. They can be stored in any computer on the Internet. The browser obtains the external style sheet just like obtaining the document. The element at the head of a web page can also be used to specify an external style sheet. In , the rel attribute is used to specify the relationship between the linked document and the document containing the link, and the href attribute is used to specify the style sheet document. URL address. Such as


4. Use of span and div

In some cases, some special font attributes are required It only applies to part of the text of the entire paragraph, such as setting a certain word or phrase to a different font or background, etc. This is done by using the element, for example:

I like programming very much, it is a very pleasant thing.



Usage of

In web pages, sections are a very common form. Each section consists of several paragraphs. If in the design, it is hoped that not only each paragraph can be Styling sections in web pages. At this time, you can use
. Its main purpose is to specify the appearance display details of a certain section or area in the web page.
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
HTML, CSS, and JavaScript: Examples and Practical ApplicationsHTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the  tag? Why is this important?How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureHTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentHTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.