网页基本标签
<!-- 标题标签,最小六级 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>
<!-- 段落标签,相比于换行标签行间距更大 -->
<p>第一段</p>
<p>第二段</p>
<!-- 换行标签 -->
第一行<br/>第二行
<!-- 水平线标签 -->
<hr/>
<!-- 字体样式标签 -->
<strong>粗体</strong>
<em>斜体</em>
<!-- 注释和特殊符号标签 -->
空 格:
大于号:>
小于号:<
版权符号:©
图片标签img
图片标签属性
- src:图片地址,必填,一般写相对路径,从本文件开始,用…/返回上级目录,下转到图片路径
- alt:图片名称,必填,当图片不存在时代替显示的文字
- title:悬停文字,鼠标放在图片上会显示的文字
- width:图片高度
- heigh:图片宽度
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="300" height="350">
链接标签a
链接标签属性
- href:跳转到的页面,必填
- target:跳转打开的位置,blank:在新页面打开,self:在当前页面打开
<a href="a.html" target="_blank">跳转</a>
<a href="https:www.baidu.com" target="_blank">跳转</a>
<!--target也可以填其他标签的name表示将跳转的链接放入对应标签中-->
<iframe src="" name="a" frameborder="0" width="100px" height="90px"></iframe>
<a href="h2.html" target="a">跳转</a>
锚链接
-
锚点:跳转到的地方
<a name="top">顶部</a>
-
跳转点:点击跳转的地方,#前面可以加链接
<a href="a.html#top">回到顶部</a>
-
应用:可以在一个页面地步设置跳转点跳转到另一个页面的顶部
功能性链接
邮件链接:mailto:邮箱地址
<a href="mailto:983982205@qq.com"></a>
列表标签
有序列表ordered list
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表unordered list
<ul>
<li></li>
<li></li>
<li></li>
</ul>
定义列表definition list
dt:definition list title 列表名称
dd:definition list define 列表内容
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
表格标签table
<!--表格标签
border:边框
tr:行
td:列
colspan:跨列
rowspan:跨行
-->
<table border="1px">
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
媒体元素
<!--媒体标签
video:视频标签
audio:音频标签
controls:显示进度条
autoplay:自动播放
-->
<video src="../resources/video/a.mp4" controls autoplay></video>
<audio src="../resources/audio/1.aac" controls autoplay></audio>
页面结构
<header>
<h2>网页头部</h2>
</header>
<nav>
<h2>导航栏</h2>
</nav>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
内联框架iframe
在页面嵌套其他网站的东西
<!--页面结构
src:链接地址,必填
width:宽度
height:高度
name:链接名称
-->
<iframe src="index.html" name="a" frameborder="0" width="100px" height="90px"></iframe>
输入框input
- type:输入内容类型,必填。
- name:输入内容名称,必填
- value:初始值
- disabled:禁用
- hidden:隐藏
- readonly:只读
- placeholder:提示
- required:不允许为空
- pattern:正则表达式验证
type选项:
-
text,文本输入框
maxlength:输入字符最大长度
size:输入框宽度
名称: <input type="text" name="username" value="abc" maxlength="16" size="30" placeholder="输入名称">
-
password,密码输入框,输入字符会隐藏为“.”
密码:<input type="password" name="password" value="123456" maxlength="16" size="30" pattern="^[a-zA-Z]\w{5,17}$"><!--以字母开头,长度在6~18之间,只能包含字母、数字和下划线=""-->
-
radio,单选框,属性必须有value,相同name的选项只能选一个,checked表示默认选中
<p>性别: <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex" checked>女 </p>
-
checkbox,多选框,属性必须有value,一般同一组别写相同name,checked表示默认选中
<p>爱好: <input type="checkbox" value="run" name="hobby">跑步 <input type="checkbox" value="swim" name="hobby" checked>游泳 <input type="checkbox" value="eat" name="hobby">吃 </p>
-
按钮:
<p>按钮: <input type="button" value="普通按钮"> <input type="submit"><!--默认value="提交"--> <input type="reset"><!--默认value="重置"--> <!--图片按钮,src表示图片路径,点击跳转,类似submit提交--> <input type="image" src="../resource/image/1.jpg"> </p>
-
file,文件
<input type="file" name="file"> <input type="button" value="上传" name="upload">
-
email,邮件,只能做简单验证
邮件:<input type="email" name="email">
-
url,链接,只能做简单验证
链接:<input type="url" name="url">
-
number,数字,范围验证,step表示步长,只能是范围边缘的倍数
<!--输入35点击上下调只会显示40或30--> <input type="number" name="num" max="50" min="0" step="10">
-
range,滑块
音量:<input type="range" name="voice" min="0" max="100" step="2">
-
search,搜索
搜索:<input type="search" name="search">
下拉框select
<!--下拉框
selected 默认选择
-->
<p>年龄:
<select name="列表名称" id="">
<option value="选项的值" selected>0-10</option>
<option value="选项的值">10-20</option>
<option value="选项的值">20以上</option>
</select>
</p>
文本域textarea
<!--文本域
cols:显示的列
rows:显示的行
默认行列,但是可以拖动改变大小
readonly:只读
-->
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
锁定位置label
点击后锁定到对应的地方
<label for="a"></label>
<input type="text" id="a">
表单提交form
-
action:提交的位置,可以是网页也可以是请求处理地址
-
method:提交的方式,get或post
get提交:可以在url中获取提交的信息,不安全但高效。
post提交:参数安全,可以传输大文件
<form action="h2.html" method="post" >
<p>名称:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>