zoukankan      html  css  js  c++  java
  • 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>

     (未完待续...)

  • 相关阅读:
    二维数组
    找一个数组的最大和的连续子数组(时间复杂度 O(n))(二)
    第一阶段SCRUM冲刺 01
    统计单词
    软件工程--第九周学习进度
    《人件》阅读笔记03
    用户模板和用户场景分析
    软件工程--第八周学习进度
    一维数组代码实现可视化
    《人件》阅读笔记02
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5738476.html
Copyright © 2011-2022 走看看