1 什么是HTML
静态页面：页面里面的数据和元素是静态的。html/css
动态页面：页面里面的数据是动态，会跟服务器交互，会实时更新，存储在数据库里 jsp
页面动态：页面里面元素(img div table..)动起来的（动画 颜色 轮播）javascript
HTML：超文本标记（标签）语言，它可以保存文本内容 、图片、文件、插件.......
里面所有元素都是由成对标签构成的<body></body>
2 html基本语法
<html> <head> <title>页面标题</title> <meta/> meta标签：一般是写在head内，用于实现辅助功能、页面搜索引擎、页面的编码方式、页面的基本描述,专门用来提供页面的不可见信息 <meta name="keywords" content="景德镇"/> <meta name="description" content="对页面描述信息"/> <meta content="text/html;charset=utf-8"/> <!--引入css--> <link/> <!--编写内部样式--> <style></style> </head> <!--页面主体--> <body> </body>
3 HTML常用标签
1.div 区域标签，属于块级元素，可以设置宽高，且独占一行，设置间距，块级元素可以嵌套块级元素 2.p 段落标签 自带行间距 3.h1-h6 标题标签 自带加粗居中 4.常用的单标签
<br/> <hr/> <img/> <input type=""/>
5.<img src="" alt="" title="" hspace=""/> 图片标签 src：图片路径 可以写静态地址和网络地址， 静态地址：绝对路径：编写的是完整目录 必须从根目录开始定位最终的图片(需要在路径前加上file:///C:) 相对路径：根据页面和图片之间关系来编写的(./是在该文件目录下找，../是返回上一级文件) 网络地址：可以通过网站比较成熟的图片 移植到我的页面中 alt：图片失效了，显示的内容 title：鼠标悬浮在图片展示的内容 hspace：水平间距 6.a标签 超链接标签
<a href="" name="" target=""></a>
href：表示连接地址 ，可以写网址，可以写本地页面 比如:
<a href="https:www.baidu.com"></a> <a href="test.html"></a>
name属性：通常用于设置锚链接 target：表示连接页面的位置 常用的值：_slef(默认值,当前页面刷新) 、 _blank(弹出新的窗口显示)、 _top(在顶层窗口显示) _parent(在父级窗口显示)、 其它组件的name值 7.内联框架：可以包含其它页面的资源 iframe 语法结构：只能写双标签
<iframe src="包含的页面地址" width="窗口高度" height="窗口宽度" name="名称" scrolling="控制滚动条 none" frame="去掉边框 0"></iframe>
8.hr标签 默认按照100%显示 自带居中功能
<hr width="长度 50%" align="位置(默认center) left">
4 列表
列表：用于展示一些有规则的数据 整齐 简介 布局方便 主要分三类：
a.无序列表(列表项自动带点) <ul> <li><li> <li></li> ... </ul> b.有序列表(列表项带序号) <ol> <li><li> <li></li> ... </ol> c.自定义列表(分层dt为首层) <dl> <dt></dt> <dd></dd> <dd></dd> <dt></dt> <dd></dd> <dd></dd> ... </dl>
注：可使用list-style:none配合padding:0和marggin:0去除列表的特殊格式
5 表格table
页面早期布局的方式，类似于excel工具，结构比较简单，结构固定 有固定的行和列，缺点是：对于复杂布局，会出现嵌套多层，比如：表格里面嵌套表格 新版Vue+ElementUi组件它常用组件包含了table
1表格三要素：行、列、单元格
-
行：单元格水平组成的
-
列：单元格垂直组成的
-
table:表示声明一个表格
-
tr:表示表格中的一行
-
td:表示一个单元格
比如：生成一个三行两列的表格 <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
2.常用属性：
-
border 表示表格边框
-
bgcolor:表格的背景颜色 table和tr标签都可以设置
-
width:表格的宽度 可以写百分比，也可以写像素
-
cellpadding:设置表格的内边距，元素和他自己边框的距离
-
cellspacing:设置表格的外边距，自己的边框和其它边框的距离
-
align:水平对齐方式 table tr td 都可以使用 left right center
-
valign:垂直对齐方式 tr td (需要设置表格高度) top middle bottom
3.table:如果一个单元格展示不了需要的内容？涉及到单元格合并的问题
-
跨行：rowspan 可以把多行的td合并在一起
-
跨列：colspan 可以把一行的多个td合并在一起
<!--完整的表结构-->
<table border="1" width="50%" >
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<!--自带加粗 居中-->
<th>员工姓名</th>
<th>员工工资</th>
</tr>
</thead>
<!--表格主题 显示普通数据-->
<tbody>
<tr>
<td>张三</td>
<td>8000</td>
</tr>
<tr>
<td>李四</td>
<td>8300</td>
</tr>
<tr>
<td>李四</td>
<td>7300</td>
</tr>
</tbody>
<!--表格尾部 归总的数据-->
<tfoot>
<tr>
<td>平均工资</td>
<td>7000</td>
</tr>
</tfoot>
</table>
</body>
6 表单form
表单：可以将输入的信息（字符串 数字类型 文件类型 其他...）提交给服务器 而且 Vue+Element常用的组件
语法结构：
<form name="定义表单名称" action="提交服务器的地址" method="请求方式 常用get/post"
enctype="数据的提交方式 默认是按照字符串形式提交 也可以修改成附件提交"
οnsubmit="表单提交事件 通常用于实现js验证">
</form>
<!--表单组件的语法-->
<input type="值" name="参数名" value="参数值/也是默认值"/>
type="值的范围有哪些"
1.text:默认值 表示文本框
<input/> 等价于 <input type="text"/>
2.password:密码框
3.radio:单选框（比如状态 性别...）
4.checkbox:多选框（爱好 学科...）
5.reset:重置按钮（清空表单里的所有数据）
6.date:日期组件（yyyy--mm--dd）
7.file:文件域（上传文件的组件）
8.hidden：隐藏域（编号 id QQ号码 需要提交，但是不可见的数据）
----自带提交功能的组件----
9.submit:提交数据
10.image:图片提交按钮
11.<button>自带提交功能</button>
12.button:是自定义按钮 没有任何功能 就可以通过js自定义实现
------------------------
13.下拉框
<select> 声明下拉框
<option>一月</option> 每个选项
<option>二月</option>
</select>
14.多行文本域
<textarea rows="控制行" cols="控制列" >
备注 个人简介 文章...
</textarea>
表单的特殊状态：任何表单元素都可以添加下面的属性
1.只读状态：readonly 只可以浏览 不可以修改
可以复制 可以提交到服务器
2.禁用状态：disabled 不能提交到服务器
注意：
-
表单元素 必须添加一个name值
-
单选框和复选框 必须提供value值 默认是on
面试题： get请求和post请求的区别:
-
安全性：post相比get方式更安全，因为get是地址栏显示参数
-
长度限制：get是地址栏显示，但是有长度限制，是浏览器来控制的，浏览器不同限制不同
大约1k-2k左右
post请求理论上没有长度限制
-
上传文件：get是地址栏显示 无法提交文件内容，所以想上传文件只能发送post请求
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
