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

相关文章
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
411 19
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
277 1
利用html2canvas插件自定义生成名片信息并保存图片
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
343 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
675 0
在线将多张图片拼接起来图工具HTML源码
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
463 20
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
555 13
HTML图片
【10月更文挑战第4天】HTML图片。
204 2