<!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. Nginx之HTTP过滤模块

    1. HTTP 过滤模块 ngx_http_not_modified_module 仅对 HTTP 头部做处理.在返回 200 成功时,根据请求中 If-Modified-Since 或者 If-Un ...

  2. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  3. Flutter移动电商实战 --（5）dio基础_引入和简单的Get请求

    这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库. 1.dio介绍和引入 dio是一个强大的Dart Http请求库,支持Res ...

  4. react 闲谈 之 JSX

    jsx元素-> React.createElement -> 虚拟dom对象 -> render方法 1.在react中想将js当作变了引入到jsx中需要使用{} 2.在jsx中,相 ...

  5. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

  6. CenterNet算法笔记（目标检测论文）

    论文名称:CenterNet: Keypoint Triplets for Object Detectiontection 论文链接:https://arxiv.org/abs/1904.08189 ...

  7. 【CodeForces - 598D】Igor In the Museum（bfs）

    Igor In the Museum Descriptions 给你一个n*m的方格图表示一个博物馆的分布图.每个方格上用'*'表示墙,用'.'表示空位.每一个空格和相邻的墙之间都有一幅画.(相邻指的 ...

  8. vue 新闻列表滚动效果

    效果如下: <template> <div> <div class="scroll-wrap"> <ul class="scro ...

  9. 2019/5/13 洛谷P4742 【tarjan缩点 + 拓扑dp】

    题目链接:https://www.luogu.org/problemnew/show/P4742 题目大意:给一张有向图, 每个点都有点权,第一次经过该点时,该点的点权有贡献,求这张图上一条路径(终点 ...

  10. 分库分表之后，id 主键如何处理

    基于数据库的实现方案 数据库自增 id 这个就是说你的系统里每次得到一个 id,都是往一个库的一个表里插入一条没什么业务含义的数据,然后获取一个数据库自增的一个 id.拿到这个 id 之后再往对应的分 ...