HTML
超文本标记语言. 由W3C组织维护的一门标记语言. 一种用于描述网页的标记语言.
97年 推出 HTML4.0版本
99年 推出 HTML4.01版本
2014年10月 推出HTML5.0
语法格式:
html文档 通常存储在.html文件 或 .htm文件中
标准的网页格式由三部分组成:
1. 文档声明:
<!DOCTYPE html>
<html>
2. 网页的头部
<head>
</head>
3. 网页的主体
<body></body>
</html>
HEAD 常用子标签
- title : 描述网页的标题, 显示在网页的标签头
- meta : 描述网页的编码, 内容类型, 搜索引擎关键字等等.
- style : 用于描述网页的样式表.
- script : 用于编写网页脚本
- link : 用于引入外部的样式表
如何设置搜索引擎关键字
在head中加入子标签meta (设置关键字)
<meta name="keywords" content="设置的关键字">
在head中加入子标签meta (设置内容)
<meta name="description" content="设置的内容.">
如何描述颜色值:
网页中设置颜色的方式比较多:
1. 通过颜色的单词设置: 例如: 红色 red
2. 通过调色板设置颜色:
方式一: #rgb (R红G绿B蓝),每一个rgb的值都是一个16进制的数字(0-f).
例如: #f00 红色 #0f0 绿色 #000 黑色 #fff白色
方式二: #rrggbb (R红G绿B蓝),每一个rgb的值都是2个16进制的数字(00-ff).
例如: #ff0000 红色 #00ff00 绿色 #000000 黑色 #ffffff白色
方式三: rgb(G值,R值,B值) (R红G绿B蓝),每一个rgb的值都是1个10进制的数字(0-255).
例如: rgb(0,0,0) 黑色 rgb(150,0,0) 暗红色
方式四: rgba(G值,R值,B值,A值)(R红G绿B蓝),每一个rgb的值都是1个10进制的数字(0-255). A值是0-1的浮点型数字 0表示完全透明,1完全不透明
如何引入文件
通过文件的路径, 来引入文件.
路径可以是:
1. 网络地址 (推荐)
2. 本地相对路径 (推荐)
3. 本地绝对路径 (不推荐)
相对路径:
指的是, 相对当前代码在所路径.
例如: 我们编写一个html文件, 文件存 的文件夹是: c://demo1/1.html
在这个html的代码中, 出现了相对路径: images/1.jpg
则1.jpg的全部路径是: c://demo1/images/1.jpg
例如: 我们编写一个html文件, 文件存 的文件夹是: c://demo1/1.html
在这个html的代码中, 出现了相对路径: ../images/1.jpg
则1.jpg的全部路径是: c://images/1.jpg
body标签属性.
- bgcolor : 用于设置背景颜色
- background: 用于设置背景图片
- text : 用于设置文本颜色
body 常用子标签
1. 标题标签
<h1></h1> 一级标题
<h2></h2> 二级标题
...
<h6></h6> 六级标题
2. 文字格式化标签
<b> : 文本加粗
<i> : 斜体
<del>: 删除线
<u> : 下划线
<center>: 居中
<sub>: 定义下标文字
<sup>: 定义上标文字
<strong>: 强调语气
<small>: 小号文字
3. 空格 / 换行 / 段落
在HTM类中, 换行与空格不会被正确的解析. 多个连续的空白符(换行或空格) 会被解析为一个空格.
空格
<br> 换行
<hr> 换行并添加分割线
<p></p> 段落
4. 超链接标签 a
使用方式1. (网页跳转)
<a href="地址">点击跳转的内容</a>
使用方式2. (新窗口打开)
<a href="地址" target="_blank">点击跳转的内容</a>
不常用方式:
1. 发送邮件 (主动调用本地计算机安装的邮箱软件 , 向指定的邮箱地址 ,发送邮件.)
<a href="mailto:邮箱地址">内容</a>
2. 拨打电话 (PC必须安装网络电话软件才可以使用 , 移动端必须具备拨打电话功能.)
<a href="tel:手机号码">内容</a>
3. QQ聊天
<a href="https://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes">点击QQ聊天</a>
4. 锚点使用
网页内容较多时, 可以在网页的某个位置 建立锚点. 然后提供链接,可以快速的跳转到锚点所在位置;
步骤:
1. 建立一个新的锚点
<a name="锚点名称"></a>
2. 编写a标签 链接到锚点位置
跳转到本页的锚点: <a href="#锚点名称">内容</a>
跳转到其他页面的锚点: <a href="地址#锚点名称">内容</a>
长度单位
常用长度单位:
- px : 像素
- em : 字体长度单位 . 1em表示一个文字大小 ,默认16px.
- 百分比: 当前的元素, 占用父元素的百分比大小. 例如: 50% 表示占用父宽度的一半.
不常用长度单位:
- pc : 派卡
- in : 英寸
- mm : 毫米
- cm : 厘米
- m : 米
....
多媒体标签
- 图片 img
属性:
- src : 图片地址
- alt : 当图片加载失败时, 提示的文字.
- width: 宽度
- height: 高度
不建议使用图片时 同时设置宽高. 会拉伸.
当图片的宽和高任意一项发生改变时, 另一项会自动等比缩放.
- 音乐 audio
属性:
- src : 音乐文件的地址.
- controls: 是否显示控制器 , HTML5的boolean属性 , 属性一旦出现即为true.
例如: controls="false" 结果是true
- autoplay: 是否自动播放, HTML5的boolean属性 , 很多非国产浏览器已经不支持了.
- 视频 video
属性:
- src : 音乐文件的地址.
- controls: 是否显示控制器 , HTML5的boolean属性 , 属性一旦出现即为true.
例如: controls="false" 结果是true
- autoplay: 是否自动播放, HTML5的boolean属性 , 很多非国产浏览器已经不支持了.
- width: 视频播放的窗口宽度
- height: 视频播放的窗口高度
- 动画(用于播放flash动画) embed
属性:
- src : 动画资源地址
- width: 动画播放的宽度
- height: 动画播放的高度
常用标签
列表标签
- 有序列表 ol
- 无序列表 ul
在列表标签中, 使用li表示列表中的一行.
案例:
<h3>有序列表</h3>
<ol>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>从前有座山</li>
<li>山里有个庙</li>
<li>庙里有个老和尚</li>
<li>老和尚给小和尚讲故事</li>
</ul>
表格标签 table
在网页中表格由三个标签来组合描述
1. 表格本身 : table
2. 表格中的行: tr
3. 行中的列: td (表头列可以使用th标签, 文字会加粗居中)
iframe 框架
格式:
标签名称: iframe
属性列表:
- src : 网页地址
- width: 引入的窗口高度
- height: 引入的窗口宽度
- frameborder:设置边框的大小, 单位是数字, 表示px
使用iframe框架 来显示超链接的目标页面.
使用步骤:
1. 给iframe标签 加入 name属性
2. 给超链接加入target="iframe的name属性值"
表单标签 form
用于显示与收集用户的信息, 并将信息发送给服务器的标签.
常见用途:
1. 用户的登录和注册
2. 网站站内的检索
3. 搜索引擎
....
常用属性:
1. action : 提交的服务器地址.
2. method : 数据提交的方式
常见方式: GET(默认值): 将表单的所有数据,以键值对的方式, 存储在网址的?后.
POST: 表单中所有的数据 , 以单独的数据包的方式发送给服务器.
表单常用子标签 input
输入组件 , 用于接收用户输入.
属性:
1. name : 输入组件的名称. 当用户选择提交数据时,name作为输入组件值的键发送给服务器.
2. value : 输入组件的内容, 当形态是输入框时,会跟随用户输入的内容改变. 当用户选择提交数据时,value作为发送的键值对的值存在.
3. placeholder : 输入框形态时有效. 作用是提示用户输入.
4. type : 输入框的形态
5. checked : 用于单选复选框形态下, 设置默认选中.
常见的type属性值:
1. text : 默认值, 文本输入框
2. password: 密码输入框, 输入的内容,显示时会被*或·替代.
3. number : 数字输入框, 仅能输入 数字,+,-,.
4. color : 调色板 , 用于选择颜色值.
5. radio : 单选框. value值不显示. 相同name值的单选框, 会被认为是一组单选框. 一组单选框只能选中一个.
6. checkbox: 复选框. value值不显示.
7. file : 文件选择框.
日期类型输入框形态:
1. date : 年月日选择框
2. month : 年月选择框
3. week : 年周选择框
4. time : 时间选择
5. datetime: 年月日时间选择框 (大多浏览器不支持了)
6. datetime-local:基于本地时区的年月日时间选择框
按钮类型输入形态
按钮形态, value属性的值, 是按钮上显示的文字.
1. button : 普通按钮
2. reset : 重置按钮
3. submit : 提交按钮 , 也可以使用<button></button>标签完成提交
4. image : 与submit效果一致, 只是可以通过src指定一个图片作为按钮显示的效果.
不可用的输入框
1. type=hidden : 隐藏的输入框
2. 给input标签添加属性 , disabled. 属于HTML5的boolean属性. 作用是输入框不可用.
3. 给input标签添加属性 , readonly. 属于html5的boolean属性. 作用是输入框只读.
from 表单常用子标签 select标签+option标签 熟悉
select: 下拉选择框,name属性值, 是提交时的键.
option: 下拉选项. value属性值, 是提交时的值. 标签内容是选项展示的内容.
如果仅指定了内容, 未指定value值.则内容就是value的值.
多行输入框 textarea
案例:
<textarea rows="10" cols="30"></textarea>
label 标签
用于事件的传递 .
使用步骤:
1. 在接收事件的元素上, 添加id属性值.
2. 给产生事件的内容, 外层嵌套一个label标签. 并给label指定for属性, 属性值为接收事件的元素id
div与span 标签
DIV : 块元素
span: 行内元素
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
