u1jodi1q 发表于 2024-6-29 15:07:41

前端零基本入门（三）：HTML，CSS，Javascript三者之间的关系


    <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;">有些人是以前从事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>，多多少少都会对前端有<span style="color: black;">必定</span>的<span style="color: black;">认识</span>，不<span style="color: black;">必定</span>是这个词，但<span style="color: black;">必定</span>是这个职位 </p>小白的话，可能<span style="color: black;">更加多</span>的听到的是h5，css3之类的名词，其实<span style="color: black;">没</span>论从哪个<span style="color: black;">方向</span>接触到前端，不可避免的要<span style="color: black;">认识</span>前端的三大语言 HTML CSS Javascript
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">今天咱们要说的<span style="color: black;">便是</span>这三大语言之一的HTML，翻译成中文，叫做超文本标记语言，全<span style="color: black;">叫作</span>是HyperText Markup Language</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;">第1</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>html是一门语言这个毋庸置疑，<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>内容<span style="color: black;">暗示</span>其<span style="color: black;">功效</span>，<span style="color: black;">例如</span>用&lt;h1&gt;标签来<span style="color: black;">暗示</span>页面上的一个标题，用&lt;p&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;"><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>的都是同一个东西，从html语言<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><span style="color: black;">叫作</span>之为元素；从渲染引擎的<span style="color: black;">方向</span>，还<span style="color: black;">能够</span><span style="color: black;">叫作</span>之为文档对象模型(Document Object Model —— DOM)等等…<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>从字面上就<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><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;">HTML<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>用来承载<span style="color: black;">有些</span>功能，<span style="color: black;">例如</span>说a链接，<span style="color: black;">例如</span>说表单提交数据。到了今天，<span style="color: black;">咱们</span><span style="color: black;">能够</span>把HTML看做是一个房子的骨架，结构</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在1994年万维网联盟（W3C）成立之初，<span style="color: black;">由于</span><span style="color: black;">无</span><span style="color: black;">关联</span>标准，外加上网站的风靡，HTML被迫<span style="color: black;">显现</span>了一下诸如&lt;font&gt;之类的<span style="color: black;">有些</span>用来描述外观的标签，但这并不是HTML的本职工作，以至于今天<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>必要全都<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>越来越多，人们<span style="color: black;">起始</span>注重网站的外观，<span style="color: black;">此时</span>候CSS<span style="color: black;">亦</span>就应运而生了。说白了，CSS<span style="color: black;">便是</span><span style="color: black;">掌控</span>为HTML元素添加样式从而使页面更加<span style="color: black;">美丽</span>的。CSS的全程 Cascading Style Sheets,中文名：层叠样式表。我认为这个中文名翻译得非常贴切，从字面上就能看出来CSS的特点，那<span style="color: black;">便是</span>层叠，<span style="color: black;">或</span>叫堆叠。利用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>是后者会覆盖前者罢了。（以后再解释什么是后者什么是前者）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">与HTML相比，CSS支持更丰富的文档外观，其表现程度<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><span style="color: black;">表示</span>文本，还<span style="color: black;">准许</span>完成许多其他的效果。<span style="color: black;">倘若</span>说HTML是房子的骨架，<span style="color: black;">那样</span>CSS<span style="color: black;">便是</span>房子的外观——外墙是什么颜色？家里是什么颜色？地板是什么材质的？房子外围有多大的草坪？这些都由CSS来决定！</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>别的东西了。<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;">于是</p>




mugong 发表于 2024-9-7 06:03:51

你的话语如春风拂面，让我感到无比温暖。

qzmjef 发表于 2024-11-13 05:01:26

我深受你的启发，你的话语是我前进的动力。
页: [1]
查看完整版本: 前端零基本入门（三）：HTML，CSS，Javascript三者之间的关系