html常用标签
- html常用标签
- <!--注释内容-->: --注释
- <a>: --超链接
- <br/>: --换行符（<br>标签只是简单地开始新的一行 而当浏览器遇到<p>标签时 通常会在相邻的段落之间插入一些垂直的间距）
- <center>: --水平居中
- <dd>: --释义内容
- <div>: --文档中的分区或节（division/section）（<div>标签可以把文档分割为独立的 不同的部分 它可以用作严格的组织工具 并且不使用任何格式与其关联 如果用id或class来标记<div> 那么该标签的作用会变得更加有效）
- <dl>: --释义列表
- <dt>: --被释义事物
- <fieldset>: --将表单内的相关元素分组
- <font>: --文本的字体、字体尺寸、字体颜色
- <form>: --为用户输入创建html表单（表单用于向服务器传输数据 不过往往这种交互操作需要服务器端的程序支持）
- <frame>: --frameset中的一个特定的框架（窗口）
- <frameset>: --框架集（用于组织多个框架（窗口） 每个框架存有独立的文档 在其最简单的应用中 frameset元素仅通过使用cols rows等属性规定在框架集中存在多少列或多少行）
- <h1>~<h6>: --h1定义最大的标题 h6定义最小的标题
- <iframe>: --包含另外一个文档的内联框架（即行内框架）
- <img>: --向网页中嵌入一幅图片
alt属性: --只有添加了alt属性 代码才会被W3C正确性校验通过（浏览器无法解释alt时可插入title属性试试看）
- <input>: --用于搜集用户信息（根据不同的type属性值 输入字段拥有很多种形式 可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等）
- <label>: --为input元素定义标注/标记（label元素不会向用户呈现任何特殊效果 不过它为鼠标用户改进了可用性 如果您在label元素内点击文本 就会触发此控件）
- <li>: --列表项目
- <ol>: --有序列表
- <option>: --定义下拉列表中的一个选项
- <optgroup>: --定义选项组
- <p>: --定义段落（p元素会自动在其前后创建一些空白 浏览器会自动添加这些空间 您也可以在样式表中规定）
- <select>: --创建单选或多选菜单（当提交表单时浏览器会提交选定的项目 或收集用逗号分隔的多个选项 将其合成一个单独的参数列表 并且在将<select>表单数据提交给服务器时包括name属性）
- <span>: --用于组合文档中的行内元素
- <table>: --html表格（简单的HTML表格由table tr th td元素组成 tr元素定义表格行 th元素定义表头 td元素定义表格单元 复杂的HTML表格也可能包括caption col colgroup thead tfoot tbody等元素）
- <textarea>: --定义多行的文本输入控件（可通过cols rows属性规定textarea的尺寸 但更好的办法是使用css的height width 属性）
- <td>: --表格中一个单元格
- <th>: --表格内的表头单元格
- <thead>: --表格表头
- <tr>: --表格内的行
- <ul>: --无序列表
- HTML页面结构
- <html>
- <head>(头部)
- <title>(只能放在头部)
- <body>
- 颜色体系
- <body bgcolor=“#006699”>: #006699是HTML中表示颜色的方式(两个数一组分别表示R G B值/十六进制表示)
- 颜色设置: ①Visual Studio内置颜色选择对话框生成RGB值②HTNL预定义颜色③取色器(如DebugBar内置取色器)
- 对于开发人员而言颜色不是重点
- URL & 超链接
- URL: 表示资源在网络中的地址(如: thttp://127.0.0.1/a.htm)
- URI概念大于URL
- <a/>超链接: <a href=‘http://www.rupeng.com’>如鹏网</a>/<a href=‘http://www.rupeng.com’><img src=‘ftp://192.0.0.1/a.jpg’/></a>
- 相对URL: 相对URL表示相对于当前文档的资源 / ”/”表示网站根目录 & ”../”表示父目录 & ”./”或不写任何斜线表示相对于当前路径的目录(站内引用最好使用相对URL)
- <a href=‘a.htm’><img src=‘a.jpg’/></a> / <a href=‘/myphone/a.htm’><img src=‘../images/a.jpg’/></a>
- <a target=>属性: 设为’_blank’就可以在新窗口中打开超链接
- <a name=>属性: 为<a>起名字(<a name=‘last’>) 这样可以通过<a href=‘#last’/>进行跳转
- 图片
- <img/>图片: 插入式/<img alt=>属性: 图片无法显示时显示的文本/<img border>属性: 边框(值为0表示没有边框)/<img width= height=>属性: 图片大小(不指定为图片原始大小/最好指定以避免加载未完成时网页歪七扭八)
- 缩略图: 不要通过设置width height的方式来做 因为会下载原始大图再压缩小(减缓加载速度)/实现方式: 存大小两张图
- 列表 & 表格
- 无序列表: <ul><li>灌水区</li><li>贴图区</li><li>版务区</li></ul>
- 有序列表: <ol></ol>
- <table/>表格: <table><tr><td></td><tr></table>(table表格tr行td列)
<tr>属性: align(可选值: left center right)/valign(可选值: top middle bottom)/子标签对齐方式覆盖父标签的设置
<td>属性: align/valign
<thead>: 建议表头用<thead>代替<tr>
- 表单
- 网站表单与填表
- <form/>标签: 表单/把数据提交到服务器需要将<input> <textarea> <select>等表单元素放到<form/>中
- <form action=>属性: 页面提交对象
- <input/>标签
- <input/>标签: 主要表单元素/<input type=>属性可选值: submit(提交按钮) button(普通按钮) checkbox(复选框) file(文件选择框) hidden(隐藏字段) image(图片按钮password(密码框) radio(单选按钮) reset(重置按钮) text(文本框)
- <input/>标签详解: submit: 点击则提交给服务器(IE下默认按钮文本”提交查询”/通过value属性值修改)/text: size(宽度)readonly(只读)maxlength(可输入的最大长度)/checkbox: check(是否被选中)/radio: name(相同name属性的为一组 不同radio设置不同的value值 这样取name就可以知道谁被选中了)/file: 使用file则form的enctype属性必须设置为multipart/form-data & method属性必须设置为POST
- <select/>标签
- <select/>标签: 用于创建类似于WinForm中的ComboBox或ListBox
- size属性: 显示的列表数量/大于1则为ListBox 否则就是ComboBox
- multiple属性: 则为可多选的ListBox
- <option/>标签: select中的项
- value属性: 项的值(如: <option value=‘1’>北京</option>)
- select属性: option设为选中
- 实现不选择: 添加一个<option value=‘-1’>---不选择---</option>
- <optgroup/>标签: 为<option/>分组/分组本身不会被选择
- label属性: 显示的值
- div(层) span(块)
- <div/>标签: 层/将内容放在层中以统一处理(移动 隐藏等) 非常强大 常用
- <span/>标签”: <div/>将内容放在矩形区块中(影响布局) <span/>则是将内容存为一个整体以进行操作(并不影响布局)
- 其他标签
- <textarea/>标签: 多行文本/cols属性(行数)/rows属性(列数)
- <label/>标签: 在<input type=‘text’/>前写的修饰文本点击时input不会获得焦点而<label/>可以(<label for=‘txt1’>abc</label>)/为被修饰的控件设置一个唯一的id
- <fieldset/>标签: GroupBox效果(将一些空间框起来)/<legend/>标签: 相当于标题
