html标签

最新推荐文章于 2024-07-28 14:13:07 发布

原创最新推荐文章于 2024-07-28 14:13:07 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

HTML、CSS学习专栏收录该内容

14 篇文章

订阅专栏

1.<hr>标签是分割线

2.<img src=" " alt=" " width=" " height=" " title=" ">img标签的src是图片的路径，alt是图片不存在时显示的内容，为了使图片不变形，height和width只选择其一就好（这个宽高也可在css中设置），title标签是鼠标悬停在图片时显示的文本内容。

3.<br>标签是换行，需要注意的是使用几个<br>就换几行，不过企业开发中<br>用的很少,如果是在一个段落中需要换行，那么迫不得已就用<br>

4.<a href=" " target=" " title=" "></a> href不仅可以跳转到网络地址，还可以跳转到本地的html，a标签里面显示的内容不仅可以是文本还可以是图片.target属性可以是_self,也可以是_blank，_self是在当前选项卡跳转，_blank是新建一个选项卡，默认是当前。title属性也是鼠标悬停在a标签上时显示的文本内容。

5.<base>标签是专门用来统一修改所有的a标签的打开方式是当前或者是新建.<base target="_blank">,需要注意的是base标签需要写在head中。它的强度若于a标签内单独定义的target

6.假链接：点击之后不会跳转的链接叫做假链接。写法为<a href="#"></a>和<a href="javascript："></a>，区别：#能够返回网页顶部，javascript：原地不动

7.锚点：锚点就是点击网页的a标签，跳转到该网页的指定位置。在目录这块应用比较多。写法为<a href="#center"></a>，center是指定位置的id。当然，也可调到一个新的页面的指定位置。写法为：<a href="test.html #center"></a>

8.表格：<table></table>其中<thead></thead>、<tbody></tbody>、<tfoot></tfoot>若不定义浏览器会自动生成，<caption></caption>标签是表格的表头，<th></th>是每一列的头，<tr></tr>是行，<td></td>是列。table的常见属性有cellspacing，代表表格内格子之间的空白，td的常见属性有colspan和rowspan，前者代表横跨的列数，后者代表横跨的行数。

9.表单：<form action=""></form>action放的是网址，和<input type="submit">结合使用，其中form中拥有name的标签才会被提交，而单选框和多选框要通过value。

其中，常见的<input type="">标签的类型有：（1）button按钮（2）image图片按钮（3）text文本框，其中要实现点击文本框前面的内容文本框聚焦这个效果即文本与文本框联动，则需要使用<label></label>标签，使用方法为<label for="test"></label> <input type="text" id="test"> （4）reset是重置按钮，不需要给value值就显示“重置”，点击form的内容全部清空（5）submit是提交，同样不需要给value（6）hideen是隐藏的标签，用于客户悄悄地把数据传送出去（7）radio即录音机的意思，是单选框，注意要想实现互斥效果，需要给每个input一个name并且相同，默认某个为选中状态给该input一个熟悉checked="checked"，若是多个，最后一个有效（8）checkbox是多选框，同样，默认某些选中那就给这些input一个熟悉checked="checked"（9）password这个和text相对应，text是明文框，这个是暗文框。

HTML5新增以下type。（1）email，这是一个输入框，不过能够提醒用户email的输入格式是否正确（2）url，这也是一个输入框，同样提醒用户url的输入格式是否正确（3）number，这也是一个输入框，只能输入数字（4）date日期、week周、month月time时间、datetime日期加时间、datetime-local本地时间（5）color是一个颜色选择器（6）datalist标签可以帮助input 的text输入框进行智能提示，用法为<input type="text" list="cars"><datalist id="cars"><option>路虎</option><option>奔驰</option><option>宝马</option></datalist>

非input标签，（1）<select></select>下拉框标签，默认某个被选中给加上属性selected="selected" ，其中一个高级用法，<select>

</optgroup>

</optgroup>

</select>

（2）textarea是可换行的文本框

10.html5新增的标签还有video（视频标签）和audio（音频标签）等。还有一个是<details><summary></summary></details>,即概要和详细标签。默认情况下只显示summary标签的内容，details标签的内容被“折叠”起来了。

11.marquee标签不是w3c推荐的标签，在w3c官方文档也无法查询到这个标签，但是各个浏览器对这个标签的支持都非常好。该标签就是跑马灯，即能控制内容不停地动，使用格式就是<marquee>内容</marquee>，它又几个属性需要注意一下：direction：设置滚动的方向，left/right/down/up；scrollamount：设置滚动速度，值越大越快；loop设置滚动次数，默认是-1，也就是无限滚动；behavior：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回。需要注意的是这个内容也可以是图片，即之前写的让图片滚动起来需要用到js，而html是有这样的标签的。

12.HTML中被废弃的标签。为什么一些标签会被废弃呢？因为html标签的唯一作用就是定义语义，而不是修改样式，而早期有些标签是用来定义样式的，故被废弃了。

被放弃的标签有：br、hr、font、b、u、i、s。b（bold）是加粗文字，u是下划线（underLined）， i是斜体（italic），s（strikethrough）是删除线。以后在开发中，不到万不得已一定不要使用。如果一定要使用，那也是作为CSS的钩子。那什么叫做CSS的钩子呢？CSS的钩子就是文本前面的小图标。

标签被废弃后，又增加了一些新的标签用来达到这样的效果。strong==b，ins==u，em==i，del==s。既然等价，有什么不一样呢？新增的标签是有语义的，而b、u、i、s是没有语义的。strong：定义重要性强调的文字；ins（insert）：定义插入的文字；em（emphasized）：定义强调的文字；del（deleted）定义被删除的文字。

14.html5新增了一个video标签.:<video src=""></video>。src是视频的地址；autoplaye="autoplay"控制视频是否需要自动播放；controls="controls"控制视频的控制条；poster="images/test.jpg"，若一个视频在不设置自动播放的时候，显示为黑色，很难看，为了在播放前来一张图片，就需要通过一张占位图片；loop=“”loop“”控制视频播放结束后是否需要循环播放,一般用于做广告视频，使用此属性的时候，一般去掉controls和poster属性；preload是预加载，如果视频不是本地的，就会提前下载，注意该属性与autoplay冲突；muted="muted"是控制视频是否静音;width和height控制视频的宽高，和img标签一样，注意为了控制视频等比例缩放，设置的时候只需要设置一个属性即可。

<video><source src="" type=""></source></video>这是video标签的第二种格式。五大浏览器厂商都有自己的视频格式，谁都不服气谁，导致视频在各个浏览器无法兼容的问题，w3c为了解决这个问题，引入该标签。