UI学习HTML的入门重点知识分享

小编是一个UI设计师,但是行业现状不是很乐观,有人说这个行业有可能3年后会消失,从而一些分工明确的岗位会替代UI设计;也有人说UI已经饱和,整个互联网行业需要一些更大牛的人。不管都有谁说,说了些什么,希望有才华有前途的小牛也不要放弃。术业有专攻,学一门精一门,既然选择就不要放弃。

身为一个UI设计师,你的能力应该不局限于UI这一区域内,你只要会设计平面,那么你就会设计UI,会原画,甚至会游戏UI,虽然细分不同,但是整体不会变。只要你掌握规范,那么还有什么能难住设计师的呢?

前面说了,UI行业不是很乐观,为了避免淘汰,所以我们要尽量多充实自己,相信UI设计师在找工作的时候都会遇到一些公司要求我们会HTML,为什么会要求这个呢,目的是要我们UI设计师能够知道代码是怎么还原设计图的,细点讲就是我们做完的图交给前端开发人员,他们会根据我们图的样式用代码还原,以H5/网页的形式展现出来,那么我们做的图就要考虑开发人员实现的问题与工期问题。不能异想天开不根据实际就出图,界面做的是很炫,但是开发费时、费精力会影响整个项目的工期,所以就是白设计!还有一个原因就是,真的会有大牛自己设计图自己写代码开发,这样公司就节省了资源输出,你既能出图又能开发何乐而不为?是不是后背有点发麻?嗯。。。这样的要求毕竟只有那么几家会无厘头压榨,也只占少数,所以大家不用担心啦!

现在你能明白为什么会要求我们会HTML了吧?

好啦,说正题,小编把之前学过的一些知识点整理了一下,方便大家对比,这也是我学习HTML的笔记,所以做笔记是有好处滴,哈哈,后期还会更新,敬请期待!

标签

1、HTML基础标签

 Head、body

2、HTML标题

 

标题一

——
标题六

3、HTML段落

 

标签定义段落

4、HTML链接

 百度链接标签定义链接

5、HTML图像

 标签定义图像

元素

1、元素是指从开始标签到结束标签的所有代码

  

内容


空元素(没有元素内容)在开始标签中进行关闭

2、元素语法:

  元素的内容是开始标签与结束标签之间的内容

  大多数HTML元素可拥有属性

3、嵌套的HTML元素

 大多数的HTML元素都是可以嵌套的

属性

1、标签可以拥有属性为元素提供更多的信息

2、属性总是以名称/值对的形式出现,比如:href="https://www.baidu.com">

3、属性总是在HTML元素的开始标签中规定

4、HTML属性实例:

 拥有关于背景颜色的附加信息( )

 

拥有关于对齐方式的附加信息 (align-排列 right-右 center-中间) 拥有关于页面在何处打开链接的附加信息 网络连接:百度链接

5、通用属性:

 class:规定元素的类名  

标题二

id:规定元素唯一ID style:规定元素的样式 在head标签下 title:规定元素的额外信息

格式化

1、 定义大号字
2、 定义着重文字
3、 < I > 定义斜体字
4、 定义小号字
5、 定义加重语气
6、 定义下标字
7、 定义上标字
8、 定义插入字
9、 定义删除字

样式

1、标签:

  

  内联样式表:

链接

超链接可以是一个字、一个词、或者一组词、也可以是一副图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用标签在HTML中建链接。

1、链接数据:

 文本链接
 图片链接

2、属性:

    href属性:指向另一个文档的链接,规定链接的目标,开始标签和结束标签之间

                     的文字被作为超级链接来显示。

                     ;

                            “图片解释"名称

                        链接到名称

3、img标签属性:

    alt:替换文本属性

表格

1、

定义表格
2、
定义表格标题
3、 < th > 定义表格表头
4、 < tr > 定义表格的行
5、 < td > 定义表格的单元
6、 < thead > 定义表格的项目
7、 < tbody > 定义表格的主体
8、 < tfoot > 定义表格的页脚
9、 < col > 定义表格的列属性



屏幕快照 2019-05-06 下午6.12.20.png

水果蔬菜
  • 香蕉
  • 苹果
  • 草莓
  • 菠菜
  • 白菜
  • 油菜

6、单元格边距 (内容边距变大:

)

7、单元格间距 (边框间距变大:

8、表格内的背景颜色和图像 (

)

9、单元格内容排列

10、跨行跨列单元格

你可能感兴趣的:(UI学习HTML的入门重点知识分享)