1.基础
1.HTML标题通过
至
2.段落用标签
定义3.链接通过定义例如:
<a href="http://www.runoob,com">这是一个链接</a>
4.图像标签
<img> eg:<img src="/images/logo.png" width="258"height="39"/>
5.
换行
2.属性
1.class 为元素定义一个或者多个类名
2.id 定义元素的唯一id
3.style 规定元素的行内样式
4.title规定元素的额外信息
5.html水平线标签
6.注释
3.文本格式化
定义粗体文本
定义着重文字 斜体
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字
<img src:"地址"alt:"图片不显示时显示的文字"title:"图片悬停文字"
<a href:“地址” target=“_blank”></a>跳转地址 target表示窗口在哪里打开 _blank在新页面打开 默认_self在本页面跳转
3.1锚链接
先定义一个name <a name="顶部"></a>
1.需要一个锚链接标记
2.然后跳转到标记
<a href:“#顶部”></a> 页面间跳转
3.2邮件连接
mailto:<a href="mailto:839486172@qq.com>点击联系我</a>
qq链接:<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好请联系我" title="你好请联系我"/>
。
3.3块元素
无论内容多少,该元素独占一行(p.h1-h6)
3.4行内元素
内容撑开宽度,左右都是行内元素的可以排在一行(a.strong.em)
3.5列表
无序列表
有序列表
自定义列表 :
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>linux</dd>
<dd>python</dd>
</dl>
<!--描述:dl:标签 dt:列表名称 dd:列表内容 应用范围:公司 列表里都用<li></li>-->
行 tr
列 td
跨行:rowspan
跨列:colspan
<table border="1px" cellspacing="" cellpadding="">
<tr>
<td rowspan="2">范</td>
<td>腾</td>
<td>龙</td>
</tr>
<tr>
<td colspan="2">谷</td>
<td>雨</td>
<td>荷</td>
</tr>
4.视频音频学习
4.1视频标签
src:资源路径
controls:控制条
autoplay:自动播放
谷歌需要:muted=muted 添加这个自动播放
viedo{width height} 设置高度宽度
loop=“loop”循环播放
poster=“imgurl(显示未加载完成的图片)”
<video src="sources/录课1.mp4" controls autoplay></video>
4.2音频文件标签
<audio src="" autoplay="autoplay" controls="controls" loop="loop"></audio>
5.页面结构分析
header 标题头部区域内容
footer脚部区域内容
section web页面中的一块独立区域
article独立的文章内容
aside相关内容或应用常用于侧边栏
nav导航类辅助内容
iframe内联框架 :
<iframe src="http://www.baidu.com" width="1000px" height="800px"></iframe>
src:地址 w-h:宽度高度 name:写名字 可以用超链接标签跳转
6.表单
form表单
action:表单提交的位置 可以是网站,也可以是一个请求处理地址
method:post get 提交方式
get方式提交:我们可以在url中看到我们提交的信息 不安全 但是高效
post方式提交:比较安全,传输大文件
type:指定元素类型 text password checkbox radio submit rest file hidden image button默认为text
name:指定表单元素的名称
vlaue:元素的初始值,type为radio时必须指定一个值
size:指定表单元素的初始宽度 当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength:type为text或者password时。,输入的最大字符数
checked:type为radio或者checked时,指定按钮是否被选中
账号密码框:
<h1>注册</h1>
<form action="2.html" method="get">
名字:<input type="text" name="username"/>
密码:<input type="password" name="pwd" /><br />
<input type="submit" value=“提交”/>
<input type="reset" vlaue=“重置”/>
单选框:
性别:<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女
多选框:
爱好: <input type="checkbox" value="sleep" name="hobby" />睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
<input type="submit" />
<input type="reset" />
<input type="button" name="btn1"value="点击变长" />
<input type="image" src=".."/>
checked默认选中
下拉框:
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="ruishi" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
selected 默认选中
文本域:
反馈:<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
文件域:
文件域:<input type="file" />
<input type="button" value="上传" name="upload" />
验证:
邮件验证:<input type="email" name="email"/>
url验证:<input type="url" name="url"/>
数字验证:<input type="number" name="num" max="100" step="10"/>
滑块验证: <p>
<input type="range" min="100" name="voice" max="100" step="2"/>
</p>
<input type="data"></input>
<input type="tel"></input>
<input type="time"></input>
<input type="color"></input>
搜索框:
<p>
<input type="search" name="search"/>
</p>
表单的应用:只读 realyonly 禁用 disabled 隐藏 hidden
增加鼠标可用性:label标签
表单验证:placeholder 提示信息
required 非空判断 不能为空
pattern 正则表达式:随查询随用
autofocus:自动获得焦点
autocomplete 浏览器根据你之前输入成功过的值记录
autocomplete:on/off
multiple 可以多选文件提交
<style>
修改提示字体
input::placeholder{
color: pink;
}
</style>
</head>
<body>
<div>
<form action="">
<input type="search" name="sear" id="" placeholder="范腾龙" autofocus autocomplete="off">
<input type="file" name="" id="" multiple>
</form>
标签:定义,标签,元素,笔记,表单,HTML5,跳转,type
From: https://www.cnblogs.com/ftDragon/p/16882526.html