HTML
文本相关:
pre: 段落文字 保留html源文档的格式(空格,换行,标签)
特殊字符:
空格
商标(™) ™
黑桃心❤ ♥
字体:
基本结构: <font >文字</font>
颜色: color(属性) 属性值 颜色的英文单词或者RGB值
大小: size(属性) 数字 1~7之间.
列表:
有序列表: ol
无序列表: ul
列表中每一项: li
换行+分割线:
换行: `<br/>`
分割线: `<hr/>`
属性: color:
width: ①数字.px 像素 ②X% 百分比(height无百分比的属性)
meta: 在head标签内,可以设置编码格式:<meta charset=”utf-8” />
target:
可选值:
①”_self” 本页跳转
②”_blank” 创建新的页面跳转
③”_parent” 上级页面跳转
④”_top” 顶级窗口显示
⑤”frame的name值” 自定义值:规定页面的跳转,下面的iframe标签讲解
HTML –表格table、表单form(input/select/textarea…)、iframe框架集、Emmet急速开发插件
(1)表格:table
标题区: thead
行: tr
单元格: th
数据区: tbody
行:tr
单元格: td
<table>
<!-- 标题区 -->
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- 数据区 -->
<tbody>
<tr>
<td>101</td>
<td>于谦</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
常见属性:
-table标签的属性
①align: 表格显示在网页横向位置(居左显示 居中显示 居右显示)
可选值: 'left' 'center' 'right'
②border: 边框宽度 默认值0
③width: 宽度 值='数字px' 值='90%'
④height: 设置表格高度. 值='数字px'
-td标签常见属性:
①colspan:跨列显示: 值 数字.
②rowspan: 跨多行显示 值 数字
③align: 单元格内部内容的水平对齐方式
可选值: 'left' 'center' 'right'
-tr标签的常见属性:
bgcolor: 背景色
(2)表单:form
作用:
指明当前表单内的数据提交到哪儿?
表名当前form内的元素总体是一个表单.
表单属性:
action:提交表单数据到的地址
method:提交的方式
id:表单的id
表单元素的重要属性:
name:辨别元素,如果没有的name的元素不被提交
value:表单元素的默认值,多用于单选框、下拉框、复选框
重要元素:
①input: <input … />
type属性:指明input的类型 例如<input type=”text”/>
值:text:单行文本输入框
password:密码文本框
button:按钮
submit:提交
radio:单选按钮
checkbox:复选框
reset:重置按钮
readOnly属性:只读属性
true、false
size属性: 文本框长度1--12
value属性: 文本对应的值、也可以设定默认值
hidden属性:隐藏
true、false
name属性: 名字,在多个单选按钮和复选框中的分组依据
checked属性:是否被选中、可设定默认选中,多用于复选框和单选框
true、false
disabled属性:是否可用
true、false
②多行文本textarea:<textarea …></textarea>
name属性:名字
cols属性:文本框的列宽(字数)
rows属性:文本框的行高(行数)
注意:一般在标签内的没有内容
③下拉框select:<select><option></option></select>
name属性:名字
option属性:
selected:是否被选中、可以设置默认值;true、false
表单提交数据方式(请求方式)[笔试]
默认可选值:get(默认提交方式)、post、put
get:
语义: 获取数据.(查询功能,搜索,查看,查看详情)
方式: 默认提交方式.
① 将提交的数据追加的浏览器的地址栏
② 格式: **form的action地址?name=value&name=value...**
相对不安全.
提交数据量比较小.(不同浏览器有差异)
优点: get请求方式获得静态资源会被浏览器缓存.
post:
①语义: 提交数据(添加,修改)
②方式: 将数据打包发送,不会显示在地址栏中.
③相对安全.
④提交数据量大(应用: 文件上传)
(3)iframe框架集
在网页内嵌套显示另一张页面
语法: <iframe src="要显示的页面的路径" name=”本框架的名字”></iframe>
属性:
src: 引用的网页路径
height: 高度
width: 宽度
frameborder: 是否显示边框: 1 显示表框 0 不显示边框
name: frame名字
用法:
<iframe name=”t1” src=”默认显示的页面路径”></iframe>
<a href=”页面路径” target=”iframe框架的name值t1”></a> //将页面加载到t1内
(4)Emmet急速开发插件
导入:将jar包拷贝myeclipse或者eclipse安装目录下的dropins目录下
作用: 开发快,智能补全
核心: 用短语+快捷键生成html标签或者xml标签
常用短语:
html:5 生成html5的基本框架
标签名 生成标签
父标签>子标签 生成标签及子标签,例如select>option
标签名*数字 生成标签及个数,例如tr*3>td*3 三行三列
input:type的属性值 生成对应的文本或按钮,例如input:password
input#username 生成id为username的input
table>thead+tbody 生成table下同级的thead和tbody标签
确定快捷键:Enter、ctrl+e、tab键…
HTML –span、盒子div、页面布局
(1)span
特征: ①没有任何特征.
②是行级元素.
应用: 对网页的内容,在不改变格局情况下,样式微调.
示例:
<span style="font-size: 100px;color:blue;">G</span>
(2)div
样式: width height 边框
内补白(内间距) padding: 内容和盒子内壁之间的距离.
边框 border: 盒子厚度.
外补白(外间距) margin: 盒子和外部元素距离.
定位:
绝对定位: 相对于父容器(父标签)的位置
样式:
position:absolute; 相对父标签的位置,忽略同级别元素的位置.
left: 与父容器左边的距离
top:与父容器上边的距离
z-index: 数字, 距离用户的层级.
浮动定位:
float: left; 将div浮动展示,变成行内元素.
(3)网页 格局划分(布局)
①table 完成布局.
优点: 简单
缺点: 效率低,性能差,用户体验差.
②div
优点: 一个div一个加载,性能好.
特点:
a.没有效果.
b.是块级元素