HTML & CSS之小白初入江湖

时间：2023-03-31 12:03:45 CSS

1、HTML超文本标记语言（HyperTextMarkupLanguage，简称HTML）是一种用于制作网页的标准标记语言。HTML是一项基础技术，许多网站经常将其与CSS和JavaScript一起使用，为网页、Web应用程序和移动应用程序设计令人愉悦的用户界面。Web浏览器可以读取HTML文件并将它们呈现为可视网页。HTML描述了网站的结构语义以及所提供的线索，使其成为一种标记语言而不是编程语言。——Wikipedia1.1HTML语义语义在HTML中是一个非常重要的概念。语义化就是协调，其含义是用正确的标签做正确的事情。HTML语义是通过正确使用标签来构建页面，以达到页面结构的目的；浏览器和搜索引擎很容易解析。搜索引擎爬虫依靠标签来确定各个关键字的上下文和权重，这有利于SEO。并且让阅读源代码的人更容易将网站分块，便于阅读、维护和理解。1.2HTML中常用的标签功能标签img标签用于显示图片。常用属性有alt图片替代文字宽高width和heightismap图片映射table标签用于构造表格点击跳转到页面底部

这里是网页的底部form

检查visualCaptcha是否填写提交表单type属性相关属性值buttonfilehiddentextpasswordradiocheckboximagereset提交文本输入区使用

标签下拉菜单标签：<select>ulolli标签<ul><li></li><li></li><li></li></ul>ol><li></li><li></li><li></li></ol>带有语义的标记em强调强并且比em具有更高的强调级别address定义地址元素blockquote定义块引号,通常会生成缩进cite通常引用某个作品中的一段/句子，用这个标签ins定义插入的文本del定义删除的文本带有某种风格的标签（也有语义）b定义粗体textiitalicbiglargefonttextsmallsmallfonttextbdodefinitionquestiontext显示方向supsuperscripttextsubsubscripttextoutputclasslabelprecodestyleoutputcodecodetextvar定义变量h1~h6设置标签Title<h1>Level1Title</h1>...<h6>六级标题</h6>divspandiv和span都是无意义的容器标签，经常用于页面布局。div是块级元素，span是行内元素。2.CSSCascadingStyleSheet（简称CSS）是一种用来给HTML等结构化文档添加样式的工具。用法CSS有三种使用方式，可以直接写在HTML标签<divstyle="color:red;">content</div>或者写在style标签<style>div{color:red;}</style>或者通过链接标签引入样式表（HTML标记）选择器：div{}通配符：{}复合选择器后代选择器：divp{}交集选择器：div.p{}联合选择器：div,p{}子选择器：div>p{}相邻兄弟选择器：div+p{}普通兄弟选择器：div~p{}序列选择器：ulli:last-child;ulli:last-childweights当有不同的selector时，不同的样式作用于同一个label，通过比较几个selector的weight来判断哪个selector决定显示的样式。下面是不同选择器的权值权重关系。id选择器>类选择器>类型选择器权重比较过程如下：id选择器多的权重大于id选择器的个数。Whenthenumberofidselectorsisequal,theweightofmoreclassselectorsisgreaterthanthefirsttwoWhenthenumberofselectorsisthesame,theweightofalargenumberoftypeselectorsislarge.不带selected标签的选择器权重为0，带!important属性的选择器权重无限大（滥用会导致权重混乱）</p>                        
                        
                    </div>
                </div>
                <div class="zuowen_sxy">
                                        <div class="prev">上一篇：<a title="Angular6的响应式表单" href="/webqianduan/209024.html">Angular6的响应式表单</a> </div>
                                        <div class="prev">下一篇：<a title="真实的！！！两行css代码实现瀑布流，html,css实现瀑布流最简单的方法！" href="/webqianduan/209026.html">真实的！！！两行css代码实现瀑布流，html,css实现瀑布流最简单的方法！</a> </div>
                                    </div>
                <div class="related_about">
                    <div class="related_about_t"><code>HTML &amp; CSS之小白初入江湖相关文章</code></div>
                    <ul>
                                              <li><a href="/kejifunen/351706.html" target="_blank" title="Master & Dynamic 与 Spotify">Master & Dynamic 与 Spotify</a></li>
                                                <li><a href="/kejifunen/351635.html" target="_blank" title="又见法兰西，猫王收音机再次亮相M&amp;amp;O">又见法兰西，猫王收音机再次亮相M&amp;amp;O</a></li>
                                                <li><a href="/kejifunen/350695.html" target="_blank" title="B&O Earset蓝牙耳机评测！向跨越十年声场的华">B&O Earset蓝牙耳机评测！向跨越十年声场的华</a></li>
                                                <li><a href="/kejifunen/350256.html" target="_blank" title="【观点】小米1MORE耳机能打败B&O的Beats吗">【观点】小米1MORE耳机能打败B&O的Beats吗</a></li>
                                                <li><a href="/kejifunen/349518.html" target="_blank" title="NEC将举办C&C用户论坛暨iEXPO 2018展会">NEC将举办C&C用户论坛暨iEXPO 2018展会</a></li>
                                                <li><a href="/kejifunen/349507.html" target="_blank" title="Bang & Olufsen 联手 Line 推出卡">Bang & Olufsen 联手 Line 推出卡</a></li>
                                                <li><a href="/kejifunen/349336.html" target="_blank" title="购买蓝牙耳机时，JEET-BEATS-B&O-万魔该">购买蓝牙耳机时，JEET-BEATS-B&O-万魔该</a></li>
                                                <li><a href="/kejifunen/349228.html" target="_blank" title="李宁&小米赤兔智能跑鞋评测！舒适却不美观">李宁&小米赤兔智能跑鞋评测！舒适却不美观</a></li>
                                                <li><a href="/kejifunen/347238.html" target="_blank" title="智能创新IoT生活三星全新Bixby&IoT让未来更">智能创新IoT生活三星全新Bixby&IoT让未来更</a></li>
                                                <li><a href="/kejifunen/347226.html" target="_blank" title="出门问问在海外推出Ticwatch S&E，创下众筹">出门问问在海外推出Ticwatch S&E，创下众筹</a></li>
                                                <li><a href="/kejifunen/346961.html" target="_blank" title="HDL&若琪！智能语音控制的另一种选择">HDL&若琪！智能语音控制的另一种选择</a></li>
                                                <li><a href="/kejifunen/346388.html" target="_blank" title="2018亚洲VR&AR博览会在广州举办">2018亚洲VR&AR博览会在广州举办</a></li>
                                                <li><a href="/kejifunen/346194.html" target="_blank" title="七夕聊聊华为MateBook X Pro 办公桌上的&">七夕聊聊华为MateBook X Pro 办公桌上的&</a></li>
                                                <li><a href="/kejifunen/346106.html" target="_blank" title="美图进军社交媒体！成立三大事业群，打造美图秀秀&美拍">美图进军社交媒体！成立三大事业群，打造美图秀秀&美拍</a></li>
                                                <li><a href="/kejifunen/345849.html" target="_blank" title="炫酷半透明动态歌词显示音箱LyricsSpeaker">炫酷半透明动态歌词显示音箱LyricsSpeaker</a></li>
                                                <li><a href="/kejifunen/344816.html" target="_blank" title="神奇之旅！这款为NASA研发的深度学习AI 落“地&">神奇之旅！这款为NASA研发的深度学习AI 落“地&</a></li>
                                                <li><a href="/kejifunen/344225.html" target="_blank" title="马蜂窝&ZAKER联合发布国庆旅游趣事报告， 95后">马蜂窝&ZAKER联合发布国庆旅游趣事报告， 95后</a></li>
                                                <li><a href="/kejifunen/343526.html" target="_blank" title="B&O PLAY举办品鉴会展示Connected A">B&O PLAY举办品鉴会展示Connected A</a></li>
                                                <li><a href="/kejifunen/343387.html" target="_blank" title="“全球冠军”&“全球冠军”，雅迪电动车携手中国女排">“全球冠军”&“全球冠军”，雅迪电动车携手中国女排</a></li>
                                                <li><a href="/kejifunen/342955.html" target="_blank" title="今年夏天规模最大、最实用的AI暑期训练营正式启动！ DeeC">今年夏天规模最大、最实用的AI暑期训练营正式启动！ DeeC</a></li>
                                            </ul>
                </div>
                
            </div>
            <div class="main-right">
                <div class="right_fix">
                    <div class="r_con">
                        <div class="r_title">最新推荐</div>
                        <ul>
                                                        <li><em>1</em><a href="/kejifunen/370467.html" title="腾讯安全湛泸实验室受邀出席44Con 探讨软件&am" target="_blank">腾讯安全湛泸实验室受邀出席44Con 探讨软件&am</a></li>
                                                        <li><em>2</em><a href="/kejifunen/370090.html" title="AntView AR & VR混合眼镜Mix或亮相2" target="_blank">AntView AR & VR混合眼镜Mix或亮相2</a></li>
                                                        <li><em>3</em><a href="/kejifunen/369154.html" title="富士胶片携商业影像解决方案亮相2018 P&amp;" target="_blank">富士胶片携商业影像解决方案亮相2018 P&amp;</a></li>
                                                        <li><em>4</em><a href="/kejifunen/369125.html" title="用影像见证生活之美 智云稳定器第20届P&I展圆满落" target="_blank">用影像见证生活之美 智云稳定器第20届P&I展圆满落</a></li>
                                                        <li><em>5</em><a href="/kejifunen/368968.html" title="谷歌万无一失的机器学习工具来了！李飞飞&李佳的里程碑" target="_blank">谷歌万无一失的机器学习工具来了！李飞飞&李佳的里程碑</a></li>
                                                        <li><em>6</em><a href="/kejifunen/368586.html" title="M&D蓝牙耳机小技巧！选择蓝牙耳机时避免被骗的三个小" target="_blank">M&D蓝牙耳机小技巧！选择蓝牙耳机时避免被骗的三个小</a></li>
                                                        <li><em>7</em><a href="/kejifunen/368244.html" title="售价 2,498 元，B&O 推出无线耳挂式耳机 E" target="_blank">售价 2,498 元，B&O 推出无线耳挂式耳机 E</a></li>
                                                        <li><em>8</em><a href="/kejifunen/368139.html" title="投资者看好AI！智能制造行业对VC-PE&创业&am" target="_blank">投资者看好AI！智能制造行业对VC-PE&创业&am</a></li>
                                                        <li><em>9</em><a href="/kejifunen/366253.html" title="国美&中标院再次携手首批11台“好冷空调”齐聚国美" target="_blank">国美&中标院再次携手首批11台“好冷空调”齐聚国美</a></li>
                                                        <li><em>10</em><a href="/kejifunen/365889.html" title="又射出两支箭？小米22号发布新品手环&4G Mi-F" target="_blank">又射出两支箭？小米22号发布新品手环&4G Mi-F</a></li>
                             
                        </ul>
                    </div>
                    <div class="r_con">
                        <div class="r_title">猜你喜欢</div>
                        <ul class="you_like">
                                                        <li><em>1</em><a href="/kejifunen/365638.html" title="埃尔维斯·普雷斯利广播&QQ舞蹈联名新品上市！唤醒童" target="_blank">埃尔维斯·普雷斯利广播&QQ舞蹈联名新品上市！唤醒童</a></li>
                                                        <li><em>2</em><a href="/kejifunen/365354.html" title="明天发布！ Rampage Comics发布了中国首款智能手" target="_blank">明天发布！ Rampage Comics发布了中国首款智能手</a></li>
                                                        <li><em>3</em><a href="/kejifunen/364031.html" title="吴宓乔伟库克CSS2018腾讯安全探索论坛上演USB漏洞无硬" target="_blank">吴宓乔伟库克CSS2018腾讯安全探索论坛上演USB漏洞无硬</a></li>
                                                        <li><em>4</em><a href="/kejifunen/363381.html" title="HTC & Moshi Type-C 音频适配器对比" target="_blank">HTC & Moshi Type-C 音频适配器对比</a></li>
                                                        <li><em>5</em><a href="/kejifunen/363076.html" title="搜狗同传又双叒叕获奖，&amp;quot;老司机&a" target="_blank">搜狗同传又双叒叕获奖，&amp;quot;老司机&a</a></li>
                                                        <li><em>6</em><a href="/kejifunen/361905.html" title="AT&T帮助智能手表走上蜂窝通信之路？ " target="_blank">AT&T帮助智能手表走上蜂窝通信之路？ </a></li>
                                                        <li><em>7</em><a href="/kejifunen/361508.html" title="新颖的HoloLamp在CES2017上展出！实现裸眼AR？" target="_blank">新颖的HoloLamp在CES2017上展出！实现裸眼AR？</a></li>
                                                        <li><em>8</em><a href="/kejifunen/361093.html" title="B&O 发布最新无线智能耳机，纯羊皮材质" target="_blank">B&O 发布最新无线智能耳机，纯羊皮材质</a></li>
                                                        <li><em>9</em><a href="/kejifunen/360055.html" title="想尽快展示 iPhone XS 吗？快来京东家居&京" target="_blank">想尽快展示 iPhone XS 吗？快来京东家居&京</a></li>
                                                        <li><em>10</em><a href="/kejifunen/359945.html" title="Bowers & Wilkins 正式推出中国首款无" target="_blank">Bowers & Wilkins 正式推出中国首款无</a></li>
                                                        <li><em>11</em><a href="/kejifunen/359069.html" title="Bang & Olufsen 推出多款大卫·林奇主题" target="_blank">Bang & Olufsen 推出多款大卫·林奇主题</a></li>
                                                        <li><em>12</em><a href="/kejifunen/358762.html" title="B&O 推出既是耳机又是音箱的蓝牙音箱新概念 +" target="_blank">B&O 推出既是耳机又是音箱的蓝牙音箱新概念 +</a></li>
                                                        <li><em>13</em><a href="/kejifunen/357720.html" title="华米AMAZFIT运动手表&1more耳机联合评测！" target="_blank">华米AMAZFIT运动手表&1more耳机联合评测！</a></li>
                                                        <li><em>14</em><a href="/kejifunen/356318.html" title="B&O首款全无线耳机E8评测" target="_blank">B&O首款全无线耳机E8评测</a></li>
                                                        <li><em>15</em><a href="/kejifunen/356113.html" title="AT&T高管！独立可穿戴设备将于今年到来" target="_blank">AT&T高管！独立可穿戴设备将于今年到来</a></li>
                                                        <li><em>16</em><a href="/kejifunen/355385.html" title="714法国巴士底日送出巨额利润，Sophia & S" target="_blank">714法国巴士底日送出巨额利润，Sophia & S</a></li>
                                                        <li><em>17</em><a href="/kejifunen/354916.html" title="不要被那些 VR&AR 概念视频所迷惑，事实上，他们" target="_blank">不要被那些 VR&AR 概念视频所迷惑，事实上，他们</a></li>
                                                        <li><em>18</em><a href="/kejifunen/354096.html" title="MCHR&amp;amp;通策医疗eHR系统项目启动" target="_blank">MCHR&amp;amp;通策医疗eHR系统项目启动</a></li>
                                                        <li><em>19</em><a href="/kejifunen/353977.html" title="Apple Watch-Fossil-Polar&M" target="_blank">Apple Watch-Fossil-Polar&M</a></li>
                                                        <li><em>20</em><a href="/kejifunen/353663.html" title="2018巴黎高级定制时装周！一福泉&LIU LISI" target="_blank">2018巴黎高级定制时装周！一福泉&LIU LISI</a></li>
                                                    </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="related_article"></div>
        <div class="footer">
    <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p>
    <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p>
</div>
 
  

        
    </body>
</html>

HTML &amp; CSS之小白初入江湖

HTML & CSS之小白初入江湖