HTML基础学习笔记4

最新推荐文章于 2022-02-18 10:56:18 发布

honey_seve7n

最新推荐文章于 2022-02-18 10:56:18 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/honey_seve7n/article/details/79609014

版权

大多数html元素被定为块级元素或内联元素

块<div>

1. <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

2. <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

3. 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

4. 以新行开始和结束，比如<h1><p><ul><table>。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。

<table> 元素的作用是显示表格化的数据。

内联元素<span>

1. HTML <span> 元素是内联元素，可用作文本的容器。

2. 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

3.不以新行开始，比如<a><img><td>。

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<head>
<style>
.cloths{
          background-color:black;
          color:white;
          margin:20px;
          padding:10px;
 }
</style>
</head>
<body>
<div class="cloths">
<h2>jacket<h2>
<p>The water had soaked his jacket and shirt</p>
</div>
<div class="cloths">
<h2>jeans<h2>
<p>He was wearing blue jeans and checked shirt</p>
</div>
</body>

<span> 元素是行内元素，能够用作文本的容器,可用于文本内容。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

<head>
<style>
span.red{
          color:white;
          }
</style>
</head>
<body>
<h1>my<span class="red"> important heading</span><h1>
</body>

HTML布局

使用<div>元素的网站布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

<head>
<style>
#header{
              background-color:black;
              color:white;
              text align:center;
              padding:5px;
}
#nav{
              background-color:#eeeeee;
              color:black;
              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;
}                                                                     <!--css定义-->
</style>
</head>
<body>
<div  id="header">
<h1>cloths<h1>
</div>
<div id="nav">
jacket<br/>
jeans<br/>
</div>
<div  id="section">
<p>The water had soaked his jacket and shirt</p>
</div>
<div  id="footer">
copyright? xxxx.com
</div>
</body>

使用HTML5的网站布局；

<head>
<style>
header{
              background-color:black;
              color:white;
              text align:center;
              padding:5px;
}
nav{
              background-color:#eeeeee;
              color:black;
              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;
}                                                                     <!--css定义-->
</style>
</head>
<body>
<header>
<h1>cloths<h1>
</header>
<nav>
jacket<br/>
jeans<br/>
</nav>
<section>
<p>The water had soaked his jacket and shirt</p>
</section>
<footer>
copyright? xxxx.com
</footer>
</body>

使用表格的html布局

<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。

<head>
<style>
table.cloths{
                  width：100%；
                  border：1px solid #d4d4d4;
            }
table.lamp th,td{
                   padding:10px;}
table.lamp th{
                   width:40px;
             }
</style>
</head>
<body>
<table  class="cloths">
<tr>
       <th>
       <img src="" style="width:xx;height:xx">
       </th>
       <td>The water had soaked his jacket and shirt</td>
</tr>
</table>
</body>

honey_seve7n

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习笔记4

大多数html元素被定为块级元素或内联元素块&lt;div&gt;1. &lt;div&gt; 元素是块级元素，它是可用于组合其他 HTML 元素的容器。2. &lt;div&gt; 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。3. 如果与 CSS 一同使用，&lt;div&gt; 元素可用于对大的内容块设置样式属性。4. 以新行开始和结束，比如&lt;h1&gt;...
复制链接

扫一扫