HTML标签
https://www.w3school.com.cn/html5/index.asp
https://www.w3school.com.cn/tags/tag_html.asp
1、HTML基本标签#
<h1>最大的标题</h1><h2> . . . . </h2><h3> . . . . </h3><h4> . . . . </h4><h5> . . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><!--文字会自动换行--><br> （换行）<hr> （水平线）<!-- 这是注释 -->2、语义化标签#
2.1、文本语义化标签#
<b>粗体文本</b><strong>重要的文本加粗</strong> <!--推荐使用-->
<i>斜体文本</i><em>斜体强调文本</em><!--推荐使用-->
<!--<s>删除的文本</s>--><del>删除的文本</del><!--推荐使用-->
<!--<u>下划线文本</u>--><ins> 插入的文本</ins><!--推荐使用-->
<kbd>键盘输入</kbd><code>计算机代码</code> <pre>预格式化文本</pre><!--使文本保留换行空格等格式--><small>更小的文本</small>
<abbr> （缩写）<address> （联系信息）<bdo> （文字方向）<blockquote> （从另一个源引用的部分）<cite> （工作的名称）<sub> （下标文本）<sup> （上标文本）2.2、结构语义化标签#
h5常用 ie9及以上兼容
<header>头部</header>
<nav>标签定义导航链接的部分</nav><nav> <a href="xx.asp">xx</a> <a href="xxx.asp">xxx</a> <a href="xxxxx.asp">xxx</a></nav>
<section>区块（相当于语义化的div）</section>
<main>主要区域，在一个文档中，只能出现一次，不能是语义化元素的后代</main><main> <article> <h1>Mozilla Firefox</h1> <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器。</p> </article></main>
<artical>主要内容（标签规定独立的自包含内容）</artical><article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（简称 IE9）</p></article>
<aside>侧边栏</aside>
<footer>底部</footer>
<hgroup>专门用来包含标题h标签的分组</hgroup><hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2></hgroup>
<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。<details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5.</details>
组合图片标题<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="haha.jpg" width="666" height="666" /> </figure>2.3、新标签兼容问题#
header, section, footer, aside, nav, main, article, figure这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block
header, section, footer, aside, nav, main, article, figure { display: block; }3、块级元素&行内元素#
<div>文档中的块级元素</div><span>文档中的内联元素</span>4、图片&超链接#
<img src="URL" alt="替换文本" title="鼠标悬停时显示文字" height="42" width="42"><a href="http://www.example.com/" target="_blank">链接文本(新窗口打开页面)</a><a href="http://www.example.com/" target="_self">链接文本(本身窗口打开页面)</a>
<a href="http://www.example.com/" target="_self"> <img src="URL" alt="当图片不显示是显示的文字"></a>
<a href="mailto:xxxxx@qq.com">发送e-mail</a>
<a href="tel:10086">拨打电话</a>
<a href="JavaScript:;">点击链接不做任何操作</a><a href="JavaScript:viod(0);">点击链接不做任何操作</a>
锚点定位：<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>5、列表#
<ul> [type="disc /circle / square" 实心圆/空心圆/实心方块] <li>无序列表</li> <li>无序列表</li></ul>
<ol> <li>有序列表</li> <li>有序列表</li></ol>
<dl> <dt>项目 1</dt> <dd>描述项目 1</dd> <dt>项目 2</dt> <dd>描述项目 2</dd></dl>
6、表格#
【<!--设置border为1 默认为0-->】 【<!--设置单元格之间的距离cellspacing为0默认为2 -->】==不赞成使用。请使用样式代替== 【<!--设置单元格内容与边框的距离cellpadding为2默认为1-->】==不赞成使用。请使用样式代替== <table border="1" cellspacing="0" cellpadding="2"> <caption> 表格标题 </caption> <thead> <tr> <th colspan="2">表头</th>【<!--此行合并两个单元格-->】 <th>表头</th> </tr> </thead> <tbody> <tr> <td colspan="2">单元格</td>【<!--此行合并两个单元个-->】 <td rowspan="2">单元格</td>【<!--此列合并两个单元格-->】 </tr> <tr> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table>
7、表单（含h5）#
<form action="demo_form.php" method="post/get" name="XXX"> <input type="text" value="值" name="usename" size="20" maxlength="50" /> <input type="email" name="" id="" /> <input type="url" placeholder="输入框内提示内容" name="" id="" /> <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> 焦点绑定 <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> ... </form>| 属性 | 值 | 描述 |
|---|---|---|
| autocomplete ==New== | onoff | autocomplete 属性规定<input>元素输入字段是否应该启用自动完成功能。 |
| autofocus ==New== | autofocus | 属性规定当页面加载时 <input> 元素应该自动获得焦点。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 属性规定应该禁用的 <input> 元素。 |
| maxlength | number | 属性规定 <input> 元素中允许的最大字符数。 |
| multiple ==New== | multiple | 属性规定允许用户输入到<input>元素的多个值。 |
| name | text | name 属性规定 <input> 元素的名称。 |
| pattern ==New== | regexp | pattern 属性规定用于验证 <input> 元素的值的正则表达式。 |
| placeholder ==New== | text | placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| required ==New== | required | 属性规定必需在提交表单之前填写输入字段。 |
| size | number | size 属性规定以字符数计的 <input> 元素的可见宽度。 |
| enctype | application/x-www-form-urlencodedmultipart/form-datatext/plain | 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
8、HTML框架#
<iframe src="aa.html" frameborder="0"<!--[0-不带边框 1-带边框 h5需要在css中实现]--> width="500px"<!--[宽]--> height="500px"<!--[高]--> marginheight="50"<!--[顶部底部边距 h5需要在css中实现] --> marginwidth="50"<!--[两侧边距 h5需要在css中实现]--> scrolling="yes"<!--[显示滚动条 yes|no|auto h5需要在css中实现]--> <!-- [带有额外限制的iframe]--> sandbox="" <!--[启用所有限制条件]--> sandbox="allow-same-origin" <!--[允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。] --> sandbox="allow-top-navigation"<!--[嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。]--> sandbox="allow-forms"<!--允许表单提交。--> sandbox="allow-scripts"<!--允许脚本执行。--> > </iframe>9、音频&视频标签（H5）#
<audio controls loop autoplay> <source src="" type="aodio/mp3"> <source src="" type="aodio/ogg"> <source src="" type="aodio/wav"> 您的浏览器不支持audio播放</audio><video controls loop autoplay width="" height="" preload="auto|none" poster="imgurl" muted> <source src="" type="video/mp4"> <source src="" type="video/ogg"> <source src="" type="video/webm"> 您的浏览器不支持audio播放</video>