【HTML5】HTML5基础
<h2 id="html">HTML</h2><h3 id="html-prefont特殊字符列表color属性widthmetatarget属性">HTML –pre、font、特殊字符、列表、color属性、width/meta/target属性</h3>
<pre><code>文本相关：
pre: 段落文字保留html源文档的格式(空格,换行,标签)
特殊字符：
空格 &nbsp;
商标(™) &trade;
黑桃心❤ &hearts;
字体：
基本结构: <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标签讲解
</code></pre>
<h3 id="html-表格table表单forminputselecttextareaiframe框架集emmet急速开发插件">HTML –表格table、表单form(input/select/textarea…)、iframe框架集、Emmet急速开发插件</h3>
<pre><code>（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键…
</code></pre>
<h3 id="html-span盒子div页面布局">HTML –span、盒子div、页面布局</h3>
<pre><code>（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.是块级元素
</code></pre><br><br>
来源：https://www.cnblogs.com/jwnming/p/13634798.html
頁:
[1]