【HTML + CSS】笔记

【HTML + CSS】笔记

 页面设计用到的语言

1.HTML：结构框架
2.CSS
3.JS

HTML：超文本标记语言

<...>：标签/元素

：解释文档类型为html

一、head区域常用标签



使用后浏览器不再使用当前文档的URL，而使用指定的URL来解析所有的相对URL。其中包括 ,,,
中的URL

</span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">浏览页标题</span></a></p> <h4 id="%3Cmeta%3E"><a name="t5"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><meta></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">可提供有关页面的元信息。</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><meta charset = "UTF-8">：指定编码模式</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><meta name = "viewport" content="...">：设置可视区域、缩放级别等</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><meta hettp-equiv = "..." content = "...">：设置浏览器兼容性模式</span></a></p> <h4 id="%3Clink%3E"><a name="t6"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><link></span></a></h4> <h4 id="%3Cscript%3E"><a name="t7"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><script></span></a></h4> <h4 id="%3Cstyle%3E"><a name="t8"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><style></span></a></h4> <h3 id="%E4%BA%8C%E3%80%81body%E5%8C%BA%E5%9F%9F%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"><a name="t9"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">二、body区域常用标签</span></a></h3> <h4 id="1.%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE"><a name="t10"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">1.标题标签</span></a></h4> <h4 id="%3Ch1%3E%3C%2Fh1%3E"><a name="t11"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><h1></h1></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">分为1-6级，默认字体大小依次递减</span></a></p> <h4 id="2.%E5%AD%97%E4%BD%93%E6%A0%87%E7%AD%BE"><a name="t12"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">2.字体标签</span></a></h4> <h4 id="%3Cb%3E%3C%2Fb%3E%2C%3Cstrong%3E%3C%2Fstrong%3E"><a name="t13"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><b></b>,<strong></strong></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">加粗</span></a></p> <h4 id="%3Csup%3E%3C%2Fsup%3E"><a name="t14"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><sup></sup></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">上标</span></a></p> <h4 id="%3Csub%3E%3C%2Fsub%3E"><a name="t15"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><sub></sub></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">下标</span></a></p> <h4 id="%3Cs%3E%3C%2Fs%3E"><a name="t16"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><s></s></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">删除线</span></a></p> <h4 id="%3Cu%3E%3C%2Fu%3E"><a name="t17"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><u></u></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">下划线</span></a></p> <h4 id="%3Ci%3E%3C%2Fi%3E%2C%3Cem%3E%3C%2Fem%3E"><a name="t18"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><i></i>,<em></em></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">斜体</span></a></p> <h4 id="%3Ccode%3E%3C%2Fcode%3E"><a name="t19"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><code></code></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">显示代码</span></a></p> <h4 id="%3Ccite%3E%3C%2Fcite%3E"><a name="t20"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><cite></cite></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">引用</span></a></p> <h4 id="3.%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE"><a name="t21"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">3.格式化标签</span></a></h4> <h4 id="%3Cp%3E%3C%2Fp%3E"><a name="t22"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><p></p></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">段落</span></a></p> <h4 id="%3Cbr%20%2F%3E"><a name="t23"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><br /></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">换行</span></a></p> <h4 id="%3Chr%20%2F%3E"><a name="t24"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><hr /></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">分割线</span></a></p> <h4 id="%3Cpre%3E%3C%2Fpre%3E"><a name="t25"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><pre></pre></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">预格式化（尽量不使用Tab键）</span></a></p> <h4 id="%3Cdiv%3E%E5%8C%BA%E5%9D%97"><a name="t26"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><div>区块</span></a></h4> <pre data-index="0" class="set-code-show" name="code"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:1000px"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></span></a></pre> <h4 id="4.%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE"><a name="t27"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">4.链接标签</span></a></h4> <h4 id="%3Ca%3E%3C%2Fa%3E"><a name="t28"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><a></a></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><a <strong>href = "..."</strong>>...</a>：在同一页面跳转<br> <a href = "..." target = "_blank">...</a>：在新页面跳转</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">其中，<strong>href = "..."</strong>被称为<strong>属性</strong>attribute，属性名称为href</span></a></p> <h4 id="5.%E6%B3%A8%E9%87%8A%E6%A0%87%E7%AD%BE"><a name="t29"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">5.注释标签</span></a></h4> <h4 id="%3C!--%20--%3E"><a name="t30"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"></span></a></h4> <h4 id="6.list%E6%A0%87%E7%AD%BE"><a name="t31"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">6.list标签</span></a></h4> <h4 id="%3Cul%3E%3C%2Ful%3E%2C%3Col%3E%3C%2Fol%3E"><a name="t32"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><ul></ul>,<ol></ol></span></a></h4> <pre data-index="1" class="set-code-show" name="code"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></div></div></li></ol></code> <code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></span></a></pre> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><ul>列表项前面加点，<ol>列表项前面加数字。</span></a></p> <p><strong><span style="color:#0d0016;">快捷创建：</span></strong></p> <p style="text-align:center;"><img alt="" class="left" height="101" src="https://1000bd.com/contentImg/2024/04/21/43548ba858d98f78.png" ></p> <p> 回车</p> <p style="text-align:center;"><img alt="" class="left" height="190" src="https://1000bd.com/contentImg/2024/04/21/01291e4957b709e3.png" ></p> <h4 id="7.table%E6%A0%87%E7%AD%BE"><a name="t33"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">7.table标签</span></a></h4> <h4 id="%3Ctable%3E%3C%2Ftable%3E"><a name="t34"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><table></table></span></a></h4> <p style="text-align:center;"><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" class="left" height="355" src="https://1000bd.com/contentImg/2024/04/21/c4ba99b9078f1762.png" ></a></span></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><tr></tr>：表行</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">上图代码的效果如下：</span></a></p> <p style="text-align:center;"><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" class="left" height="68" src="https://1000bd.com/contentImg/2024/04/21/bab44d4734342b48.png" ></a></span></p> <h4 id="8.form%E6%A0%87%E7%AD%BE"><a name="t35"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">8.form标签</span></a></h4> <h4 id="%3Cform%3E%3C%2Fform%3E"><a name="t36"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><form></form></span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">（1）代码一</span></a></p> <p><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" class="left" height="139" src="https://1000bd.com/contentImg/2024/04/21/c3962886ebf09a91.png" ></a></span></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">上图代码的效果如下：</span></a></p> <p style="text-align:center;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <img alt="" class="left" src="https://1000bd.com/contentImg/2024/04/21/d9b7fc6e2893ffc8.png"></span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">name是提交表单form时用的</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">（2）代码二<br><img alt="" class="left" height="146" src="https://1000bd.com/contentImg/2024/04/21/eb39fcc570b70221.png" ></span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">action可以被指向一个文件，来处理后续的逻辑问题<br> method是提交方式</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">（3）代码三</span></a></p> <p><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" src="https://1000bd.com/contentImg/2024/04/21/fcf95a10865b2397.png"></a></span></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">上图代码的效果如下：</span></a></p> <p style="text-align:center;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <img alt="" class="left" src="https://1000bd.com/contentImg/2024/04/21/bb664c38f22ba923.png"></span></a></p> <h4 id="%C2%A09.button%E6%A0%87%E7%AD%BE"><a name="t37"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> 9.button标签</span></a></h4> <h4 id="%3Cbutton%3E%3C%2Fbutton%3E"><a name="t38"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><button></button></span></a></h4> <pre data-index="2" class="set-code-show" name="code"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>This is a Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></span></a></pre> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">上图代码的效果如下：</span></a></p> <p><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" height="47" src="https://1000bd.com/contentImg/2024/04/21/edfb33482889298d.png" ></a></span></p> <h4 id="10.image%E6%A0%87%E7%AD%BE"><a name="t39"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">10.image标签</span></a></h4> <h4 id="%3Cimg%3E"><a name="t40"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"><img></span></a></h4> <pre data-index="3" class="set-code-show" name="code"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100vw"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/pic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"This is a img tag"</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></span></a></pre> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">src：图像源地址<br> alt：当因某些原因图像无法正常显示时，显示alt内容<br> style="width:100vw"：占100%的浏览器宽度</span></a></p> <p style="text-align:center;"><span style="color:#0d0016;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><img alt="" class="left" src="https://1000bd.com/contentImg/2024/04/21/ab8461e88aab7bf1.png"></a></span></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">显示异常时：</span></a></p> <p style="text-align:center;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <img alt="" class="left" src="https://1000bd.com/contentImg/2024/04/21/8db390d979eb4995.png"></span></a></p> <h4 id="11.%E6%B3%A8%E9%87%8A%E6%A0%87%E7%AD%BE%EF%BC%9A%3Cabbr%3E%3C%2Fabbr%3E"><a name="t41"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">11.注释标签：<abbr></abbr></span></a></h4> <pre data-index="4" class="set-code-show" name="code"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Massachusetts Institute of Technology"</span>></span>MIT<span class="hljs-tag"></<span class="hljs-name">abbr</span>></span> is a prestigious college<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></span></a></pre> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> 上图代码的效果如下：</span></a></p> <p style="text-align:center;"><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;"> <img alt="" class="left" src="https://1000bd.com/contentImg/2024/04/21/ab3e2a46a9b7a690.png"></span></a></p> <h4><a name="t42"></a>12.input标签</h4> <p>输入框</p> <pre data-index="5" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">"text"</span> <span class="hljs-attr">name</span> = <span class="hljs-string">"userName"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">"password"</span> <span class="hljs-attr">name</span> = <span class="hljs-string">"userPwd"</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3 id="%E4%B8%89%E3%80%81%E5%85%83%E7%B4%A0%E5%88%86%E7%B1%BB"><a name="t43"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">三、元素分类</span></a></h3> <h4 id="a.%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><a name="t44"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">a.块级元素</span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">1.在页面内以块的形式展现<br> 2.出现在新的一行<br> 3.占全部宽度</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">如：<div>,<h1>-<h6>,<p>,<ul>,<ol></span></a></p> <h4 id="b.%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0"><a name="t45"></a><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">b.内联元素</span></a></h4> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">1.通常在块级元素内<br> 2.不会导致文本换行<br> 3.只占必要的部分宽度</span></a></p> <p><a href="#%3Cdiv%3E%E5%8C%BA%E5%9D%97" rel="nofollow" target="_self"><span style="color:#0d0016;">如：<a>,<img>,<em>,<strong></span></a></p> </div> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1322967">【HC】百度APP产品研发组_百度APP增长策略工程师</a> <br /> <a href="/Article/Index/1046580">HBase 2.x ---- HBase快速入门</a> <br /> <a href="/Article/Index/1676423">7种方法教你如何解决msvcp140_1.dll丢失问题，一键修复dll丢失问题</a> <br /> <a href="/Article/Index/759240">“蔚来杯“2022牛客暑期多校训练营2 G、J、K</a> <br /> <a href="/Article/Index/817884">unity工程参照以及评价（B）</a> <br /> <a href="/Article/Index/705858">Centos7修改主机名hostname</a> <br /> <a href="/Article/Index/1228749">Spring——Spring_XML实现DI</a> <br /> <a href="/Article/Index/1344710">【刷题笔记10.6】LeetCode：翻转二叉树</a> <br /> <a href="/Article/Index/1043574">Conformer Encoder GPU 加速策略较全面汇总</a> <br /> <a href="/Article/Index/763200">字符(串)及内存操作库函数</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_52553215/article/details/127938292 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

页面设计用到的语言

HTML：超文本标记语言

一、head区域常用标签