帮助网站：https://developer.mozilla.org/zh-CN/
html
前端三要素：
js 动化(能说会道)
css 美化 (妆容)
html 结构(身材)
jquery echarts(dom)
vue/react/angular(html/css/js)
脚手架(http://localhost:3000)
sass/less (css)
移动互联方向
大前端（移动端）
1. html5
超文本标记语言
解释性标签语言
www 标准的制定方
浏览器 标准的实现方 火狐，google,safair
开发者 选择html4，html5进行开发
运行机制
1) pc - pc 浏览器 file:// 【开发】
2) 开发pc- 部署云服务
apache2 - scp/filezilla
http://www.tyut.edu.cn/
B/S架构 b浏览器(html、css、js) s服务器
超文本：
超级文本：字符，超级链接，图片，音频，视频，画布（地图，图表，3D模型）
标记
标签进行标记， html标签（无法使用自定义标签）
<h1>标题1</h1>
<p>段落</p>
语言：
c,java 编译型语言，
hello.c --gcc--> hello.o --运行--> linux
hello.java --javac--> hello.class --运行--> jvm -->linux/win
html 、js 、css 解释型语言
hello.html --> 浏览器 ->linux/win
执行效率：c > java > js
2.前端地位
软件开发主流架构（前后端分离）
前端（html、css、js)
浏览器(终端)显示
pc(淘宝pc) 移动端(android/ios/pad h5、混合式app) 小程序 大屏
后端(Java / python / c# / Nodejs)
逻辑(登录、注册)
数据库操作
中间件操作(消息队列....)
3.html结构
继承 xml
<!DOCTYPE html> //声明当前文档类型：html
<html>
<head> //head内容不会显示在浏览器视口中
<meta charset="UTF-8"> //设定编码格式
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //viewport 适配移动端
<title>第一个html</title> //网页标题，显示在选项卡中
</head>
<body>
</body>
</html>4.标签 (不区分大小写!)
单标签
<br/> 换行
<meta/> 原信息
<img/>
双标签 大多数标签属于双标签
<head> </head>
<body> </body>
<h1> </h1>
元素
标签 + 内容
<h1>这是一个一级标题</h1>
<div>
<div class='logo'>logo</div>
<div class='menu'>menu</div>
</div>
属性
位于开始标签中
核心属性 (通用，绝大多数标签都具有的属性)
id 唯一标识
class 标识一类元素，分类，可以重复
title 悬浮提示
style 添加css规则，样式
自有属性
<img src=" 图片引用地址 ",alt = " 图片无法加载时文本替换 "></img>
<a href = "https://www.baidu.com" target="_blank">百度一下，你就知道</a>
target="_self"表示：默认值，本页面打开
target="_parent"表示：在父窗口打开
target="_top"表示：在顶层窗口打开
target="_blank"表示：在新页面打开
当网页没有框架时，target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。
注释
<!-- --> html唯一注释标识
不会被浏览器解释，只是用来描述代码意义
5.块标签(块元素)
特点：
1）独占一行空间
2）高度默认为0，高度由内容决定
3）可以指定宽，高
4）用来搭建页面框架()
元素
h4: div、body、p、ul>li、ol>li、dl>dt、dd 、h1~h6
h5: header、footer、nav、section、article、aside、address.... 语义化标签
6.行内标签(行内元素)
特点：
1）行内与其他元素共享一行空间
2）高宽都由内容决定
3）无法指定宽、高
4）用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中！！！
元素：
span 组合文档中的行内元素
a 超链接
img 图片
装饰类型标签：
strong 加粗； em 强调； i 斜体； sub 定义下标；sup 定义上标....
功能标签：
a
超级链接
href=" " 跳转
url 跳转到一个外网地址中
相对路径：相对于当前代码所在文件的路径
. 当前目录下
.. 当前目录下的上一级目录
绝对路径：相对于基准点
Windows系统中，绝对路径表示需要在前边加上file:///，再写页面在电脑中的位置。即跳转后页面在浏览器上的页面地址
eg: <a href="file:///F:\undergraduate\jiepuyiqing\tyut\zzj\html\day02\2-a.html">绝对路径跳转到2-a</a>
linux操作系统中
/ 操作系统根目录 也就是 /
/var/www/html apache2部署目录
index.html / 代表apache的根部署目录 即 /var/www/html
锚点
1. 定义锚点 <div id="top">顶部</div>
2. 跳转 <a href="#top">跳转顶部</a>
其他
跳转到邮箱 <a href="mailto:youemail@mail.com?subject=邮件标题&body=邮件内容">告诉我们</a>
img 不要轻易改变图片的宽高，会变形
src 图片地址
1. 网络资源
2. 相对路径
3. 绝对路径
4. base64格式值 转换工具网址：http://tool.chinaz.com/tools/imgtobase/
alt 图片找不到时候的文本替换
7. 功能标签（功能元素）
1) table 表
tbody、thead、tfoot 表格体
tr 行
td、th 4列 （容器）
子标签可以为任意其他标签
行中的列数在经过计算后应该是相同的
2) form
用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互
前置技术： http协议
form( action 后端处理接口，enctype 表示编码方式，method请求方法)
method取值
get 用于查询操作，参数携带在url后面
post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
enctype取值：
application/x-www-form-urlencoded
查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
eg: schoolName=太原理工大学&userName=陈明
multipart/form-data
用于表单中有附件提交的时候，二进制，无需进行编码
text/plain
纯文本提交 1) input 输入框
注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性
<input type="text" /> //单行文本框
<input type="password" /> // 密码
<input type="radio" /> //单选按钮
<input type="checkbox" /> //复选按钮
<input type="file"/> //附件
<input type="submit" /> //提交按钮
<input type="reset" /> //重置按钮
<input type="date" /> //日期选择器（h5新增，兼容性差，一般不用）
...
2) textarea 多行文本
<textarea name="description" cols="50" rows="4"></textarea>
3) select 下拉菜单
<select name="address">
<option value="js">江苏</option>
<option value="sx">山西</option>
<option value="hn">河南</option>
</select>
iframe (可以百度查询 你想嵌套的东西+iframe)
<iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>
注意：
html源码中，多个空格等于一个空格，一个换行也等于一个空格
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
