一、html标签的特征:
1.空白折叠现象
2.对空格和换行不敏感
3.标签要严格封闭
二、p标签的嵌套
p中只能存放字体、图片、表单控件,不能放盒子标签
三、html中标签的分类
1.行内标签
在一行内显示 span、strong、em、i、del、a
不能设置宽高,默认的宽和高是内容填充
行内块标签img input
在一行内显示
可以设置宽和高
2.块级标签div、p、h1~h6
独占一行
可以设置宽高,如果不设置默认宽是网页的宽,高度是内容的高度
<!--文档声明--> <!DOCTYPE html> <html lang="en"> <head> <!--网站配置--> <meta charset="UTF-8"> <!--标题标签--> <title>张青青</title> <!--2秒后跳转到百度--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com" /> <!--标题图片--> <link rel="shortcut icon" href="http://hcdn1.luffycity.com/static/frontend/index/Luffy-study-logo.png"> <!--别人在搜素你的网站的时候显示的简单介绍--> <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。"/> <!--移动端优先 视口设置--> <meta name="vieport" content="width=device-width,initial-scale=1"> <style type="text/css"> h1{ color:green; } </style> <link rel="stylesheet" href="./a.css"> </head> <body> <h1>张青青</h1> <h2>张庆</h2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 是一个空格--> 张 庆 <br /> 张青青 <h2>什么</h2> <!--<hr />一条线--> <hr /> <u>下划线</u> <strong>加粗</strong> <em>斜体</em> <i>斜体</i> 4<sup>2</sup> 2<sub>4</sub> <h3>BUZADAS</h3> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="./a.css"> </head> <body> <h2><span>9.9元</span> <del>79元</del></h2> <div id="header"> 我是头部 </div> <div>可怜可怜离开</div> <p>不是</p> </body> </html>
p标签里面不能包含容器标签
超链接
<a href="http://www.baidu.com" id="anchor" class="anchor" title="百度一下">百度一下</a>
img(alt就是当图片没有加载成功的提示语,图片默认宽高是图片的宽高,设置了一个值另一个会自适应大小)
<img src="./fd039245.jpg" alt="图片卡住了!!" height="100">
表单
<form action="https://www.baidu.com/s"> <input type="text" name="wd" value="" /> <input type="submit" value="搜索"> </form>