小编是一个UI设计师，但是行业现状不是很乐观，有人说这个行业有可能3年后会消失，从而一些分工明确的岗位会替代UI设计；也有人说UI已经饱和，整个互联网行业需要一些更大牛的人。不管都有谁说，说了些什么，希望有才华有前途的小牛也不要放弃。术业有专攻，学一门精一门，既然选择就不要放弃。
身为一个UI设计师，你的能力应该不局限于UI这一区域内，你只要会设计平面，那么你就会设计UI，会原画，甚至会游戏UI，虽然细分不同，但是整体不会变。只要你掌握规范，那么还有什么能难住设计师的呢？
前面说了，UI行业不是很乐观，为了避免淘汰，所以我们要尽量多充实自己，相信UI设计师在找工作的时候都会遇到一些公司要求我们会HTML，为什么会要求这个呢，目的是要我们UI设计师能够知道代码是怎么还原设计图的，细点讲就是我们做完的图交给前端开发人员，他们会根据我们图的样式用代码还原，以H5/网页的形式展现出来，那么我们做的图就要考虑开发人员实现的问题与工期问题。不能异想天开不根据实际就出图，界面做的是很炫，但是开发费时、费精力会影响整个项目的工期，所以就是白设计！还有一个原因就是，真的会有大牛自己设计图自己写代码开发，这样公司就节省了资源输出，你既能出图又能开发何乐而不为？是不是后背有点发麻？嗯。。。这样的要求毕竟只有那么几家会无厘头压榨，也只占少数，所以大家不用担心啦！
现在你能明白为什么会要求我们会HTML了吧？
好啦，说正题，小编把之前学过的一些知识点整理了一下，方便大家对比，这也是我学习HTML的笔记，所以做笔记是有好处滴，哈哈，后期还会更新，敬请期待！
标签
1、HTML基础标签
Head、body
2、HTML标题
<h1>标题一</h1>——<h6>标题六</h6>
3、HTML段落
<p> </p>标签定义段落
4、HTML链接
<a href="[https://www.baidu.com](https://www.baidu.com/)">百度链接</a>标签定义链接
5、HTML图像
<img src=“image／XXXXX.jpg">标签定义图像
元素
1、元素是指从开始标签到结束标签的所有代码
<p>内容</p>
<br/>空元素（没有元素内容）在开始标签中进行关闭
2、元素语法：
元素的内容是开始标签与结束标签之间的内容
大多数HTML元素可拥有属性
3、嵌套的HTML元素
大多数的HTML元素都是可以嵌套的
属性
1、标签可以拥有属性为元素提供更多的信息
2、属性总是以名称／值对的形式出现，比如：href="https://www.baidu.com">
3、属性总是在HTML元素的开始标签中规定
4、HTML属性实例：
<body bgcolor=“yellow”>拥有关于背景颜色的附加信息（ <body background=“yellow”>）
<h1 align=“center">拥有关于对齐方式的附加信息 （align-排列 right-右 center-中间）
<a target=“blank">拥有关于页面在何处打开链接的附加信息
网络连接：<a href="[https://www.baidu.com](https://www.baidu.com/)">百度链接</a>
5、通用属性：
class：规定元素的类名 <h2 class="h2id">标题二</h2>
id：规定元素唯一ID
style：规定元素的样式 <style type="text/css"></style>在head标签下
title：规定元素的额外信息
格式化
1、 <big> 定义大号字
2、 <em> 定义着重文字
3、 < I > 定义斜体字
4、 <small> 定义小号字
5、<strong> 定义加重语气
6、 定义下标字
7、 定义上标字
8、<ins> 定义插入字
9、 <del> 定义删除字
样式
1、标签：
<style>:样式定义
<link>:资源引用
2、属性：
rel=“stylesheet":外部样式表
type="text/css”:引入文档的类型
href=“规定被链接文档的位置"
3、三种样式表插入方法：
外部样式表：<link rel=“stylesheet” type=“text/css” href=“app.css">
内部样式表：<style type=“text/css”>
body {background-color:red}
</style>
内联样式表：<p style=“color:red">
链接
超链接可以是一个字、一个词、或者一组词、也可以是一副图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用<a>标签在HTML中建链接。
1、链接数据：
文本链接
图片链接
2、属性：
href属性：指向另一个文档的链接，规定链接的目标，开始标签和结束标签之间
的文字被作为超级链接来显示。
<a href=“http://www.baidu.com”>;
<img src=“图片名称” width=“100px” height=“100px” alt=“图片解释"
name属性：创建文档内的链接
<a name=“tip”>名称</a>
<a href=“#tip”>链接到名称</a>
3、img标签属性：
alt：替换文本属性
表格
1、 <table> 定义表格
2、 <caption> 定义表格标题
3、 < th > 定义表格表头
4、 < tr > 定义表格的行
5、 < td > 定义表格的单元
6、 < thead > 定义表格的项目
7、 < tbody > 定义表格的主体
8、 < tfoot > 定义表格的页脚
9、 < col > 定义表格的列属性
<body>
<table border="1”>
<caption>表格</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>内容一</td><td>内容二</td></tr>
<tr><td>内容一</td><td>内容二</td></tr>
注：border是边框，1代表像素
1、没有边框的表格 （没有border）
2、表格中的表头 （<tr><th>表头一</th><th>表头二</th></tr>）
3、空单元格 （没有内容<tr><td></td><td>内容二</td></tr> 但是有边框）
4、带有标题的表格 （<caption>表格</caption>）
5、表格内的标签 （
屏幕快照 2019-05-06 下午6.12.20.png
<body>
<table border="1">
<tr><th>水果</th><th>蔬菜</th></tr>
<tr>
<td>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>草莓</li>
</ul>
</td>
<td>
<ul>
<li>菠菜</li>
<li>白菜</li>
<li>油菜</li>
</ul>
</td>
</tr>
</table>
</body>）
6、单元格边距 (内容边距变大：<table border="1" cellpadding="10">)
7、单元格间距 (边框间距变大：<table border="1" cellspacing="10">）
8、表格内的背景颜色和图像 (<table border="1" cellspacing="10" bgcolor="#f5f5dc" background=“XXXXX.PNG">)
9、单元格内容排列
10、跨行跨列单元格
网友评论