HTML+CSS笔记

HTML

HTML基础

静态页面
- URL常见后缀
  - .htm
  - .html
  - .shtml
  - .xml
动态页面
- 标志性符号？
- URL常见后缀
  - .asp
  - .jsp
  - .php
  - .perl
  - .cgi
注意
- HTML不区分大小写
- 空格与回车在HTML中不起作用
- 注释：
XHTML
- 基于XML的标记语言
- 注意
  - 必须包含文档类型声明 <!DOCTYPE html PUBLIC ..........>
  - 标签和属性必须小写
  - 属性值必须加双引号
  - 使用编码表示特殊字符
    - &amp 代替 &
    - &quot 代替"
    - &apos代替'
    - &gt 代替>
    - &lt 代替<
  - 注释使用

预定义的字符以及它和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
- 显示图片<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" />
  - 多行输入框
    - <textarea name="textarea" ></textarea>
  - 密码字段
    - <input name="表单元素名称" type="password" >
  - 图像域
    - 用图像提交表单
    - <input type="image" name="imageField" />
  - 单选框
    - <input type="radio" name="radio" checked="设置单选框的初始状态"/>
  - 多选框
    - <input type="checkbox" name="复选框名称" checked="设置复选框的初始状态"/>
  - 文件域
    - <input type="file" name="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" />
- <button>标签
  - 提交按钮(除了 Internet Explorer，type="submit"是其他浏览器的默认值）
    - <button type="submit" value="提交">提交</button>
  - 可点击的按钮（Internet Explorer 的默认值）
    - <button type="button" value="按钮">点击</button>
  - 重置按钮（清除表单数据）
    - <button type="reset" value="重置">重置</button>
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 >...</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'/>
选择器（用来选中特定的html标签）
- id 选择器
  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
  - 以下的样式规则应用于元素属性 :
    实例
    #para1 { text-align:center; color:red; }
  - 注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
- class 选择器
  class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
  - 以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
    实例
    .center {text-align:center;}
  - 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

样式

组成
- 名字：属性
样式须写在选择器的花括号里，样式与样式间用分号隔开
- 如 div{color:red;}
常用样式
- 布局
  - width、height 宽高
  - margin、padding 内外间距
  - float 浮动（清除标准流，即默认排版）
  - clear 清除浮动
  - overflow 处理溢出，也能够清除浮动带来的影响
- 效果
  - color 文字颜色
  - background 背景颜色
  - font-size 字体大小，单位像素（px）

CTF中常用来隐藏信息的标签

注释
<!DOCTYPE>定义文档类型
<head>定义关于文档的信息
<meta>定义关于HTML文档的元信息
<iframe>定义内联框架
- 个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
属性
- hidden 隐藏元素

HTML

HTML基础

预定义的字符以及它和HTML实体的区别

HTML设计

CSS（层叠样式表）

样式

CTF中常用来隐藏信息的标签

相关推荐