前端:开发网页
网站=前端(网页) +后端(服务器)
前端(网页):展示给用户看的,用到的语言有:HTML,CSS,JavaScript
后端(服务器):
存储数据/组织业务逻辑

HTML描述一个蛤蟆一张嘴,两只眼睛四条腿,
CSS描述了这个蛤蟆是绿色的,巴掌大小。
JS描述了这个蛤蟆能跳,能爬能游泳。

html文件的最顶层标签就是html,
需要有一个head和body。
head放一些属性信息,
body放页面上显示的内容。
HTML
1. html是由一些标签构成的
2.每个标签都有开始标签和结束标签:<html> < /html>。
也有部分标签只有开始标签,没有结束标签(单标签)。
3.标签之间可以嵌套。树形结构。
html是head和body的父标签,
head和body就是html的子标签。
html的标签(tag),也可以称为元素(element) 。

html标签是可以在开始标签中写一些属性的(键值对),
使用空格来分割键值对,使用=来分割键和值. (注意,这里的=两侧不能有空格)
title标签:

标题标签<h1></h1>:


段落标签<p></p>


可以用
lorem
随机生成字符串
换行标签:<br>

代码显示:

网页显示:

文字样式
行内元素:不是独占一行,
块级标签:独占一行
加粗:
strong
b
倾斜:
em i
删除线:
del s
下划线:
ins
u


图片标签
img单标签,没有结束标签。
img必须带有一个src属性,通过这个属性来指定你要显示的图片的路径,
这个路径可以写为绝对路径也可以是相对路径(基准目录就是当前html所在的目录)



alt:
如果图片无法显示(找不到了),就会显示alt中的内容,给出提示。

显示:


像素

px是像素的意思,
就是屏幕上最基本的单位。
屏幕有很多很多非常小的光点,每个光点都是能显示出一种颜色(自由变换)。
例如:
我的显示器, 1920 * 1080 (1080p),
水平方向有1920个光点,
垂直方向有1080个光点,
很多前端表示尺寸/位置都是用px来表示单位的。
超链接<a></a>

默认是蓝色,带下划线的文字。
如果访问过一次,就变成了紫色。

页面之间的跳转
hello:

Test1

hello.html:

Test1.html:

网页元素链接


表格标签
(1)table 标签: 表示整个表格
(2)tr: 表示表格的一行
(3)td: 表示一个单元格
(4)th: 表示表头单元格. 会居中加粗
(5)thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
(6)tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.


列表标签:
有序列表ol (ordered list)
无序列表ul (unordered list)
列表项
(list item)
有序列表:


无序列表:


表单标签
:
与用户交互
form标签:
进行前后端交互,功能是构造一个HTTP请求。
input标签:




使用单选框的时候,需要设置相同的name属性,
此时才会有“互斥"的效果,男女不能同时选中。
默认情况下只能点击圆点选中,比较小不好点。
label标签让点击范围变大,点击文字也可选中,但是for属性对应单选框的id。

checked="checked":
将该标签设置初始状态

id是一个特殊的属性。每个html元素都有id。
要求一个页面上id必须要唯一。
复选框


按钮


点击按钮后弹出提示框
提交按钮


文件选择框


下拉菜单(下拉框)


多行文本框
textarea多行文本框
input只能写一行

最多一次性显示5行,每行最多有30个字符

如果显示行数大于设定的,自动生成滚动条

