编程:
使用(展示)数据 存储数据 处理数据
前端
1. 前端是做什么的?
2. 我们为什么要学前端?
3. 前端都有哪些内容?
1. HTML 2. CSS
3. JavaScript
4.jQuery和Bootstrap
Web开发本质:
1. 浏览器输入网址回车都发生了什么?
1. 浏览器 给服务端 发送了一个消息
2. 服务端拿到消息
3. 服务端返回消息
4. 浏览器展示页面
C/S架构 --> B/S架构
客户端和服务端 消息的格式是约定好的
HTTP协议: 浏览器和服务器之间约定好的消息格式 ==> "PUT|xxx.avi|1024"
WEB本质:
服务端
浏览器
HTML文件
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
HTML是一个标准,规定了大家怎么写网页.
HTML --> 学标签
<标签名> --> 标记语言 (HTML, XML)
标签分类:
双标签
单标签
<h1></h1>
<img>
<a></a>
1. HTML文件的结构:
1. 文档声明
2. html标签
- head标签
head内常用标签
body内常用标签
- body标签(用户在浏览器能看到的内容)
第一个页面
```python
# html三个组成部分
# 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)
# 指令: <!开头> => <!doctype> <!-- -->
# `: &; 包裹 => 特殊的字母 | #十六进制数
```
```html
<!doctype html>
<!-- 页面根 -->
<html>
<!-- 后勤 -->
<head>
<meta charset="utf-8" />
<title>first page</title>
</head>
<!-- 显示内容 -->
<body>
</body>
</html>
```
基本标签
```
// 最基本
div => 搭页面架构
span => 搭文本架构
// 换行显示
h1~h6 => 标题, h1有且只有一个,作为页面总标题
p => 段落
// 同行显示
文本类标签
i,em => 斜体
b,strong => 加粗
del | ins | sup | sub
// 组合
table>tr>th+td
form>input
// 功能
img 图片 | a 超链接 | hr 分割线 | br 换行
```
标签分类
```
单双标签
单:主功能
双:主内容(具有作用域)
行块标签(display)
行:同行显示
块:换行显示
组合标签
自定义标签
```
1、无语义标签
<div></div>
<span></span>
2、常用语义标签
<hn></hn> 标题
<p></p> 段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线
3、文本标签
<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语气更强)
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
4、其他标签
<section></section> 块
<small></small> 小号字体
<!-- 注释内容 -->
5.
特殊符号 © < > ® ...
6. 语义化的HTML
7. 标签的嵌套规则
1. 行内标签不能嵌套块级标签
2. p标签不能嵌套块级标签