HTML的基础语法汇总

最新推荐文章于 2022-09-14 12:38:02 发布

青春、不回头

最新推荐文章于 2022-09-14 12:38:02 发布

阅读量210

点赞数 1

本文链接：https://blog.csdn.net/q18770158319/article/details/109557304

版权

文章目录

一、常见的几种基本的标签
二、HTML的盒子模型
- 1、使用多个div块从大到小来进行一步步的布局
- 2、使用HTML5新定义属性来布局
三、HTML事件
- 1、from事件
- 2、Mouse事件

一、常见的几种基本的标签

1、文本标签

在这里插入图片描述

2、格式化标签

在这里插入图片描述

3、图像标签

在这里插入图片描述
其中的相对路径和绝对路径可以理解为

4、超链接标签

在这里插入图片描述

5、表格标签

在这里插入图片描述

6、表单标签

在这里插入图片描述

7、框架标签

然后配合表单标签来使用。

8、HTML新增标签

在这里插入图片描述

二、HTML的盒子模型

1、使用多个div块从大到小来进行一步步的布局

HTML布局

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<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 id="footer">
</div>

</body>

css样式

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

2、使用HTML5新定义属性来布局

在这里插入图片描述

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<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>
</section>

<footer>
</footer>
</body>

css

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>