html——常用元素与属性

html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签

html5保留的常用标签

<!--  -->    定义HTML注释
<html>    HTML5文档的根元素
<head>    定义HTML文档的头部页面元素
<title>    定义HTML5的页面标题
<body>    定义HTML5文档的页面主体部分
<style>    该元素用于引入样式定义
<h1>到<h6>    定义标题一到标题六
<p>    段落标签
<br>    换行标签
<hr>    定义水平线
<div>    定义文档中的块
<span>    与div标签基本相似,默认不会换行

代码示例:

<!DOCTYPE html>
<html>
    <meta charset="utf-8"><!--定义编码方式-->
    <head>
        <title>标签代码示例</title>
    <head>
    <body>
        <h1>标题一</h1><!--标题标签-->
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
        <hr><!--输出一条水平线-->
        <span>php</span><span>mysql</span><span>html</span><!--定义三个span标签-->
        <br><!--换行标签-->
        <div>php</div><div>mysql</div><div>html</div>
        <p>tomcat</p>
    </body>
</html>

文本格式化标签

这些元素让文本在浏览器中呈现出特定的效果

<b>    定义粗体文本
<i>    定义斜体文本
<em>    定义强调文本
<strong>    定义粗体文本,与<b>标签的作用和用法基本相同
<sup>    定义上标文本
<sub>    定义下标文本
<bdo>    定义文本的显示方向,该标签可以指定dir属性,该属性值只能是ltr或者是rtl

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本格式化标签</title>
    </head>
    <body>
        <span><b>加粗文本</b></span><br/>
        <span><i>斜体文本</i></span><br/>
        <span><b><i>粗斜体文本</i></b></span></br>
        <span><em>被强调的文本<em><span><br/>
        <big><span>大号字体文本</span></big><br/>
        <p><strong>加粗文本</strong></p><br/>
        <small><span>小号字体文本</span></small><br/>
        <div>普通文本<sup>上标文本</sup></div>
        <bdo dir="ltr">从左向右排列</bdo><br/>
        <bdo dir="rtl">从右向左排列</bdo><br/>
    </body>
</html>

语义相关元素

html5保留了如下相关元素    <abbr> 用于表示一个缩写
    <address> 用于表示一个地址
    <blockquote> 用于定义一段长的引用文本
    <q>用于定义一段短的引用文本
    <cite> 用于表示作品的标题
    <code> 用于表示一段计算机代码
    <dfn> 用于定义一个专业术语
    <del> 定义文档中被删除的文本
    <ins> 定义文档插入的文本
    <pre> 预格式化标签
    <samp> 定义示范文本内容
    <kbd> 定义键盘文本
    <var> 用于表示一个变量

超链接和锚点

超链接<a.../>,该元素可以指定 id class style等核心属性,也可以指定onclick等各种事件属性,还可以指定如下三个重要属性

href:指定超链接所关联的另一个资源

target:指定使用框架集中的哪一个框架来装载另一个资源,该属性的属性值可以是_self _blank _top _parent

<a href="  target="_blank" ">百度</a>
<a href="#test">定位到test锚点</a>
<a name="test"></a>

列表相关标签

<ul> 定义无序列表
<ol> 定义有序列表 该元素可以指定如下三个属性,start :指定列表项的起始数字  type :哪种类型
的编号  reversed 该属性用于指定是否将排序反转 (目前没有浏览器支持该属性)
<li> 定义列表项目
<dl> 用于定义列表
<dt> 用于定义标题列表项
<dd> 用于定义普通列表项

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表相关标签</title>
    </head>
    <body>
             <ul>
          <li>列表一</li>
          <li>列表二</li>
          <li>列表三</li>
        </ul>
         <ol start="2" type="I">
             <li>列表一</li>
             <li>列表二</li>
             <li>列表三</li>
          </ol>
          <dl>
              <dt><dt>
              <dd><dd>
              <dd><dd>
              <dt><dt>
                     <dd><dd>
                     <dd><dd>
          <dl>
    </body>
</html>

图像相关标签:

<img.../>
    src:该属性指定图片的所在的位置
    alt:作为改图片的提示信息
    height:该图片的的高度
    width:该图片的宽度
    usemap="#mapname"
 <map.../>
 <map name="">
     <area="" coords="" href="">
     <area="" coords="" href="">
 </map>

表格相关标签:

<table> 用于定义表格
    属性:cellpadding :指定单元格内容和单元格边框之间的间距
          cellspacing :指定单元格之间的间距,该属性可以是像素值也可以是百分比
          width:表格的宽度
<caption> 定义表格标题
<tr> 定义表格行
<td> 定义单元格
<th> 定义表格页眉的单元格
<tbody> 定义表格的主体
<thead> 定义表格的头
<tfoot> 定义表格的脚
    rowspan colspan 两个属性用于定义跨行跨列

框架相关元素:

<iframe src="" width ="" height="">

html5新增的通用属性:

contentEditable属性
    该属性设置为true,那么浏览器将允许开发者直接编辑该HTML元素里的内容,可以继承,如果一
个HTML元素的父元素是可编辑的那么子元素默认也是可以编辑的
designMode 属性
    相当于一个全局的contentEditable属性,如果把真个页面的designMode属性设置为on时,该页面
上所有可支持contentEditabe都变成可编辑状态
hidden属性
    hiddle设为true,就意味着浏览器不显示该组件,浏览器也不会保留该组件所占用的空间,相当于
在CSS中设置display:none;
spellcheck属性
    设置spellcheck="true"浏览器将会对输入的文本内容执行输入检查

html5新增的常用元素:应用较少,略

html5头部和元信息

<script>该元素用于包含JavaScript脚本
    链接外部js<script type="text/javascript" src="">
<style>用于定义内部CSS样式
<link>链接外部资源
    链接外部CSS<link type="text/css" rel="stylesheet" href="">
<meta>定义HTML页面的元数据
    <mata charset="utf-8">
    <mata http-equiv="refreash" content="2;URL="http://www.baidu.com">
时间: 2024-10-05 14:34:56

html——常用元素与属性的相关文章

常用元素的属性/方法 attr / val / html /text

常用元素的属性/方法 得到一个元素的高度, $("#myid").height() 得到一个元素的位置, $("#myid").offset() 返回的是一个offset对象, 如果取元素位置的top, 则$("#myid").offset().top,?取left则$("#myid").offset().left 得到一个元素的innerHTML, $("#myid").html() 得到一个元素的inn

疯狂html5讲义(二):HTML5简的常用元素与属性(一):html5保留的常用元素

html5删除了少量的元素与属性:主要删除了文档样式相关的各种元素与属性,比如<font>.width等,html5规范推荐使用css样式单来控制html文档样式. 1.基本元素 <html>.<head>.<title>.<body>.<style>.<h1>到<h6>.<p>.<br>.<hr>(定义水平线).<div>.<span>~~~ <

疯狂html5讲义(二):HTML5简的常用元素与属性(二):html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性 此属性相当于一个全局的contentEditable属性 3.hidden属性 可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性 针对于input.textarea等元素,可以对用

第二篇 HTML 常用元素及属性值

常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div></div> <p></p>  还有一些特殊的,称为"空元素",它没有结束标签,它的结束标签就是在开始标签后面结束,比如:<img src="图片地址" alt="提示" /> 那么我们就先来了解,元素,它分为两种

HTML常用元素和属性(一)

1:基础元素 <!--..-->定义注释 <html>根元素 <head>页面头部分 <title>页面标题 <body>主题部分,属性可以指定id,class,style,onload,onunload,onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup等 <h1>到<h

HTML学习笔记——常用元素及其属性(二)

一.HTML表单 -- form标签 -- 与浏览者交互 1.form 标签 -- 代表HTML表单 form标签是成对出现的,以<form>开始,以</form>结束 属性. common -- 公共属性 action -- 浏览者输入的数据被传送到的地方,比如一个PHP页面(dreamdu.php) action语法: url(网址)/页面?表达式1&表达式2&表达式3&... 表达式语法: 参数名称=参数值 示例: http://www.dreamdu

HTML常用元素和属性(二)

4:使用a元素添加超链接和锚点 <href>指定超链接连接到另外一个资源 <hreflang>指定超链接所连接的文档所使用的语言 <target>指定使用框架集中哪个框架装载另一个资源,属性值可以有_self(自己),_blank(新窗口),_top(顶层框架),_parent(父框架) <download>让用户下载目标链接所指向的资源,而不是直接打开该目标 <type>指定文档的MIME类型 <media>指定目标URL所引用的媒

HTML学习笔记——常用元素及其属性(一)

1.img 标签 -- 代表HTML图像 img标签是单独出现的,<img /> 语法: <img src="URI" alt="alttext" title="titletext" /> 属性: Common -- 一般属性 (公共属性) eg: class  id  title(图片的提示文字,当鼠标停留到图片上时,会提示相关文字)  onclick  style ... alt -- 代表图像的替代文字 (alt属性

HTML笔记二,HTML中的常用元素与属性(2)

语义相关元素 <mark>:用于显示关注的内容,通常用黄色显示 <time>:显示被标注内容是日期,时间等信息 两个特殊功能的元素 <meter>:用于表示一个已知最大最小值的计数仪器 value:指定计数仪器的当前值 min:指定计数仪器的最小值 max:指定计数仪器的最大值 low:指定计数仪器指定范围的最小值 high:指定计数仪器指定范围的最大值 optimum:指定计数仪器有效范围的最佳值 <progress>:用于表示一个进度条 max:指定进度