4lqedz 发表于 2024-6-29 17:04:27

前端简介笔记--HTML入门


    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">有些</span>概念</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">客户端</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">web系统中<span style="color: black;">通常</span>指浏览器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户最先接触到的部分，直接跟用户操作界面UI打交道的工作，都<span style="color: black;">能够</span>划入前端范围。狭义的前端，<span style="color: black;">通常</span>指网页端。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">JavaScript和前端<span style="color: black;">研发</span>的关系</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML用来定义页面结构和核心内容，CSS用来为这些内容加上样式，JavaScript则用来<span style="color: black;">同期</span>做这两件事。但<span style="color: black;">倘若</span>是<span style="color: black;">这般</span>的话，前两者又有什么用呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">成本问题，用JavaScript做<span style="color: black;">一样</span>的事非常<span style="color: black;">繁杂</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如，在浏览器的<span style="color: black;">掌控</span>台中输入代码：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-4b654107bee89f399acdb10c748bbb34_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相当于html的一组标签：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>信科<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">虽然JavaScript几乎<span style="color: black;">能够</span>做HTML和CSS能做的所有事情，但它存在的<span style="color: black;">道理</span>并不是为页面<span style="color: black;">创立</span>结构和指定样式，它是用来<span style="color: black;">指点</span>浏览器<span style="color: black;">怎样</span>动态地<span style="color: black;">创立</span>结构及<span style="color: black;">功效</span>样式的。<span style="color: black;">能够</span>在网页上设置按钮，点击后<span style="color: black;">表示</span>新的内容。这才是JavaScript最恰当的应用场景。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">后端<span style="color: black;">研发</span>是怎么回事？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">后端是“大城市”，机会多，更方便，资源集中，中心化。客户端是“乡下人”，老乡们<span style="color: black;">拜访</span>大城市的速度非常快，拿到东西就立即返回乡下。<span style="color: black;">倘若</span><span style="color: black;">无</span>后端，则相当于<span style="color: black;">无</span>大城市，老乡们不可能拿到<span style="color: black;">必须</span>的东西。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">除此之外，后端还<span style="color: black;">必须</span>维持状态和<span style="color: black;">掌控</span>权限，银行账号的余额不可能放在前端来管理，太危险了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">服务器端</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">服务器<span style="color: black;">亦</span>是一台计算机，服务器<span style="color: black;">一般</span>为效率<span style="color: black;">思虑</span>，<span style="color: black;">乃至</span><span style="color: black;">无</span>图形界面，运行起来以后，很<span style="color: black;">长期</span>就不<span style="color: black;">必须</span>管它，很专注的，在web<span style="color: black;">研发</span><span style="color: black;">行业</span>，服务器要做的最<span style="color: black;">要紧</span>事情<span style="color: black;">便是</span>返回用户<span style="color: black;">必须</span>的网页数据。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但服务器不会主动联系客户端发送内容，否则会崩溃的，<span style="color: black;">通常</span>都是客户端先发出请求request，<span style="color: black;">倘若</span>合法，服务器就返回客户端<span style="color: black;">必须</span>的数据，<span style="color: black;">叫作</span>为response，响应后服务器就撒手不管了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">客户端</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">便是</span>用户这头，客户端在收到服务器的响应后，就<span style="color: black;">起始</span>解析返回的内容，<span style="color: black;">经过</span>解析html代码，浏览器得知页面中<span style="color: black;">必须</span>的其他资源，<span style="color: black;">照片</span>，视频，样式规则等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML和CSS的关系</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML是骨架，用来盛放信息内容的，在CSS和JavaScript<span style="color: black;">显现</span>之前，HTML就<span style="color: black;">显现</span>了，这是必然的，除了承载核心信息的需求外，HTML还<span style="color: black;">处理</span>了一个<span style="color: black;">要紧</span>的问题，将信息结构化。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!doctype html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span>
      <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"ie=edge"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>Demo<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">artcle</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>背影<span style="color: black;">&lt;/</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就<span style="color: black;">这里</span>地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">artcle</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">section</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"comment-list"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"title"</span><span style="color: black;">&gt;</span>评论<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"comment"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">strong</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"username"</span><span style="color: black;">&gt;</span>柳絮<span style="color: black;">&lt;/</span><span style="color: black;">strong</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">span</span> <span style="color: black;">class</span><span style="color: black;">=</span>
    </div>




sbxzw 发表于 2024-9-25 15:06:39

你的努力一定会被看见，相信自己，加油。

4lqedz 发表于 2024-10-6 11:40:41

seo常来的论坛，希望我的网站快点收录。

4lqedz 发表于 6 天前

感谢您的精彩评论，为我带来了新的思考角度。
页: [1]
查看完整版本: 前端简介笔记--HTML入门