论坛 › 外链发布 › 网页前端之HTML+CSS+JS

j8typz 发表于 2024-6-29 16:03:59

网页前端之HTML+CSS+JS

<img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdohPPh6ThLr2wZicM173EzfbY0lQtibJsJ6RKVP20ghVzgdKL9ZwZkFUNg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">银杏<span style="color: black;">（学名：Gin<span style="color: black;">公斤</span>o biloba）</span>，落叶乔木，树冠圆锥形，枝轮生，叶互生，在长枝上散生，二歧状分叉叶脉，果具长梗，下垂，倒卵圆形，外被白粉，味甘略苦，是最古老的孑遗植物······《植物资源学》课上学到的东西忘得差不多了，记不清为什么要给植物起个拉丁名，有个声音</span><span style="color: black;">却</span><span style="color: black;"><span style="color: black;">始终</span>回响：<span style="color: black;">期盼</span>你变得更好更强大······</span></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoQiaMhjscmFQ9iaJSib9lvzQyy8zT7tg7eFOZHFjXNVoVWTibgyLCicKx7eA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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;">红专并进一甲子，科教报国六十年。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdolfVnZHm4uooxf3MdrGHRQ1mBJDbnickIkdOGiczneHL9GBKQMhqzepyA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">“优雅降级，渐进<span style="color: black;">加强</span>，弥散圆，原子化设计，HTML5, CSS3 ,JavaScript, jQuery······”这些前端术语，陌生中带着些新奇，经过一番<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;"><strong style="color: blue;"><span style="color: black;">渐进<span style="color: black;">加强</span></span></strong><span style="color: black;">（先满足低版本浏览器基本功能，<span style="color: black;">而后</span>对高级浏览器进行效果、交互、追加功能从而达到更好的体验，<span style="color: black;">亦</span><span style="color: black;">叫作</span>向上兼容）</span>与<strong style="color: blue;"><span style="color: black;">优雅降级</span></strong><span style="color: black;">（<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>，不仅<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><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQXyc032F0H3zqIfDMq5ydO4ia9eyYPExjwfbyT0ibzm8aicd2F3lia3Lg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">前端知多少</strong></span></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQ5cyiaPQ9tdVseZWmHgYf6dD3hXiaDTg31GhXZqzicbzym6bniaO6WTjA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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＋CSS＋JS是“前端三剑客“，它们各司其职，协同工作，将最基本的文字、<span style="color: black;">照片</span>、超链接、音乐、视频、动画等网页内容<span style="color: black;">恰当</span>布局，细致交互，带给用户舒适的体验。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdo6VGU9KYERicKIicjoepC1l4uq8dfOctUuOUUwZiasJ9840naMwu6ibWxmg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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>，白底黑字不美观，体验太差了。不如试试这些吧：Dreamweaver、Sublime、WebStorm、Notepad++、Visual Studio Code等，这些软件分为轻量级和重量级，正如其字面意思<span style="color: black;">同样</span>，轻度<span style="color: black;">运用</span>的话<span style="color: black;">选取</span>轻量级足够。<span style="color: black;">这儿</span>以Visual Studio Code（VS code）为例——一款微软<span style="color: black;">研发</span>的轻量级前端编程软件，<span style="color: black;">仅有</span>60M<span style="color: black;">体积</span>。<span style="color: black;">这些软件</span><span style="color: black;">与记事本的区别是什么？增加了</span><strong style="color: blue;"><span style="color: black;">文本高亮<span style="color: black;">表示</span>、标签自动填充，程序错误提醒</span></strong><span style="color: black;">等辅助功能，使得编写程序相对舒适和方便些。</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQXyc032F0H3zqIfDMq5ydO4ia9eyYPExjwfbyT0ibzm8aicd2F3lia3Lg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">HTML</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">HTML</strong></span><span style="color: black;">（Hyper Text Markup Language, 超文本标记语言）</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>标签&lt;img&gt;、<span style="color: black;">插进</span>段落标签&lt;p&gt;······<span style="color: black;">咱们</span>来实际操作一下吧（以下程序都在VS code中编写）。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新建一个记事本，另存为.html文件，<span style="color: black;">而后</span>用VS code打开。以下代码<span style="color: black;">便是</span>html文件的基本结构：</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoYjOm1NIEMTQgdjC4BjkYFwut1c8wmlWhoPxRLwlTLlIG9nzVz6Jpnw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>行&lt;!DOCTYPE HTML&gt;申明该文档遵循HTML5标准。剩下的<span style="color: black;">重点</span>分为两部分，<span style="color: black;">第1</span>部分为<strong style="color: blue;"><span style="color: black;">头部标签&lt;head&gt;&lt;/head&gt;</span></strong>，<span style="color: black;">这儿</span>面放的是网页的标题（title标签中）和字符编码格式、<span style="color: black;">重要</span>字（便于浏览器搜索）和页面说明等（meta标签中），&lt;head&gt;标签中<span style="color: black;">亦</span>用来引入<span style="color: black;">外边</span>的css和js文件。第二部分为网页的<span style="color: black;"><strong style="color: blue;">主体部分，放在&lt;body&gt;&lt;/body&gt;标签中</strong></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文件的&lt;body&gt;标签之间输入相应的文字<span style="color: black;">就可</span>，如下：</p><img src="https://mmbiz.qpic.cn/mmbiz_gif/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoK6L27LAk4Kzibic9ISB2E1Tjf5qFAR89icE9HUR5RhVOFFqZeiblbv8MYA/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
    <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>功能了——<span style="color: black;">表示</span>和描述网页内容。接下来，试一试多添加<span style="color: black;">有些</span>内容吧，<span style="color: black;">插进</span>些<span style="color: black;">照片</span>和文字，效果如下：</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdo2pX4lSAjfV6ywgnauBVWWpeUr3ZkWLW7oPGfDc1W9GdUMctPTDC8Ug/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_gif/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoCmicsvpgpHWZsLn8L0GVU7B6rWeiaWmqAddfGkic596n0q4bkQc83UK1g/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
    <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>css了。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQXyc032F0H3zqIfDMq5ydO4ia9eyYPExjwfbyT0ibzm8aicd2F3lia3Lg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">CSS</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">CSS</span></strong><span style="color: black;">（Cascading Style Sheets，层叠样式表）</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>，<span style="color: black;">首要</span>新建记事本，<span style="color: black;">而后</span>另存为.css文件，<span style="color: black;">运用</span>VS code打开<span style="color: black;">就可</span>编写代码。在html文件中引入css文件就可实现样式的改变。举个例子，改变网页和文字颜色：</p>
    <img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdofdaiciaXuuaBVcv8xUibKYcAK8n26V7HP8cdpKpLzEViabQpPz4mxxhQ4w/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_gif/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoyMqVaIVW8l933iaM8QagGVW06PBeibzTsGBySch8NzPKs5Ikqf5OeQuw/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从这个例子<span style="color: black;">能够</span>看到css文件的特点，<span style="color: black;">首要</span>是找到html 中的元素，<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>完善一下吧。</p><img src="https://mmbiz.qpic.cn/mmbiz_gif/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdonWuNkJwm368uF9jjFYoIjY4nHb92hSJnLwFVb7uHOj3JaBl0fgHWLg/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoOgmgjRrrBxgicQNEFfEld8GDbcwVbccRfibjTKoyhcnqcn3F7LDd6UDQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdo2v7Lmm2zqRTtyhScSfTt4MC6YBYbXwmuS5gibXG1Wv6o2Y0vlZms7PQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">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>元素相互之间的关系。</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;">（html来实现）</span>和各元素的样式<span style="color: black;">（css 来实现）</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(Js)就<span style="color: black;">必须</span>出场了。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQXyc032F0H3zqIfDMq5ydO4ia9eyYPExjwfbyT0ibzm8aicd2F3lia3Lg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">JavaScript</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">JS（JavsScript）是Web页面中的一种脚本语言，它<span style="color: black;">能够</span>把静态页面转化为支持用户交互并响应的动态页面。<span style="color: black;">例如</span>说实现下面的<span style="color: black;">照片</span>切换效果：</p><img src="https://mmbiz.qpic.cn/mmbiz_gif/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdo5FKYzWibFBjq3gPtbof1nXZX42B7ib7EPcRq1iaiaS3XaicEQNcADlHTibHA/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">和html与css<span style="color: black;">同样</span>，<span style="color: black;">首要</span>新建记事本，<span style="color: black;">而后</span>另存为.js文件，<span style="color: black;">运用</span>VS code打开<span style="color: black;">就可</span>编写代码。实现上面那个例子，<span style="color: black;">必须</span><span style="color: black;">怎么样</span>的js代码呢？</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdogZJJP3qyicPIAooGL5lEEWj4s9THeMRGNiaNuNicpEv1mzicCPhnYh3rFQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">JS代码特点是有var 来定义变量，有“function 函数名（）{函数体}“来定义函数，还有<span style="color: black;">有些</span>窗口事件等。上面这个例子，<span style="color: black;">详细</span>执行了<span style="color: black;">那些</span>功能呢？</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoNo9ibwcFj9wog91aYe6dJIdeObwDHrrTMBUPJicGlsicmjglh18FVibxnA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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>效果来看，当网页打开时执行init（）函数，它的内容是每两秒钟执行一次tupian()，tupian（）这个函数的<span style="color: black;">功效</span>是依次<span style="color: black;">表示</span>照片，<span style="color: black;">因此呢</span><span style="color: black;">全部</span>init()函数的<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>html、css和js所实现的基本功能，接下来<span style="color: black;">一块</span><span style="color: black;">瞧瞧</span>它们是<span style="color: black;">怎么样</span>联系在<span style="color: black;">一块</span>的吧！</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdokBmN1tTyVChLpQkHyFMZRfBO4CF2A3HAFLQkCxqynkUmvuFZNGMPjQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这是在本地盘中文档结构，<span style="color: black;">包括</span>了html文件、css文件、js文件和用到的<span style="color: black;">照片</span>。</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdo6Qw17mUlFX4zEYw3hnKVHteSrpjT4CaTZjneaMiabVrCv08cB5C1mLA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在html的&lt;head&gt;&lt;/head&gt;标签中分别引入了css和js文件，当然，<span style="color: black;">亦</span><span style="color: black;">能够</span>不引入<span style="color: black;">外边</span>的css和js，而是采用内联的方式，在html中，把css代码放在&lt;style&gt;&lt;/style&gt;标签之间，把js代码放在&lt;script&gt;&lt;/script&gt;标签之间。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoKQXyc032F0H3zqIfDMq5ydO4ia9eyYPExjwfbyT0ibzm8aicd2F3lia3Lg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">尝试看懂一个网页</strong></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>就以www.baidu.com为例吧！用浏览器打开baidu.com，按F12键查看源代码，如下图所示：</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoP8esFs9AaD63bJ0QYwibEQYFyRHg3MQNOK20v0VwqQQmJYxJGiaribeLQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <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>，网页元素一一呈现，在&lt;style&gt;&lt;/style&gt;标签之间是css代码，在&lt;script&gt;&lt;/script&gt;标签之间是js 代码，link<span style="color: black;">暗示</span>一个链接，&lt;div&gt;&lt;/div&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>找找百度的logo吧！</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/CcfTMDEdsicNqzRezLw2Hr7BHlARxrEdoLBEVDRUbKnjxcfW7qf1sq11krficvMIcufuV5C0dRFheO1QK900ZkEw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">找到了logo所在的网址，<span style="color: black;">咱们</span>打开这个网址，就<span style="color: black;">能够</span>看到源文件了。</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">有效</span><span style="color: black;">方便</span><span style="color: black;">颁布</span>一个网站</strong></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>的方便了这种需求的用户——利用Github。</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">Github</span></strong><span style="color: black;">（https://github.com）</span>是个网页，更确切地说叫做代码托管平台，内容极其丰富，申请一个账号之后，新建个Repository（仓库），<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>用Repository（仓库）来存放本地网页文件。上传到Github的方式<span style="color: black;">重点</span>有两种，一是<span style="color: black;">经过</span>代码的方式进行上传（git方式），另一种方式是<span style="color: black;">经过</span>图形化界面进行上传（GitHub Desktop），显<span style="color: black;">而后</span>者直观些。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用github托管个人主页<span style="color: black;">必须</span><span style="color: black;">重视</span>一点——仓库名<span style="color: black;">必要</span>为：”用户名.github.io”，例如：我的用户名是Gordon-Tang，<span style="color: black;">因此呢</span>，我新建的仓库名<span style="color: black;">便是</span>：Gordon-Tang.github.io，<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>栏中输入：“<strong style="color: blue;"><span style="color: black;">http://Gordon-Tang.github.io/html文件名</span></strong>”就<span style="color: black;">能够</span><span style="color: black;">拜访</span>了，不<span style="color: black;">必须</span>申请服务器和域名。</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上传到Github的文件与本地的文件结构<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 代码，另<span style="color: black;">保留</span>为.html 文件格式，双击打开<span style="color: black;">就可</span>看到网页内容，如下图所示。</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下一期将讲述一根USB数据线的前世今生，期待与你一探<span style="color: black;">到底</span>！</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">西农的娃</span><span style="color: black;"><span style="color: black;">照片</span>源自网络</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></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;">悲凉千里道，凄断百年身。</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>论去与往，俱是梦中人。</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">山人自有妙计&nbsp; 隐者暗得玄机</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本期责编：知乐苑 &nbsp; &nbsp; 本期责审：知乐苑</p><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">点击阅读原文<span style="color: black;">转</span>至网页内容</span>

情迷布拉格 发表于 2024-9-10 05:23:00

楼主继续加油啊！外链论坛加油！

nykek5i 发表于 2024-9-30 19:25:01

你的见解真是独到，让我受益匪浅。

4lqedz 发表于 2024-10-3 14:31:41

哈哈、笑死我了、太搞笑了吧等。

wrjc1hod 发表于 2024-10-10 07:19:21

你的见解真是独到，让我受益良多。

nqkk58 发表于 2024-10-14 03:05:16

楼主的文章深得我心，表示由衷的感谢！

4lqedz 发表于 2024-10-19 04:06:31

网站建设seio论坛http://www.fok120.com/

查看完整版本: 网页前端之HTML+CSS+JS