html简单知识

一、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>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--&nbsp;是一个空格-->&nbsp;&nbsp;&nbsp;&nbsp;<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>
View Code
<!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>&nbsp;<del>79元</del></h2>
    <div id="header">
        我是头部
    </div>
    <div>可怜可怜离开</div>
    <p>不是</p>
</body>
</html>
View Code

  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>

 

posted @ 2018-09-14 16:42  被嫌弃的胖子  阅读(142)  评论(0编辑  收藏  举报