HTML入门笔记1

1 HTML 是谁发明的?

蒂姆·伯纳斯·李(Tim Berners-Lee)

2 HTML 起手应该写什么

<!DOCTYPE html>
<!-- <!DOCTYPE html> 文档类型 -->
<html lang="en">
  <!--<html lang="en"> html根目录;lang是language;en是英文;lang的值在中国开发需要换成zh-CN是简体汉语 -->
  <head>
    <meta charset="UTF-8" />
    <!-- <meta charset="UTF-8" />   charset字符编码设置,字符集推荐写在最前面其他没有要求-->
    <!-- 编码改变会出现乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta name="viewport" 视口 content="width=device-width, initial-scale=1.0" />禁止缩放,兼容手机 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 在ie浏览器显示,ie请升级到最新的内核-->
    <title>Document</title>
  </head>
  <body></body>
</html>

3 常用的章节,段落,标题等标签.

  • h1~h6 表示标题
  • section 表示章,节
  • article 表示文章
  • p 表示段落
  • main 表示主要内容
  • aside 表示旁支部分
  • header 表示头部
  • footer 表示脚部
  • div 表示划分
<body>
    <header>头部</header>
    <div>
      <main>
        <section>
          <h1>第1章</h1>
          <p>...</p>
          <section>
            <h2>第1节</h2>
            <p>...</p>
          </section>
          <section>
            <h2>第2节</h2>
            <p>...</p>
          </section>
        </section>
      </main>
      <aside>旁支内容</aside>
    </div>
    <footer>脚部</footer>
  </body>

4 全局属性有哪些?

  • class 类
  • contenteditable 添加到元素上,元素内容可编辑.
  • display:hidden. 隐藏,属于css
  • id 不要万不得已,不要使用id. 因为id无法保证唯一性.
  • style 行内样式,属于css
  • tabindex 给页面设置tab访问支持.
    * tabindex=0 最后访问
    * tabindex=-1 禁止访问
    * tabindex的值大于0按从下到大的顺序访问.
  • title 展示元素的内容.

5 常用的内容标签有哪些

  • ol 有序列表
  • ul 无序列表
  • dl 描述列表
  • dt 描述对象
  • dd 描述内容
  • pre 保留格式
  • code 等宽字体
  • 写代码需要等宽字体 i和w一样宽.
  • hr 分隔线
  • br 换行
  • em 语气的强调(默认样式斜体)
  • strong 本质的强调(默认样式粗体)
  • quote 引用(内联引用)
  • blockquote 块级引用
    <!-- 1 有序列表 -->
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
    <!-- 2 无序列表 -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!-- 3 描述列表 -->
    <dl>
      <dt>大象</dt>
      <dd>大象很早就成了人类的朋友,并能为人类提供帮助。</dd>
    </dl>
    <!-- 4 pre保留格式,code等宽字体 -->
    <pre>
      <code>
        function log(x, y) {
          y = y || 'World';
          console.log(x, y);
        }
      </code>
    </pre>
    <!-- 5 hr,br,em,strong,quote,blockquote -->
    <em>em语气强调</em> <br />
    <strong>strong本质的强调</strong> <br />
    <quote>内联引用</quote> <br />
    <blockquote>块级引用</blockquote>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容