HTML learning punch in_ Day3

Learn HTML - punch in!!! Day3

1,HTML CSS

1.1. HTML style CSS

**Function: * * CSS is used to render the style of HTML element tags

Example:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>
    Rookie tutorial(runoob.com)
</title> 
</head>
<body>
    <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
    
    <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
        
    <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>


    <h3>
        Look! Styles and colors
    </h3>
    
    <div style="letter-spacing:12px;">
        Manipulate Text
    </div>
    
    <div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">
    Boxes
</span>
</div>

<div style="color:#000000;">and more...</div>

</div>

</body>
</html>

1.2. How to use CSS

CSS can be added to HTML in the following ways:

Inline styles use the style attribute in HTML elements
The internal style sheet uses the < (angle brackets) style > element in the < (angle brackets) head > area of the HTML document header to contain CSS
External references use external CSS files

The best way is to reference CSS files externally.

1.3. Inline style

Inline styles can be used when special styles need to be applied to individual elements. The way to use inline styles is to use style properties in related labels. Style properties can contain any CSS property.

Example: shows how to change the color and left outer margin of a paragraph

<p style="color:blue;margin-left:20px;">
    This is a paragraph
</p>

1.3.1. HTML style example - background color

Background color attribute * * (background color) * * defines the background color of an element:

example:

<body style="background-color: yellow;">
<h2 style="background-color:red;">
    This is a paragraph.
</h2>

<p style="background-color: green;">
    This is a paragraph.
</p>
</body>

1.3.2. HTML style example - font, font color, font size

We can use the font family, color and font size attributes to define the font style:

example:

<h1 style="font-family:verdana;">
    A title
</h1>

<p style="font-family: Arial;color: red;font-size: 20px;">
    A short circuit.
</p>

Instead of using the < (angle brackets) font (angle brackets) > label, it is now common to define text styles using the font family, color, and font size attributes.

1.3.3. HTML style instance - text alignment

Use the text align attribute to specify the horizontal and vertical alignment of the text:

example:

<h1 style="text-align: center; ">
    Centered title
</h1>

<p>
    This is a paragraph.
</p>

1.4. Internal style sheet

When a single file needs special styles, you can use internal style sheets. You can define an internal style sheet in the < (angle brackets) head > > section through the < (angle brackets) style > label:

example:

<head>
<style type="text/css">
    body {background-color: yellow;}
    p {color: blue;}
</style>
</head>

1.5. External style sheet

When styles need to be applied to many pages, external style sheets will be ideal. Using external style sheets, you can change the appearance of the entire site by changing a file.

example:

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

1.6. HTML style tags

label	describe
< (angle bracket) style >	Define text style
< (angle brackets) link >	Define resource reference address

2. HTML image

2.1. Image label (< (angle brackets) img (angle brackets) >) and source attribute (Src)

In HTML, the image is defined by the < (angle brackets) img (angle brackets) > tag.
< (angle brackets) img (angle brackets) > is an empty label that contains only attributes and has no closed label.
To display an image on a page, you need to use the source attribute (scr), which means "source".

Define the syntax of the image:

<img src="url" alt="some_text">

The URL refers to the location where the image is stored. If the image named "1_Lina.jpg" is located in the images directory of www.author.com, its URL is http://www.author.com/images/1_Lina.jpg.

The browser displays the image in the document where the image label appears. If you place the image label between two paragraphs, the browser displays the first paragraph, then the picture, and finally the second paragraph.

2.2 Alt attribute

Function: define a string of prepared replaceable text for the image

The value of the replacement text attribute is user-defined

<img src="boat.gif" alt="Big Boat">

When the browser cannot load the image, the replacement text attribute tells readers what they have lost. At this point, the browser will display this alternative text instead of an image. It is a good habit to add replacement text information to the images on the page, which helps to display the information better, and it is very beneficial for those who use plain text browsers.

2.3. Set the height and width of the image

The height and width properties are used to set the height and width of the image. Property defaults in pixels:

<img src="1_Lina.jpg" alt="1_Lina Photo" width="304" height="228">

Note: it is a good habit to specify the height and width of the image. If the height and width of the image are specified, the specified size will be retained when the page is loaded; If the size of the image is not specified, the overall layout of the HTML page may be damaged when loading the page.

2.4 precautions

If an HTML file contains ten images, 11 files need to be loaded in order to display the page correctly. Loading pictures takes time, so our suggestion is: use pictures with caution.
When loading the page, pay attention to the path of inserting the page image. If the image position cannot be set correctly, the browser cannot load the image, and the image label will display a broken image.

3. HTML table

3.1 HTML table

The table is defined by the < (angle brackets) style > label.

Each table has several rows (defined by the < (angle brackets) tr (angle brackets) > label)
Each row is divided into several cells (defined by the < (angle brackets) td (angle brackets) > label).
The letter td refers to table data and the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, tables, horizontal lines, tables, etc.

Table example:

<table border="1">
        <tr>
            <td>
                row 1, cell 1
            </td>
            <td>
                row 1, cell 2
            </td>
        </tr>
        <tr>
            <td>
                row 2, cell 1
            </td>
            <td>
                row 2, cell 2
            </td>
        </tr>
    </table>

3.2. Border attribute of HTML table

If the border attribute is not defined, the table will not display borders. Sometimes this is useful, but most of the time, we want to display borders. Use the border attribute to display a table with borders:

<table border="1">
        <tr>
            <td>
                row 1, cell 1
            </td>
            <td>
                row 1, cell 2
            </td>
        </tr>
</table>

3.3. HTML table header

The table header is defined using the < (angle brackets) th (angle brackets) > label. Most browsers display the header as bold centered text:

 <table border="1">
        <tr>
            <th>
                Header 1
            </th>
            <th>
                Header 2
            </th>
        </tr>
        <tr>
            <td>
                row 1, cell 1
            </td>
            <td>
                row 1, cell 2
            </td>
        </tr>
        <tr>
            <td>
                row 2, cell 1
            </td>
            <td>
                row 2, cell 2
            </td>
        </tr>
    </table>

3.4. HTML borderless table

3.5. HTML table cells with titles

4. HTML list

HTML supports ordered, unordered, and defined lists.

4.1. HTML unordered list

An unordered list is a list of items marked with bold dots. An unordered list uses the < (angle brackets) ul (angle brackets) > label:

<ul>
    <li>
        Coffee
    </li>
</ul>
<ul>
    <li>
        Milk
    </li>
</ul>

4.2. HTML ordered list

Similarly, an ordered list is also a list of items, which are marked with numbers. There is a sequential list starting with the < (angle brackets) ol (angle brackets) > label. Each list item starts with the < (angle brackets) li (angle brackets) > label. List items are marked with numbers:

<ol>
	<li>
		Coffee
	</li>
	<li>
		Milk
	</li>
</ol>

4.3. User defined list

A user-defined list is not only a list of items, but also a combination of twenty items and comments. The user-defined list starts with < (angle brackets) dl (angle brackets) > tag, and each user-defined list item starts with < (angle brackets) dt (angle brackets) > tag. The definition of each user-defined list item starts with < (angle brackets) dd (angle brackets) >:

<dl>
	<dt>
    	Coffee
    </dt>
        <dd>
            - back hot drink
        </dd>

    <dt>
    	Milk
    </dt>
        <dd>
            - white cold drink
        </dd>
</dl>

Note: paragraphs, line breaks, pictures, links, and other lists can be used inside list items.

5. HTML block

5.1. HTML < (angle brackets) div (angle brackets) > and < (angle brackets) span (angle brackets) >

HTML can combine elements through < (angle brackets) div (angle brackets) > and < (angle brackets) span (angle brackets) >. Most HTML elements are defined as block level elements or inline elements.

5.2. HTML block elements

When a block level element is displayed in the browser, it usually starts (and ends) with a new line.

<h1>,<p>,<ul>,<table>

5.3. HTML inline elements

Inline elements usually do not start with a new line when displayed.

<b>,<td>,<a>,<img>

5.4. HTML < (angle brackets) div (angle brackets) > element

HTML < (angle brackets) div (angle brackets) > elements are block level elements that can be used to combine containers of other HTML elements< (angle brackets) div > elements have no specific meaning. In addition, because it is a block level element, the browser displays a line break before and after it. If used with CSS, the < (angle brackets) div (angle brackets) > element can be used to set style attributes for large blocks of content.

Another common use of the < (angle brackets) div (angle brackets) > element is document layout. It replaces the old-fashioned method of using tables to define layouts. Using the < (angle brackets) table > element for document layout is not the correct use of tables< The (angle brackets) table > element is used to display tabulated data

5.5. HTML < (angle brackets) span (angle brackets) > element

The HTML < (angle brackets) span (angle brackets) > element is an inline element, which can be used as a container for the composition. The < (angle brackets) span (angle brackets) > element also has special meaning. When used with CSS, the < (angle brackets) span (angle brackets) > element can be used to set style properties for some text.

5.6 group label

label	describe
< (angle brackets) div >	Defines the area of the document, block level
< (angle brackets) span (angle brackets) >	Used to combine inline elements in a document

6. HTML layout

Web page layout is very important to improve the appearance of the website. Carefully design the web page layout.

6.1 web page layout

Most websites arrange content into multiple columns. You can use the < (angle brackets) div (angle brackets) > or < (angle brackets) table (angle brackets) > element to create multiple columns. CSS is used to position elements, or to create a rich look for the background and color of the page.

6.1. Use the < (angle brackets) div (angle brackets) > element

Div elements are block level elements used to group HTML elements. The following example uses five div elements to create a multi column layout:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
    1_Lina
</title>
</head>
<body>

    <div id="container" style="width:500px">

        <div id="header" style="background-color: #FFA500;">

            <h1 style="margin-bottom:0;">
                Main web resources
            </h1>
        </div>

        <div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
            <b>
                menu
            </b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>

        <div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left;">
            The content is here
        </div>

        <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">
            copyright @ 1_Lina
        </div>
</body>

</html>

6.2. Use of forms

Using HTML table tags is an easy way to create layouts. Most sites can use div or table elements to create multiple columns. CSS is used to locate elements or create a background and colorful appearance for the page:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>
    1_Lina
</title> 
</head>
<body>
 
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>
                Main page title
            </h1>
        </td>
    </tr>

    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <b>
                menu
            </b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
            The content is here
        </td>
    </tr>
    
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            copyright @ 1_Lina
        </td>
</tr>
</table>
 
</body>
</html>

6.3 useful tips

The biggest advantage of using CSS is that if the CSS code is stored in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages.
Because creating advanced layouts is time-consuming, using templates is a quick option. Many free website templates can be found through search engines. You can use these pre built website layouts and optimize them.

6.4 layout label

label	describe
< (angle brackets) div >	Define document blocks, block level
< (angle brackets) span (angle brackets) >	Define span to combine inline elements in a document

 <td colspan="2" style="background-color:#FFA500;text-align:center;">
        copyright @ 1_Lina
    </td>

```

6.3 useful tips

The biggest advantage of using CSS is that if the CSS code is stored in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages.
Because creating advanced layouts is time-consuming, using templates is a quick option. Many free website templates can be found through search engines. You can use these pre built website layouts and optimize them.

6.4 layout label

label	describe
< (angle brackets) div >	Define document blocks, block level
< (angle brackets) span (angle brackets) >	Define span to combine inline elements in a document

Keywords: C Front-end computer networks

Added by flyersun on Mon, 29 Nov 2021 20:48:33 +0200

Programming VIP

HTML learning punch in_ Day3

Learn HTML - punch in!!! Day3

1,HTML CSS

1.1. HTML style CSS

1.2. How to use CSS

1.3. Inline style

1.3.1. HTML style example - background color

1.3.2. HTML style example - font, font color, font size

1.3.3. HTML style instance - text alignment

1.4. Internal style sheet

1.5. External style sheet

1.6. HTML style tags

2. HTML image

2.1. Image label (< (angle brackets) img (angle brackets) >) and source attribute (Src)

2.2 Alt attribute

2.3. Set the height and width of the image

2.4 precautions

3. HTML table

3.1 HTML table

3.2. Border attribute of HTML table

3.3. HTML table header

3.4. HTML borderless table

3.5. HTML table cells with titles

4. HTML list

4.1. HTML unordered list

4.2. HTML ordered list

4.3. User defined list

5. HTML block

5.1. HTML < (angle brackets) div (angle brackets) > and < (angle brackets) span (angle brackets) >

5.2. HTML block elements

5.3. HTML inline elements

5.4. HTML < (angle brackets) div (angle brackets) > element

5.5. HTML < (angle brackets) span (angle brackets) > element

5.6 group label

6. HTML layout

6.1 web page layout

6.1. Use the < (angle brackets) div (angle brackets) > element

6.2. Use of forms

6.3 useful tips

6.4 layout label

6.3 useful tips

6.4 layout label

Popular Keywords