HTML常用语法

标准HTML结构

1
2
3
4
5
6
7
8
9
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p></p>
</body>
</html>

<head>顶部界面，即浏览器标签栏的界面

<title>标题

<body>主体界面

定义段落

HTML注释

1
<!-- This is a comment -->

标题标签

1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

hello html

hello html

hello html

hello html

hello html
hello html

水平线标签

1
<hr>

换行

1
<p>This is<br />a para<br />graph with line breaks</p>

This is
a para
graph with line breaks

图片标签

1
<img src="..." width="..." height="...">

img

src可以写绝对路径和相对路径

./ 表示当前路径，可以省略

../ 表示当前路径的上一个路径

width和height分别可以写

width=”100px” 图片大小为100px

width=”80%” 图片占当前界面80%

标题样式

CSS引入方式

  1. 行内样式：写在标签的style属性中

    1
    <h1 style="xxx: xxx; xxx:xxx;">标题</h1>

  2. 内嵌样式：写在style标签中（可以写在页面任何位置上，但是通常写在head标签中）

    1
    2
    3
    4
    5
    6
    <style>
        h1{
            xxx: xxx;
            xxx: xxx;
        }
    </style>

  3. 外联样式：写在一个单独的.ccs文件中（需要通过link标签在网页中引入）

    1
    <link rel="stylesheet" href="css/news.css">

颜色表示

  1. 关键字

    1
    2
    3
    4
    5
    6
    7
    8
    <h4>
        hello html
    </h4>
    <style>
        h4{
            color: red;
        }
    </style>

    hello html

  2. rgb表示法

    1
    2
    3
    4
    5
    6
    7
    8
    <h4>
        hello html
    </h4>
    <style>
        h4{
            color: rgb(0,0,0);
        }
    </style>

  3. 16进制表示法

    1
    2
    3
    4
    5
    6
    7
    8
    <h4>
        hello html
    </h4>
    <style>
        h4{
            color: #ff0000;
        }
    </style>

如果想要更改正文的样式，则需要引入<span>标签，进行正文元素的更改

1
2
3
4
5
6
<span>hello java</span>
<style>
    span{
        color: beige;
    }
</style>

hello java

CSS选择器

选取需要设置样式的元素，分为

元素选择器

id选择器

类选择器

  1. 元素选择器

    1
    2
    3
    4
    5
    6
    7
    8
    元素名称{
    	color: red;
    }

    h1{
    	color: red;
    }
    <h1>Hello HTML</h1>

  2. id选择器

    1
    2
    3
    4
    5
    6
    7
    8
    #id属性值{
    	color: red;
    }

    #hid{
    	color: red;
    }
    <h1 id="hid">Hello HTML</h1>

  3. 类选择器

    1
    2
    3
    4
    5
    6
    7
    8
    .class属性值{
    	color: red;
    }

    .cls{
    	color: red;
    }
    <h1 class="cls">Hello HTML</h1>

超链接

1
<a href="..." target="...">xxx</a>

属性：

href：指定访问资源的url

target：指定在何处打开资源

_self：默认值，在当前页面打开

_blank：在空白页面打开

CSS属性

text-decoration 规定添加到文本的修饰，none表示定义标准的文本

color: 定义文本的颜色

HTML列表

  1. 无序列表

    无序列表始于 <ul> 标签。每个列表项始于 <li>

    1
    2
    3
    4
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
    • Coffee
    • Milk

  2. 有序列表

    有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

    1
    2
    3
    4
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
    1. Coffee
    2. Milk

  3. 定义列表

    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以

    开始

    1
    2
    3
    4
    5
    6
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>

    • Coffee

      Black hot drink

    • Milk

      White cold drink

HTML块和类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

<div class="cities">
<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

<p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>

<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>

<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

</body>
</html>

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Paris

Paris is the capital and most populous city of France.

Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.

Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

The Tokyo prefecture is part of the world’s most populous metropolitan area with 38 million people and the world’s largest urban economy.