4lqedz 发表于 2024-6-30 00:00:11

《HTML入门笔记1》


    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>HTML是什么?</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML语言简介</p>HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由<span style="color: black;">理学</span>学家李爵士(Tim Berners-Lee)发明。它的最大特点<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 style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网页及HTML概述</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 是网页<span style="color: black;">运用</span>的语言,定义了网页的结构和内容。浏览器<span style="color: black;">拜访</span>网站,其实<span style="color: black;">便是</span>从服务器下载 HTML 代码,<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>三种技术:HTML、CSS 和 JavaScript</p>HTML 语言定义网页的结构和内容CSS 样式表定义网页的样式JavaScript 语言定义网页与用户的互动<span style="color: black;">行径</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(HTML 语言是网页<span style="color: black;">研发</span>的<span style="color: black;">基本</span>,CSS 和 JavaScript 都是基于 HTML <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 代码<span style="color: black;">便是</span>由许许多多<span style="color: black;">区别</span>的标签(tag)<span style="color: black;">形成</span>。学习 HTML 语言,<span style="color: black;">便是</span>学习<span style="color: black;">各样</span>标签的用法。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>HTML起手应该怎么写</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-92bc09b582124b82f157e56c0dcebc86_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">通知</span>文档类型(告诉浏览器,我要准备写HTML啦!)<div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. html标签,lang=en(lang为语言,en可改为zh-CN中文)</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;html lang="en"&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3. head标签,里面写的内容基本都是看不见的声明内容</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;head&gt;
      ...
      &lt;/head&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4. 文件的字符编码(<span style="color: black;">通常</span><span style="color: black;">状况</span>下<span style="color: black;">没</span>需改变,此格式支持<span style="color: black;">更加多</span>语言)</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;meta charset="UTF-8"&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5. 禁用页面缩放</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6. 告诉IE<span style="color: black;">运用</span>最新内核</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7. 此文档的标题为Document</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>Document<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>常用的章节标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标题:h1~h6</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>,章节都有标题</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;h1&gt; ... &lt;/h1&gt; //一级标题</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;h2&gt; ... &lt;/h2&gt; //二级标题</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">章节:&lt;section&gt; ... &lt;/section&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;section&gt;标签<span style="color: black;">暗示</span>一个含有主体的独立部分,<span style="color: black;">一般</span>用在文档里面<span style="color: black;">暗示</span>一个章节,<span style="color: black;">例如</span>&lt;artical&gt;标签里<span style="color: black;">能够</span><span style="color: black;">包括</span>多个&lt;section&gt;标签,&lt;section&gt;总是多个<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;">段落:&lt;p&gt; ... &lt;/p&gt;</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;">头部:&lt;header&gt; ... &lt;/header&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">头部标签<span style="color: black;">亦</span>叫作页眉标签,&lt;header&gt;标签<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>或一个区块的头部。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">脚部:&lt;footer&gt; ... &lt;/footer&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;footer&gt;标签<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>信息。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重点</span>内容:&lt;main&gt; ... &lt;/main&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;main&gt;标签<span style="color: black;">通常</span><span style="color: black;">暗示</span>页面的主题内容,<span style="color: black;">通常</span>一个页面内<span style="color: black;">仅有</span>一个&lt;main&gt;标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>:&lt;main&gt;标签是顶层标签,<span style="color: black;">不可</span><span style="color: black;">安置</span>在&lt;artical&gt;,&lt;header&gt;,&lt;footer&gt;,</p>




jxwysz 发表于 2024-8-26 06:44:06

你的话语如春风拂面,温暖了我的心房,真的很感谢。

流星的美 发表于 2024-9-5 08:21:55

顶楼主,说得太好了!

j8typz 发表于 2024-9-29 23:13:45

回顾历史,我们不难发现:无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。

nqkk58 发表于 2024-10-10 13:57:05

楼主果然英明!不得不赞美你一下!

4zhvml8 发表于 昨天 11:58

一看到楼主的气势,我就觉得楼主同在社区里灌水。
页: [1]
查看完整版本: 《HTML入门笔记1》