Home Web Front-end HTML Tutorial HTML self-study journey (1) Basic elements and attributes exercises (self-written code)_HTML/Xhtml_Web page production

HTML self-study journey (1) Basic elements and attributes exercises (self-written code)_HTML/Xhtml_Web page production

May 16, 2016 pm 04:40 PM
element Attributes practise

I followed the tutorial on W3school. I personally think the tutorial is very good. There are small exercises in each section. Come on!
I typed the code myself. Some books are against writing code by myself, but I think it is beneficial to write it myself because I have no foundation. Hehe, I have different opinions. .
Exercise 1:

Copy the code
The code is as follows:



This is heading 1


This is heading 1


This is heading 1


This is heading 1


This is heading 1

This is heading 1


This is the first paragraph



This is the link area

This is baidu link


< a href="http://www.w3school.com.cn">This is w3school link

This is the picture area



This is the table area









Month Savings
January $100


Line break function

This sentence
break a line here



This paragraph has a lot of
blank lines
or spaces
But the browser automatically ignores them
There is code

 <br>while(true) <br>{ <br>sum=a b; <br>return sum; <br>cout<<sum; <br>} <br>






Exercise 2
:


Copy the code

The code is as follows:



This text is bold

This text is strong

This text is big

This text is small ;/em>

This text is italic

This text containssubscript ;sup>Superscript


 <br>This is preformatted text<br>Haha<br>You can output spaces<br>Empty lines <br>

<br>while(true) <br>{ <br>computer code; <br>} <br>


Sample text

Computer variable


Address practice:

Tianjin SHUDIP

FERT R

ABC (receive)

Postcode: 123456


Abbreviation practice

etc.

www.

Text direction exercise//That function is not supported here. Text should be output from right to left

Here is some text

Block quotation practice

This is a long quotation
This is a long quotation. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote
This is a long quote Quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote

This is a short quote
Short quote wow, short quote

Delete or add text effect practice

A dozen hastwentyOh






It must be super simple, hey, stick with it!
Statement of this Website
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

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

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to practice typing with Kingsoft Typing Guide - How to practice typing with Kingsoft Typing Guide How to practice typing with Kingsoft Typing Guide - How to practice typing with Kingsoft Typing Guide Mar 18, 2024 pm 04:25 PM

Nowadays, many friends like to use Kingsoft Typing Assistant, but the typing speed seriously affects work efficiency, so I teach you to practice typing speed. So how to use Kingsoft Typing Assistant to practice typing? Today, the editor will give you a tutorial on how to practice typing numbers with Kingsoft Typing Assistant. The following is described, I hope it will be helpful to everyone. First, open the Kingsoft typing software, then click the (Getting Started) button with your mouse, then click the (Number Keys) button in a new window, then click the (Start from Scratch) button below to practice, or click the (Test Mode) button. , just enter numbers for practice. In addition, Kingsoft Typing Assistant has other functions that can help you practice typing better. 1. Select practice mode: On the software interface, you can see that there are different practice modes, such as &quot;New

Python's dir() function: View the properties and methods of an object Python's dir() function: View the properties and methods of an object Nov 18, 2023 pm 01:45 PM

Python's dir() function: View an object's properties and methods, specific code example required Summary: Python is a powerful and flexible programming language, and its built-in functions and tools provide developers with many convenient features. One of the very useful functions is the dir() function, which allows us to view the properties and methods of an object. This article will introduce the usage of the dir() function and demonstrate its functions and uses through specific code examples. Text: Python’s dir() function is a built-in function.

How to practice Wubi typing for beginners - Wubi input method typing practice How to practice Wubi typing for beginners - Wubi input method typing practice Mar 18, 2024 pm 06:30 PM

Wubi typing, also known as Wubi input method, is an efficient Chinese character input method. For beginners, mastering Wubi typing requires a certain amount of time and patience. Below, the editor has compiled the learning methods for Wubi typing beginners. Let’s take a look! 1. Understand the principles of Wubi font Wubi font is a type of font based on Input method for strokes and radicals. Each Chinese character can be composed of different strokes and radicals. Therefore, the key to learning Wubi font is to understand the combination rules of strokes and root characters. In the five-stroke font, there are five basic strokes: horizontal, vertical, left, right, and fold. These basic strokes can be combined into different radicals, which in turn can be combined into complete Chinese characters. 2. Learn the radicals and key positions. In Wubi font, each letter key corresponds to one or more radicals. therefore

bottom attribute syntax in CSS bottom attribute syntax in CSS Feb 21, 2024 pm 03:30 PM

Bottom attribute syntax and code examples in CSS In CSS, the bottom attribute is used to specify the distance between an element and the bottom of the container. It controls the position of an element relative to the bottom of its parent element. The syntax of the bottom attribute is as follows: element{bottom:value;} where element represents the element to which the style is to be applied, and value represents the bottom value to be set. value can be a specific length value, such as pixels

CSS transformation: how to achieve the rotation effect of elements CSS transformation: how to achieve the rotation effect of elements Nov 21, 2023 pm 06:36 PM

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

Introduction to the attributes of Hearthstone's Despair Thread Introduction to the attributes of Hearthstone's Despair Thread Mar 20, 2024 pm 10:36 PM

Thread of Despair is a rare card in Blizzard Entertainment's masterpiece &quot;Hearthstone&quot; and has a chance to be obtained in the &quot;Wizbane's Workshop&quot; card pack. Can consume 100/400 arcane dust points to synthesize the normal/gold version. Introduction to the attributes of Hearthstone's Thread of Despair: It can be obtained in Wizbane's workshop card pack with a chance, or it can also be synthesized through arcane dust. Rarity: Rare Type: Spell Class: Death Knight Mana: 1 Effect: Gives all minions a Deathrattle: Deals 1 damage to all minions

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles