HTML常用元素

HTML常用元素

1.换行符

当需要结束一行,又不想开始新段落时,使用<br>标签。<br>标签不管放在什么位置,都能够强制换行。

代码如下:

<p>我是一只小小小鸟<br>想飞,飞不高</p>

2.段落

<p>标签定义段落。

代码如下:

<p>相信我,这是一个段落,不骗你</p>

说明:可加属性 align 进行行对齐(left,right,center)

代码如下:

<p align="left">看!我是左对齐</p>
<p align="right">看!我是右对齐</p>
<p align="center">看!我是居中</p>

3.标题

标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素,<h6>定义了最小的。

代码如下:

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

4.文本格式化

代码入下:

<b>定义粗体文本</b>
<strong>定义加重语气</strong>
<big>定义大字号</big>
<em>定义着重文字</em>
<i>定义斜体字</i>
<small>定义小字号</small>
定义下标字H<sub>2</sub>O
定义上标字X<sup>2</sup>+Y<sup>2</sup>
<del>定义删除字</del>
<u>定义下划线</u>

5.链接

HTML使用标签<a>来创建一个连接到其他文件的链接。超链接可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

代码如下:

<a href="http://www.baidu.com">百度一下</a>

target属性,定义从什么地方打开链接(_blank新的空白页,_self当前页,_top顶级框架)

代码如下:

<a href="http://www.baidu.com" target="_blank">新的空白页打开<a/>
<a href="http://www.baidu.com" target="_self">当前页打开<a/>
<a href="http://www.baidu.com" target="_top">顶级框架打开<a/>

6.锚点

锚点标签用于使用户“跳”到文档的某个部位。

代码如下:

<a href="#jump">我想跳</a>

<a name="jump">跳到这里了</a>

7.图像

图像是由<img>标签定义的。

属性说明:

src  定义图像的url

alt  定义图像的替代文本(当浏览器无法载入图像时,替代文本属性告诉用户失去的信息)

width  设置图像的宽度

height  设置图像的高度

代码入下:

<img src="img.jpg" width="100" height="100" alt="永远在加载中">

8.图片相对地址的定义


情形


Html文件位置


图片位置


写法


同一目录


F:/html/01.html


F:/html/01.jpg


<img src=”01.jpg”/>

<img src=”./01.jpg”/>


下一层目录


F:/html/01.html


F:/html/image/01.jpg


<img src=”imag01.jpg”/>


上一层目录


F:/html/01.html


F:/01.jpg


<img src=”../01.jpg”/>


同一层不同目录


F:/html/01.html


F:/image/01.jpg


<img src=”../imag01.jpg”/>

说明:

./                 当前目录

../                回到上一层目录

images/                    进入一层目录

../images/                回到上一层目录,然后再进入images目录

9.图像热区

打开带有图片的网页时,有时会看到:当鼠标指向图片的不同部位时,可以打开不同的超链接,我们把这个称之为网页图像热区。

语法:

<img src="URL"  usemap="# map 名称" />

<map name="map 名称">

<area shape="形状" coords="坐标值" href="URL" />

</map>

属性说明:

shape          热区形状(rect方形、circle圆形、poly多边形 )

coords               形状的坐标值

代码如下:

<area shape="rect" coords="x1,y1,x2,y2" href="http://www.baidu.com">

<area shape="circle" coords="x1,y1,r" href="http://www.baidu.com">

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4" href="http://www.baidu.com">

10.HTML实体字符

- -!太多了!直接打开链接吧http://www.runoob.com/html/html-entities.html

11.列表相关标签

1)无序列表:一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)

以<ul>标签开始,每个列表项目以<li>开始。

type属性可以控制列表前的符号。方块square,实心圆disc(默认),空心圆circle

代码如下:

<ul>
    <li>实心圆</li>
    <li>实心圆了</li>
    <li>实心圆</li>
</ul>

<ul type=“circle”>
    <li>空心圆</li>
    <li>空心圆</li>
    <li>空心圆</li>
</ul>

<ul type="square">
    <li>方块</li>
    <li>方块</li>
    <li>方块</li>
</ul>

2)有序列表:这也是一个项目的列表。

以<ol>标签开始,每个列表项目以<li>开始。

type属性说明:

type="1",表示前面的标记是数字

type="a",表示前面的标记是小写字母

type="A",表示前面的标记是大写字母

type="i",表示前面的标记是小写的罗马字母

type="I",表示前面的标记是大写的罗马字母

代码如下:

<ol type="1">
    <li>数字</li>
    <li>数字</li>
    <li>数字</li>
</ol>

<ol type="1">
    <li>数字</li>
    <li>数字</li>
    <li>数字</li>
</ol>

<ol type="a">
    <li>小写英文字母</li>
    <li>小写英文字母</li>
    <li>小写英文字母</li>
</ol>

<ol type="A">
    <li>大写英文字母</li>
    <li>大写英文字母</li>
    <li>大写英文字母</li>
</ol>

<ol type="i">
    <li>小写罗马字母</li>
    <li>小写罗马字母</li>
    <li>小写罗马字母</li>
</ol>

<ol type="I">
    <li>大写罗马字母</li>
    <li>大写罗马字母</li>
    <li>大写罗马字母</li>
</ol>

3)定义列表(- -!这列表这尼玛的烦,那么多!):用来组织术语和他们的定义。任何信息如果包含多个术语和相对应的解释,都可以用定义列表进行组织。

定义列表由<dl>开始。术语由<dt>开始。术语的解释说明,由<dd>开始,<dd></dd>里的文字缩进显示。

代码如下:

<dl>
    <dt>MUMU</dt>
    <dd>mumu 是“木木”的拼音</dd>
    <dd>也可以是“林”的拼音</dd>
</dl>

(未完待续...)

时间: 2024-10-28 21:07:42

HTML常用元素的相关文章

Html之常用元素----ShinePans

1.table,title,td,tr <!--html常用元素--> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <title>无标题</title> </head> <body> <table width="200" bor

html——常用元素与属性

html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签 html5保留的常用标签 <!--  -->    定义HTML注释 <html>    HTML5文档的根元素 <head>    定义HTML文档的头部页面元素 <title>    定义HTML5的页面标题 <body>    定义HTML5文档的页面主体部分 <style>    该元素用于引入样式定义 <h1>到<h6>    定义标题

常用元素的属性/方法 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等元素,可以对用

struts.xml常用元素配置和结果集配置

1.struts.xml的常用元素配置介绍 (1).<package/>元素:表示包整个概念,和代码中的package没有关系: 仅仅是从逻辑上将<action>,<interceptors/>等元素做模块管理. package的常见的属性: a>name:逻辑分包的名字,应用中有多个<package>元素,得保证name属性的唯一性. 因为该名字可以用来别别的<package>元素所继承. b>extends:比如A<pack

第二篇 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

Robotframework + Appium 之常用元素定位方法

任何自动化测试,其实手动测试也是一样的,元素定位(目标定位)是首要任务,这是最直接的测试对象呀! 好了,废话不多说,又到了元素定位啦,之前我们已经介绍过selenium及appium常用的定位方法,下面再单独介绍下 Robotframework-AppiumLibrary常用元素定位方法,其实它们的思想是一样的,只是格式上有些差异,详情如下: AppiumLibrary需要在应用程序中查找元素的所有关键字都使用参数locator.当提供locator值时,它将与特定元素类型的键属性进行匹配. 常