html_列表_图片

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53959369 ...
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53959369

常用的字符格式:

加粗      <b>文本</b>
倾斜      <i>文本</i>
加强语气(加粗)    <strong>文本</strong>
加强语气(倾斜)    <em>文本</em>
下划线     <u>文本</u>
删除线         <s>文本</s>
上标          <sup>文本</sup>
下标          <sub>文本</sub>

字体 <font color=”” size=”” face=”“> face表示字体

可以在比较重要的内容上加权
<strong>关键字<strong>
文章的标题推荐使用<h1>/<h1>(自动换行)
段落文字 <p>段落</p>

hr的属性:
1. align (center/left/right) 规定 hr 元素的对齐方式。
2. noshade 规定 hr 元素的颜色呈现为纯色。
3. size 规定 hr 元素的高度(厚度)。
4. width 规定 hr 元素的宽度。


转义字符(以分号结尾):

在段落的与第一个文字前加空格无效,在文本中加空格多个等同于一个。

空格 : &nbsp
版权号(圆中的c) : &copy
注册商标(圆中的r): &reg
引号 : &quot
& : &amp
‘<’ / ‘>’ &lt/&gt


列表的标记

1.无序列表 <ul>…</ul>
ul 属性type=‘项目符号类型’

1.disc 默认值。实心圆。
2.circle 空心圆。
3.square 实心方块。

<!--不同的符号类型-->
        <h4>条目1</h4>
        <ul type='circle'>
            <li> b1 </li>
            <li> b2 </li>
        </ul>
        <h4>条目2</h4>
        <ul type='square'>
            <li> c1 </li>
            <li> c2 </li>
        </ul>

2.无序标记 <ul><li>…</li></ul>
li 属性type=‘项目符号类型’(可覆盖全局的符号)

type: A/a/I/i/1/disc/square/circle

<!--li覆盖ul的符号类型-->
        <ul type='circle'>
            <li type='disc'> b1 </li>
            <li> b2 </li>
        </ul>

3.有序列表 <ol><li>…</li></ol>
ol属性:

1/A/a/I/i
start number 规定有序列表的起始值。
reversed reversed 规定列表顺序为降序。(9,8,7…)

<!--有序列表,可以指定序号类型-->
        <ol type='a'>
            <li>内容1</li>
            <li>内容2</li>
        </ol>

4.定义列表(自定义列表) <dl><dt>项目<dd>项目的解释(内容)</dd></dt></dl>

<!--定义列表-->
    <dl>
            <dt>电脑
                <dd>显示屏</dd>
                <dd>CPU</dd>
                <dd>键盘</dd>
            </dt>
    </dl>

图片

web上支持的图片格式:

GIF 透明、动画
JPEG 不支持透明和动画,但是颜色丰富
PNG 透明、不支持动画、颜色丰富(IE6不支持png透明)

<img src=’url’/>
url:

1 绝对路径
2 相对路径
3 ../上一级

图片属性
src: url
alt: 文本 当图片无法显示时用文本来替代
title: 文本鼠标悬停时显示的内容
width/height: 图片尺寸
border: 数字 图片的边框(可实现黑边效果)
align: 规定如何根据周围的文本来排列图像。(left/right/top/middle)
vspace: 像素 文字图片的垂直间距
hspace: 像素 文字图片的水平间距

<!--边框效果-->
        <img src='少羽.jpeg' alt='少羽' title='少羽_悬停' border='5' />

黑色边框:
图片边框效果

<!--图片的对齐效果-->
    <body>
        <p> 
        1949年9月27日,中国人民政治协商会议第一界全体会议决议:“中华人民共和国纪年采用公元纪年法”,即是我们所说的阳历,为了区别农历和阳历两个新年,又鉴于农历二十四节气中的“立春”恰在农历新年的前后,因此便把农历正月初一改称为“春节”,阳历一月一日定为“元旦”,至此,元旦才成为全国人民的欢乐节日。<img src='少羽.jpeg' align='middle'>
英国:元旦前一天,家家户户都必须做到瓶中有酒,橱中有肉。英国人认为,如果没有余下的酒肉,来年便会贫穷。除此之外,英国还流行新年“打井水”的风俗,人们都争取第一个去打水,认为第一个打水人为幸福之人,打来的水是吉祥之水。英国人在除夕的深夜,常带上糕点和酒出去拜访,他们不敲门,就径直走进亲友家去。按英国人的风俗,除夕千夜过后,朝屋里迈进第一只脚的人,预示着新的一年的运气。如果第一个客人是个黑发的男人,或是个快乐、幸福而富裕的人,主人就将全年吉利走好运。如果第一个客人是个浅黄头发的女人,或是个忧伤、贫穷、不幸的人,主人在新的一年中将遭霉运,会遇上困难和灾祸。除夕在亲友家作客的人,在未交谈前,要先去拨弄壁炉的火,祝福主人“开门大吉”。在英国中部的一些地区,新年早上出门时,不管熟识还是陌生,都会互送铜钱,他们认为这样做,不但对方一年有财气,同时也会给自己带来幸运。
        </p>
    </body>

默认对齐方式:
默认对齐

左对齐:
left

右对齐:
right

上对齐:
top

中对齐:
middle

Tips
html文档的名字如果用中文,在本地可以使用,建议使用英文

相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
38 1
利用html2canvas插件自定义生成名片信息并保存图片
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
1月前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
HTML 速查列表2
文本格式化包括多种标签
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
44 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
31 2
下一篇
DataWorks