zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    less的使用
    04 LeetCode --- 反转整数
    03 LeetCode --- 反转整数
    数据结构--- 队列
    数据结构---栈
    数据结构---列表与数组
    04-配置阿里云yum源并启动nginx服务
    03-linux命令
    02-windows下vmware配置nat网络
    01-xshell连接linux
  • 原文地址:https://www.cnblogs.com/qq849784670/p/9647513.html
Copyright © 2011-2022 走看看