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

最新推荐文章于 2021-08-18 21:37:00 发布

qq_41306610

最新推荐文章于 2021-08-18 21:37:00 发布

阅读量191

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41306610/article/details/108265722

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

qq_41306610

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习+一个很给力的例子

1 什么是HTML借用菜鸟教程的解释：HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:HyperTextMarkupLanguage HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML标签及文本内容 HTML文档也叫做web 页面2一个简单而又全面的例子<!DOCTYPE html></html><he...
复制链接

扫一扫

专栏目录