前端

前后端怎么交互

浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。

前端

HTML 骨架 内容

css 样式

js 动态效果

HTML 超文本标记语言

标记 标签

分类

单边标记双边标记

head

编码 关键字 描述 link style script body

内联(行内)标签

字体
加粗 b strong
斜体 i em
上下标 sup sub
中划线 下划线 del s u



页面显示的内容
href: 链接地址
锚点： #id
target：打开方式
_blank： 新建一个窗口
_self: 当前窗口
title: 鼠标悬浮上显示的标题

src: 网络地址、本地地址（相对路径、绝对路径）
alt ： 链接地址有问题时提示的内容
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度
width和height选择一个
特殊字符：

&nbsp: 空格

块级标签

​ h1 - h6

今日内容

块级标签

排版标签

p:一个文本级别的段落标签 前后有间距

P标签中不嵌套其他的块级标签

div 没有任何样式的块级标签

hr 分割线

列表

无序列表

type="原点的样式"

• 手机
• 电脑
• iPad

• 手机
• 电脑
• iPad

• 手机
• 电脑
• iPad

• 手机
• 电脑
• iPad

有序列表

type="数字的样式" start =“起始值”（数字）

1. 手机
2. 电脑
3. iPad

1. 手机
2. 电脑
3. iPad

25. 手机
26. 电脑
27. iPad

1. 手机
2. 电脑
3. iPad

1. 手机
2. 电脑
3. iPad

定义列表

dt 标题

dd 内容

城市

北京

上海

深圳

<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>

表格

</tr>
<tr align="center" valign="top">
    <td>2</td>
    <td >alex</td>


</tr>
<tr>
    <td>2</td>
    <td>wusir</td>
    <td rowspan="2">2208</td>

</tr>
</tbody>

序号	姓名	年龄
1	alex	84

<tbody>
<tr align="center" valign="bottom">
    <td>1</td>
    <td >alex</td>
    <td >84</td>


</tr>
<tr align="center" valign="top">
    <td>2</td>
    <td >alex</td>


</tr>
<tr>
    <td>2</td>
    <td>wusir</td>
    <td rowspan="2">2208</td>

</tr>
</tbody>

表单

提交

男 女 跳 唱 rap 篮球 提交 label

用户名：

其他的input

提交

select option

北京 上海 深圳 北京 上海 深圳 上传文件 CSS

引入方式

<!--内联引入-->
<style>
    div {
        color: #ffef6b
    }

</style>

<!--外联引入：链接  使用较多  -->
    <link rel="stylesheet" href="index.css">
<!--外联引入：导入-->
<style>
    @import url('index.css');
</style>

黄焖鸡米饭

黄焖鸡排骨

简单的样式

color: #ffef6b; /字体颜色/
200px; /宽度/
height: 200px; /高度/
background: blue; /背景颜色/
选择器

基本选择器

标签id类通用选择器

黄焖鸡米饭 鸡 米饭 外卖连接

黄焖鸡排骨 排骨 米饭

米饭