(html⼊门)html块+表格+id
HTML <div>和<span>
HTML 块元素
⼤多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显⽰时,通常会以新⾏来开始(和结束)。
HTML <div>元素
HTML <div> 元素是块级元素,它是可⽤于组合其他 HTML 元素的容器。
如果与 CSS ⼀同使⽤,<div> 元素可⽤于对⼤的内容块设置样式属性。
<div> 元素的另⼀个常见的⽤途是⽂档布局。它取代了使⽤表格定义布局的⽼式⽅法。使⽤ <table> 元素进⾏⽂档布局不是表格的正确⽤法。<table> 元素的作⽤是显⽰表格化的数据。
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div >
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
HTML 元素
HTML <span> 元素是内联元素,可⽤作⽂本的容器。
<span> 元素也没有特定的含义。
当与 CSS ⼀同使⽤时,<span> 元素可⽤于为部分⽂本设置样式属性。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若⼲⾏(由 <tr> 标签定义),每⾏被分割为若⼲单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等。
<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>
表格和边框属性
使⽤边框属性来显⽰⼀个带有边框的表格
表格的表头
表格的表头使⽤ 标签进⾏定义。
⼤多数浏览器会把表头显⽰为粗体居中的⽂本
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>
表格中的空单元格
在⼀些浏览器中,没有内容的表格单元显⽰得不太好。如果某个单元格是空的(没有内容),浏览器可能⽆法显⽰出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML id 属性
HTML id 属性⽤于 为HTML 元素指定唯⼀的 id。
⼀个 HTML⽂档中不能存在多个有相同 id 的元素。
id 属性指定 HTML 元素的唯⼀ ID。 id 属性的值在 HTML ⽂档中必须是唯⼀的。
d 的语法是:写⼀个井号 (#),后跟⼀个 id 名称。然后,在花括号 {} 中定义 CSS 属性。
html span 居中<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1>id 属性</h1>
<p>使⽤ CSS 来设置id为"myHeader"的元素的样式:</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论