浅尝HTML基本常用标签

tylyf
533 阅读3分钟

HTML : (超文本标记语言)，（英语：HyperText Markup Language，简称：HTML），1990年左右由Tim Berners-Lee,李爵士发明,它是一种用于创建网页的标记语言，类似的有markdown。

一、语法概览

1. <!DOCTYPE html>

  • 是一种文档类型，告诉浏览器：请按照解析HTML的方式解析我

2.<tag attr=value>内容</tag>

  • 属性值需要加引号的规则如下：
  1. 普通字符，可不加引号。
  2. 属性名包含特殊字符，如空格，则要加引号，如<div id="a c fun">hello world</div>

3. <tag attr>内容</tag>

  • 代码例子：<input type="checkbox" checked>
  • 调试结果： 注意：只要有chekced,复选框就会被勾上，即使写成checked="false"或checked="xxxxx"

4. <tag attr=value>

  • 标签自动闭合，不需再写</tag>，也不需加一个斜杠<tag attr=value />

5. 问题

  • 标签大小写有区别吗？

    • 答：功能在没有区别，但最好是用小写

  • 在哪里查询HTML的资料？

    • 答：谷歌 MDN + 标签

二、 HTML起手式

2001.png

  • 设置网页语言：中文<html lang="ch-ZN">；英文<html lang="en">
  • 文件未保存：2002.png
  • 文档类型：<!DOCTYPE html>
  • 文件字符编码：<meta charset="UTF-8">（UTF-8支持全人类所有语言）
  • 使用IE最新内核： <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 禁用缩放手机： <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 页面标题： <title>Document</title>

三、章节标签

  1. 标题 h1 ~ h6

  2. 章节 section

  3. 文章 article

  4. 段落 p

  5. 头部 header

  6. 脚部 footer

  7. 主要内容 main

  8. 旁边分支 aside

  9. 划分 div

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</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; tylyf版权所有</footer>
</body>
</html>

四、全局属性

所有标签都有的属性

  • class给元素分类,多用于设置一类相同的样式,可以有多个
   <div class="name1 name2"></div>

  • id给元素起名字,多用于js的配合使用

  • contenteditable 可以使元素被编辑

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

  • style 元素的样式

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

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

五、表示内容的标签

  • 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 块级引用

avatar
文章
阅读
粉丝