前端三要素：
js 动化（）
css 美化（）
html 结构（）
移动互联方向
移动端
大前端（移动端）
1.html5
超文本标记语言（版本5）
解释型标签语言 www确定标准 浏览器解释
运行机制？
1.开发pc--部署pc--pc浏览器 file:// [开发]
2.开发pc--部署云服务 apache2 --scp/filezilla
B/S架构：B--浏览器 S--服务器
面试：从浏览器-页面渲染出来中间经历了什么？
h5和h4区别？
标准：doctype声明不同
h5新增标签
h5新增api
如何理解语义化？
利用标签表达出来的含义，而不利用标签表达的样式，来表达页面结构
换句话说，就是在合适的页面位置上使用合适的标签
3.超文本：
超级文本：字符，超级链接，图片，音频，视频，画布（地表，图形，3D模型）
标记：
标签进行标记，html标签（无法使用自定义标签）
语言：
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
4.html结构
继承 xml
5.DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Documenttitle>
head>
body>
h1>Hello World!h1>
body>
html>
其中 charset 设定编码格式 告诉浏览器，这是UTF-8编码的
viewpoint 适配移动端 pc分辨率 手机分辨率
title 网页标题，显示在选项卡中
6.属性
位于开始标签中
核心属性（通用，绝大多数标签都有的属性）
id 唯一标识
class 分类，可以重复
title 悬浮提示
style 添加css规则的
自有属性
src是图片引用地址
超链接 百度一下，你就知道
target="_blank" 在新标签页打开网页
html注释： 快捷键：ctrl + /
7.块标签（块元素）
特点：
1）独占一行（100%）
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...语义化标签
设置块元素的样式，可以在title下面head里面写入标签（重置样式）
用法： style>
body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
}
style>
如果想给某一元素，如列表ul>li元素，添加样式，也可以在style里面添加，通过给这一列表写class名字，调用class名字写样式，例如：
ul.menu >li {
line-height: 2em;
background-color: bisque;
}
内敛嵌套表格
body>
div class="tyut">
header>
div class="first_line">div>
div class="second_line">
div class="logo">logodiv>
ul class="menu">
li class="menu_item">
span>学校概况span>
ul class="sub_menu">
li>学校简介li>
li>历史沿革li>
ul>
li>
li class="menu_item">
span>人才培养span>
ul class="sub_menu">
li>本科生教育li>
li>研究生教育li>
ul>
li>
li class="menu_item">
li>
ul>
div>
header>
div>
body>
8.行内标签（行内元素）
特点：
1）行内与其他行内元素共享一行空间
2）宽高都由内容决定
3）无法指定宽、高
4）用于填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中
元素：
span、a（超链接百度）、加粗、强调、斜体、图片img
不能通过在标签里改变样式（如是实现不了的），但是图片可以改width
功能标签： a 超级链接 href="" 跳转 url 跳转到一个外网地址中 相对路径：相对于当前代码所在文件的路径 . 当前目录下 .. 当前目录下的上一级目录 绝对路径：相对于基准点 linux操作系统中 / 操作系统根目录 也就是 / /var/www/html apache2部署目录 index.html / 代表apache的根部署目录 即 /var/www/html 锚点 1. 定义锚点
顶部
2. 跳转 跳转顶部
top">顶部
a href="https://www.baidu.com" target="_blank">百度一下a>
a href="/html/day02/2-a.html" target="_blank">2-aa>
div style="height:30000px;">div>
bottom">底部
#top">跳转到顶部 其他 target="" 目标 _self 默认值 ，当前页面 _blank 新页面 img
图片可以设置width，但是不能同时设置width和height，会影响图片比例 src 图片地址 1. 网络资源 2. 相对路径 3. 绝对路径 4. base64格式值 alt 图片找不到时候的文本替换
9.功能标签（功能元素）
1） table表格
属性：border=‘1’加边框 style="border-collapse:collapse;"合并边框
rowspan="2"合并两行
colspan="2"合并两列
thead（头部）
tbody 表格体
tr 行
td、th 列
tfoot（脚部）
tehad代表表头一栏，一对tr代表一行，td是里面的信息
快捷输入：table>tbody>tr>td*3
如：
table>
thead>
tr>
td>编号td>
td>姓名td>
td>性别td>
td>生日td>
tr>
thead>
tbody>
tr>
td>1td>
td>tomtd>
td>男td>
td>2000-09-25td>
tr>
tr>
td>2td>
td>tobtd>
td>男td>
td>2000-09-26td>
tr>
tr>
td>3td>
td>amytd>
td>女td>
td>2000-09-27td>
tr>
tbody>
table>
2） form表单
用来进行前后台数据交互（默认情况下同步交互）
ajax 异步交互 前置技术： http协议
form (action 后端处理接口, enctype表示编码方式，method请求方法)
method取值： get 用于查询操作，参数携带在url后面 post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中 enctype取值： application/x-www-form-urlencoded 查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&... schoolName=太原理工大学&userName=陈明 multipart/form-data 用于表单中有附件提交的时候，二进制，无需进行编码 text/plain 纯文本提交
①input 输入框
注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性 单行文本框 密码 单选按钮 复选按钮 附件 提交按钮 重置按钮 日期选择器（h5新增，兼容性差，一般不用） ...
②textarea 多行文本
③select 下拉菜单
江苏山西河南
实现单选性别男、女时点击字体也可以选上：
性别:
label for="input_gender_male">
input type="radio" id="input_gender_male" value="male" name="gender">男
label>
label for="input_gender_female">
input type="radio" id="input_gender_female" value="female" name="gender">女
label>
就是把input type="radio" id="input_gender_male" value="male" name="gender">男这一句放到label标签里，同时注意，男、女的name要一致。
所有需要默认选择的时候，在相应的选项的input里写一个checked
3） iframe
51
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
