HTML基础学习+一个很给力的例子

1 什么是HTML

借用菜鸟教程的解释:

1 HTML 是用来描述网页的一种语言。111

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

2 一些简单的说明

  • 建议都是用小写:HTML属性,标签
  • 签都是闭合的
  • 属性值始终都在引号内
  • id 是唯一属性,calss 为html元素定义一个活多个类,style 规定元素的行内样式 ,title  描述了元素的额外信息

3一个简单而又全面的例子 

<!DOCTYPE html>

</html>

<head>
    <!-- 网页编码格式为 utf-8 -->
    <meta charset="utf-8">
    <link  rel="stylesheet" type="text/css" href="css.css"> 
    <!-- 每30秒钟刷新当前页面: -->
    <meta http-equiv="refresh" content="30">
    <meta name="author" content="wzw">
    </meta>
      <!-- 定义了浏览器工具栏的标题
        当网页添加到收藏夹时,显示在收藏夹中的标题
        显示在搜索引擎结果页面的标题 -->
    <title>我的世界</title>
    <style type="text/css">
    /* 1 css 声明由一个属性和一个值组成,以分号结束*/
    /* 内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式 */
    /* 外部样式放在内部样式的后面,则外部样式将覆盖内部样式。两个内/外样式也后引入的一个会覆盖前一个 */
    /* id选择器 */
    #css1{
        text-align: center;
        background-color: red;
    }
    /* class选择器 */
        h1 {color:red;}
        /* p {color:black;
            background-color: rgb(0, 255, 179);
        } */
        .css2{
            text-align: center;
            background-color: rgb(0, 255, 179);
        }
        .css3{
            text-align: center;
            background-color: rgb(0, 255, 179);
        }

        </style>
    <!-- <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: -->
    <!-- <base href="http://www.baidu.com" target="_blank"> -->
</head>
<!-- body标签是HTML文档的主体 -->

<body>
    <h1>1:h1标签是一个标题:标题只是用于标题,不要当做放大字体、粗体用</h1>
    <p>2:p标签一个段落:双目失明丝毫不影响我带崩三路!</p>
    <a target="_blank" href="https://www.baidu.com">
        3:a 标签一个链接,href属性表明目标网址!target="_blank" 属性是新开标签页
    </a>
    <p>"href="#id" 连接到id为tips的标签处;也可以href="网址+#id""
        <a href="#title1">跳转到第二个标题</a>
        <a href="https://www.runoob.com/html/html-links.html#tips">
        访问有用的提示部分</a></p>
    
    <p> 4:hr标签插入水平线 </p>
    <hr />
    <p>
        5:image标签一个图片,下面这个图片还是一个超链接。src属性表明图片地址,其中images文件夹地址和test.html一致。
    </p>
    <a target="_blank" href="https://www.baidu.com">
        <img src="./images/test.png" alt=":ceshiwenzi" width="60" height="33" />
    </A>
    <p>6:br标签是一个换行用的,<br></br>你看,我是下一行</p>
    <!-- HTML文本格式化 -->
    <h1 id="title1">HTML文本格式化</h1>
    <p>1:b 是粗体,i 是斜体:
        <br><b>我是粗体</b><br>
        <i>我是斜体</i>
    </p>
    <p>2:strong或者em意味着你要呈现的文本是重要的,需要突出显示<br>
        <strong>我是粗体</strong>
        <br><em>我是斜体</em>
    </p>
    <p>
    <pre>3:pre预格式文本,会显示 空格 和
        换行的效果</pre>
    </p>

    <p>4:small小号字:<br><small>我是粗体</small><br>我是正常的</p>
    <p>5:<sub>sub上标</sub>;<sup>sup下标</sup>;
         del删除<del>blue</del>;ins插入字 <ins>red</ins></p>
    <p>6:abbr定义缩写<abbr title="Hello Word">HW</abbr>;address定义网址
    <address>网址www.baidu.com</address>
    </p>
    <p>7:bdo定义文字方向<bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
    
    <p>8:q将文字用双引号保护起来,用于短的引用:
        <q>我的两边由双引号</q>
    </p>
    <p>9:lockquote用于长的引用:
        <blockquote >
            乌拉乌拉
        </blockquote>
    </p>
    <p>10:cite引用<cite>“让风暴来得更猛烈些吧!”</cite> 出自高尔基,海燕</p>
    <p>11:dfn定义项目<dfn>定义项目</dfn></p>

  
<video width="320" height="240" controls autoplay>
    <source src="movie.mp4" type="video/mp4">   
  </video>
  <p id="css1">我的背景是红色的</p>
  <p class="css2">我的背景是绿色的</p>
  <p class="css3">我的背景是红色的</p>
  <p></p>

</body>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值