HTML学习笔记（全）

B/S架构：

Browser 浏览器

Server 服务器

HTML：

基础语法：

1.标签：

单标签：

无属性：<标签名   />

有属性：<标签名   属性名1="属性值1"   属性名2="属性值2"   ...   />

eg：

双标签：

无属性：<标签名>...</标签名>

有属性：<标签名   属性名1="属性值1"   属性名2="属性值2"   ...></标签名>

eg：

2.整体结构：　　　　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6         </title>
 7     </head>
 8     <body>
 9         <p>Hello World</p>
10     </body>
11 </html>

3.DOCTYPE：

 1 <DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             HelloWorld
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <p>Hello World</p>
14     </body>
15 </html>　　　　　

使用<DOCTYPE html>标签即使用html5特性

常用标签：

4.标题和水平线

结构标签<body></body>标签的属性：

bgclolor（background'color）即背景颜色，属性使用使用英文颜色名或者十六进制的rgb格式的值

test文本字体颜色，属性使用英文颜色名或者十六进制的rgb格式的值

标题标签<h1></h1>到<h6></h6>标签内的字体依次从大到小，注意：不建议写多个h标签

水平线标签<hr></hr>的属性：

width：默认是居中的，可已使用像素值（px）和百分比值（%）来调节水平线的长度

size：可以使用像素值（px）来调节水平线厚度

align：使用“left”和“right”两种个值来设置水平线位置

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             HelloWorld
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body bgcolor="pink" text="#008000">
13         <h1>HelloWorld</h1>
14         <h2>HelloWorld</h2>
15         <h3>HelloWorld</h3>
16         <h4>HelloWorld</h4>
17         <h5>HelloWorld</h5>
18         <h6>HelloWorld</h6>
19         <hr></hr>
20         <hr width="50%" align="left"></hr>
21         <hr width="500px" align="right"></hr>
22         <hr size="10px"></hr>
23     </body>
24 </html>

5.段落和换行

段落标签：　　　　　　　　

<p></p>（paragraph）的属性：

align（位置）:设置段落的对齐方式，使用“left”值是居左对齐，使用“right”是居右对齐。使用“center”是居中对齐，使用“justify”是两端对齐

换行标签：

<br>是换行标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             HelloWorld
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body text="#9400D3">
13         <p align="left"></p>
14         <hr></hr>
15         <p align="right"></p>
16         <hr></hr>
17         <p align="center"></p>
18         <hr></hr>
19         <p align="justify"></p>
20         <hr></hr>
21         <p>Hello<br>World!</p>
22     </body>
23 </html>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

6.列表

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             list
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <h1>Disorder list</h1>
14         <ul>
15             <li>Tom</li>
16             <li>Smith</li>
17             <li>Jack</li>
18             <li>John</li>
19         </ul>
20 
21         <ul type="disc">
22             <li>Tom</li>
23             <li>Smith</li>
24             <li>Jack</li>
25             <li>John</li>
26         </ul>
27         <ul type="square">
28             <li>Tom</li>
29             <li>Smith</li>
30             <li>Jack</li>
31             <li>John</li>
32         </ul>
33         <ul type="circle">
34             <li>Tom</li>
35             <li>Smith</li>
36             <li>Jack</li>
37             <li>John</li>
38         </ul>
39         <h1>Order list</h1>
40         <ol>
41             <li>Tom</li>
42             <li>Smith</li>
43             <li>Jack</li>
44             <li>John</li>
45         </ol>
46         <ol type="1">
47             <li>Tom</li>
48             <li>Smith</li>
49             <li>Jack</li>
50             <li>John</li>
51         </ol>
52         <ol type="I">
53             <li>Tom</li>
54             <li>Smith</li>
55             <li>Jack</li>
56             <li>John</li>
57         </ol>
58         <ol type="a">
59             <li>Tom</li>
60             <li>Smith</li>
61             <li>Jack</li>
62             <li>John</li>
63         </ol>
64         <ol type="A">
65             <li>Tom</li>
66             <li>Smith</li>
67             <li>Jack</li>
68             <li>John</li>
69         </ol>
70     </body>
71 </html>

列表分无序列表和有序列表：

无序列表为：

<ul>

　　<li></li>

　　<li></li>

　　...

</ul>

<ul></ul>

属性type有默认值disc（实心圆）、circle（空心圆）、square（实心方块）等多种值

有序列表为：

<ol>

　　<li></li>

　　<li></li>

　　...

</ol>

<ol></ol>

属性type有默认值1（数字1开头序列）、I（罗马数字开头序列）、A（英文字母开头序列）等多种值

7.div和span

<div></div>是一个块级元素，通常和CSS配合使用，常常用于布局

8.格式化（format）

<font></font>:标签定义文本文字的样式，其中属性有：

color：定义文字颜色

size：改变文字大小

face：改变文字风格

<pre></pre>预格式化标签，即是标签内容如有空格和换行则被保留下来并在浏览器中显示出来

<b></b>和<strong></strong>标签是使标签内的文字加粗

<i></i>是将标签内的字体倾斜

<u></u>是将标签内的字体出现下划线

<del></del>是将标签内的字体出现删除线（中划线）

<sub></sub>是将标签内的字体变为下标字

<sup></sub>是将标签内的字体变为上标字

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             format
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         HelloWorld
14         <br>
15         <font color="red">HelloWorld</font>
16         <br>
17         <font size="5">HelloWorld</font>
18         <br>
19         <font face="Georgia">HelloWorld</font>
20         <br>
21         <b>HelloWorld</b>
22         <br>
23         <strong>HelloWorld</strong>
24         <br>
25         <i>HelloWorld</i>
26         <br>
27         <u>HelloWorld</u>
28         <br>
29         <del>HelloWorld</del>
30         <br>
31         H<sub>2</sub>O
32         <br>
33         7<sup>2</sup>
34         <pre> Hello World</pre>
35         <pre>Hello  Wrold</pre>
36         <br>
37     </body>
38 </html>

9.a标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             Hyperlinks_a
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <a>Hyperlinks_a</a>
14         <br>
15         <a href="HelloWorld.html">HelloWorld</a>
16         <br>
17         <a href="E:\html+css+javascript\list.html">list</a>
18         <br>
19         <a href="https://www.runoob.com/">runoob</a>
20         <br>
21         <a href="https://www.runoob.com/html/html-tutorial.html" target="_blank">HyperText_Markup_Language</a>        
22     </body>
23 </html>

<a></a>标签是超链接标签

通过属性href实现页面的跳转，href的值即是跳转路径，有：网页地址、本地磁盘的绝对和相对路径

属性href搭配属性target的_blank值实现跳转的同时还可以新建窗口访问跳转页面

<a></a>标签的页面跳转：

<a></a>如果想要跳转到初始页面位置属性href的值设置为#，eg：<a href="#">aaa...</a>

设置锚点列如：<a name="name_is_x">xxx...</a>或<标签  ip="name_is_x">xxx..</标签>

如何点击一个内容aaa...转到内容xxx...？设置该内容aaa...标签为<a  href="#name_is_x">aaa...</a>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             Hyperlinks_a
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <a href="HelloWorld.html">HelloWorld</a>
14         <br>
15         <a href="E:\html+css+javascript\list.html">list</a>
16         <br>
17         <a href="https://www.runoob.com/">runoob</a>
18         <br>
19         <a href="https://www.runoob.com/html/html-tutorial.html" target="_blank">HyperText_Markup_Language</a>
20                <br>
21         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="name_is_x">xxx...</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
22         <a href="#name_is_x">Hyperlink_a</a>
23     </body>
24 </html>

10.图片（picture）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             picture
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <a href="http://www.gov.cn/zhuanti/2021qglh/index.htm">
14         <img src="https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png" width="200px" title="Up baidu,watch the national two sessions in 2021" border="2px" />
15         </a>
16         <br>
17         <br>
18         <br>
19         <img src="" alt="Picture display error" />
20     </body>
21 </html>

单标签（行内标签）<img src="" alt="" />属性：

src属性的值：访问显示图片的地址

alt（图片错误显示提示）属性的值：在图片访问地址寻找不到的时候输出的显示内容

title属性的值：是当鼠标光标悬停在图片上时显示的内容

width（宽度）属性：设置图片的宽度，值默认是像素单位

height（高度）属性：设置图片的高度，值默认是像素单位

border（边框）属性：设置图片的边框，值默认是像素单位

如何想点击图片转到另外一个链接内容需要在img标签外嵌套一个a标签，例如：<a href="..."><img src="..." /></a>

11.表格

纵向合并2个单元格：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            form_two
        </title>
        <link rel="stylesheet" href="" />
    <script src="" type="text/javascript" charset="utf-8">
    </script>
    </head>
    <body>

        <table width="50%" border="1" align="center">
            <tr>
                <th rowspan="2">Month</th>
                <th>Saving</th>
                <th>Saving for holiay</th>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>3</td>
                <td>9</td>
                <td>8</td>
            </tr>
        </table>

    </body>
</html>

 

纵向横向合并四个单元格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            form_two
        </title>
        <link rel="stylesheet" href="" />
    <script src="" type="text/javascript" charset="utf-8">
    </script>
    </head>
    <body>

        <table width="50%" border="1" align="center">
            <tr>
                <th rowspan="2" colspan="2">Month</th>
                <th>Saving for holiay</th>
            </tr>
            <tr>
                <td>6</td>
            </tr>
            <tr>
                <td>3</td>
                <td>9</td>
                <td>8</td>
            </tr>
        </table>

    </body>
</html>

<table>

　　<tr>

　　　　<th></th>

　　　　<td></td>

　　　　... ...

　　　　<td></td>

　　</tr>

　　<tr>

　　....

　　</tr>

</table>

其中<table></table>代表表格；<tr></tr>代表表格中的每一行；<th></th>（<td></td>）代表每一行中每一格元素

<table></table>中的属性:

border（边框）：值的默认单位是像素值px

wigth（宽度）：值的默认单位是像素值px

height（高度）：值的默认单位是像素值px

align（位置）：改变表格在结构内的位置值有三种center、right、left

style（风格）:例如值为border-collapse:collapse;

<tr></tr>标签的属性有：

align：设置行内单元格内文字在单元格内的位置

width：设置行内单元格的宽度

height：设置行内单元格的高度

bgcolor：设置行内单元格的颜色

<td></td>标签的属性有：

bgcolor：改变单元格的背景颜色值为十六进制rgb

style：例如：style="color: red"改变单元格文字的颜色

rowspan：纵向合并单元格

colspan：横向合并单元格

制作26个英文字母表：

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             form
 7         </title>
 8         <link rel="stylesheet" href="" />
 9     <script src="" type="text/javascript" charset="utf-8">
10     </script>
11     </head>
12     <body>
13         <h1 align="center">This is word</h1>
14         <table border="2" width="500px" align="center" style="border-collapse:collapse;">
15             <tr align="center" height="35">
16                         <td bgcolor="#000066" style="color: red">A</th>
17                     <td bgcolor="#000099" style="color: red">a</td>
18                     <td bgcolor="#0000CC" style="color: red">B</td>
19                     <td bgcolor="#0000FF" style="color: red">b</td>
20             </tr>
21             <tr align="center" height="35">
22                     <td bgcolor="#003366" style="color: red">C</td>
23                     <td bgcolor="#003399" style="color: red">c</td>
24                     <td bgcolor="#0033CC" style="color: red">D</td>
25                     <td bgcolor="#0033FF" style="color: red">d</td>
26             </tr>
27             <tr align="center" height="35">
28                     <td bgcolor="#006666" style="color: red">E</td>
29                     <td bgcolor="#006699" style="color: red">e</td>
30                     <td bgcolor="#0066CC" style="color: red">F</td>
31                     <td bgcolor="#0066FF" style="color: red">f</td>
32             </tr>
33             <tr align="center" height="35">
34                     <td bgcolor="#009966" style="color: red">G</td>
35                     <td bgcolor="#009999" style="color: red">g</td>
36                     <td bgcolor="#0099CC" style="color: red">H</td>
37                     <td bgcolor="#0099FF" style="color: red">h</td>
38             </tr>        
39             <tr align="center" height="35">
40                     <td bgcolor="#00CC66" style="color: red">I</td>
41                     <td bgcolor="#00CC99" style="color: red">i</td>
42                     <td bgcolor="#00CCCC" style="color: red">J</td>
43                     <td bgcolor="#00CCFF" style="color: red">j</td>
44             </tr>
45             <tr align="center" height="35">
46                     <td bgcolor="#00FF66" style="color: red">K</td>
47                     <td bgcolor="#00FF99" style="color: red">k</td>
48                     <td bgcolor="#00FFCC" style="color: red">L</td>
49                     <td bgcolor="#00FFFF" style="color: red">l</td>
50             </tr>        
51             <tr align="center" height="35">
52                     <td bgcolor="#330066" style="color: red">M</td>
53                     <td bgcolor="#330099" style="color: red">m</td>
54                     <td bgcolor="#3300CC" style="color: red">N</td>
55                     <td bgcolor="#3300FF" style="color: red">n</td>
56             </tr>        
57             <tr align="center" height="35">
58                     <td bgcolor="#333366" style="color: red">O</td>
59                     <td bgcolor="#333399" style="color: red">o</td>
60                     <td bgcolor="#3333CC" style="color: red">P</td>
61                     <td bgcolor="#3333FF" style="color: red">p</td>
62             </tr>        
63             <tr align="center" height="35">
64                     <td bgcolor="#336666" style="color: red">Q</td>
65                     <td bgcolor="#336699" style="color: red">q</td>
66                     <td bgcolor="#3366CC" style="color: red">R</td>
67                     <td bgcolor="#3366FF" style="color: red">r</td>
68             </tr>        
69             <tr align="center" height="35">
70                     <td bgcolor="#339966" style="color: red">S</td>
71                     <td bgcolor="#339999" style="color: red">s</td>
72                     <td bgcolor="#3399CC" style="color: red">T</td>
73                     <td bgcolor="#3399FF" style="color: red">t</td>
74             </tr>        
75             <tr align="center" height="35">
76                     <td bgcolor="#33CC66" style="color: red">U</td>
77                     <td bgcolor="#33CC99" style="color: red">u</td>
78                     <td bgcolor="#33CCCC" style="color: red">V</td>
79                     <td bgcolor="#33CCFF" style="color: red">v</td>
80             </tr>        
81             <tr align="center" height="35">
82                     <td bgcolor="#33FF66" style="color: red">W</td>
83                     <td bgcolor="#33FF99" style="color: red">w</td>
84                     <td bgcolor="#33FFCC" style="color: red">X</td>
85                     <td bgcolor="#33FFFF" style="color: red">x</td>
86             </tr>        
87             <tr align="center" height="35">
88                     <td bgcolor="#660066" style="color: red">Y</td>
89                     <td bgcolor="#660099" style="color: red">y</td>
90                     <td bgcolor="#6600CC" style="color: red">Z</td>
91                     <td bgcolor="#6600FF" style="color: red">z</td>
92             </tr>        
93         </table>
94     </body>
95 </html>

 

字符实体

 

posted @ 2021-03-09 21:11  ssh天地孤影任我行ssm  阅读(207)  评论(0)    收藏  举报