1.2块级元素和行内元素

77 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 块级元素  div p section header footer nav article body html 列表标签 
		特点:1.独占一行
		2.宽度默认是100%
		3.可以通过css属性设置宽高
		4.高度由内部内容决定
	-->
	<div style="width: 100px;height: 100px;background-color: red;">我是一个块级元素</div>
	<p>段落标签</p>
	<section></section>
	<!-- h5新增标签 -->
	<!-- 类似于 div class='header footer nav -->
	<header></header>
	<footer></footer>
	<article></article>
	<nav></nav>
	<address></address>
	<!-- 有利于seo优化 搜索引擎
		1.meta加keywords 医院 
		2.选项卡标题title 医院信息
		3.使用语义化标签 header footer ....
		公众号: 前端面试题宝典 针对有工作年限 实习生 html - react node vue css js es6
	-->
	<!-- 行内元素 a span i em cite b strong sub sup strike .... 
		特点:1.与其他行内元素共享一行
				2.高度由内部内容决定
				3.无法通过css属性设置宽高
				4.不建议行内元素嵌套块级元素 
	-->
	<span style="width: 100px;height: 100px;background-color: red;">行内元素</span>
	<i>斜体效果</i>
	<em>斜体效果</em>
	<cite>斜体效果</cite>
	<b>加粗效果</b>
	<strong>加粗效果</strong>
	<sub>下标</sub>
	<sup>上标</sup>
	<strike>删除线</strike>
	<pre>
		<code>
			var a =         10;
		</code>
	</pre>
</body>
</html>