<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            b标签  i标签  del标签的包裹大小就是他所引用的文字的大小（简单包裹）但是

            p标签的长度就是整行（复杂包裹），所以可以居中style="text-align:center"

        -->

        <b>李银霞</b><br />

        <i>liyinxia</i><br />

        <del>Liyinxia</del><br />

        <!--

            a标签:href就是

        -->

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

        <!--

            P标签中也有一个align属性 但是不赞成使用

        -->

        <p style="text-align:  center;">整行包裹标签p</p>

        <!--

            img是简单包裹 如果只设置一个height  或width 图片会等比例放大或缩小

            title标签属性代表鼠标放在图片上显示的数据

            alt代表当图片不存在时网页上显示的数据

        -->

        <img src="img/127703.jpg" width="300px"  title="风景图" alt="picture"/>

        <!--

            h1到h6代表标题，依次变形    为复杂包裹

        -->

        <h1 style="text-align: center;">李银霞</h1>

        <h2 style="text-align: center;">李银霞</h2>

        <h3 style="text-align: center;">李银霞</h3>

        <h4 style="text-align: center;">李银霞</h4>

        <h5 style="text-align: center;">李银霞</h5>

        <h6 style="text-align: center;">李银霞</h6>

        <!--

        br为换行标签属性

        hr为单行线  size="12px"设置它的宽度  这个时候有阴影  noshade="noshade"就填补了阴影

        width=""设置了这条线的宽度 color设置线的颜色 align（left center right）

        -->

        <hr size="12px" noshade="noshade" width="50%" color="antiquewhite" align="left"/>

        <!--

            ol有序标签 type 可以设置有序的表示 start可是设置从几开始

        -->

        <ol type="a" start="4">

            <li>软件工程</li>

            <li>计算机科学与技术</li>

        </ol>

        <!--

            ui无序标签 type设置表示    没有start标签属性 因为无序

        -->

        <ul type="square">

            <li>软件工程</li>

            <li>计算机科学与技术</li>

        </ul>

    </body>

</html>

1、b标签：粗体，双标签，例如<b>html</b>

2、i标签：斜体，双标签，例如<i>html</i>

3、del标签：删除线，双标签，例如<del>html</del>。注意：s和strike标签也能实现，但是已经过时了。

4、p标签：段落标签，双标签，p标签只有一个align属性，其属性有如下四个：

注意：不建议使用align属性，推荐使用text-align样式代替，CSS 语法：<p style="text-align:right">内容</p>，其值有如下五个

注释：任何的版本的Internet Explorer（包括 IE8）都不支持属性值 "inherit"属性值。

示例

5、hr标签：水平线标签，单标签，其属性有color（水平线颜色）、noshade（设定水平线的颜色为纯色，而不是有阴影的颜色）、size（水平线高度，单位：像素）、width（水平线宽度，单位：像素或%）以及align，其中align属性的属性值由如下三个：

示例

6、hn标签：标题标签，双标签，n的值为1~6，其中<h1></h1> 定义最大的标题；<h6></h6> 定义最小的标题;只有一个align属性其值和p标签align属性一样，但不建议使用该align属性，推荐使用text-align样式代替，其使用方法和值参见p标签。

示例

7、img标签：图像标签，单标签，该标签有src属性（图片URL）和alt属性（图片不存在时的替代文本）两个必需的属性，还有一些其它属性，常用的有如下几个：

i、height和width：设置图片的高度和宽度，单位为像素或%

ii、title：设定鼠标移到元素上时显示的信息，注意：任何标签都有title属性，它不是img标签特有的

8、a标签：超链接标签，双标签，它有如下作用：

i、用户点击该超链接打开邮件客户端程序，语法结构：<a href="mailto:e_mail地址?subject=主题">发送测试邮件</a>

注意：

a、如果href有空格，则需要使用%20来替换

b、该功能有浏览器兼容性缺陷，在Google浏览器中无法达到预想的效果，需要设置浏览器

示例1、示例2

ii、创建锚点，回到指定锚点，语法结构：创建锚点——<a name="锚点名"></a>；回到指定锚点——<a href="#锚点名">回到顶部</a>

注意：

i、如果使用这种方式实现效果，则HTML文档头部必须声明当前文档不是HTML5，例如声明为HTML4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

ii、如果将文档声明为HTML5（即<!DOCTYPE HTML>），则不能通过a标签创建锚点的方式实现，因为在HTML5中不支持name属性，这时可以通过JavaScript脚本实现，如下代码：

<a href="" onclick="window.scroll(0,0);this.blur();return false;">回到顶部</a>

iii、打开href指定的页面，target用于指定在哪个窗口中打开页面

示例

9、ol标签：有序列表标签，即ordered list，双标签，有type和start两个属性：type用于指定ol子标签li的编号类型，默认为数字，可以是字母、阿拉伯数字或罗马数字；start用于指定ol子标签li序号起始点，默认为1，必须为整形数字。

注意：type和start属性在HTML4.01有兼容性问题。

示例

10、ul标签：无序列表标签，即unordered list，双标签，有type属性，该属性用于指定ul子标签li的编号类型，默认为实心圆，其值可以为disc（实心圆● ）、circle（空心圆○ ）、square（实心方块■ ）；

示例

HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解的更多相关文章

  1. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  2. 什么是H标签？H1，H2，H3标签？以及和strong标签使用的方法及重要性

    大家都知道,seo的一个很重要的一点就是要把网站做的条理清晰,让搜索引擎很容易的读明白,这个条理清晰不仅体现在网站的物理路径,url等地 方.在<h1><h2><h3&g ...

  3. 使H1 H2等标签不换行

    在网页优化中,经常要使用H标签对关键字进行优化, 可是如果是一行文字中的某个词加上了H1标记,就会换行. 可以使用下面的方法,H标签就不会强制换行了. <style type="tex ...

  4. [A,D]=solverAdini(node,elem,bdEdge,h1,h2)

    >> [A,D]=solverAdini(node,elem,bdEdge,h1,h2) A = (1,1) 14.5000 (2,1) 11.0000 (3,1) 11.5000 (4, ...

  5. ipc.Client: Retrying connect to server: h1/192.168.1.61:9000. Already tried 0 time(s);解决方法

    1.检查namenode服务器的是否运行正常,我的问题是没有开启hadoop集群出现的. 2.检查namenode服务器的防火墙是否开放的响应端口,一般内网建议关闭.

  6. 百万年薪python之路 -- HTML标签

    HTML标签 html标签分类 html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念. 标题 h1 h2 h3 h4 h5 h6 列表 ol ul ...

  7. html和css知识总结

    今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签]1>单标签<!doctype html> 文 ...

  8. css 默认样式

    body,textarea,input,select,option {font-size:12px;color:#333;font-family:Tahoma,Arial,sans-serif;} h ...

  9. 通用全局CSS样式

    PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...

随机推荐

  1. Python datetime库计算两个时间点之间的分钟（秒、天）数

    计算两个时间点之间的分钟数 import datetime def minNums(startTime, endTime): '''计算两个时间点之间的分钟数''' # 处理格式,加上秒位 start ...

  2. Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  3. hibernate中session的管理方式

    package loaderman.c_session; import loaderman.b_second_cache.Dept; import loaderman.b_second_cache.E ...

  4. Hibernate3疑惑解决

    1.session的get()和load()有什么区别?     # get()如果没有找到持久化类返回null,有可能导致空指针异常.     # load()如果没有找到持久化类直接抛出异常.   ...

  5. PCD（点云数据）文件格式

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=54 为什么用一种新的文件格式? PCD文件格式并非白费力气地做重复工作,现有 ...

  6. 004-Spring boot 快速入门-项目搭建与启动、SpringBootApplication、启动图标

    一.官方地址 Spring:http://spring.io/ Spring Project:http://spring.io/projects Spring boot:https://project ...

  7. Java相关框架概念以及思想

    1.什么是IoC Ioc—Inversion of Control,即“控制反转”,是一种思想, 一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合.更优良的程序. 高内聚低耦合的设计能够让构 ...

  8. Scala API - 泛型

  9. centos7.5 解决缺少libstdc++.so.6库的原因及解决办法

    centos7. 解决缺少libstdc++.so.6库的原因及解决办法 执行node -v报错如下: [root@bogon ~]# node -v node: error : cannot ope ...

  10. maven-1-是什么

    背景 1.1. 场景 假如你正在Eclipse下开发两个Java项目,姑且把它们称为A.B,其中A项目中的一些功能依赖于B项目中的某些类,那么如何维系这种依赖关系的呢? 很简单,这不就是跟我们之前写程 ...