干货!HTML5常用的标签总结

在web前端开发(http://www.maiziedu.com/course/web-px/)中,对于标签,大家都觉得很简单,也很熟悉,可是有时虽然知道HTML5的新标签语意明细,但是还是会出现乱用标签的现象,下面整理了一份我们常用的HTML5标签,分享给大家。

一、常用的标签

<h1>~<h6> 表示是一个标题
<p>   段落标签
        <hr/>  水平线标签
  <br/>  换行标签
        <sub>  下标
        <sup>  上标
        <pre>  原样标签: 原样标签会保留空格和换行符。
        <ol> <li> 有序的列表标签、
        <ul> <li> 无序的列表标签。
        项目列表标签(dl dt dd)
        行内标签(span)     
块标签<div>    div标签的内容会独立占一行。

二、实体标签

空格       
      小于号     <
      大于号    >
-----------------------------
      人民币    ¥;
      版权      
      商标

三、媒体标签

<embed></embed>

hidden : 设置隐藏插件是否隐藏。

src :用于指定音乐的路径

<embed src="1.mp3" ></embed>

<marquee> 飘动标签
direction : 指定飘动的方向

scrollamount : 指定飘动的速度。
loop   :指定飘动的次数

四、超链接标签

<a> 超链接标签

a标签常用的属性:
href  : 用于指定链接的资源
target: 设置打开新资源的目标。

_Blank 在独立的窗口上打开新资源

_self 在当前窗口打开新资源 
file: file协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的。
格式:
file:///f:/美女/1.jpg

邮件 的协议: mailTo
迅雷的协议: thunder
超链接标签的作用:

1. 可以用于链接资源。

2. 锚点点位.

1. 首先编写一个锚点  锚点的格式: <a name="锚点名字"> 数据</a>
2. 使用a标签 的herf属性连接到锚点出。  href=”#锚点的名字“

五、图片标签

img标签常用的属性:

width: 设置图片宽度
height  设置图片高度    
alt:    如果图片资源无法找到,那么就显示对应的文字对图片进行说明。

六、表格标签

表格使用到的标签:
<table> 表格
    <tr>    行
    <td>    单元格
    <th>     表头   默认的样式是居中,加粗。
    <caption>  表格的标题

表格常用的属性:
border  设置表格的边框 
width : 设置表格的宽度
height: 设置表格的高度的。
colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。

<thead> 标签用于组合 HTML 表格的表头内容。

<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。

通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 元素之后,<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表单标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 表单标签: 表单标签的作用是用于提交数据给服务器的表单标签的根标签是<form>标签常用的属性action: 该属性是用于指定提交数据的地址。method: 指定表单的提交方式。get : 默认使用的提交方式。 提交的数据会显示在地址栏上。post :  提交的数据不会显示在地址栏上。注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值 -->
</head>
<body>
    <form action="http://www.baidu.com" method="post"> <!-- 文本输入框 单        行-    -> 用户名:<input name="userName" type="text"/><br/>       
    <!-- 密码框 -->
    密码:<input name="password" type="password"/><br/>        
    <!-- 单选框  -->        
    性别: 男<input checked="true" value="man"  name="sex" type="radio"/>   
    女<input name="sex" value="woman" type="radio"/><br/>        
    < !-- 下拉框 -->        
    来自的城市:<select name="city">                    
    <option value="BJ">北京</option>                    
    <option value="SH">上海</option>                    
    <option value="GZ">广州</option>                    
    <option value="SZ">深圳</option>               
    </select><br/>        
    <!-- 复选框  同一组的复选框name的属性值要一致 -->     
    兴趣爱好:java <input value="java" name="hobit"  checked="checked" type    ="checkbox" />
    javascript <input type="checkbox" value="javascript" name="hobit" />
    android <input value="android" name="hobit" type="checkbox" /><br/>       <!-- 文件上传框-->    
    大头照:<input name="image" type="file" /><br/>    
    个人简介:        
    <!-- 文本域 -->        
    <textarea  name="intro" rows="10" cols="30"></textarea><br/>                
    <!-- 提交按钮 -->        
    <input type="submit" value="注册"/>    
    <!--  重置按钮 -->    
    <input type="reset" value="重置"/>        
    </form>
    </body>
</html>

时间: 2024-12-26 04:41:59

干货!HTML5常用的标签总结的相关文章

html5常用基本标签

一.Html的基本结构: <!DOCTYPE html> <html> <head> <meta  charset=utf-8"> <title></title> </head> <body> 网页的文本.图片等信息: </body> </html> 二.Head部分:用于表示网页的元数据即描述网页的基本信息 其常用标签及属性有: 1.title标签:浏览器标签页显示的标题 2

HTML5 常用meta 标签 属性

在iPhone的浏览器中页面将以原始大小显示,不允许缩放.  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    width - viewport的宽度 height - viewport的高度   initial-scale - 初始的缩放比例  

HTML5常用格式化标签效果的使用

代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hhh</title> </head> <body> 普通字体 <br> <b>定义加粗字体</b> <br> <big>定义大号字体</big> &

HTML5头部&lt;meta&gt;标签常用信息

查找总结了一些HTML5头部<meta>标签常用信息,有错误的,敬请留言指正,或可以留言补充,欢迎留言交流! <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <meta name="keywords" content="" /> <!-- 说明 --> <meta name="description&qu

HTML5常用标签总结

一.常用的标签 <h1>~<h6> 表示是一个标题 <p> 段落标签 <hr/> 水平线标签 <br/> 换行标签 <sub> 下标 <sup> 上标 <pre> 原样标签: 原样标签会保留空格和换行符. <ol> <li> 有序的列表标签. <ul> <li> 无序的列表标签. 项目列表标签(dl dt dd) 行内标签(span) 块标签<div>

HTML5常用标签总结(入门)

一.常用的标签 h1~h6 表示是一个标题 p 段落标签 hr/ 水平线标签 br/ 换行标签 sub 下标 sup 上标 pre 原样标签: 原样标签会保留空格和换行符. ol li 有序的列表标签. ul li 无序的列表标签. 项目列表标签(dl dt dd) 行内标签(span) 块标签div div标签 一.常用的标签 <h1>~<h6> 表示是一个标题 <p> 段落标签 <hr/> 水平线标签 <br/> 换行标签 <sub&g

HTML5常用语义化标签&amp;表单类型&amp;表单属性

HTML5语义化标签 1.<article>表示包含一个文档.页面.应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用.可适用的地方有:一篇博客.一个论坛帖子.一篇新闻报道.一个用户评论... 2.<header>一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题.简介等信息. 一个文档中可以包含多个header标签header标签不一定只能显示在页面的上方,它的内容决定该地方是否需要使用header标签可以为body.arti

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏nav. <header> <h1>html5语义化标签</h1> <nav> <h1>导航</h1> <ul> <li>章节标签</li> <li>标

移动前端不得不了解的HTML5 head 头标签

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要.这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性. 注:去年整理过移动前端不得不了解的