HTML入门学习day01笔记
前端包括HTML、CSS、Js:
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
- CSS样式是表现。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西。
- Js是用来实现网页上的特效效果。一般有交互的都是用Js来实现。
首先我们要清楚Html网页的开发流程:
- 编写网页 (sublime/vscode)
- 本地测试
- 部署(linux)将本地的html网页上传至云服务器上,并且部署到apache静态服务器上
- 网络测试
学习HTML,我们还要了解HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言;
语言分为编译型和解释型:
- 编译型语言包括C、java
- 解释型语言包括PHP、js、html
HTML规定了自己的语法规则,比较文本 (纯字符)而言,超级文本标记语言更加丰富,它包含字符,图片,超链接,视频,音频。
HTML的语法
-
元素:开始标签、结束标签、子元素
以<a>b</a>
为例:
- 我们把<a>b</a>
称为元素
-<a>
为开始标签
-</a>
为结束标签
-b
为子元素 -
属性:核心属性、特有属性、拓展属性
-核心属性:
---------id唯一标识;
---------class、title描述;
---------显示在选项卡中;
---------style样式
-特有属性:
---------a标签 超链接 herf跳转到指定地址,target;
---------mg 标签 图片,
---------src:图片位置 Url、相对位置
---------alt:图片不显示的时候出现的文字
-拓展属性:
---------data-xxx ----- 例如:<div data-nn='one'></div>
-
结构
doctype 声明部分
html
head(不会显示到浏览器视口中)
title (显示在浏览器选项卡)
meta (用于设置元信息,配置)
body(网页主体)
-------charset=utf-8
编码 编辑器 UTF-8
解码 浏览器
-
元素
1.块元素 (box)
作用:
作为页面框架,或者容器。是页面的主体
特性:
1) 独占一行空间
2) 默认宽度为100%,默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”
2. 行内元素(label)
作用:点缀网页,填充内容
特性:
1) 与其他行内元素共享一行空间
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素,但块元素中可以嵌套行内元素
3. 功能元素 (行内元素)1) 表格
table 【属性】border、width、、、、 caption 表格标题 thead 表头部分 tr th/td tbody 表格主体部分【不可以省略】 tr td/th 【属性】colspan、rowspan、width、align td/th中可以放任意子元素 tfoot 表底部分 tr td 【注意】:每一行中的列数应该是相等
2) 表单(前后台交互)
用户 -> 表单 -> 后台 -> 数据库
注册页面 登录页面 搜索框 <form action=""> input select textarea </form> form action 后台接口地址 method 请求方式 get 参数拼接在url后面,通过?来分割 传递参数较少 查询学生信息、通过id删除学生信息、 post 参数存放在请求体中,安全 传递参数更多 保存或者更新学生信息、批量删除 enctype 编码方式 1. enctype='application/x-www-form-urlencoded' 浏览器就会将参数转换为【查询字符串 qs】格式 username=charles&password=123321&nickname=李四&emailcharles@briup.com 2. multipart/form-data 当有附件在表单中的时候,enctype务必设置为这种格式 ajax 查询字符串 username=charles&password=123321&nickname=李四&emailcharles@briup.com JSON '{"username":"charles","password":"123321"}' input name: 不能省略,作为参数中的key value: 作为参数中的value,在按钮中务必指定value值 type: text 单行文本框 password 密码框 submit 提交按钮 file 附件选择器 radio 单选按钮 checkbox 复选按钮 h5拓展(兼容性,功能) email date number ... progress checked: 单值属性 默认选址 placeholder 提示语 select option 标签中的文本显示在网页中,提交的值应该是option的value值,当这个值没有设定的时候,提交的是标签中的文本 <option value="sx">山西</option>这种是对的 <option>山西</option> 这种没有人用 textarea 多行文本域 placeholder 提示语 第三方库 日期插件 地址选择器地址 附件上传 富文本
附加:
- 思维脑图:
思维脑图地址(点击打开)
补充:
- B/S架构:
b代表浏览器
s代表服务器 - 网络概念
Http : 超文本传输协议
url : 统一资源定位符
uri : 统一资源标识符