• Html 后端了解基础

    HTML

    网页

    • 块元素
      • 无论内容多少都独占一行

      • 、

        等

    • 行内元素
      • 内容撑开宽度
        • 左右都是行内元素的可排在第一个
      • 不会换行
    • 标签可以嵌套使用
    基本信息
    • ：注释
    • ：声明，不是 html 标签
      • 指示 web 浏览器页面使用的 HTML 版本
      • 必须是 HTML 文档的第一行，位于 标签之前
      • 没有结束标签，大小写不敏感
      • 告知浏览器其是一个 HTML 文档
      • 标签限定了文档的开始点和结束点，之间是文档的头部和主体
      • lang：language——code，规定元素中内容的语言代码
      • en：English，网页定义为英文网页
        • zh-CN 中文
          • 标准最新版本：zh-Hans-CN
          • 兼容 zh-CN
      • xmlns：在文档中定义一个或多个可供选择的命名空间
        • 可以放置在文档内任何元素的开始标签中，值类似于 URL
          • 最好在文档的开头处定义具有前缀的命名空间
          • 整个文档范围可用
        • 定义命名空间后浏览器会将此命名空间用于该属性所在元素内的所有内容
    • ：头部标签
      • 用于定义文档的头部，是所有头部元素的容器
      • 其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等
    • ：提供有关页面的元信息，永远位于 head 元素内部
      • 比如针对搜索引擎和更新频度的描述和关键词
      • 标签的属性定义了与文档相关联的名称/值对
        • 元数据总是以名称/值的形式被成对传递的
    • </code>：定义文档的标题 <ul><li><code><head></code> 标签中唯一要求包含的东西</li></ul> </li><li><code><body></code>：定义文档的主体 <ul><li>包含文档的所有内容 <ul><li>比如文本、超链接、图像、表格和列表 等</li></ul> </li></ul> </li></ul> <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment"><!-- 初始的 html 页面 --></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>网页标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <div class="table-box"><table><thead><tr><th align="left">标签</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left"><code><!DOCTYPE></code></td><td align="left">定义文档类型</td></tr><tr><td align="left"><code><html></code></td><td align="left">定义 HTML 文档</td></tr><tr><td align="left"><code><head></code></td><td align="left">定义关于文档的信息</td></tr><tr><td align="left"><code><title></code></td><td align="left">定义文档的标题</td></tr><tr><td align="left"><code><body></code></td><td align="left">定义文档的主体</td></tr><tr><td align="left"><code><h1>~<h6></code></td><td align="left">定义 HTML 标题</td></tr><tr><td align="left"><code><p></code></td><td align="left">定义段落</td></tr><tr><td align="left"><code><br/></code></td><td align="left">定义简单换行</td></tr><tr><td align="left"><code><hr/></code></td><td align="left">定义水平线</td></tr><tr><td align="left"><code><!-- --></code></td><td align="left">定义注释</td></tr></tbody></table></div> <h5><a id="_73"></a>基本标签</h5> <ul><li>标签都是成对出现，尾标签相对于首标签添加 <code>/</code></li><li>自闭和标签可以直接在首标签尾部追加 <code>/</code></li></ul> <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>一级标题 <span class="token comment"><!-- h2 ~ h6 六级标签，逐级变小 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>六级标题 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>段落，独占一行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>换行 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">/></span></span>水平线标签 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>粗体标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>斜体标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 注释 --></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <div class="table-box"><table><thead><tr><th align="left">符号</th><th align="left">描述</th><th align="left">转义字符</th><th align="left">字符编号</th></tr></thead><tbody><tr><td align="left"></td><td align="left">空格</td><td align="left"><code> </code></td><td align="left"><code> </code></td></tr><tr><td align="left"><</td><td align="left">小于号</td><td align="left"><code><</code></td><td align="left"><code><</code></td></tr><tr><td align="left">></td><td align="left">大于号</td><td align="left"><code>></code></td><td align="left"><code>></code></td></tr><tr><td align="left">&</td><td align="left">和号</td><td align="left"><code>&</code></td><td align="left"><code>&</code></td></tr><tr><td align="left">"</td><td align="left">引号</td><td align="left"><code>"</code></td><td align="left"><code>"</code></td></tr><tr><td align="left">’</td><td align="left">撇号</td><td align="left"><code>' </code>(IE不支持)</td><td align="left"><code>'</code></td></tr></tbody></table></div> <h5><a id="_99"></a>图像标签</h5> <ul><li><code>../</code>：表示上级目录 <ul><li>一般不使用绝对路径，使用项目中的相对路径</li></ul> </li><li>必填 <code>src、alt</code> 属性，其他可不设置 <ul><li>src：图片路径</li><li>alt：图片无法显示时的替代文字</li></ul> </li></ul> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像地址<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像代替文字<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鼠标悬停提示文字<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像宽度<span class="token punctuation">"</span></span> <span class="token attr-name">heifht</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像高度<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 示例：上一级目录下 image 目录中的图片全家福，显示宽度 500，高度 200 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../image/全家福.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>全家福<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>全家福<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h5><a id="_113"></a>链接标签</h5> <ul><li><code><a></code>：定义超链接，从一张页面链接到另一张页面 <ul><li>最重要的属性是 <code>href</code> 属性，指示链接的目标</li><li><code>href</code>：连接路径，必填</li><li><code>target</code>：连接打开的目标窗口 <ul><li>常用值</li><li><code>_self</code>：当前页面打开</li><li><code>_blank</code>：新标签页打开</li><li><code>framename</code>：在指定框架中打开</li></ul> </li><li>标签中可以嵌套图片实现图片超链接</li></ul> </li></ul> <div class="table-box"><table><thead><tr><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left"><code>_blank</code></td><td align="left">在新窗口中打开被链接文档。</td></tr><tr><td align="left"><code>_self</code></td><td align="left">默认。在相同的框架中打开被链接文档。</td></tr><tr><td align="left"><code>_parent</code></td><td align="left">在父框架集中打开被链接文档。</td></tr><tr><td align="left"><code>_top</code></td><td align="left">在整个窗口中打开被链接文档。</td></tr><tr><td align="left"><code>framename</code></td><td align="left">在指定的框架中打开被链接文档。</td></tr></tbody></table></div> <ul><li>锚链接 <ul><li>需要一个锚标记：<code><a name="锚点名"></a></code></li><li>可以跳转到标记：<code><a href="#锚点名"></a></code> <ul><li>另一个页面有锚点时</li><li>可以跳到指定连接的指定位置</li></ul> </li></ul> </li><li>功能性链接 <ul><li>邮件链接 <ul><li><code><a href="mailto:邮箱地址"></a></code></li></ul> </li><li>QQ链接 <ul><li>通过 QQ 推广生成链接粘贴到页面</li></ul> </li></ul> </li></ul> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>要打开的目标窗口位置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>链接文本或图像<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 示例：使用图片作为超链接，在当前页面打开 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.baidu.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../image/全家福.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>全家福<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 示例：锚链接 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>顶部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>回到顶部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 功能链接：邮箱 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:邮箱<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <h5><a id="_160"></a>列表标签</h5> <ul><li>有序列表：<code><ol></code>（orderlist） <ul><li><code><li></code>：列表元素</li><li>显示行编号</li></ul> </li><li>无序列表：<code><ul></code>（unlist） <ul><li><code><li></code>：列表元素</li><li>显示圆点，无编号</li></ul> </li><li>自定义列表：<code><dl></code>（diylist） <ul><li><code><dt></code>自定义列表标题</li><li><code><dd></code>：列表内元素</li></ul> </li><li>列表内可进行嵌套</li><li>l：list，列表</li></ul> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 每一列都是单独一行 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>有序1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>有序2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>无序1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>无序2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>分类<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>web<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre> <h5><a id="_191"></a>表格</h5> <ul><li><code><table></code>：表格 <ul><li><code>board</code>：表格边框宽度</li></ul> </li><li><code><tr></code>：行 <ul><li><code>rowspan</code>：跨行（合并行）</li></ul> </li><li><code><td></code>：列 <ul><li><code>colspan</code>：跨列（合并列）</li></ul> </li></ul> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1-1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1-2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2-1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2-2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3-1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <h5><a id="_216"></a>媒体元素</h5> <ul><li>音频 <ul><li><code><audio></code></li></ul> </li><li>视频 <ul><li><code><video></code></li></ul> </li><li>部分组件 <ul><li><code>src</code>：文件路径</li><li><code>controls</code>：显示控件</li><li><code>autoplay</code>：自动播放</li></ul> </li></ul> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment"><!-- 视频 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../image/早木璇子.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token attr-name">autoplay</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 音频 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../image/早木璇子.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token attr-name">autoplay</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h4><a name="t2"></a><a id="_234"></a>页面结构</h4> <div class="table-box"><table><thead><tr><th>元素名</th><th>描述</th></tr></thead><tbody><tr><td>header</td><td>页眉，标题头部内容，用于页面或页面中一块区域</td></tr><tr><td>footer</td><td>页脚（可多次使用），用于页面或页面中一块区域</td></tr><tr><td>section</td><td>页面中的独立区域<br>比如章节、页眉、页脚或文档中的其他部分</td></tr><tr><td>article</td><td>独立的文章内容</td></tr><tr><td>aside</td><td>与周围内容相关，常用做侧栏</td></tr><tr><td>nav</td><td>定义导航链接部分</td></tr></tbody></table></div> <h4><a name="t3"></a><a id="iframe__245"></a>iframe 内联框架</h4> <ul><li><code><iframe src="引用页面地址" name="框架标识名"></iframe></code> <ul><li>src：地址</li><li>width、height：宽度、高度</li><li>name：框架名字 <ul><li>可使用 <code><a target="框架名字"></code> 在指定框架中打开链接</li></ul> </li></ul> </li><li>创建包含另外一个文档的内联框架（即行内框架） <ul><li>在当前页面内打开</li></ul> </li></ul> <div class="table-box"><table><thead><tr><th align="left">属性</th><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">[align]</td><td align="left">left、right、top、middle、bottom</td><td align="left">不赞成使用，使用样式代替。规定如何根据周围的元素来对齐此框架。</td></tr><tr><td align="left">[frameborder]</td><td align="left">1、0</td><td align="left">规定是否显示框架周围的边框。</td></tr><tr><td align="left">[height]</td><td align="left">pixels、%</td><td align="left">规定 iframe 的高度。</td></tr><tr><td align="left">[marginheight]</td><td align="left">pixels</td><td align="left">定义 iframe 的顶部和底部的边距。</td></tr><tr><td align="left">[marginwidth]</td><td align="left">pixels</td><td align="left">定义 iframe 的左侧和右侧的边距。</td></tr><tr><td align="left">[name]</td><td align="left">frame_name</td><td align="left">规定 iframe 的名称。</td></tr><tr><td align="left">[scrolling]</td><td align="left">yes、no、auto</td><td align="left">规定是否在 iframe 中显示滚动条。</td></tr><tr><td align="left">[seamless]</td><td align="left">seamless</td><td align="left">规定 <code><iframe></code> 看上去像是包含文档的一部分。</td></tr><tr><td align="left">[width]</td><td align="left">pixels、%</td><td align="left">定义 iframe 的宽度。</td></tr></tbody></table></div> <h4><a name="t4"></a><a id="_267"></a>表单</h4> <h5><a id="input_269"></a>input</h5> <ul><li><code><form></code>：表单 <ul><li>method：发送数据的方法 <ul><li>post、get、put、delete <ul><li>get 提交信息会在 url 中显示，但高效</li><li>post 不会显示在 url 中</li></ul> </li></ul> </li><li>action：表示向何处发送表单数据 <ul><li>网站或请求处理地址</li></ul> </li></ul> </li><li><code><input></code>：用于搜集用户信息（输入框） <ul><li>不同的 type 属性值，输入字段拥有多种形式 <ul><li>通过 name 上传匹配后端接收，上传的值为 value</li></ul> </li><li>text：文本框 <ul><li>name：名称</li><li>value：输入的值，可以指定默认值；被提交数据</li></ul> </li><li>radio、cheakbox：单选、多选框 <ul><li>value：值，必须有；用来提交</li><li>name：相同的name表示属于同一组单选框</li><li>check：默认选择</li></ul> </li><li>按钮： <ul><li>button：普通按钮</li><li>image：图片按钮</li><li>submit：提交按钮</li><li>reset：重置按钮</li><li>按钮的 value 值显示在 按钮界面上</li></ul> </li><li>文件域：file <ul><li><code>entype="multipart/form-data"</code></li><li>指定字符编码，使用包含文件上传控件的表单时，必须使用该值</li></ul> </li><li>一些功能类型验证输入的数据是否符合格式</li><li>disabled：禁用 <ul><li>使用此属性的标签会失效无法操作</li><li>标签变为 灰色</li></ul> </li><li>readonly：只读 <ul><li>设置后该标签内只能查看无法修改</li><li>标签设置 value 后有初始值但无法修改</li></ul> </li><li>hidden：隐藏域 <ul><li>使用此属性的标签不会显示在页面</li><li>但是仍存在可以提交 <ul><li>标签设置 value 默认值且不允许查看</li></ul> </li></ul> </li></ul> </li><li>下拉框：使用 <code><select></code> <ul><li><code><option></code>：下拉框内使用</li><li><code>selected</code>：默认选中</li></ul> </li><li>文本域：<code><textarea></code> <ul><li>name：文本域名字</li><li>rows、cols：行、列数</li></ul> </li><li><code><lable></code>：增强鼠标可用性 <ul><li>label 元素内点击文本会自动将焦点转到和标签相关的表单控件上</li><li>for 属性与相关元素的 id 属性相同 <ul><li>指定后可以跳转到该 id 对应的输入框</li><li>默认为 <code><lable></code> 域内第一个 input 语句</li></ul> </li></ul> </li></ul> <pre data-index="7" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo.html<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> 单选 <span class="token comment"><!-- 默认张三 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张三<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>张三 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>李四<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>李四 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 复选 <span class="token comment"><!-- 默认 张三 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张三<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>张三 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>李四<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>李四 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> 下拉框 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 默认中国 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>瑞士<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>瑞士<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>瑞士<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>china<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>中国<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>中国<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> 文本域<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>文本域<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> 文件域名<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>上传文件<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>上传<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token comment"><!-- for 属性指定点击文字时跳转 email 框 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aa<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 邮箱格式验证<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aa<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> URL 验证<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 数字限制<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 滑块<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 搜索框<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> 文本输入框<span class="token entity named-entity" title=" "> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>姓名<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张三<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 提交按钮<span class="token entity named-entity" title=" "> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li></ul></pre> <div class="table-box"><table><thead><tr><th align="left">input属性</th><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">type</td><td align="left">button、checkbox、file、hidden、image、password、radio、reset、submit、text</td><td align="left">规定 input 元素的类型，默认 text</td></tr><tr><td align="left">name</td><td align="left">field_name</td><td align="left">定义 input 元素的名称</td></tr><tr><td align="left">value</td><td align="left"><em>value</em></td><td align="left">初始值，radio 时必须指定</td></tr><tr><td align="left">checked</td><td align="left">checked</td><td align="left">默认选中</td></tr><tr><td align="left">alt</td><td align="left">text</td><td align="left">定义图像输入的替代文本</td></tr><tr><td align="left">size</td><td align="left">number_of_char</td><td align="left">输入框长度</td></tr><tr><td align="left">src</td><td align="left">URL</td><td align="left">定义以提交按钮形式显示的图像的 URL</td></tr><tr><td align="left">list</td><td align="left"><em>datalist-id</em></td><td align="left">引用包含输入字段的预定义选项的 datalist</td></tr><tr><td align="left">maxlength</td><td align="left">number</td><td align="left">规定输入字段中的字符的最大长度</td></tr><tr><td align="left">max</td><td align="left"><em>number</em>、<em>date</em></td><td align="left">规定输入字段的最大值</td></tr><tr><td align="left">min</td><td align="left"><em>number</em>、<em>date</em></td><td align="left">规定输入字段的最小值</td></tr><tr><td align="left">align</td><td align="left">left、right、top、middle、bottom</td><td align="left">不赞成使用。规定图像输入的对齐方式</td></tr><tr><td align="left">readonly</td><td align="left">readonly</td><td align="left">规定输入字段为只读</td></tr><tr><td align="left">required</td><td align="left">required</td><td align="left">指示输入字段的值是必需的</td></tr><tr><td align="left">disabled</td><td align="left"></td><td align="left">标签禁用</td></tr><tr><td align="left">readonly</td><td align="left"></td><td align="left">只读</td></tr><tr><td align="left">hidden</td><td align="left"></td><td align="left">隐藏标签</td></tr></tbody></table></div> <h5><a id="input__401"></a>input 属性</h5> <div class="table-box"><table><thead><tr><th align="left">属性</th><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">type</td><td align="left">button、checkbox、file、hidden、image、password、radio、reset、submit、text</td><td align="left">规定 input 元素的类型</td></tr><tr><td align="left">name</td><td align="left">field_name</td><td align="left">定义 input 元素的名称，提交数据的 key</td></tr><tr><td align="left">value</td><td align="left">value</td><td align="left">规定 input 元素的值，提交数据的 value</td></tr><tr><td align="left">src</td><td align="left">URL</td><td align="left">定义以提交按钮形式显示的图像的 URL</td></tr><tr><td align="left">size</td><td align="left">number_of_char</td><td align="left">定义输入字段的宽度</td></tr><tr><td align="left">alt</td><td align="left">text</td><td align="left">图片无法显示时的信息</td></tr><tr><td align="left">step</td><td align="left">number</td><td align="left">规定输入字的的合法数字间隔</td></tr><tr><td align="left">readonly</td><td align="left">readonly</td><td align="left">规定输入字段为只读</td></tr><tr><td align="left">placeholder</td><td align="left">text</td><td align="left">提示信息，输入内容后自动消失</td></tr><tr><td align="left">required</td><td align="left">required</td><td align="left">指示输入字段的值是必需的</td></tr><tr><td align="left">checked</td><td align="left">checked</td><td align="left">选择框内默认选中</td></tr><tr><td align="left">disabled</td><td align="left">disabled</td><td align="left">当 input 元素加载时禁用此元素</td></tr><tr><td align="left"></td><td align="left"></td><td align="left"></td></tr><tr><td align="left">pattern</td><td align="left">regexp_pattern</td><td align="left">正则验证输入的内容格式</td></tr><tr><td align="left">maxlength</td><td align="left">number</td><td align="left">规定输入字段中的字符的最大长度</td></tr><tr><td align="left">max</td><td align="left">number、date</td><td align="left">规定输入字段的最大值；与 “min” 属性创建合法值的范围</td></tr><tr><td align="left">min</td><td align="left">number、date</td><td align="left">规定输入字段的最小值；与 “max” 属性创建合法值的范围</td></tr><tr><td align="left">accept</td><td align="left">mime_type</td><td align="left">规定通过文件上传来提交的文件的类型</td></tr><tr><td align="left">align</td><td align="left">left、right、top、middle、bottom</td><td align="left">不赞成使用；规定图像输入的对齐方式</td></tr><tr><td align="left">autocomplete</td><td align="left">on、off</td><td align="left">规定是否使用输入字段的自动完成功能</td></tr><tr><td align="left">autofocus</td><td align="left">autofocus</td><td align="left">规定输入字段在页面加载时是否获得焦点；不适用于 type=“hidden”</td></tr><tr><td align="left">form</td><td align="left">formname</td><td align="left">规定输入字段所属的一个或多个表单</td></tr><tr><td align="left">formaction</td><td align="left">URL</td><td align="left">覆盖表单的 action 属性；适用于 type=“submit” 和 type=“image”</td></tr><tr><td align="left">formenctype</td><td align="left">见注释</td><td align="left">覆盖表单的 enctype 属性；适用于 type=“submit” 和 type=“image”</td></tr><tr><td align="left">formmethod</td><td align="left">get、post</td><td align="left">覆盖表单的 method 属性；适用于 type=“submit” 和 type=“image”</td></tr><tr><td align="left">formnovalidate</td><td align="left">formnovalidate</td><td align="left">覆盖表单的 novalidate 属性；如果使用该属性，则提交表单时不进行验证</td></tr><tr><td align="left">formtarget</td><td align="left"><code>_blank、_self、_parent、_top、framename</code></td><td align="left">覆盖表单的 target 属性；适用于 type=“submit” 和 type=“image”</td></tr><tr><td align="left">list</td><td align="left">datalist-id</td><td align="left">引用包含输入字段的预定义选项的 datalist</td></tr><tr><td align="left">multiple</td><td align="left">multiple</td><td align="left">该属性允许一个以上的值</td></tr><tr><td align="left">height</td><td align="left">pixels、%</td><td align="left">定义 input 字段的高度；适用于 type=“image”</td></tr><tr><td align="left">width</td><td align="left">pixels、%</td><td align="left">定义 input 字段的宽度；适用于 type=“image”</td></tr></tbody></table></div> <h3><a name="t5"></a><a id="CSS_437"></a>CSS</h3> <ul><li>CSS：Cascading Style Sheet <ul><li>层叠样式表语言</li></ul> </li><li>用来修饰 HTML 页面 <ul><li>设置 HTML 页面中某些元素的样式</li><li>HTML 是主体，CSS 依赖 HTML 存在</li></ul> </li></ul> <h4><a name="t6"></a><a id="_CSS_445"></a>嵌套 CSS</h4> <ul><li> <p>内联定义：在 HTML 标签内部使用</p> <ul><li>已被废弃</li></ul> </li><li> <p><a href="https://so.csdn.net/so/search?q=%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"内联样式\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"内联样式\"}"}" data-tit="内联样式" data-pretit="内联样式">内联样式</a>块：<code><head></code>标签内使用 <code><style></code>制定样式</p> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">选择器</span><span class="token punctuation">{<!-- --></span> 样式定义 <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li><li> <p>单独定义外部样式文件</p> <ul><li>在需要时通过链接引入</li><li>rel 属性是必须的 <ul><li>规定当前文档与被链接文档/资源之间的关系</li></ul> </li></ul> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css文件地址<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.358731;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul> <h4><a name="t7"></a><a id="_471"></a>选择器</h4> <ul><li>id 选择器：<code>#id名{ 定义样式 }</code> <ul><li>id 值应该唯一，所以可以精准选中元素</li></ul> </li><li>标签选择器：<code>标签类型{ 定义样式 }</code> <ul><li>范围更广，相同类型标签</li></ul> </li><li>类选择器：<code>.类名{ 定义样式 }</code> <ul><li>可以跨标签使用，在 html 标签中定义 class 属性</li><li>指定同一类的标签样式</li></ul> </li></ul> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1348225">cpu的指令重排，禁用办法</a> <br /> <a href="/Article/Index/914364">嵌入式Linux入门-Framebuffer应用编程在Linux系统下画个点</a> <br /> <a href="/Article/Index/892867">这是一代骄马</a> <br /> <a href="/Article/Index/1382013">HANA:计算视图-图形化Aggregation组件-踩坑小记（注意事项）</a> <br /> <a href="/Article/Index/1521416">程序员的三重境界：码农，高级码农、程序员！</a> <br /> <a href="/Article/Index/1045378">MUSIQ: Multi-scale Image Quality Transformer【图像质量评估】</a> <br /> <a href="/Article/Index/1321974">Java版企业电子招标采购系统源码—企业战略布局下的采购寻源</a> <br /> <a href="/Article/Index/1443857">【Unity】LayoutGroup自动缩放子对象大小</a> <br /> <a href="/Article/Index/1295116">华为云云耀云服务器L实例评测｜轻量级应用服务器对决：基于 fio 深度测评华为云云耀云服务器L实例的磁盘性能</a> <br /> <a href="/Article/Index/1522424">windows 上 python open函数打开文件夹报错提示权限不足</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_66991094/article/details/127437267 </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/1906469">【JVM】编译执行与解释执行的区别是什么？JVM 使用哪种方式？</a> <br /> <a href="/Article/Index/1907193">用 Hashids 优雅解决 C 端自增 ID 暴露问题</a> <br /> <a href="/Article/Index/1907195">V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容</a> <br /> <a href="/Article/Index/1907196">LLVM Pass快速入门(四)：代码插桩</a> <br /> <a href="/Article/Index/1907197">milkup：桌面端 markdown AI续写和即时渲染</a> <br /> <a href="/Article/Index/1907198">基于项目工程构建SBOM（软件物料清单）的研究</a> <br /> <a href="/Article/Index/1907199">鸿蒙应用开发UI基础第二节：鸿蒙应用程序框架核心解析与实操</a> <br /> <a href="/Article/Index/1907200">.NET 中如何快速实现 List 集合去重？</a> <br /> <a href="/Article/Index/1907201">扣子Coze实战：从0到1打造抖音+小红书热点监控智能体</a> <br /> <a href="/Article/Index/1907202">浅谈数据访问层</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> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div style="padding:0px 5px;"> <a href="/tools">小工具</a> <a href="https://games.1000bd.com">小游戏</a> </div> <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=" 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> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>