本文已参与「新人创作礼」活动,一起开启掘金创作之路
1. 网页布局
- 定义HTML 文档标签
<html> - 文档标题标签
<title> - 文档主体标签
<body> - HTML标题标签
h (<h1>~<h6>) - 段落标签
<p>, 可以把 HTML 文档分割为若干段落 - 水平线标签
<hr> - 换行标签
<br> - 网页布局最主要的2个盒子:
<div>和<span>
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
使用例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
<p>这是一个文本。</p>
<div style="color:#00FF00">
<p>这是一个在 div 标签中的文本。</p>
</div>
</body>
</html>
效果:
<span> 标签对文档中的行内元素进行组合;
它的宽度、高度都无法通过 CSS 样式设置,它的宽高受其本身内容控制,随着内容的宽高改变而改变
使用例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span</title>
</head>
<body>
<p>这是含有 <span style="color:blue; font-weight:bold">span的文字</span>。</p>
</body>
</html>
效果:
2. 对文字
- 文字粗体显示:
<b>或<strong> - 文字斜体显示:
<i>和<em> - 文字加删除线显示:
<s>和<del> - 文字加下划线显示:
<u>和<ins>
3. 对图像:使用 <img>
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 规定显示图像的 URL (即图像的路径) |
| alt | text | 规定图像(不能显示时)的替代文本 |
| width | pixels | 规定图像的宽度 |
| height | pixels | 规定图像的高度 |
| title | text | 规定有关元素的额外信息(鼠标悬停时显示的内容) |
4. 链接标签 <a>
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | URL | 规定链接目标的 URL 地址 |
| target | _blank _self _parent _top | 规定在何处打开目标 URL (仅在 href 属性存在时使用) _blank:在一个新的窗口打开被连接的的文档_self:在当前页面打开被链接的文档_parent:在父窗口中打开被链接的文档_top:在整个窗口打开被链接的文档 |
- 如果当时没有确定链接目标时,通常将链接标签的
href属性值定义为#(即href= "#"),表示该链接暂时为一个空链接,点击之后跳转到当前页面的顶部。