欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

《HTML入门笔记1》

程序员文章站 2024-01-26 10:20:40
...

《HTML入门笔记1》

【1】HTML 是谁发明的 ？

万物起生皆有源头,学习HTML也是如此，在1990年左右，一位女科学家先是自己写了一个浏览器，由于浏览器需要进行浏览，自己便创建了一个服务器，最后实现了用自己的服务器浏览了自己创造的服务器，便有了万维网（www）的概念,万维网具体是什么呢？简单来说是有HTML、HTTP、URL地址三部分，它是一个实现输入网址即可实现网页的系统。她就是英国的Tim Berners-Lee,中文叫她李爵士，现在依然在世。

【2】起手应该写什么？

常见是新建html文件保存，英文符号下输入！，按tab键生成

<!DOCTYPE html>//文档类型
<html lang="en">//html标签 可为en英文zh-CN中文

<head>
    <meta charset="UTF-8"> //文档编码方式 一般为UTF-8
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //meta标签还可以备注作者 兼容手机 起始状态等
    <title>Document</title>//标题
</head>

【3】常用的表章节/书的标签有哪些

  • h1~h6 标题标签 1-6随着数字的增加，字体在缩小，一般只有一个h1,同时使用按顺序，不要出现h1的下面直接跳到h的情况

  • section 章节标签

  • article 文章标签

  • p 段落标记

  • header 头部标签 一般位于首部 包含logo 搜索

  • main 主要内容

  • aside 旁支内容一般为文章的评论解释等

  • div 分块标签

  • footer 脚部标签 常放版权 ©

    正常布局如下

<div>
    <main>
        <article>
            <h1>标题</h1>
            <h2>副标题</h2>
            <section>
                第一章
                <p>第一段</p>
                <section>第一节
                    <p>段落</p>
                </section>
                <section>第二节
                    <p>段落</p>
                </section>
            </section>
        </article>
    </main>
</div>
<aside>次要内容</aside>
<footer>尾 &copy;版权</footer>

【4】常用的全局属性有哪些？

所有标签都有这些属性

  • class 类选择器 可多个 格式 .class
  • id id选择器 唯一性 但是不建议用 因为即使id相同不会报错 格式#id
  • contenteditable 可编辑属性
  • style 样式 可实现样式编辑器 把style标签放在body体里
<style contenteditable>
        style {
            display: block;
            border: 1px solid red;
        }

        .middle {
            background: #666;
            color: white;
        }
    </style>

  • hidden 隐藏属性

  • title 提示文档

  • tabindex 无鼠标时tab可选择 为正数时由小到大 为0s时最后选择 为负数不选择

附加技巧：文档超出范围显示省略号＋隐藏

        style {
            overflow: hidden;//超出隐藏
            white-space: nowrap; //不换行
            text-overflow: ellipsis; //省略号...
        }

【5】常用的内容标签有哪些?

  • ol li 有序列表 ordered list 可嵌套 ol标签不能有值
  • ul li 无序列表 unordered list 可嵌套 ul标签不能有值
<ol>
    <li>列表1</li>
    <li>列表2
        <ol>
            <li>列表3</li>
            <li>列表4</li>
        </ol>
    </li>
</ol>
  • a 锚点 点 anchor
<a href="网址" target="_block">文字</a>
  • dl+dt+dd description list+description team+description detail
<dl>
    <dt>思思</dt>
    <dd>美女</dd>
</dl>
  • code 相同宽度 一般放在pre内部
  • pre 固定格式
  • br 强制换行 break
  • hr 横线
  • em 强调 emphasis
  • srong 重要 事实本质
  • quote 引用 行内
  • blockquote 引用 块状 换行
他<em>强调</em>
这次成绩<strong>重要</strong>
欧阳修说过
<blockquote>马上 枕上 厕上</blockquote>

如果你觉得已经晚了，现在就是最早的开始！共勉。
《HTML入门笔记1》

相关标签： HTML html5 javascript html css css3

上一篇： 解决乱码 - 万金油

下一篇： uniapp 用vue事件方法注册调用

推荐阅读