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文档的名字如果用中文,在本地可以使用,建议使用英文

相关文章
|
25天前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
39 1
|
1天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
2 0
在线拼接图片工具HTML源码
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
19 0
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
|
1月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
3月前
|
前端开发
html+css实现图片缓慢变大效果
html+css实现图片缓慢变大效果
37 0
|
3月前
|
存储 移动开发 前端开发
HTML5列表标签、多媒体和语义化标签
列表标签、多媒体和语义化标签
45 0
|
3月前
解决html中图片自适应屏幕大小的问题
解决html中图片自适应屏幕大小的问题