• HTML总结


    零零散散学了几个月的前端,汇总一下对HTML的理解吧,写完就忘记~

    历史

    HTMLTime Berners-Lee1990年发明的。看看他的生平:

    • 1994年,离开欧洲到美国去建立W3C
    • 2004年,获取英国女皇为他颁发的大英帝国爵级司令勋章
    • 2016年,获得了图灵奖


    这位老爷子的成就不仅仅是发明了HTML,还定义了一整套现在人们网页使用的流程,发明了WWWHTTPURL。老爷子在发现自己制定的一套约定有很大的发展空间,需要花费自己更多的精力维护时,辞退自己原本工作,创办了W3C组织,用于指定一系列的规则。

    默认样式

    默认样式的历史

    老爷子在发明HTML的时候,还没有发明出来CSS。为了让游览器更好展示页面,他规定游览器在识别标签的时候,要为其附上默认样式
    default_style

    可以通过开发者工具Elements -> Styles -> user agent stylesheet查看默认的样式 。

    默认样式的缺点以及解决办法

    现如今,我们都用CSS来修改页面样式。有时候,默认样式会对我们操作CSS产生影响,出现错误的时候,不容易定位。所以,一般开发的时候都会删除默认样式。这也叫做CSS Reset

    * {
      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;
    }
    

    其实这种CSS Reset代码可以从大型网站找到的,比如淘宝

    对HTML的理解

    HTML其实就是一个文件,游览器通过HTTP将服务器上的文件传输到本地游览器,游览器根据W3C制定的规则来解析、展示。这在后面学习标签的时候,就能理解到。
    比如说emstrong标签,这个标签在定义上规定:

    • em:表示在语气上强调;
    • strong:在内容上强调;

    规定就是规定,规定也仅仅是规定。我愿意遵守就遵守,所以你要是非胡乱用这些标签,其实也并不是不可以。但大多数情况下,我们还是要遵守这些规定的。因为这能更好的加强人机交互,毕竟机器可读不出来语意。

    对了,还有一种说法。HTML大多数标签其实等于div + 指定的CSS。感觉还是很有道理的,只不过这些CSS由游览器来添加罢了。

    HTML知识点

    下面就是一些知识点了,基本就是自己理解版本的MDN

    HTML文件结构

    HTML文件的大致结构如下:

    <!doctype html> 文件描述,表示该文件是html文件。again,又一次表明约定的重要性
    <html lang="zh">
    <head>
    	<meta charset="UTF-8"> 描述该页面数据的数据,俗称元数据
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 禁用缩放;兼容手机
        <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 告诉IE游览器使用最新版内核解析该文件
        <title>文件的描述</title>
    </head>
    
    <body>
    </body>
    </html>
    

    参考资料

    HTML元素

    这里有几个有意思的小知识点,具体标签的用法,以后再写吧。

    块级元素和内联元素

    这是HTML中非常重要的元素分类,但是在HTML5重新定义元素的分类。

    • 块级元素:页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现
    • 内联元素:内联元素不会导致文本换行

    这里可能就需要了解元素的种类,比如说:div是块级元素,a是内联元素。这里其实涉及到样式的问题,一些布局技巧中建议:

    • 不要把块级元素放在内联元素中

    事事都有特殊情况,div标签就可以放在a标签

    布尔属性

    这其实是我开发遇到这种属性,然后在MDN看到这个介绍,印象有点深,就记录一下。
    HTML标签中允许不写属性值,这种属性就称为布尔属性。比如说:

    <input type="text" disabled="disabled">
    

    参考知识

    HTML5了解

    我自己没总体的学习过HTML5,只是有时候用了一下。这里从别人抄过来HTML5的大致目录,以后再总结吧。
    HTML5其实就是最新版本的HTML语言,包含下述技术:

    • 新标签、新属性
    • 新的通信技术:WebSockets、WebRTC等
    • 离线存储技术:LocalStorage、断网检测
    • 多媒体技术:视频、音频
    • 图像技术:Canvas、SVG、WebGL
    • Web增强技术:HistoryAPI、全屏
    • 设备相关技术:摄像头、触摸屏
    • 新的样式技术:CSS3新的Flex、Grid布局方式

    参考知识

    参数链接

    Time Berners-Lee生平介绍

  • 相关阅读:
    github创建repo,本地导入git项目到github
    成功的GIT开发分支模型和策略
    示例可重用的web component方式组织angular应用模块
    git deployment strategy
    如何在linux中从源代码编译安装nodejs?
    some resource favor
    学而习之,成就学习
    C# 去掉代码前边空格(格式化代码)
    mvc重定向
    mvc cshtml 中赋值
  • 原文地址:https://www.cnblogs.com/fourther/p/13417461.html
Copyright © 2020-2023  润新知