【前端博客】先从HTML开始吧！_html 是谁发明的 html 起手应该写什么-CSDN博客

本文链接：https://blog.csdn.net/abc465200/article/details/104912894

《前端入门先了解下历史吧！》

【1】HTML 是谁发明的？
【2】起手应该写什么？
【3】常用的表章节/书的标签有哪些
【4】常用的全局属性有哪些？
【5】常用的内容标签有哪些?

【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 是谁发明的 ？