日度归档:2020年1月22日

html中如何使用css让div中超过宽度部分的字符(文字)采用点点显示呢?


摘要:
下文讲述使用css代码,设置div的样式,使其超出部分,使用点点显示,如下所示;

主要使用以下属性:
1.overflow设置隐藏部分的显示方式
2.text-overflow的显示样式

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
 
  div{
      width:60px; /*必须设置宽度*/
      overflow:hidden; /*溢出隐藏*/
      text-overflow:ellipsis; /*以省略号...显示*/
      white-space:nowrap; /*强制不换行*/
  }
 
</style>
</head>

<body>
<div>
   测试一个div,超出宽度部分,采用点点显示的方法
 </div>

</body>
</html>
css 超出部分点点显示应用举例

css 超出部分点点显示应用举例

html 中 替换元素和不替换元素的区别说明


摘要:
下文讲述html中替换元素和不替换元素的区别说明,如下所示:

html 替换元素和不替换元素有以下区别:
替换元素:
替换标签是浏览器呈现给用户时,其实际内容会被相应的元素替换,
例:img 标签,呈现给浏览器时,会使用src属性中的内容
不替换元素:
例:标签中的内容,只会使用html中直接定义的内容显示

常见的html 替换元素:

img ,input, textarea, select ,object 是html中常见的替换元素

html 中 块级元素和内联元素的区别说明


摘要:
下文讲述html中块级元素和内联元素的区别说明,如下所示:

html 块级元素和内联元素从字面的意思有以下区别:
块级元素:作为一个元素块进行相关操作
内联元素:和别的元素进行联合操作
主要区别如下表所示:

行内元素

块级元素
行内元素之间会排列在同一行中,
当一行排列不下时,会换行
————————
宽度会随着内容变化

每个块级在html显示中会独占一行
如果对行内元素设置width,height属性
则无任何效果,例对 标签a设置width将不会有任何效果

可设置width height属性
行内元素
只有margin-left、margin-right、padding-left、padding-right
这四个边距属性起作用

可设置padding margin属性
显示html对象使用display:inline

显示html对象使用display:block


html块级元素列表

address: 定义地址
caption: 定义表格标题
dd: 定义列表中定义条目
div: 定义文档中的分区或节
dl: 定义列表
dt: 定义列表中的项目
fieldset: 定义一个框架集
form: 创建表单元素
h1 、h2、h3、h4、h5、h6: 标题元素
hr: 水平线
legend: 给fieldset元素定义标题
li: 定义列表项目
noframes : 为那些不支持框架的浏览器显示文本,放置于frameset标签内
noscript: 为那些不支持脚本的浏览器显示文本
ol: 有序列表
ul: 无序列表
p: 定义段落
pre: 定义预格式化文本
table: 定义表格
tbody: 定义表格主体
td: 表格中的标准单元格
tr: 表格中的行
tfoot: 表格中的页脚
th: 定义表头单元格
thead: 定义表格的表头



html 内联元素列表

a: 可定义锚以及超链接
abbr: 表示一个缩写形式
acronym: 表示只取title中首字母的缩写形式
b: 字体加粗
bdo: 可覆盖默认的文本方向
big: 大号字体加粗
br : 换行
cite: 引用进行定义
code: 定义计算机代码文本
dfn: 定义一个定义项目
em: 定义为强调的内容
i: 斜体文本效果
img: 向网页中嵌入一张图像
input: 输入框
kbd: 定义键盘文本
label: 为input进行标记/标注
q: 定义短的引用

s: 表示不准确不相关,却不应当给予删除的内容

samp: 定义样本文本

select: 定义单选或者多选菜单
small: 呈现小号字体效果
span: 组合文档中的行内元素
strong: 语气更强的强调内容
sub: 定义下标文本
sup: 定义上标文本
textarea: 多行文本输入控件
tt: 打字机或者等宽的文本效果
var: 定义变量