个人遗漏知识的回顾-HTML
常用的一些快捷键:
Windows + e 我的电脑
Ctrl + Tab 网页间不同页面切换
F2 重命名
Ctrl+Shift+S 另存为
前端的一些常识:
前端意义:将效果图生成网页
网页组成:文字、图片、输入框、视频、音频、超链接
Web标准:Html 结构标准;Css 表现标准;Js 行为标准
浏览器内核
-----------------IE----谷歌/欧朋----火狐----苹果
渲染引擎 trident blink gecko webkit
渲染引擎是兼容性问题出现的根本原因
常用前端编辑器
包含(嵌套关系)、并列关系
Dw 历史悠久,设计师使用
Sublime 轻量级,插件好用
Webstorm 重量级,智能
Sublime常用键
Html:xt+tab Html结构代码
tab 补全标签代码
Ctrl+shift+d 快速复制一行
Ctrl+shift+k 快速删除一行
Ctrl+鼠标左键单击 集体输入
Ctrl+h 查找替换
Ctrl+/ 注释
Ctrl+l 快速选中一行
Ctrl+shift+↑(↓) 快速上移(下移)一行
查看----布局
url协议
IIS web服务器 提供网页浏览服务
Url地址 平时所用网址
url协议:规定url地址格式
协议规定格式:
**scheme://host.domain:port/path/filename
**scheme:定义因特网服务类型。常见http/https
**host:定义域主机(http默认主机值www)
**domain:定义因特网域名 比如:w3school.com.cn
**:port 定义端口号(网页默认端口:80)
**path:网页所在服务器上路径
**filename:文件名称
HTML结构标准
Hyper Text Markup Language 超文本标记语言
<!doctype html> <!-- 声明文档类型 -->
<html> <!-- 根标签 -->
<head> <!-- 头标签 -->
<title></title> <!-- 标题标签 -->
</heaed>
<body></body> <!-- 主体标签 -->
</html>
Html与htm是一样的。后缀名不能决定文件格式,只能决定文件打开方式。
**单标签:
<br /> 换行标签
<hr /> 水平线标签
**双标签
<p></p> 段落标签。上下自动生成空白行
<h123456></h123456> 标题标签。seo搜索优化
<font></font> 文本标签
**文本格式化标签
加粗 <strong></strong><b></b> 尽量用strong
倾斜 <em></em><i></i> 尽量用em
删除线 <del></del><s></s> 尽量用del
下划线 <ins></ins><u></u> 尽量用ins
**图片标签
<img src="XXX.jpg" alt="林志玲" title="我的女神" width="300" height="500" />
alt 替换文本 图片不显示的时候显示的文字
title 提示文本
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放
**路径
1.相对路径
文件和图片(html文档)在同一个目录(文件夹),直接写文件名
文件和图片在下一级目录里,文件夹名称/图片(html文件)名称
图片在文件的上一级目录里,../图片(html文件)名称
图片在文件的上一级的其他目录里,../文件夹名称/图片(html文件)名称
总结:找到下一级目录的图片用/
跳出当前目录用../
2.绝对路径
src="文件完整路径"
**特殊字符
空格  
< 小于 <
> 大于 >
& 和 &
¥ 人民币 ¥
? 版权 ©
? 注册商标 ®
℃ 摄氏度 °
± 正负号 ±
× 乘 ×
÷ 除 ÷
2 平方 ²
3 立法 ³
#上标 2<sup>3</sup> 2的三次方
#下标 H<sub>2<sub>O 元素水
**列表
1.无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
type="square" 小方块
type="disc" 实心小圈圈
type="circle" 空心小圈圈
2.有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
</ol>
type="1,a,A,i,Ⅰ"
start="3" 决定开始的位置
3.自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
**音乐标签
<embed src="X.mp3" hidden="true"> hidden作隐藏播放器用。ture/false
**滚动
<marquee behavior="" direction=""></marquee>
中间内容:文字、图片、程序生成的文字或图片
height、width、bgcolor、
-behavior设定滚动方式
alternate:表示在两段之间来回滚动
scroll:表示由一段滚动到另一端,会重复
slide:表示由一段滚动到另一端,不会重复
-direction设置滚动方向
down、left、right、up
loop:设置滚动次数。-1一直滚下去
**超链接
<a href="XXX.html" title="图片标签" target="_self"></a>
href 去往的路径(跳转页面)。 必写
titlr 提示文本。鼠标放到链接上显示的文字
target="_self" 默认值。在自身页面打开
Target="_blank" 打开新页面
**锚点(锚链接)
1.先定义一个锚点。如:<p id="sd"></p>
2.超链接到锚点。<a href="#sd"></a>
**空链 <a href="#"></a> 不确定链接到哪个页面时
**压缩文件下载 不推荐使用
<a href="../../XX.rar">压缩包</a>
**超链接优化写法
<base target="_blank"> 让所有超链接都在新页面打开
**网页编码
<meta charset="UTF-8">
+tab html5标签结构
charset 编码
Ascll
Ansi(扩展的ASCII编码)
Unicode
gb2312 (简单中文)
GBK (全部中文字符、繁体)
Big5(繁体中文)
Utf-8
****meta标签
**name
-<meta name="generator" contect="XX">用以说明生成工具
-网页关键字
<meta name="keywords" content="Java培训...">
keyword关键字用于seo优化
-网页描述
<meta name="description" content="自己网页在搜索引擎下显示的描述!">
-网页制作者
<meta name="Author" contect="你的姓名">告诉SEO站点制作作者
-设定网页被爬取权限
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
all:文件将被检索,页面上链接可以被查询
none:文件将不被检索,且页面上链接不可以被查询
index:文件将被检索
noindex:文件将不被检索,但页面上链接可以被查询
follow:页面上的链接可以被查询
nofollow:文件将不被检索,但页面上链接可以被查询
**http-equiv
-网页重定向
<meta http-equiv="refresh" conten="5;http://www.baidu.com">
不同域名之间相互跳转
**链接外部样式表文件
<link rel="stylesheet" href="1.css">
<link rel="icon" href="XXXX.ico">每个网页抬头的icon小图标
**表格
展示数据,对网页重构的补充
<table border="1" width="500" height="300" cellspacing="20" cellpadding="10" align="center" bgcolor="yellow">
<tr align="center">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
border="1" 边框粗细
bordercolor="red" 边框颜色
cellspacing="20" 单元格与单元格的距离
cellpadding="10" 内容距边框的距离
align="left/right/center"
如果直接给表格用align="center" 表格剧中
如果给tr/td使用,tr或者td内容居中
**表格的标准结构
<table>
<caption><caption> 表头
<thead></thead>
<tbody>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
colspan="2" 合并同一行的2个单元格
rowspan="2" 合并同一列的2个单元格
直接创建一个3*3的表格
table>tr*3>td*3 + Tab键
**表格标题
<th></th>用法同<td>
-内容垂直对齐方式
<td valign="top/middle/bottom"></td>
**表单
表单作用:收集信息
提示信息
表单控件
--表单域
<form action='1.php' method="get">
属性:action:处理信息
Method="get|post"
Get通过地址栏提供传输信息,安全性差
Post通过1.php来处理信息,安全性高
<fieldset> 标签用于从逻辑上将表单中的元素组合起来
--文本输入框
用户名:<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
maxlength="6" 限制输入字符长度
readonly="readonly" 将输入框设置为只读状态(不能编辑)
disabled="disabled" 输入框为激活
name="username" 输入框的名称
value="XXXX" 将输入框内容传给处理文件
--密码输入框
密码:<input type="password" name="pwd">
文本输入框的所有属性对密码输入框都有效
--单选框
<input type="radio" name="gender" checked="checked">男
只有将name的值设置相同的时候,才能实现单选效果。
checked="checked" 设置默认选中项
--下拉列表
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
<option selected="selected">下拉列表选项</option>
</select>
属性:
multiple="multiple" 将下拉列表设置为多选项
selected="selected" 设置默认选中项目
2018.03.28
下一篇: JSF设置多个配置文件