html的基本入门

一、产品

1.1 什么是产品

当一些公司需要做一些关于互联网的项目的时候，我们就称为产品。

1. 网站
2. 移动端(IOS,安卓,平板)
3. 小程序

1.2 产品公司和外包公司

1.2.1 产品公司和外包公司的区别

1.2.2 外包公司中的甲方和乙方

• 为什么会有外包公司的存在

二、外包项目

2.1 从哪里来

1. 老板、市场自己去找(投标)去拉项目
2. 朋友介绍
3. 专门第3方的中介网站平台(抽成20%)

2.2 外包项目投标

三、公司的组成

3.1 整体架构

管理职位：CEO、COO、CFO、CTO、CIO等
产品条线：产品经理、产品助理、UI设计师等
运营条线：产品运营、活动策划、会员运营、数据运营、（新）媒体运营、内容策划、编辑等
技术条线：架构师、前端工程师、Java后台工程师、测试工程师、运维工程师等
市场条线：渠道、推广、商务合作等
行政条线：HR、行政等

3.2 工程师

3.2.1 前端-h5

3.2.2 移动端-ios、android

3.2.3 后台-Java

3.2.4 运维-docker、linux

3.2.5 全栈工程师

四、编程

4.1 什么是编程

编程就是我们给计算机发出对应的指令。计算机按照我们给的指令进行运行

• 举例：小爱同学
  小爱同学其实可以认为是最简单的编程

1. 小爱同学，火龙果用英文怎么说
2. 小爱同学，椅子用英文怎么说
   在这里就有一个语法，我们需要学习
3. 小爱同学，静夜思怎么背
4. 小爱同学，悯农 怎么背

• 语法
  小爱同学，xxxxx用英文怎么说
  小爱同学，xxxxx怎么背

4.2 前端组成

4.2.1. html超文本标记性语言

最基本的标签
都是固定的样式

4.2.2 CSS层叠样式表

起到的作用让页面更加的好看
比如：设置标签长什么样子，放置在哪个位置

4.2.3. JS JavaScript 脚本语言

让页面有交互性，使页面活起来

五、开始第一个项目

5.1 创建项目

文件->新建->项目

1. 项目名称
2. 项目目录

5.2 新建html

5.2.1 创建

选中项目(右键)->新建->html(文件的名称)

当创建好了之后，我们会发现文件夹中多了一个html文件，浏览器打开，里面是空白的

tips:

1. 我们写的命令全部都是要求英文
2. 我们写的标点符号也是要求是英文的
3. 写完代码记得保存。ctrl+s,有没有保存，看文件名前面是否有小星星
4. 我们写代码的话有快捷键，如果你会你可以用，如果你本身不会的话，最好先不要使用快捷键。
5. 前期我们写代码是记忆的时候，打基础的时候。如果用快捷键，会导致基础打的不扎实，形成眼高手低。

5.2.2 查看

1. 直接文件打开，修改代码需要刷新才能看见。
2. 通过服务器的方式打开，修改完后自动刷新。

5.3 html 超文本标记性语言

5.3.1 超文本

其实就是一段普通的文本文字，只不过用了特殊的语法。本质上就是一段文字

5.3.2 标记性

语法采用的是一个个的标记。标记我们又叫他标签，元素。

5.3.3 语言

在这里说下，说html是编程语言，其实还算不上，html还不能独立的称为编程语言，需要和其他的语言配合使用。

5.4 标签

5.4.1 标题标签

代表的就是标题，在这里写，自然页面标题跟着变动

<title>百度一下，你就是知道</title>

5.4.2 双标签和单标签

双标签：成对出现的标签
单标签：单个出现标签

5.4.3 换行

1. p

<p>段落标签</p>

2. h1~h6

<h1>h1哈哈哈啊哈</h1>

3. div

<div>div标签</div>

4. br(单标签)

哈哈哈啊哈哈<br>
hahahaaahah<br/>
啊哈哈哈哈啊哈

5. hr（单标签）

啊哈哈哈哈啊哈<hr>
哈哈啊哈哈哈哈

5.4.4 组合标签（有序和无序）

在html中有的一些功能，必须多个标签在一起配合才能使用。

1. 有序列表
2. 无序列表

		<ol>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ol>
		<ul>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ul>

5.4.5 表格

1.table表格
2.tr 横行
3.td 单元格

		<table border="1">
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			
			
		</table>

六、代码规范

在公司写代码的时候，我们写的代码必须规范化。
我们写代码，就好比穿衣服一样。我们写的代码也要求整整齐齐。

6.1 代码对齐

我们子标签，需要比父标签向后移一位(一个tab的距离)。

七、属性

对标签额外的一些描述。

7.1 语法

<标签名称   属性名="属性值">
<标签名称   属性名=‘属性值’   属性名2="属性值2">

1. 一个标签可以有1个或者多个属性。
2. 引号可以使用单引号，也可以使用双引号。
3. 每个标签都有属于自己的特别有属性。
4. 当然也有公共的属性，就是大家都可以有的属性。

八、Input标签

8.1 text属性

最基本的输入框

<input type="text" />

8.2 password属性

密码输入框

<input type="password" />

8.3 按钮

<button>登录</button>

8.4 简单的登录注册页面

		<p>
			账号：<input type="text" />
		</p>
		<p>
			密码：<input type="password" />
		</p>
		<p>
			<button>登录</button>
			<button>注册</button>
		</p>

8.5 多选框

	<p>
			多选框
			请选择你的爱好
			足球<input type="checkbox" />
			篮球<input type="checkbox" />
			羽毛球<input type="checkbox" />
			
		</p>

8.6 单选框

		<p>
			单选框
			请选择你的性别
			男<input type="radio" name="sex" />
			女<input type="radio" name="sex" />
		</p>
		

1. 单选框不能反选
2. 单选框想要做到只选一个，那么必须起相同的名称

8.7 练习

选择你的学历

1. 小学
2. 初中
3. 高中
4. 大学
5. 研究生

九、CSS 分类

9.1 行内样式

行内样式针对单独的一个标签

<p style="color:red;">hahahahaah</p>

9.2 内部样式

针对单独的页面，也就是说对整个页面都生效

		<style>
			p{
				color: red;
				
			}
			div{
				color:green;
				background-color: #f3f4f5;
				
			}
		</style>

9.3 外部样式

写出来的外部样式可以作用于多个页面
把我们之前写在内部样式的代码，独立成为一个css文件。
谁想引入样式，就导入刚创建的文件，自然就生效了。

9.3.1 引入外部的css文件

	<link rel="stylesheet" href="1.css" />

9.3.2 使用方式、使用场景

1. 在一个网站中，你会发现每个页面都会有相似的部分。我们把相似的部门形成独立的css文件，这样哪个页面想用就直接导入进来。能帮我们把重复的代码不需要写多遍
2. 也有一些公司写了一些好看复杂的css样式，并且放在互联网上，免费供大家使用。这种被我们称为第3方库。在公司里面避免不了要使用第3方库。

9.4 对比范围

外部>内部>行内

十、css属性

属性之间用分号分割

10.1 字体颜色

<p style="color:red;">行内样式</p>

10.2 背景颜色

<p style="color:blue;background-color: gray;">hahahaha</p>

10.3 边框

border: 1px solid black;

10.4 宽高

width: 200px;
height: 200px;

10.5 文本居中

text-align: center;
line-height: 200px;

10.6 圆角

1. 设置4个角

border-radius: 100px; 

2. 设置具体某个角

border-top-left-radius:20px ;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

3. 同时设置4个角

顺时针方式

border-radius:20px 20px 20px 20px;

十一、颜色

11.1 颜色名（不用）

我们采用html提供的特有的颜色显示
但是这种方式，在我们平常研发的时候基本用不到

11.2 RGB颜色值（10进制）

颜色名的方式太固定了。
所以我们更多的采用三原色的方式，也就是RGB
其实R代表red红色 ；G代表green绿色；B代表blue蓝色
取值范围0~255

<p style="color: rgb(0,144,89);">xxx</p>

11.3 RGB颜色值（16进制）推荐

但是平常UI给我们颜色值的时候更多的采用16进制的方式
所以我们写颜色的时候需要16进制表达
取值范围00~ff

<p style="background-color: #070bf6;">haahahaha</p>		

十二、16进制

16机制也是表达数字的一种方式。
我们平常使用最多的是10进制

10机制 0	1	2	3 ...9	10	11	12	13	14	15	16	17	18
16进制 0	1	2	3 ...9	a	b	c	d	e	f	10	11	12