HTML基础

02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg

1、什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language

2、HTML 标签

HTML 标签是由尖括号包围的关键词，比如

标签对中的第一个标签是开始标签，第二个标签是结束标签

3、<!DOCTYPE>

声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

4、HTML 标签

标签告知浏览器这是一个 HTML 文档。

标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

lang 属性可用于声明网页或部分网页的语言

5、和 标签的区别

元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。

定义关于文档的信息-浏览器读取html的信息

定义文档的主体-页面的解构布局

6、-定义关于 HTML 文档的元信息。

爬虫权重 -》 <name>keywords -》description</h4><p> ：HTML5 新属性。</p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/att-meta-charset.html">charset</a><br /><strong>New</strong></td> <td><em>character_set</em></td> <td>定义文档的字符编码。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/att-meta-content.html">content</a></td> <td><em>text</em></td> <td>定义与 http-equiv 或 name 属性相关的元信息。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/att-meta-http-equiv.html">http-equiv</a></td> <td>content-type<br />default-style<br />refresh</td> <td>把 content 属性关联到 HTTP 头部。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/att-meta-name.html">name</a></td> <td>application-name<br />author<br />description<br />generator_keywords</td> <td>把 content 属性关联到一个名称。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.runoob.com/tags/att-meta-scheme.html">scheme</a></td> <td><em>format/URI</em></td> <td>HTML5不支持。 定义用于翻译 content 属性值的格式。</td> </tr> </tbody> </table> <p><a name="e2tfm"></a></p> <h2 id="17xe48"><a name="17xe48" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、浏览器标准模式和怪异模式</h2><p>在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。下面介绍标准模式和怪异模式之间的区别<br />[</p> <p>](<a rel="nofollow" href="https://blog.csdn.net/qq_37697037/article/details/64456467">https://blog.csdn.net/qq_37697037/article/details/64456467</a>) <a name="vwvvg"></a></p> <h4 id="25681e"><a name="25681e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>怪异模式：width则是元素的实际宽度+margin+border+padding</h4><p><img src="https://cdn.nlark.com/yuque/0/2022/png/175863/1646144179049-28453637-bf19-4e3e-b4b1-8d777b9ed73d.png#clientId=u2607863b-046d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2ca4658f&margin=%5Bobject%20Object%5D&name=20170321180119900.png&originHeight=436&originWidth=732&originalType=binary&ratio=1&rotation=0&showTitle=false&size=158296&status=done&style=none&taskId=ue4985697-774f-4925-bde4-29e6ad6ca75&title=" alt="20170321180119900.png"> <a name="qpCb9"></a></p> <h4 id="8rh74y"><a name="8rh74y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标准的盒模型：width则是元素的实际宽度</h4><p><br /> <img src="https://cdn.nlark.com/yuque/0/2022/png/175863/1646144187135-3d57ff3c-ba19-4c31-94b2-d31d578850c4.png#clientId=u2607863b-046d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u7013c751&margin=%5Bobject%20Object%5D&name=20170321180159166.png&originHeight=462&originWidth=779&originalType=binary&ratio=1&rotation=0&showTitle=false&size=172975&status=done&style=none&taskId=u06046be0-f26d-4096-9eb2-284d36a850e&title=" alt="20170321180159166.png"></p> <p><a name="G5d3z"></a></p> <h2 id="8smmeg"><a name="8smmeg" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="xZ8Ij"></a></p> <h2 id="dlwijt"><a name="dlwijt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8、html语义化标签</h2><p><a name="HcriF"></a></p> <h4 id="e1sl4a"><a name="e1sl4a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构</h4><p><a name="oFYbz"></a></p> <h4 id="850uiz"><a name="850uiz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息</h4><p><a name="rUFf1"></a></p> <h4 id="41g892"><a name="41g892" class="reference-link"></a><span class="header-link octicon octicon-link"></span>提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。</h4><p><a name="j3UKV"></a></p> <h4 id="ga5qgn"><a name="ga5qgn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。</h4><p><a name="zNoe6"></a></p> <h4 id="bbgnfq"><a name="bbgnfq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页</h4><p><a name="ida5X"></a></p> <h2 id="4bf0ub"><a name="4bf0ub" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML速查列表</h2><p><a name="qynHU"></a></p> <h3 id="d59pka"><a name="d59pka" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 基本文档</h3><pre><code class="lang-html"><!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html> </code></pre> <p><a name="GXrRZ"></a></p> <h3 id="bngdp5"><a name="bngdp5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>基本标签（Basic Tags）</h3><pre><code class="lang-html"><h1>最大标签</h1> <h2>. . .</h2> <h3>. . .</h3> <h4>. . .</h4> <h5>. . .</h5> <h6>最小标题</h6> <p>这是一个段落-</p> </br>(换行) </hr>(水平线) <!--这是注释--> </code></pre> <p><a name="SNFZQ"></a></p> <h3 id="9z1evd"><a name="9z1evd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化（Formatting）</h3><pre><code class="lang-html"><b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本） </code></pre> <p><a name="ehc0c"></a></p> <h3 id="eg45ke"><a name="eg45ke" class="reference-link"></a><span class="header-link octicon octicon-link"></span>链接（Links）</h3><pre><code class="lang-html">普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 书签： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a> </code></pre> <p><a name="y4xRH"></a></p> <h3 id="9dthau"><a name="9dthau" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片（Images）</h3><pre><code class="lang-html"><img src="URL" alt="替换文本" height="42" width="42"> </code></pre> <p><a name="UTjJw"></a></p> <h3 id="778s67"><a name="778s67" class="reference-link"></a><span class="header-link octicon octicon-link"></span>样式/区块（Styles/Sections）</h3><pre><code class="lang-html"><style type="text/css"> h1 {color:red;} p {color:blue;} </style> <div>文档中的块级元素</div> <span>文档中的内联元素</span> </code></pre> <p><a name="MCyXV"></a></p> <h3 id="fe7k0z"><a name="fe7k0z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表</h3><pre><code class="lang-html"><ul> <li>项目</li> <li>项目</li> </ul> </code></pre> <p><a name="v4qg6"></a></p> <h3 id="3368rq"><a name="3368rq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有序列表</h3><pre><code class="lang-html"><ol> <li>第一项</li> <li>第二项</li> </ol> </code></pre> <p><a name="htvW1"></a></p> <h3 id="4ma2m9"><a name="4ma2m9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>定义列表</h3><pre><code class="lang-html"><dl> <dt>项目 1</dt> <dd>描述项目 1</dd> <dt>项目 2</dt> <dd>描述项目 2</dd> </dl> </code></pre> <p><a name="Fduvh"></a></p> <h3 id="3wrq9a"><a name="3wrq9a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格（Tables）</h3><pre><code class="lang-html"><table border="1"> <tr> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格数据</td> <td>表格数据</td> </tr> </table> </code></pre> <p><a name="ggVgY"></a></p> <h3 id="d455kp"><a name="d455kp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架（Iframe）</h3><pre><code class="lang-html"><iframe src="demo_iframe.htm"></iframe> </code></pre> <p><a name="izJ7a"></a></p> <h3 id="fpv46u"><a name="fpv46u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单（Forms）</h3><pre><code class="lang-html"><form action="demo_form.php" method="post/get"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>苹果</option> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form> </code></pre> <p><a name="cUkQu"></a></p> <h3 id="7w2e1k"><a name="7w2e1k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>实体（Entities）</h3><pre><code class="lang-html">&lt; 等同于 < &gt; 等同于 > &#169; 等同于 © </code></pre> <p><a name="cxpCK"></a></p> <h2 id="a4vals"><a name="a4vals" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h2><p>[</p> <p>](<a rel="nofollow" href="https://blog.csdn.net/qq_38128179/article/details/80811339">https://blog.csdn.net/qq_38128179/article/details/80811339</a>)</p>