0
点赞
收藏
分享

微信扫一扫

初识HTML及基本常用标签

初识HTML及基本常用标签

HTML : (超文本标记语言),(英语:HyperText Markup Language,简称:HTML),1990年左右由Tim Berners-Lee,李爵士发明,它是一种用于创建网页的标记语言,类似的有markdown。
超文本 :是一种可以显示在电脑显示器或电子设备上的文本,现时超文本普遍以电子文档的方式存在,其中的文字包含有可以链接到其他字段或者文档的超链接,允许从当前阅读位置直接切换到超链接所指向的文字。像图片,视频音频,这样的资源也可以在网页上面展示。
因此,HTML简单来说就是用来在网页展示一系列各种各样信息的基本语言,HTML是网页的骨架,后来诞生的CSS与JavaScript语言一起配合HTML形成了现代的既美观又功能强大的网页。

1.HTML的标签概述

  •   <!DOCTYPE html>   <!--  文档类型   告诉浏览器以HTML5的方式解析此文档 -->
    
  •   <tag attr=value>内容</tag>  <!--  双标签 -->
    
    • 这里注意属性值可以加双引号单引号甚至在没有特殊符号的情况下(比如空格)可以不加
  •   <tag attr>内容</tag>    <!--  有的属性是布尔类属性,写了就代表有效,反之则无效  比如  checked  属性 -->
    
  •   <tag attr=value>    <!-- 单标签 -->
    

HTML标签不区分大小写,不过一般都小写

2.HTML起手式

  •   <!DOCTYPE html>   <!--  声明文档类型 --> 
    
  •   <html lang="en">    <!--  网页的语言  可以设置为 zh-CH  中国中文 -->
    
  •   <meta charset="UTF-8">   <!-- 网页的字符编码 UTF-8包含了全人类的语言 -->
    
  •   <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--定义文档视口,防止网页缩放-->
    
  •   <meta http-equiv="X-UA-Compatible" content="ie=edge"><!--使用IE最新内核-->
    
  •   <title>标题</title>  <!-- 这里写网页的标题 -->
    
  • html基本骨架

    •   <!DOCTYPE html>
        <html lang="en">
        <head>
            <!-- 这里的内容是给浏览器看的 -->
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <!-- 网页上所有看得见的元素都放这里 -->
        </body>
        </html>
      

2.章节标签

用来表示文章的层级

  1. 标题 h1 ~ h6
  2. 章节 section
  3. 文章 article
  4. 段落 p
  5. 头部 header
  6. 脚部 footer
  7. 主要内容 main
  8. 旁边分支 aside
  9. 划分 div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>这是顶部的广告</header>
    <div>
        <main>
            <h1>文章的标题</h1>
            <section>
                <h2>第一章内容</h2>
                 <p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
            </section>
            <section>
                <h2>第二章内容</h2>
              <p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
            </section>
            <section>
                <h2>第三章内容</h2>
               <p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
                <section>
                    <h2>1.1</h2>
                    <p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
                </section>
            </section>
        </main>
        <aside>
            参考了谁的资料
        </aside>
    </div>
    <footer>页脚的内容  &copy; 小欧版权所有</footer>
</body>
</html> 

3.表示内容的标签

  • ol + li 有序列表 序号默认是 1 2 3 4...... , ol 属性: type 指定序号的形式 五个属性值: 1 a A(常用) i I

    •       <ol type="A" start="3">      <!-- 有序列表 序号类型 大写字母 从第三个C开始 -->
                <li>吃饭</li>
                <li>睡觉</li>
                <li>打豆豆</li>
                <li>喝水</li>
            </ol>
      
  • ul + li 无序列表

    •   <ul>    <!-- 无序列表 -->
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>
            <li>喝水</li>
         </ul>
      
  • dl + dt + dd 描述列表

    •   <dl>
               <dt>小欧</dt>    <!-- 被描述术语 -->
               <dd>长得帅</dd>   <!-- 描述项 -->
               <dd>唱歌好听</dd>
               <dd>有钱</dd>
               <dd>代码写得好</dd>
           </dl>
      
  • pre 包裹内容的空格回车与tab可以保留在页面上

    •   <pre>
            这是一堆空格          tab  
            回车
        
        </pre>
      
  • hr 水平分隔线

  • br 换行标签

  • a 超链接 访问网址

    •     <a href="http://www.baidu.com" target="_blank">百度一下</a>
      
  • em 主观强调内容,有斜体

  • strong 重要内容

  • code 写代码,这里的代码字母等宽

    •   <code>console.log("hello world!")</code>
      
  • quote 内联 引用

  • blockquote 块级引用

4.全局属性

所有标签都有的属性

  • class 给元素分类,多用于设置一类相同的样式,可以有多个

    •   <div class="name1 name2"></div>
      
  • id 给元素起名字,多用于js的配合使用

  • contenteditable 可以使元素被编辑

  • hidden 让元素消失,优先级大于display none

  • style 元素的样式

  • tabindex 控制tab键切换元素的顺序 特殊值0代表最后一个被选中 -1 表示不会被切换

  • title 元素的标题 鼠标悬浮可见

5.HTML中常用的几个字符实体

&lt;   相当于    <
&gt;   相当于    >
&nbsp;   相当于一个英文空格
&copy;  © 版权符号

6.浏览器默认样式

默认样式就是我们没有写CSS的情况下浏览器会与自己的样式 ,当然样式很丑所以我们需要重构它

* {                  /* 这里参考别人的  没有固定写法,可以自由设置 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
举报

相关推荐

初步了解HTML及常用标签

HTML 基本标签

HTML——基本标签

html基本标签

HTML基本标签

HTML 常用标签

《HTML常用标签》

0 条评论