HTML行内元素 块级元素及语义化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML行内元素 块级元素及语义化相关的知识，希望对你有一定的参考价值。
---------------------------------------可以换行的元素 不能换行的元素--------------------------------
块级元素 行内元素
div - dl - form ---交互表单 a - 链接 br - 换行 em - 强调
h1 - h6 标题 hr - 水平分隔线 i - 斜体 img - 图片 input - 输入框
ol - 排序列表 ul - 非排序列表 label - 标签 select - 项目选择
p - 段落 table - 表格 span - 文本内区块 strong - 粗体强调
textarea - 多行
--------------------------------------------------------------------------------------------------------------------------------------------
语义化
HX系列为标题 重要性依次递增 h1为页面内容标题,h2为页面相关性标题
p为段落,用<br/>分割是错误的
strong是重点强调 <b><u><i><em>是关键词强调
table中的caption是标题,summary是总结
alt和title属性让元素更具有语义
<dl><dt><dd>dl是定义列表,比如是词典里的词的解释,定义
eg.<dl>
<dt>Dog</dt>
<dd>An animal</dd>
</dl>
html5语义化标签<footer><header><nav><details> input email/number
-----------------------------------------------------------------------------------------------------------------------------------------
div默认样式上下没有间距 p默认样式上下会有间距
iframe可以把网页加载进自己的网页中
-----------------------------------------------------
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
</head>
<body>
<p>
<a href="http://map.baidu.com/" target="_blank">百度地图</a>
</p>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="百度" title="百度" width="270px" height="129px">
<br/>
<span>2016baidu</span>
<div>div1</div>
<div>div2</div>
<p>p1</p>
<dl>
<dt>Dog
<dd>is an animal</dd>
</dt>
</dl>
<hr/>
<ul>
<li><a href="">好生意不能</a></li>
<li>蜘蛛人哈哈</li>
</ul>
<ol>
<li>no 1</li>
<li>no 2</li>
</ol>
<table border="1" cellpadding="20px" cellspacing="2px" width="300px" height="300px" align="center">
<caption>名次列表</caption>
<thead>
<tr>
<th>姓名</th>
<th>名次</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>张三</td>
<td rowspan="2">No 1</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr align="center">
<td colspan="2">王二麻子 No 3</td>
</tr>
</tbody>
</table>
<iframe src="www.imooc.com" width="300px" height="300px"></iframe>
</body>
</html>
以上是关于HTML行内元素 块级元素及语义化的主要内容，如果未能解决你的问题，请参考以下文章