HTML
HTML基础
-
静态页面
- URL常见后缀
- .htm
- .html
- .shtml
- .xml
- URL常见后缀
-
动态页面
- 标志性符号 ？
- URL常见后缀
- .asp
- .jsp
- .php
- .perl
- .cgi
-
注意
- HTML不区分大小写
- 空格与回车在HTML中不起作用
- 注释：
<!--内容-->
-
XHTML
- 基于XML的标记语言
- 注意
- 必须包含文档类型声明
<!DOCTYPE html PUBLIC ..........> - 标签和属性必须小写
- 属性值必须加双引号
- 使用编码表示特殊字符
&代替&"代替"&apos代替'>代替><代替<
- 注释使用
<!-- -->
- 必须包含文档类型声明
预定义的字符以及它和HTML实体的区别
- HTML中预定义字符是指：
<、>、&、'、"，等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？
这就要说到HTML转义字符串（Escape Sequence）了。
转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。析。如：小于号这样写：<或<大于号这样写：>或>
`
HTML设计
-
常用标签
-
布局容器,可容纳多种HTML元素
<div>...</div><div>...</div>间的内容是独立的一部分，称为DIV层
- 布局容器
<span>...</span>
-
可点击的超链接
<a href="网页地址">访问它</a> -
<iframe src="" />用来在当前 HTML 文档中嵌入另一个文档 -
文本段落
<p>内容</p>- 属性：
- 设置对齐方式 align="..."
- 属性值：left、right、center
- 设置对齐方式 align="..."
- 属性：
-
显示图片
<img src="图片地址" alt="规定图像的替代文本" width="宽" height="高"> -
链接外部CSS:
<link rel="stylesheet" type="text/css" href="theme.css" /> -
字体格式相关的标签
<u>...</u>下划线<b>...</b>黑体字<i>...</i>斜体字<em>...</em>强调文本<strong>...</strong>加重文本
-
6级标题
<h1>...</h1>到<h6>...</h6> -
换行
<br/> -
<hr>水平线 -
表格 table、tr、td
-
无序列表
<ul>...</ul>- 表示每一行
<li>...</li>
- 表示每一行
-
有序列表
<ol>...</ol>- 表示每一行
<li>...</li>
- 表示每一行
-
-
属性
- 每个标签赋予特性功能
- 属性必须在标签内
- 属性与属性之间用空格分隔
- 公共属性(全局属性)
- id 定义元素的唯一id
- class 为HTML元素定义一个或多个类名
- title 定义了元素的额外信息（作为工具条使用）
-
html列表
- 无序表
<ul>...</ul> - 有序表
<ol>...</ol> - 自定义表
<dl>...</dl>- 格式：
<dl>
<dt>coffee</dt>
<dd>自定义列表<dd>
</dl> <dd>是针对前面最近的一个<dt>的表述
- 格式：
- 目录表
<dir>...</dir> - 菜单表
<menu>...</menu>
- 无序表
-
表单
- 使用户可以提交信息，使页面具有交互功能
- 表单属性
- form属性规定输入域所属的一个或多个表单
- form属性必须引用所属表单的id
- 格式：
<form action="表单的处理程序"method="提交数据使用的方法" name="表单名称" enctype="表单信息提交的编码" target="目标窗口的打开方式"></form> - 下拉表单
<select name="" size="大小" multiple>...</select>- multiple表示允许多选
- 每个选项
<option value="选项值" selected>...</option>- selected表示默认被选中
<input />标签-
required属性
- 规定必须在提交之前填写输⼊域（即不能为空）
- required 属性适⽤于以下类型的
<input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。如:<input type="text" name="usr_name" required="required" />
-
单行输入框
<input name="表单元素的名称" type="text" id="name" value="初始值" maxlength="最多字符数" readonly="true=或false"/>
-
多行输入框
<textarea name="textarea" id="textarea" cols="行宽" rows="行高"></textarea>
-
密码字段
<input name="表单元素名称" type="password" id="password">
-
图像域
- 用图像提交表单
<input type="image" name="imageField" id="imageField" src="图片地址"/>
-
单选框
<input type="radio" name="radio" checked="设置单选框的初始状态"/>
-
多选框
<input type="checkbox" name="复选框名称" checked="设置复选框的初始状态"/>
-
文件域
<input type="file" name="fileField" id="fileField">
-
提交按钮
<input type = 'submit' value = '123'/>
-
<input />标签新类型- email类型
- 提交表单时，会自动验证email域的值
<input type="email" name="user_email" />
- url类型
- 提交表单时，会自动验证url域的值
<input type="url" name="user_url"/>
- number类型
- 用于应该包含数值的输入域
<input type="number" name="points" min="1" max="10" />- 属性：
- max允许的最大值
- min允许的最小值
- step允许的数字间隔，如 step=3.则合法数为 0、3、6等
- value规定默认值
- range类型
- 用于应该包含一定范围内数字值的输入域
<input type="range" name="points" min="1" max="10" />- 属性：（和number类型一样）
- Date Pickers（日期选择器）
- HTML 拥有多个可供选取⽇期和时间的新输⼊类型：
date - 选取⽇、⽉、年
month - 选取⽉、年
week - 选取周和年
time - 选取时间（⼩时和分钟）
datetime - 选取时间、⽇、⽉、年（UTC 时间）
datetime-local - 选取时间、⽇、⽉、年（本地时间）
如： 从⽇历中选取⼀个⽇期<input type="date" name="user_date" />
- HTML 拥有多个可供选取⽇期和时间的新输⼊类型：
- email类型
<button>标签- 提交按钮(除了 Internet Explorer，type="submit"是其他浏览器的默认值）
<button type="submit" value="提交">提交</button>
- 可点击的按钮（Internet Explorer 的默认值）
<button type="button" value="按钮">点击</button>
- 重置按钮（清除表单数据）
<button type="reset" value="重置">重置</button>
- 提交按钮(除了 Internet Explorer，type="submit"是其他浏览器的默认值）
-
html中设置图像
<img src="图片文件的地址"/>
-
超链接
<a href="路径" name="l链接名称" title="提示文字" target="打开方式"> 链接显示文本</a>- 图形超链接
<a href="路径"><img src="图片地址" width="宽度" height="高度"/></a>
-
html的多媒体
- 增加背景音
<bgsound src="背景音乐地址" loop="播放次数" />
- 嵌入音频
<bed src="音频地址" autostart="true或false是否自动播放" loop="播放次数"></bed>
- 插入视频
<bed src="视频地址" autostart="true或false是否自动播放" loop="播放次数"></bed>
- 增加背景音
-
HTML的文本与段落
- 插入特殊字符
- 空格用
代替 - &用
& - " 用
" - < 用
&It; - > 用
>
- 空格用
- 在网页中显示文字
- 在
<div id="content">...</div>标签间输入文字
- 在
- 换行符
<br/> - 不换行
<nobr> 不换行文字</nobr> - 文本滚动
<marquee>滚动文本</marquee>
- 插入特殊字符
-
<head></head>标签内- 设置网页编码：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> - 网页跳转：
<meta http-equiv="refresh" content="跳转时间;URL=跳转地址“ />http-equiv属性定义了一个编译指示指令。所有允许的值都是特定HTTP头部的名称
- 网页基址（统一的超链接）
<base href="基址网址" target="打开方式"/>- 网页中的所有超链接地址都在前面加上基址
- 设置网页编码：
-
html中的框架
CSS（层叠样式表）
- 作用：美化并提供更好的管理方法
- 编写方式
- 通过style属性
<div style = "color:red;">...</div>
- 通过style标签
<style>div{color:red;//表示所有标签下的内容为红色}</style>
- 通过link标签
<link rel = 'stylesheet' type = 'text/css' href = 'style.css'/>
- 通过style属性
- 选择器（用来选中特定的html标签）
- id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。- 以下的样式规则应用于元素属性 id="para1":
实例
#para1 { text-align:center; color:red; } - 注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
- 以下的样式规则应用于元素属性 id="para1":
- class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：- 以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例
.center {text-align:center;} - 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
- 以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
- id 选择器
样式
- 组成
- 名字：属性
- 样式须写在选择器的花括号里，样式与样式间用分号隔开
- 如
div{color:red;}
- 如
- 常用样式
- 布局
- width、height 宽高
- margin、padding 内外间距
- float 浮动 （清除标准流，即默认排版）
- clear 清除浮动
- overflow 处理溢出，也能够清除浮动带来的影响
- 效果
- color 文字颜色
- background 背景颜色
- font-size 字体大小，单位像素（px）
- 布局
CTF中常用来隐藏信息的标签
<!--注释-->注释<!DOCTYPE>定义文档类型<head>定义关于文档的信息<meta>定义关于HTML文档的元信息<iframe>定义内联框架- 个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
- 属性
- hidden 隐藏元素