html5基础知识——常用标签和新标签

来源：互联网发布：sql查询语句怎么写编辑：程序博客网时间：2024/05/07 15:49

要注意编写的语义性（了解哪些标签可以干什么，使得浏览器能够更好的读取代码信息，更好的呈现）

html5的文件声明<!DOCTYPE html>
<head>里包含<link><title><meta><style><script>
是注释
<hx>(x=1,2,3,4,5,6)粗体形式的标题标签，其中<h1>最大
<strong>、<b>是粗体 <em>是斜体
<span>为文字设置单独样式，没有语义信息，只是想让他里面的文字和别人不同（利用css实现）
<q>短文本的引用，浏览器给里面的文本自动加双引号
<blockquote>长文本引用，浏览器对<blockquote>标签的解析是缩进样式
<br />折行标签（回车效果），他是空标签，没有内容，只有开始标签再加一个空格/组成。（<hr /><img />也是空标签）这是xhtml1.0版本这个比较规范。
<dl> <dl> 标签定义一个定义列表（definition list）。<dl> 标签用于结合 <dt>（定义列表中的项目）和 <dd> （描述列表中的项目）。例如下：

<dl>  <dt>Coffee</dt>  <dd>Black hot drink</dd>  <dt>Milk</dt>  <dd>White cold drink</dd></dl>

  是空格效果。

<p>来源：作文网     作者：为梦想而飞</p>

<hr />添加水平横线,是空标签
<address>添加地址信息，签名或者文档的作者身份，在浏览器上显示的样式为斜体
<code>里面放一行代码文本
<pre>里面放多行代码文本
<ul><li>无序列表标签，每行文本前有圆点

<ul><li>1</li><li>2</li> ......</ul>

<ol><li>有序列表标签，每行文本前面有编号，从1开始

<ol><li>1</li><li>2</li> ......</ol>

<div>是将网页中的独立逻辑部分划分出来，是个容器

<table>表格，<tr>一行，<th>表头的单元格（粗体居中显示），<td>普通单元格， <tbody>当表格内容很多时表格会在所以内容全部下载完才显示，没有他就会下载一点显示一点。没有css 都是没有表格线的。

<caption>为table表格添加标题，在<table>下。<table summary="表格简介文本">

<a href="" target="_blank"></a>

mailto<a>的href值，方便链接中发送邮件，第一个参数与第二个参数用？，剩余用&。title属性是鼠标滑过时会显示的文本。
例子：<a href="mailto:yy@imooc.com?subject=观后感&body=有想法">对此影评有何感想，发送邮件给我</a>

<img> <img src = "myimage.gif" alt = "My Image" title = "My Image" /> alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件.
<form method="post" action="">method最好用post。form里名字都是name

<input>文本框、密码框. type="text" type="password"。<input type="text/password" name="名称" value="文本</form>, text是文本 password是密码。name为文本框命名，被后台action包含的处理文件使用。value文本框默认值，一般提示作用。
<textarea>文本域，支持多行文本输入，form中输入大段文字时，<textarea rows="行数" cols="列数">这里可以输入多行文本</textarea>
单选框、复选框 <input type="radio/checkbox" value="值" name="名称" checked="checked"/>，radio是单选框，checkbox是复选框，value提交数据到服务器的值(后台PHP使用)。name控件命名，后台使用。当checked=“checked”时默认被选中。当是单选框radio时，name必须一样。
<select>下拉列表框，
<select><option value="服务器提交值" selected="selected">1</option><option value="">2</option> </select>
selected="selected"默认显示
<select>下拉列表框可以多选，增加属性multiple=“multiple”，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用Command +单击），可以选择多个选项。
<input>提交按钮,type="submit" <input type="submit" value="提交">type：只有当type值设置为submit时，按钮才有提交作用,value：按钮上显示的文字。
<input>重置按钮，type="reset" <input type="reset" value="重置"> type：只有当type值设置为reset时，按钮才有重置作用。value：按钮上显示的文字。
<form>中的<label>,点击label标签内的文本，会触发此控件（会自动将焦点转到和标签相关的表单控件上） <label for="控件id名称">。标签的for 属性中的值应当与相关控件的id 属性值相同。
type还有很多如email ，http://www.w3school.com.cn/html5/att_input_type.asp

html5自定义属性
加data-前缀，成为data属性，数量不受限制,存贮在dataset属性里，在控制和渲染数据的时候提供了非常强大的控制.

下面是元素应用data属性的一个例子:

要想获取某个属性的值,可以像下面这样使用dataset对象:，都是一一对应的。

var expenseday=document.getElementById('day-meal-expense');

console.log(expenseday.dataset.drink);//tea

console.log(expenseday.dataset.food);//noodle

console.log(expenseday.dataset.meal);//lunch

0 0