文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
1.什么是html?
- HTML(hyper text markup language) 超文本标记语言
- 文字 图片 音频 视频 动画 于一体
2.html的优势
- 世界知名多数浏览器厂商对html5 的支持
- 具备跨平台
- 根据W3C标准(World wide web Consortiam 万维网联盟)
- 成立于1994年,web技术领域最有权威和巨大影响力的国际中立性技术准机构
W3C标准包括
1.结构化标准语言(html,xml)
2.表现标准语言(css)
3.行为标准(DOM,ECMAscript)
3.html的格式
<iDOCTYPE HTML>
<html>
<head>
<titer>标题<titer>
</head>
<body>
主体
</body>
</html>
4.网页的基本标签
5.图像标签
常用的图像格式
JPG GIF PNG BMP
导入图片语法
<img src="图片路径" alt="图像显示不出就文字代替" title="鼠标悬停提示文字" width="宽" heigth="高">
图片路径分为, 1.相对路经(推荐使用),2.绝对路径(从盘符开始)
超链接
1.页面间的链接(一个页面到另一个页面)
<a href="要跳转的路径" target="在那个窗口打开">xxxxx</a>
- target 常用值
_blank
(在新窗口打开),_self
(在当前窗口打开)
2.锚链接(通常 在回到顶部页面间的跳转中使用)
- 需要一个锚标记
- 跳转到标记
<a name="top">假设top是最顶部</a>
<a href="#top">通过#name名来实现</a>
3.功能性链接
<a href="mailto:3241580944@qq.com">联系我</a>
- mailto: 邮箱链接
- QQ推广有个自动生成代码
6.行内元素和块元素
块元素
- 无论内容多少,该元素独占一行
- (p h1~h6)
行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- (a string em)
7.列表(无序,有序,自定义)
列表是信息资源的一种展示形式
列表的分类
1.有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
2.无序列表
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
3.自定义列表
<dl>
<dt>标题</dt>
<dd>自定义</dd>
<dd>自定义</dd>
<dt>标题</dt>
<dd>自定义</dd>
<dd>自定义</dd>
</dl>
8.表格
表格基本结构
单元格 table
行 tr (rows 行)
列td(cols 列)
跨行 rowspan
跨列 colspan
border(边框)
表格语法
<table border="1px">加上border(边框)标签设置边框宽度
<tr>
<td></td>
</tr>
</table>
行包着列
9.视频和音频
视屏元素 video
音频元素 audio
语法
<video src=“路径” controls></video>
<audio src="路径" controls antoplay></video>
>controls 控制条
>antoplay 自动播放
- 没有控制条就什么都看不到
10.页面的构成分析
header | 标题头部区域的内容 |
---|---|
footer | 标记脚部区域的内容 |
section | web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
常用 header(头部) section(主体) nav(导航内容)
- header 头部
- section 主体
- footer 底部
11.iframe内联框架
一个网站中内嵌一个网站或者是一个音频
语法
<iframe src="引用页面路径地址" name="框架标识名"></iframe>
12.表单(重点)
语法案例
<form action="表单提交的位置" method="get(提交的方式)">
姓名<input type="text" name="user"></input>
密码<input typr="password" name="pwd"></input>
<input type="submit">--提交按钮
<input type="reset">--清空表单
</form>
type
指定元素的类型 默认为text
action
表单提交位置可以是一个网站,也可以是一个请求地址
method
分别有post ,get
提交方式
post
比较安全 传输大文件
get
不安全 传输速度快 不可以传输大文件
submit
提交按钮
reset
重置清空表单按钮
type
type 指定元素的类型 默认为
text
元素名 | 介绍 |
---|---|
text | 文本框 |
password | 密码框 |
Checkbox | 多选框 |
radio | 单选框 |
submit | 提交按钮 |
resit | 清空重置按钮 |
file | 上传文件按钮 |
hidden | 隐藏的 |
image | 图像 |
button | 普通按钮 |
元素名 | 介绍 |
---|---|
name | 指定表单元素的名称 |
value | 设置初始值 type 为radio(单选框)时必须指定一个值 |
size | 指定表单元素的初始宽度 |
maxlength | 设置type 为text或password时输入的最大字符数 |
Checked | 当type为radio(单选框)或checkbox(多选框)时指定按钮是否被选中 |
语法案例
1.按钮
<input type="buttion"> --普通按钮
<input type="image"> --图片按钮
<input type="submit"> --提交按钮
<input type="reset"> --重置按钮
2.单选框
<input type="radio" value="(初始值)sex" name="A" Checked="(默认值)男">男
<input type="radio" value="(初始值)get" name="a">女
`name的值要相同不然都可以选择`
`Checked 设置默认值`
3.多选框
<input type="checkbox" vlaue="(初始值)sex" name="A" Checked="(默认值)男">1
<input type="checkbox" vlaue="(初始值)get" name="b">2
<input type="checkbox" vlaue="(初始值)pot" name="c">3
`name的值可以相同也可以不相同但是推荐相同`
特殊一点的
4.下拉框
<select name="列表名">
<option valuer="(初始值)1">中国</option>
<option valuer="(初始值)2" selected>米国</option>
</select>
selected:默认选中
5.文本框(多行文本)
<textarea name="tetx" cols="10" rows="50"></textarea>
cols:列
rows:行
6.文件域
<input type="file" name="files">
上传文件
功能性表单
1.邮件验证
<input type="email" name="email">
输入如果不是邮箱将会自动报错
2.URL
<inupt type="url" name="url">
输入不是网址会自动报错
3.数字
<input type="number" name="number" max="100" min="0" step="10">
数值不可以大于100小于0 每次可以增加10
max:最大值
min:最小值
step: 每次增加数
一般用于购物数量时
4.滑块
<input type="range" name="range" max="100" min=0 step=1>
数值不可以大于100小于0每次可以增加1
max:最大值
min:最小值
step:每次增加数
一般用于调节音量
5.搜索框
<input type="search" name="search">
13.表单的应用
hidden
隐藏的
readonly
只读
disabled
禁用
语法案例
1.增强鼠标光标追踪
<label for="id">你点我</label>
<input type="text" id="id">
根据id点击对应的文字光标显示在文本框中
2.表单初级验证
<input type="text" name="user" placeholder="请输入">
<input type="tetx" name="user" required>
<input type="tetx" name="user" pattern="123">
placeholder:在文本框中提示
required:不允许为空
pattern:可以通过正则表达式验证 可以在脚本之家中找到常用的正则表达式