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

<!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(实心方块■ );

示例

原文地址:https://www.cnblogs.com/lyxcode/p/9456981.html

时间: 08-10

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

为zblog FCKeditor编辑器添加设置字体格式h1 h2功能

FCKeditor编辑器能满足基本的文章编辑要求,且使用起来并不复杂,所以FCKeditor的用户比较多,例如dedecms的编辑器便是FCKeditor,zblog的默认编辑器也是FCKeditor,不过用了dedecms的编辑器才知道,zblog的编辑器像是阉割版的FCKeditor,因为工具条上有许多标签都没有显示,例如字体格式.锚链接等等.本文讲的便是如何为zblog FCKeditor编辑器添加字体格式. 字体格式是什么? 如果你还不了解何谓字体格式,那么你总听说过h1.h2.h3..

[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,1) 12.0000 (5,1) 11.0000 (6,1) 10.5000 (7,1) 12.0000 (8,1) 11.5000 (9,1) 11.5000 (10,1) 11.0000 (11,1) 10.5000 (12,1) 11.0000 (13,1) 12.0000 (14,1) 12.0000

css重置

不同的浏览器默认的css样式不同,因此在格式化样式之前,先重置css默认样式: html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; bo

html和css知识总结

今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签]1>单标签<!doctype html> 文档头,告诉浏览器这是一个网页br 换行img 插入图片,src属性 默认有图片上方3像素,间距 2>双标签body 主体,默认marginspandiv h1-h6 标题标签,默认字体加粗,间距,字体大小p 段落标签,默认有间距a 超链接,可添加width.height属性,如果给定的高度或者宽度比例不

markdown简要说明源码

##markdown ###什么是markdown:    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.  Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格.脚注.内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook.Markdown增强版中比较有名的有Markdown Extra.MultiMarkdown. Maru

CSS学习一

想起来自己一直以来也没有系统的学习过HTML+CSS.适逢工作需要,决定这段时间系统的过一遍html与css,在这将自己的学习情况整理成博客. 在此强烈推荐王福朋的博客,本人也是通过该博客学习. 上图展示了 在浏览器中 html 与css是如何工作的. 浏览器将载入的html变为dom树,但是此时没有任何显示样式.所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式. (1)理解css 层叠样式表 css 意为层叠样式表.样式表比较好理解,但是层叠是指什么呢? 层叠指 浏览器对多

CSS语法与用法小字典

前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格式都稍差些.方便日后自己查阅,方便自己同时也方便他人,多好的一件事啊,呵呵! CSS目录 一.       CSS简介... 4 1.    CSS的分类... 4 1.1      内嵌样式... 4 1.2      内部样式表... 4 1.3      外部样式表... 4 2.    样式

input输入框自动填充黄色背景解决方案

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 之前有一种解决方案是禁用autocomplete属性 <input type="text" name=

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

前端开发工具的选择及使用

不同的开发工具可能在展示格式上有一定的差别,所以一个团队最好还是能统一的开发工具.前端我推荐使用sublime,以及相关的插件: 既然是多个人同时开发,肯定会有一些代码风格上的异同,然而为了方便后期维护,必需制定一些相关的规范.如: 开发规范 所有页面编码必须是尽量使用语义话标签,如头部使用header,内容使用articl,页脚使用footer,模块使用section标签 命名 id采用驼峰命名法则,如 formName class中间用-隔开,如 li-col-50 图片命名也用-隔开,如