前端学习 第四弹: HTML(一)
元素分类:块元素 内联元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>,<div>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>,<span>
段落 HTML中的段落靠<p>来划分 p是块级元素
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:
<p>This is<br />a para<br />graph with line breaks</p>
style 属性用于改变 HTML 元素的样式。
background-color 背景颜色
<body style="background-color:yellow">
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
text-align 属性规定了元素中文本的水平对齐方式
<h1 style="text-align:center">This is a heading</h1>
表格
表格由 <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>
tr(table row)是一行 td(table data cell)是一列/单元
这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。 <td> </td>
列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
框架frame
框架结构标签(<frameset>)
-
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
iframe 用于在网页内显示网页
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" name="iframe_a"></iframe>
长200 宽200 去除边框
iframe可以作为连接的目标 <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>