html table br不生效_HTML入门学习-CSDN博客

这篇博客详细介绍了HTML中的表格属性，包括border、width、align、colspan、rowspan等，讲解了如何设置表格边框、宽度、对齐方式以及单元格合并。还探讨了div与span的区别以及超链接的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频引入

<html>
<head>
<meta charset="utf-8">
<title>html测试</title>
</head>
<body>
<video width="320"height="240" controls>
<source src="http://cdn.jsdelivr.net/gh/salivaser/video/2.mp4" type="video/mp4">
</video>
</body>
</html>

音频引入

<body>
<audio  controls>
<source src="http://cdn.jsdelivr.net/gh/salivaser/audio/我的一个道姑朋友-以冬.mp3"type="audio/mp3">
<source src="我的一个道姑朋友.ogg" type="audio/ogg"">
</audio>
</body>

图形容器引入

<html>
<head>
<meta charset="utf-8">
<---文档标题--->
<title>图形容器创建</title>
</head>
<body>
<canvas id="myCanvas"width="200" height="100"style="border:2px  solid #000000;“>
</canvas>
</body>
</html>

示例：

文字引入

 <h1>大标题</h1> 
<h2>中标题</h2>
<h3>小标题3</h3>
<h4>更小标题4</h4>
<em>斜体标签</em>
<br/>
<strong>粗体</strong>
<strong><em>粗斜体</em></strong>
<p>定义一个段落</p>
<!--align是属性名，center是属性值，属性值需用双引号括起来,还有left、right等属性-->
<h3 align="center">居中小标题</h3>
<ins>下划线标签</ins>
<!---<br/>换行标签--->
<br/>
<del>删除标签</del>

大标题

中标题

小标题3

更小标题4

斜体标签

粗体粗斜体

定义一个段落

居中小标题

下划线标签

删除标签

<ul>
<li>无序列表序列1</li>
<li>无序列表序列2</li>
</ul>
<ol>
<li>有序列表序列3</li>
<li>有序列表序列4</li>
</ol>

无序列表序列1
无序列表序列2

有序列表序列3
有序列表序列4

图像引入

1.图片直链直接引入，图片损坏或链接有错误无法显示时，可用alt属性来标注,alt属性的值只会在图片发生错误时出现。

<img src="https://how2j.cn/example.gif" alt="该图无法显示"/>

2.如果是本地文件，只需把图片放在与.html的文件同一目录下即可，src直接使用文件名，不需要写路径（example.gif）,如果图片在上级目录，则在src上加上../，(../example.gif)即可访问上级目录的图片，同理，访问上上级目录，则使用../../(../../example.gif),使用本地图片的绝对路径，在src上加上file://路径(file://C:/user/pictures/example.gif)

3.图片大小设置

<img width="200" height="200" src="https://how2j.cn/example.gif"/>

4.利用style外边距样式和div属性来约束图片的位置，margin-left:50px 指的是左边距50个像素

<img  style="margin-left:50px" src="https://how2j.cn/example.gif"/>

<img  style="margin-right:50px" src="https://how2j.cn/example.gif"/>

5.使用了div后，先把两个图像放在一个div里，只需要设置div的边距，就可以达到两个图片同时移动的效果

<div style="margin-right:70px">
<img src="https://how2j.cn/example.gif"/>
<img src="https://how2j.cn/example.gif"/>
</div>

6.div和span的区别

div是块元素，即自动换行，常见的还有h1,table,p,span是内联元素，即不会换行，常见的还有img,a,b,strong

<div>元素一</div>
<div>元素二</div>
<span>元素一</span>
<span>元素二</span>
<span>元素三</span>

元素一

元素二

元素一元素二元素三

7.超链接

标签用来显示超链，超链内容可为网页，图片等完整形式是超链显示文本

例：<a href="www.baidu.com">百度</a>

例：百度

二.新增属性target（在新的页面打开链接），属性title(超链上的提示文字)

例：<a href="www.baidu.com" target="_blank" title="点击跳转百度首页">百度</a>

例：百度

表格

<table>标签用于显示一个表格，<tr>表示行，<td>表示列，又叫单元格

1.属性border(带边框的表格)

2.属性width（表格的宽度，大小用像素表示—）

3.属性align(单元格水平对齐)

4.属性:单元格宽度绝对值：单独在某一行设置某一列的宽度，其他各行对应的列的宽度会自适应。

<table border="2" width="1024px">
<tr>
<td>陈先生</td><td width="600px" align="left">樊师傅</td>
</tr>
<tr>
<td>蔡先生</td><td align="center">何逼男</td>
</tr>
<tr>
<td>周帅逼</td><td align="right">赵同志</td>
</tr>
</table>

陈先生	樊师傅
蔡先生	何逼男
周帅逼	赵同志

5.属性:单元格宽度相对值：用百分数代替具体的像素宽度。

6.属性：valign（单元格垂直对齐）

<table border="2" width="100%">
<tr>
<td valign="top">陈先生 </td> <td width="70%">樊师傅 <br/>蔡先生<br/>何逼男</td>
</tr>
<tr>
<td>蔡先生</td><td>何逼男</td>
</tr>
<tr>
<td>周帅逼</td><td>赵同志</td>
</tr>
</table>

陈先生	樊师傅蔡先生何逼男
蔡先生	何逼男
周帅逼	赵同志

7.属性:colspan(横跨两列，水平合并)

<table border="2" width="100%">
<tr>
<!---colspan后面的2指合并的列数--->
<td colspan="2">陈先生  樊师傅</td> 
</tr>
<tr>
<td>蔡先生</td><td>何逼男</td>
</tr>
<tr>
<td>周帅逼</td><td>赵同志</td>
</tr>
</table>

陈先生樊师傅
蔡先生	何逼男
周帅逼	赵同志

8.属性：rowspan (横跨两列，垂直合并)

<table border="2" width="100%">
<tr>
<!---rowspan后面的2指合并的行数--->
<td rowspan="2">陈先生  蔡先生</td> <td>樊师傅</td>
</tr>
<tr>
<td>何逼男</td>
</tr>
<tr>
<td>周帅逼</td><td>赵同志</td>
</tr>
</table>

陈先生蔡先生	樊师傅
何逼男
周帅逼	赵同志

9.属性:bgcolor:(背景色)设置tr或者td的背景色

<table border="2" width="300px">
<tr bgcolor="#5BD3BB">
<td>陈先生</td><td width="80px" align="left">樊师傅</td>
</tr>
<tr>
<td bgcolor="yellow">蔡先生</td><td align="center">何逼男</td>
</tr>
<tr>
<td>周帅逼</td><td align="right" bgcolor="pink">赵同志</td>
</tr>
</table>

陈先生	樊师傅
蔡先生	何逼男
周帅逼	赵同志

# 内联框架引入

<iframe>即内联框架，通过内联框架，可以实现在网页中"插入网页"