- 简介
- 超文本标记语言
- hypertext markup language
- 文件后缀:html或者htm,直接使用浏览器打开
- 超文本标记语言
- 规范
- 不区分大小写
- 包含开始标签和结束标签 ,有些是单独存在的<br/><hr/>
- <html></html><head></head><body></body>
- 操作思想
- 用标签将数据进行封装,通过修改标签的属性值对数据进行修饰
- 常用标签
- 文字标签
- <font><font/>
- 属性:
- size:取值1-7
- color:
- 英文单词
- 十六进制#66cc66
- 属性:
- <font><font/>
- 注释标签
- <!--balbala-->
- 标题标签
- <h1><h1/><h2></h2>....<h6></h6>
- 大小依次变小
- 自动换行
- 水平线标签
- <hr size="3" color="black"/>
- 属性
- size:1-7,表示水平线的粗细
- color
- 属性
- <hr size="3" color="black"/>
- 转义字符
- < <
- > >
- 空格
- & &
- 列表标签
- <dl></dl>
- <dt></dt>
- 上层内容
- <dd></dd>
- 下层内容
- <dt></dt>
- <dl></dl>
- 有序列表
- <ol></ol>
- 属性type,值:1 a i 用于设置序号的样式
- <li></li>
- 无序列表
- <ul></ul>
- 属性:type,值:circle disc square 用于设置标号的样式
- <li></li>
- 图像标签
- <img src="图片路径"/>
- 属性:
- width
- height
- alt:鼠标停留时显示的文字,有些浏览器中无效
- 路径
- 绝对路径
- c:\Users\windows\1.html
- http://www.baidu.com/1.html
- 相对路径
- html和图片在同一路径
- 直接写图片的文件名
- 图片在html的下一层目录
- 写img/1.bmp
- 图片在html的上一层目录
- ../1.bmp
- html和图片在同一路径
- 绝对路径
- 超链接
- 连接资源
- <a href="资源路径">文字</a>
- 属性
- target:设置打开的方式,当前页/新标签页
- _blank
- 新窗口中打开
- _self
- 默认值,当前窗口打开
- _blank
- target:设置打开的方式,当前页/新标签页
- 若不需要打开任何资源
- href="#"
- 定位资源
- <a name="top">顶部</a>
- <a href="#top">回到顶部</a>
- 连接资源
- 原样输出
- <pre>xxx</pre>
- 表格标签
- <table></table>
- 属性
- border
- bordercolor
- cellspacing
- width
- height
- align:居中左右
- 定义1行
- <tr>...</tr>
- 定义单元格
- <td>...</td>
- 定义居中加粗的单元格
- <th>..</th>
- 表格标题
- <caption>...</caption>
- 写在<table>标签的下方
- <caption>...</caption>
- 合并单元格
- 单元格中定义属性colspan\rowspan
- <td colspan="3">...</td>跨列,横向覆盖3个单元格
- 单元格中定义属性colspan\rowspan
- 属性
- <table></table>
- 表单标签
- 典型应用:注册时填写的各项信息
- 可以提交数据至服务器
- <form></form>
- 属性
- action:
- 提交到的地址,默认是当前页面
- method
- 值:get\post
- get是默认
- get有数据大小的限制
- get会在地址栏显示提交的数据
- get的安全级别较低
- get与post 的区别
- 1-get会在请求地址栏中携带提交的数据,post不会携带
- 2-get请求安全级别较低
- 3-get请求有数据大小的限制,post没有限制
- 值:get\post
- enctype
- 文件上传时需要
- action:
- <input type="表单的类型" name="xx"/>
- type属性:
- text
- password
- radio
- 单选框
- name 的值要相同
- 需要value值
- checked="checked"
- 默认选项
- 例子
- 性别<input type="radio" name="sex" value="male"/>男 <input type="raido" name="sex" value="female"/>女
- checkbox
- 复选框
- name 的值要相同
- 需要value值、
- 有checked属性,true/false
- hidden
- file
- submit
- <input type="submit" value="注册"/>
- reset
- button
- type属性:
- 下拉菜单<select name="birth"></select>
- <option value="1990">1990</option>
- 默认项属性
- selected="selected"
- 默认项属性
- <option value="1990">1990</option>
- 文本域textarea
- <textarea cols="10" rows="10"></textarea>
- 隐藏项:
- <input type="hidden"/>
- 提交按钮
- 使用文字形式的按钮<input type="submit" value="注册"/>
- 使用图片形式的按钮<input type="image" src="图片路径"/>
- 重置按钮
- <input type="reset" value="重置"/>
- 普通按钮
- <input type="button" value="按钮"/>
- 属性
- 其他标签
- b加粗
- i倾斜
- u下划线
- s删除线
- p段落标签
- pre原样输出
- sub
- sup
- div
- 自动换行
- span
- 在同一行显示
- 头标签
- <head></head>
- 在头标签中有以下一些标签
- <title>
- <meta>
- 设置页面的一些相关内容
- 设置定时刷新
- <base>
- 设置超链接的基本设置
- <base target="_blank"/>
- 超链接在新窗口中打开
- link
- 引入文件
- 框架标签
- 不能和body标签同时使用
- <frameset></frameset>
- 用来定义页面的区域划分
- 属性
- cols
- 按列划分
- rows,值"80,*"
- 按行划分,
- cols
- <frame name="left" href="1.html"></frame>
- 定义每个区域里面的内容
- 文字标签
来源:oschina
链接:https://my.oschina.net/u/4338183/blog/3837254