html基础

59 阅读1分钟
网络工作的整个流程。大致概括:
从 URL 输入到页面展现经过以下过程:
在浏览器输入 URL;
浏览器查找域名对应的 IP 地址;
浏览器根据 IP 地址与服务器建立联系;
浏览器与服务器通信:浏览器请求,服务器处理请求并呈现页面。
然后我们进行倒推:
第一,服务器处理请求并呈现页面: Web 服务器是一个全天 24 小时都在岗的先进劳模,它随时在准备处理来自 Web 浏览器发来的请求。一旦有请求,Web 服务器就会以适当的处理方式把装在它身体里的 HTML 文件(HyperText Markup Language 超文本标记语言)(每个服务器会存储 HTML 文件、图像、声音和其他类型的文件)反馈给 Web 浏览器。
第二,Web 浏览器得到反馈后怎么去显示这个页面: HTML 是浏览器显示页面的关键,它会告诉浏览器页面的结构和所有内容。Web 浏览器在读取服务器反馈的 HTML 文件时,它会翻译文本中的所有标记(告诉浏览器:标题放哪里,段落放哪里,哪些文本需要强调等等)。
<!-- 每个页面都要从 DOCTYPE 开始,它为浏览器指定这个页面的文档类型,以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写,那么浏览器就会认为你在使用标准 HTML。
这样写的好处是:不用再像 HTML5 出来之前那样,既要写上 HTML 版本号,又要写上这个 HTML 文档所依据的标准是在什么位置。一劳永逸,之后不管 HTML 再怎么更新,我们的文档都可以被浏览器以最正确的方式显示出来。 -->
<html lang="en">
<head>
    <!-- 只有 <head> 和 <body> 元素能直接放在 <html> 元素里:
        <head> 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title,可以放 CSS,这些部分不会被用户看到;
        <body> 里边放的是和页面内容相关的元素——即你想让用户看到的内容。-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- “meta” 指的是我们要告诉浏览器关于我们页面的一些信息
    content属性值 :
     width:可视区域的宽度,值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
     maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放,no 禁止缩放
    -->
    <title>Document</title>
    <!-- <head> 元素里,必须在正确的位置包含一个 <title> 元素(演示展示) -->
</head>
<body>
    <input type="text" required>
    <input type="date">
    <input type="search">
    <input type="week">
</body>
</html>

161B9CACB123B14AF0E2AACE730E0ABF.png