老雷html/css开发视频教程之学习html的常用布局文本元素
老雷html/css开发视频教程之布局与文本元素
一、认识div
<div> 标签可以把文档分割为独立的、不同的部分。主要用来布局页面
<div id="eid" class="box" style="color:red;" title="div标签" onclick="alert('点击了')" name="表单" src="媒体" href="链接" >内容</div>标签属性： id class 等
id 唯一的，一个页面只能一个
class 可以多个,通常针对css
style css样式
title 鼠标悬停显示的内容
onclick 事件
name 名称通常是表单
src 文件链接 通常 img,audio,video,iframe,script
href a,link
二、其他常用
<span> 标签被用来组合文档中的行内元素
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
target:
_blank 新窗口
_self 当前窗口
_parent 父窗口 iframe
自定义的frame
<a href="" target="_blank">连接</a>
h1-h6 定义标题
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<p> 标签定义段落,换行
<br />换行符
<hr> 标签在 HTML 页面中创建一条水平线。
<em> 标签来表示强调的文本
<i> 标签显示斜体文本效果。
<strong> 把文本定义为语气更强的强调的内容。
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
总结一下
div 来布局
span 来显示文本
a 跳转
<br />换行符
其他元素可以通过css来美化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局文本</title>
</head>
<body>
<div id="eid" class="box" style="color:red;" title="div标签" onclick="alert('点击了')" >div</div>
<div>
<span>这是一个行内标签span</span>
<span>span</span>
<br />
<span>换行符</span>
</div>
<h3>页面切换</h3>
<div>
<a href="index.html?m=a" target="_parent">A</a>
<a href="index.html?m=b">B</a>
<a href="index.html?m=c">C</a>
</div>
<h3>标题</h3>
<div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>
<div>
<p>这是一个<br/>段落p</p>
<p>这个是会换行的</p>
</div>
<hr />
<div>
这是<em>em标签</em>,
这是<i>i标签</i>,
这是<strong>strong标签</strong>
</div>
<h3>格式化输出</h3>
<pre>
这是一行
这是第二行
这是第三行
</pre>
</body>
</html>