html5常见标签
<h2><em>HTML文档的基本结构</em></h2><p> 原文链接：https://www.cnblogs.com/suitongyu/p/7294525.html</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p> </p>
<h2>1、<!DOCTYPE html>文档声明</h2>
<p> 文档类型声明，让浏览器按照HTML5的标准对代码进行解释与执行。</p>
<p> 文档类型声明必不可少，而且，必须放在文档最上方。</p>
<p> 如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现BUG。</p>
<h2>2、头部：<head></head></h2>
<p> head中，主要放一些关于网页设置的相关语句。</p>
<h3> mete标签</h3>
<h3>（1）设置网页的字符集编码格式</h3>
<p> GB2312（简体中文的编码格式）<br> GBK （扩展的国标码。比国标码多了更多的编码格式。）<br> utf-8 (万国码。可以兼容绝大多数国家的语言。)<br> html4.0之前，声明字符集编码格式:</p>
<div class="cnblogs_code">
<pre><meta http-equiv="Content-type" content="text/html; charset=utf-8" /></pre>
</div>
<h3>（2）设置网页关键字</h3>
<p> name=“keywords” 表示当前语句用于设置网页关键字<br> content=表示网页的关键字内容，多个关键字之间用英文逗号分开。</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><meta name="keywords"content="杰瑞教育,HTML5,Web开发" /></pre>
</div>
<h3>（3）设置网页描述</h3>
<p> name="description"表示当前语句用于设置网页描述<br> 网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页描述的内容。</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><meta name="description"content="这是我开发的第一个网页。"/></pre>
</div>
<h4> <title></title>标签</h4>
<p>网页的标题:也就是网页选项卡上的文字</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><title>百度首页</title></pre>
</div>
<h4> <link>标签</h4>
<p>链接网页小图标：选项卡上的小图片。<br>rel属性：选择icon，表示链接的文件，将作为网页的icon图标。<br>href属性:选择图片所在的路径地址。</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><link rel="icon" href="img/icon.jpg"></pre>
</div>
<h1> </h1>
<h1><strong>二、常见的块级标签</strong></h1>
<h2>1、HTML的标签分类</h2>
<p>分为“块级标签”和“行级标签”<br>二者区别：<br>①.块级标签自动换行，前后隔一行.<br> 行级标签不会自动换行，从左向右依次显示.<br>②.块级标签默认的宽带是100%.<br> 行级标签的宽带由文字内容撑开.<br>③.块级标签可以设置宽度、高度、边距等属性.<br> 行级标签不能设置上述属性.</p>
<p>从写法上，html标签分为“成对标签”和“自闭合标签(空标签)”<br>1.成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。<br>例如：<h1></h1> <p></p> <title><title><br>2.自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。<br>例如<hr/><link/><meta/></p>
<p> </p>
<p>①标题标签（默认加粗，h1最大，h6最小）</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<div class="cnblogs_code">
<pre><h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6></pre>
</div>
<p> </p>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>②水平线<hr/><br>③段落<p><p/><br>④换行<br /><br>eg：</p>
<div class="cnblogs_code">
<pre><p>这是一个段落。这是一个段落。<br>这是一个段落。这是一个段落。</p></pre>
</div>
<p>⑤引用<blockquote></blockquote></p>
<p>blockquote :引用标签。表示标签中的文字是引用自其他网站的内容。<br> 浏览器默认显示效果，整段向后缩进。</p>
<p><br>cite属性，表明引用的来源，一般为引用的网址URL<br>eg：</p>
<div class="cnblogs_code">
<pre><blockquote cite="www.jredu100.com">引用：你好帅哥！</blockquote></pre>
</div>
<p>⑥预格式标签：<pre></pre></p>
<p>与p标签不同的是，pre标签会保留代码中的空格和回车。在网页直接显示。<br>最常用的作用，是在网页中显示代码段，保留代码段格式。</p>
<div class="cnblogs_code">
<pre><pre>预格式
标签</pre></pre>
</div>
<p> </p>
<p><em>基于布局的块级标签</em></p>
<p>⑦有序列表ol (order list)</p>
<div class="cnblogs_code">
<pre> <ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol></pre>
</div>
<p> </p>
<div class="cnblogs_code"> </div>
<p>⑧无序列表ul (unorder list)</p>
<div class="cnblogs_code">
<pre><ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul></pre>
</div>
<p>⑨定义描述列表</p>
<p>定义列表包含两部分：<br><dt></dt>:定义列表的标题，标题定格显示，一般一个定义列表只有一个标题。<br><dd></dd>:定义列表的描述项，相对于标题向后缩进显示，一个列表可以有多个描述项。</p>
<p><dl><br><dt>标题</dt><br><dd>描述项</dd><br></dl></p>
<p><br>一般情况下，标题dt只有一项，描述项dd可以有N多项。<br>浏览器显示时，标题格式会显示，显示缩进。<br>eg：</p>
<div class="cnblogs_code">
<pre><dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项1</dd>
<dd>定义列表的描述项2</dd>
<dd>定义列表的描述项3</dd>
</dl></pre>
</div>
<p>⑩图片组合标签figure</p>
<p>包含两个部分：img 一张图片<br>figcaption：图片的标题，在图片的下方显示。</p>
<div class="cnblogs_code">
<pre> <figure>
<img src="img/3.jpg" />
<figcaption>这是图片的标题。</figcaption>
</figure></pre>
</div>
<p>（11）分区标签div<br>用于配合css使用，将网页划分为区块，可以包裹各种标签。<br>eg：</p>
<div class="cnblogs_code">
<pre> <div style="width:100%; height:100px; ">
<h1>我是div里面的标题</h1>
这是div里面的文字。
</div></pre>
</div>
<h1> </h1>
<p> </p>
<h1>三、常见的行级标签</h1>
<p> </p>
<p><strong> </strong></p>
<h2>常见的行级标签</h2>
<p>span（文本）、img（图片）、em（强调）、strong（强调）、q（短引用）、a（超链接）、<br>i（倾斜）、b（加粗）、small（缩小字体）</p>
<p>1、span（文本）：用于包裹行内的文字，常配合css使用修改文字样式。</p>
<div class="cnblogs_code">
<pre><span style="color: red;font-size: 40px;">真帅！</span>巅峰时代</pre>
</div>
<p>2、倾斜/加粗<br>em：显示倾斜<br>strong：显示加粗<br>i：倾斜<br>b：加粗</p>
<p>em strong i b区别</p>
<p>①em和i都能倾斜，strong和b都能加粗，但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。<br>②em和strong都表示强调，而strong得强调程度要大于em，em和strong标签均可多成嵌套，表示强调程度的递增<br>eg：</p>
<div class="cnblogs_code">
<pre><em>em标签，</em>
<strong>strong标签</strong>
<i>i标签</i>
<b>b标签</b>
<u>u标签</u></pre>
</div>
<p>3、常见引用标签</p>
<p>blockquote、q、cite</p>
<p>区别：<br>显示效果上：blockquote整段缩进、q加引号、cite倾斜</p>
<p>从功能上：blockquote用于引用一整段内容，是块级标签。</p>
<p>q用于引用一句话是行级标签。cite常用于引用书画作品名。</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><blockquote>块引用</blockquote>
<q cite="www.jredu100.com">q标签，短引用</q>
<cite>cite引用</cite></pre>
</div>
<p>small（缩小字体）：small标签可以多层嵌套，表示字体小一号<br>直到字号小到最小号为止<br>big（放大字体）：同small可以多层嵌套，直到字号最大为止</p>
<p>但是，在最新规范中，small和big标签，不能被提倡使用，提倡使用style="font-size:11px;"CSS样式替代<br>eg：</p>
<div class="cnblogs_code">
<pre><small>小一号字体</small>
<big>大一号字体</big></pre>
</div>
<p> </p>
<p>4、img 图片标签</p>
<p>（1）src属性表示图片所在的路径。<br> [路径的表示方式]<br> ①网络图片地址。并不建议使用。<br> ②可以使用图片的绝对路径。但是严禁使用绝对路径。（因为，绝对路径使用file：//协议，网页使用http：//协议，无法访问file：//协议的文件。）<br> file：///C:sunyang.jpg 绝对路径的写法：file：///盘符：/文件路径<br> ③使用相对路径。推荐使用的唯一方式。<br> a.图片在当前文件的下一层，“文件夹名/图片名”<br> b.图片与当前文件夹在同一层，直接写“图片名”。<br> c.图片在当前文件的上一层，“../图片名”。<br> 注意：图片必须包含在项目里面，不能推出当前项目根目录。<br>（2）width、height 宽度和高度属性<br>（3）title:鼠标指上时显示的文字<br>（4）alt：图片无法加载时显示的文字。省略alt，将默认显示title内容<br>（5）align：图片周围的文字，相对于图片的排列方式；<br> top文字居上 center居中 bottom文字居底</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><img src="img/icon.jpg" width="100"height="100" title="鼠标指上时显示"alt="图片无法加载"align="bottom"/></pre>
</div>
<p> </p>
<p>5、超链接<a></a></p>
<p>（1）1.href属性：找链接跳转的地址。可以是网络连接，也可以是本地html相对路径。<br>（2）target属性：超链接新页面打开位置。<br> _slef在当前页面打开（默认）_blank在新页面打开<br>（3）title属性：鼠标指在超链接上显示的文字。</p>
<p>6、功能链接</p>
<p>（1）malito：给指定邮箱发送邮件。</p>
<div class="cnblogs_code">
<pre><a href="malito://931497747@qq.com"target="_self"title="1230">超链接</a></pre>
</div>
<p> </p>
<p><br>（2）tencent:与指定qq聊天</p>
<div class="cnblogs_code">
<pre><a href="tencent://message/?uin=1677246256"target="_self"title="1230">聊天</a></pre>
</div>
<p> </p>
<p> </p>
<p><br>（3）锚链接：点击超链接，可以跳转页面的指定位置(锚点)<br>①在页面的指定位置，定义一个锚点：</p>
<div class="cnblogs_code">
<pre><a name="top"></a></pre>
</div>
<p> ②将超链接的href属性改为“#锚点名称”</p>
<div class="cnblogs_code">
<pre><a herf="#top">调到div上方</a></pre>
</div>
<p> ③跳转到其他页面的锚点方式：跳转网页位置#锚点名称</p>
<p><br><br></p>
<p>7、其他标签（了解）<br> ①<s>：删除线<br>eg：</p>
<div class="cnblogs_code">
<pre><s>这是s标签中的文字</s></pre>
</div>
<p> ②code：只是表示计算机代码。只会显示等宽字体，不会保留代码格式，需配合pre标签使用</p>
<p>eg：</p>
<div class="cnblogs_code">
<pre><pre>
<code>
jsLoader({name : 'iplookup',url :'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'});
</code>
</pre></pre>
</div>
<p> ③bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左<br>eg：</p>
<div class="cnblogs_code">
<pre><bdo dir="rtl">姜浩真帅</bdo></pre>
</div>
<p> ④kbd:表示需要用户用输入的内容。<br>eg：</p>
<div class="cnblogs_code">
<pre>请输入“<kbd>Esc</kbd>”退出系统。</pre>
</div>
<p> ⑤sup：上标文本 sub：下标文本<br>eg：</p>
<div class="cnblogs_code">
<pre>H<sub>2</sub>O X<sup>2</sup></pre>
</div>
<p> </p>
<p> ⑥var：表示变量<br>eg：</p>
<div class="cnblogs_code">
<pre><var>x</var>+<var>y</var>=1</pre>
</div>
<p> </p>
<p><br> ⑦u:下划线<br>eg：</p>
<div class="cnblogs_code">
<pre><u>这是u标签</u></pre>
</div>
<p> ⑧mark:高亮或标记文本 浏览器显示为黄色背景<br>eg：</p>
<div class="cnblogs_code">
<pre><mark>哈哈哈哈哈</mark></pre>
</div>
<p> </p>
<p> </p>
<p> </p>
<h1><strong>四、表格<table></strong></h1>
<p> </p>
<h2>一、表格table</h2>
<p> </p>
<p>表格中一行，用tr表示；<br>一行中的每个单元格，用td表示；<br>首行的表头中每个单元格，用th表示，th默认文字会加粗、居中。</p>
<h2> </h2>
<p> </p>
<h2>二、表格中的各种属性</h2>
<p> </p>
<p>1.border：给表格的每个td和整个table加边框。如果boder的值>1，则只有最外层的加粗，tb的边框不变。<br>border: hidden：隐藏边框。</p>
<p>2.cellspacing：设置单元格与单元格之间的间距。<br>cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而且显示为两条线的宽度。</p>
<p><br>设置表格边框合并<br>可以使用css设置：style="border-collapse: collapse;<br>设置边框合并以后，cellspacing属性将会消失。</p>
<p><br>3.cellpadding：单元格内边距，单元格中文字与边框之间的距离。</p>
<p>4.width/height：宽度和高度。0</p>
<p>5.align：设置表格在浏览器中，居左 居右。</p>
<p>6.bgcolor：表格的背景颜色</p>
<p> bordercolor：表格的边框颜色<br> background：表格背景图。优先级高于背景色。</p>
<p> </p>
<p> </p>
<h2>三、表格的行列属性</h2>
<p> </p>
<p> </p>
<p>作用于tr或者td的属性：</p>
<p>1.width 宽度、height 高度<br>2.bgcolor：背景色<br>当表格的属性与行列的属性发生冲突时，优先级采用 近者优先 的原则：table<tr<td。<br>3.align：设置单元格中的文字，水平对齐方式；left center right<br> valign：设置单元格中的文字，垂直对齐方式；top center bottom</p>
<p> </p>
<p> </p>
<h2>四、表格的跨行与跨列</h2>
<p> </p>
<p>跨列：colspan="n"如果某个单元格n列，则单元格右侧n-1个td就不需要了。<br>跨行：rowspan="n"如果某个单元格行，则单元格下方n-1个td就不需要了。</p>
<p>表格结构化</p>
<p>完整的表格结构，包括：<br>caption：表格的标题，无论<caption>标签放在表格第几行，表格标题永远在表格正上方居中。<br>thead：表格的表头部分。永远在表格最上部。<br>tbody：表格的身体部分。在thead之下，tfoot上。<br>tfoot：表格的尾部永远在最下部。</p>
<p>表格的直列化</p>
<p>表格有记列，就可以在表格的最上方写几个<col/>标签，每个<col/>就对应这第几列，可以<col/>标签修改样式、添加name等属性，表示这一列的所有<br>tb同步修改;如果，需要对多列修改同样式，可以使用<colgroup><colgroup/>标签包裹多个<col/>.</p>
<p> </p>
<h1>五、form表单</h1>
<h2>1、form表单两个重要属性</h2>
<p>action：表示，将表单提交给哪个服务器地址；<br>method：表单提交数据的方式，可选值get和post两种。<br>get和post区别<br>① get使用URL传递数据。所有内容在地址栏可以看见，不安全。<br>post的数据无法在地址栏看到，比较安全。<br>② get传递的数据量有限，而且只能传递纯文字内容；<br>post可以传递大量数据，而且可以传递图片、视频等文件。<br>③ get的传输速度比post快。<br>get传递数据的URL格式<br>http：//原来的地址。html?name1=value1&name2=value2<br>比如:http：//127.0.0.0：8020/0595.html?username=123<br>所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据比向后台传递。<br><br></p>
<h2>2、input的常用属性</h2>
<p>① type：表示当前输入框是何种类型的输入框。<br>② name：给输入框起别名。向后台传递时，使用name=value的形式传递。<br>③ value：当前input的默认值。<br>④ placholder：输入框的提示内容。当输入框有value时，提示内容消息。<br>⑤ hidden：隐藏当前输入框。可以写为hidden="hidden"，也可以省略属性值，只写<inout type="text" hidden/><br>隐藏的输入框内容依然可以向后台传递。（border: hidden 隐藏边框）<br>⑥ disabled：禁用当前输入框。可以显示，不能使用。<br>被禁用的输入框内容，将不能向后台传递数据。<br>⑦ checked：设置默认选中的选项，可以写为checked="checked",也可以省略属性值，只写<inout type="text" checked/></p>
<h2><br>3、input的type类型</h2>
<p>① text：普通的文本框。<br>② password：密码框，输入的内容，显示为小黑点。<br>③ radio：单选按钮。单选按钮的value不能省略，这个value需要传递到后台<br>单选按钮，凭借name是否相同，区分按钮是否为一组，name必须相同。<br>checked="checked"设置单选按钮，默认被选中。<br>④ checkbox：多选按钮。其他与单选按钮一样。<br>⑤ file：文件上传框。<br>acceot属性，可以限制只能上传何种类型的文件。“*”表示可以接受所有文件，"image/*"表示只能接受图片。<br>multiple="multiple",设置可以上传多个图片。<br>⑥ submit：表单提交按钮。<br>⑦ reset：表示重置按钮，点击将表单回复为初始状态。<br>⑧ image：图形提交按钮。src属性导入图片，与submit都聚有提交表单的作用。<br>⑨ button：显示为按钮形状，但是没有任何作用。<br>⑩ hidden：隐藏的输入框。与普通的输入框+hidden="hidden"的作用相同。</p>
<p> </p>
<h2>4.select 下拉选择区块</h2>
<p>① select 里面的每一项，<option></option>标签表示。<br>② name属性，需要写到select标签上。<br>③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是<option></option>标签之间的文字。<br>④ option 添加属性selected="selected",设置默认选中项。<br>⑤ select添加属性multiple="multiple",设置当前下拉控件可以多选。<br>⑥ option 添加属性title，表示鼠标指上后显示的文字。<br>⑦ select 可以使用<optgrop></optgrop>标签对选项进行分组，用label属性显示分组名。</p>
<p> </p>
<h2>5.textarea 文本域</h2>
<p>① 文本域大小控制<br>可以用文本域属性cols="20"（宽度多少字符)rows="10"(高多少行)可以使用css样式style="width="100px"; height="100px";<br>可以使用css样式<br>style="width="100px"; height="100px";<br>②设置文本域大小不能拖动。<br>style="resize:none"<br>③ 文字超出区域处理：<br>使用style="overflow:xx;"可以显示文字超出区域的显示的方式：<br>overflow:hidden；超出区域的文字隐藏不显示<br>overflow:scroll；无论文字多少，都会显示水平垂直滚动条。<br>overflow:auto；自动，默认效果，文字多显示滚动条，文字少不显示滚动条。<br>可以使用overflow-x和overflow-y单独修改两个方向的滚动条<br>overflow-x:scroll;overflow-y:hidden;</p>
<p> </p>
<h2>【HTML5智能表单】</h2>
<p>1.H5给我们提供了将form外的input与表单的关联方式。只需给form表单起一个id，然后给表单外面的input添加form属性，指向这个id 就可以实现表单与input的绑定；<br><form id="ff"></form><br>input form="ff"/><br>2.H5新增了很多input的新的type类型。<br>range color date email url<br>3.H5新增的input属性：<br>① form属性：关联指定表单的id<br>② placeholder：输入框的提示内容<br>③ required="required":必填。<br>④ autofocus="autofocus"：指定输入框自动获得焦点。<br>⑤ autocomplete：是否开启自动提示完成功能，默认为开启状态，设置为off表示关闭，设置为on表示打开。<br>可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。</p><br><br>
来源：https://www.cnblogs.com/ncwoniu/p/11677310.html
頁:
[1]