UI笔记 | 烟络枫林

UI笔记

2023-01-01

UI文件命名规范常用字

1	2	3	4	5	6	7	8
正常	normal	选中	selected	按下	pressed	禁用	disabled
已访问	visited	鼠标悬停	hover	广告横幅	banner	背景	bg
顶部	top	中间	middle	底部	bottom	图标	icon
第一	first	第二	second	最后	last	标记	sign
页头	header	页脚	footer	页面主体	main	内容	content
导航	nav	标签	tab	按钮	btn	按钮文字	btntext
单选框	radio	复选框	checkbox	输入	ip	下拉	cbb
列表	list	菜单	menu	视图	view	面板	panel
栏	bar	状态栏	statusbar	导航栏	navibar	标签栏	tabbar
侧栏	sidebar	工具栏	toolbar	切换开关	switch	滑动器	slider

常用补充描述

1	2	3	4
启动界面	default	登陆界面	login
启动图片	default.png	登陆背景	login_bg.png
启动logo	default_logo.png	登陆logo	login_logo.png
输入框选中状态	login_input_pre.png	登录按钮选中状态	login_btn_pre.png
列表页	list_功能描述.png	如：list_menu.collect.png
导航栏按钮	nav_功能描述.png	如：nav_menu.pngnav_menu_pre.png
左侧导航	leftbar_功能描述.png	如：lefterbar_info.pngnav_info_pre.png
主页面	home_功能描述.png	如：home_btn.recommended.png
底部菜单按钮	tab_功能描述.png	如：tab_set.pngnav_set_pre.png

最小icon不小于44最小可点击区域不小于88|

常见标签的默认display属性归类

‌类型‌	‌常见标签‌	‌Display值‌	‌特性
块级元素	div、h1、p、ul、li	block	新行开始，占据父元素整个宽度。
行内元素	span、a、img、input	inline	同一行排列，仅占据自身内容宽度。
行内块级元素	button、select、textarea	inline-block	行内排列，但可设置宽度、高度等块级属性。
列表项元素	li	list-item	表现如块级元素，且自带项目符号（如圆点、数字）。
表格元素	table、tbody、tr	table	表现如表格结构，支持表格布局特性。
表格单元格元素	td、th	table-cell	表现如表格单元格，支持垂直对齐、内容自适应等特性。
隐藏元素	script、style	none	不显示，不占据空间，常用于非展示性内容。

1.标题标签

<h1></h1>…<h6></h6>

2.段落和换行标签

段落标签：<p></p>；换行标签：<br/>

3.文本格式化标签

加粗：<strong></strong>或者<b></b>
倾斜：<em></em>或者<i></i>
删除线：<del></del>或者<s></s>
下划线：<ins></ins>或者<u></u>

4.`<div></div>和<span></span>`

1 2	`<div></div>是大盒子，一行只能放一个大盒子 <span></span>是小盒子，一行可以放多个`

5.图像标签

图像标签：<img src="xxxxxx" 属性2="xxxxxx">

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

6.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能；href=“#”表示这是一个空链接；如果href里面地址是—个文件或者压缩包，会下载这个文件
target	用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)，_blank为在新窗口中打开方式

7.锚点链接

<a href="#要跳转的元素的id"></a>
点击链接的时候，会跳转到指定元素所在的位置。

8.注释和特殊字符

注释以“<!-”开头，以“->”结束。

9.表格标签

<table></tabe>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示
<thead></thead>用于定义表格的头部。<thead>内部必须拥有<tr>标签，一般是位于第一行
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。

一些常用的属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度
rowspan	要合并的单元格个数	合并行单元格，记得要删除多余的单元格
colspan	要合并的单元格个数	合并列单元格，记得要删除多余的单元格

10.列表标签

<ul></ul>：定义无序列表，里面只能放li标签，其它标签不被允许
<ol></ol>：定义有序列表，里面只能放li标签，其它标签不被允许
<li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签
<dl></dl>：定义自定义列表，里面只能包含dt和dd标签
<dt></dt>：定义自定义列表中的项目
<dd></dd>：描述自定义列表中的每一个项目

11.表单标签

通常一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。
<form></form>：表单域标签，表单域就是一个包含表单元素的区域

<form></form>标签常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设定表单数据的提交方式
name	名称	用于指定表单的名称，以区分用一个页面中的多个表单域

<input/>：输入表单元素
<lable></lable>：绑定一个表单元素，当点击lable标签内的文本时，会自动将焦点转到对应的表单元素上，lable标签的for属性必须得与相关元素的id属性相同
<select></select>：下拉表单元素，用于定义一个下拉列表
<option></option>：下拉列表中的元素，定义**selected=“selected”**属性时，当前项为默认选中项
<textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

<input/>标签的常用属性：

属性	属性值	描述
type	见下表	用于设置`<input/>`标签的不同形式
name	用户自定义	定义input元素的名称
value	用户自定义	设置input元素的默认值
checked	checked	设置此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<input/>标签type属性值：

属性值	描述
button	定义可点击按钮
checkbox	定义复选框，一组复选框name属性必须相同
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮，一组单选按钮的name属性值必须相同
reset	定义重置按钮，清除表单中的所有数据
submit	定义提交按钮，提交到action属性指定的地址
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符

UI文件命名规范常用字
常用补充描述
常见标签的默认display属性归类