HTML入门学习day01笔记

HTML入门学习day01笔记

前端包括HTML、CSS、Js：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西。
3. Js是用来实现网页上的特效效果。一般有交互的都是用Js来实现。

首先我们要清楚Html网页的开发流程:

1. 编写网页 （sublime/vscode)
2. 本地测试
3. 部署（linux）将本地的html网页上传至云服务器上，并且部署到apache静态服务器上
4. 网络测试

学习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 ： 统一资源标识符