HTML复习(一)

什么是html

简单来说,html就是“HyperText Markup Language”的简写,也就是超文本标记语言。
通过浏览器解析之后就渲染成页面。
html主要用来标记页面中的内容,同时浏览器会赋予其一定的样式。但是在开发过程中我们一般不使用默认的样式,而是通过css来制定。

历史版本

  • 1991 html
  • 1995 html2(第一个官方标准)
  • 1996 html3.2
  • 1997 html4.0
  • 1999 html4.1
  • 2000 xhtml1.0(转折点)
  • 2001 xhtml1.1
  • 2005 xhtml2.0(不被浏览器厂商认同)
  • 2008 html5(草案)
  • 2014 html5(啊,终于等到你~)
  • 持续更新

文档结构

<!-- 文档声明 -->
<!DOCTYPE html> 
<!-- 根元素 -->
<html lang="en"> 
<!-- 文档头部 -->
<head>
    <meta charset="UTF-8">
    <title>lexian-mall</title>
</head>
<!-- 文档主体 -->
<body>
    
</body>
</html>

文档声明

html文档声明告诉了浏览器应当用什么标准解析这份html文档,如果不添加,浏览器可能会用自己默认的解析方式来解析,造成错误。
要求:

  • 写在文档的首行
  • 格式<!DOCUTYPE 声明内容>,对大小写不敏感
  • HTML4.01时代有很多声明,比如:
    • strict.dtd
    • loose.dtd
    • frameset.dtd
  • HTML5时代
    只要有<!DOCTYPE html>

文档头部

主要有mate,title,link,style

除了title作为浏览器的tab上的文字显示,其他内容均不会显示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./../common/base.css">
    <title>Document</title>
    <style>
        #app{
            margin: auto;
        }
    </style>
</head>

文档主体

文档主题是用户真正可见的内容

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./../common/base.css">
    <title>Document</title>
    <style>
        #app{
            margin: auto;
        }
    </style>
</head>

基本语法

标签

符合W3C标准的标签是小写的,(所以在vue工程中,驼峰命名的组件,在调用时都是小写),一般是成对的开闭标签,有时也会是单个标签比如:

<div>有开有闭</div>
<img alt="hehe">

标签属性

  • 属性控制了标签的行为,比如<a href="demo.html">链接</a>
  • 属性可以不加引号,但是在属性中包含等号的时候必须加,比如 <a href="demo.html?page=13">链接</a>
  • 有些属性的类型是bool,可能不需要使用等于号,直接用属性名就可以表示,比如:<button disabled>按钮</button>

注释

语法为 ``,用户不可见,增加可读性

全局属性

  • id(唯一标示)
    -class (一类标示)
  • style(行内样式,优先级最高的样式)
  • title (当元素被hover时显示的信息)

实体字符

符合html标签规则的文字会被解析为标签,不被显示,这时我们需要进行转义。

名称 实体字符
空格 &nbsp,&#160
引号 &quot,&#34
> &gt,&#62
< &lt,&#60
© &copy,&#169
& &amp,&#38
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,107评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,315评论 1 92
  • 前言 本系列文章主要是基于W3school这个学习网站来总结的,之所以会自己总结一番,一来是因为网站中的实例效果,...
    码字与律动阅读 4,326评论 4 70
  • “Be conservative in what you send; be liberal in what you...
    Rella7阅读 1,227评论 0 2
  • 目录一、介绍二、渲染引擎三、解析与DOM树构建四、渲染树构建五、布局六、绘制七、动态变化八、渲染引擎的线程九、CS...
    饥人谷_米弥轮阅读 2,521评论 0 10

友情链接更多精彩内容