HTML
注意:上传的话都要有个name
Hyper Text Markup Language(超文本语言)
W3C(World Wide Web Consortium万维网联盟)标准:
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
注释写法:
基本信息
<!-- head标签代表网页的头部信息-->
<!--title网页标题 -->
<!--meta描述性标签,它用来描述我们网站的一些信息 -->
<!--body标签代表网页主体 -->
网页基本标签:
标题标签h、段落标签p、换行br、水平线hr
粗体strong、斜体em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<p>段落符号1</p>
<p>段落符号2</p>
<br/>换行符号1
<br/>换行符号2
<hr/>
水平线标签
<strong>c粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空格
>>
©版权符号
<<
<hr/>
</body>
</html>
图像标签img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="../resource/image/1.jpg" alt="图片",title="悬停文字",width="200",height="200"/>
</body>
</html>
超链接标签(a标签)
a标签+tab
href必填:表示跳转到哪个页面
target:表示窗口在哪里打开(_blank 在新的页面打开,_self 在自己的页面打开(默认))
锚链接:1、需要一个标记 (使用#)
2、跳转到标记
<a name="top">顶部</a>
....
<a href="#top">点击回到顶部</a>
<a href="图像标签.html#top">点击回到顶部</a>
功能链接(有很多):
<a href="mailto:1769612662@qq.com">点击联系我</a>
列表ol、ul、dl
<!--有序列表-->
<ol>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<!--无序列表-->
<ul>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ul>
<!--自定义列表-->
<dl>
<dt>小标题1</dt>
<dd>你好</dd>
<dd>我好</dd>
<dt>小标题1</dt>
<dd>你好</dd>
<dd>我好</dd>
</dl>
表格标签table
<!--
table表格 tr行
td 列
-->
<table border="1px">
<tr>
<td colspan="3"> 学生成绩</td>
</tr>
<tr>
<td rowspan="2">颜定灵</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">帅哥颜</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
媒体元素
- 视频 video
- 音频 audio
参数有src资源路径(必填)、controls控制条、autoplay自动播放
内联框架iframe
iframe
参数:src:引用页面地址 name:框架标识名
w-h宽度高度
表单学习
表单form
form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get:我们可以在URL中可以看到提交的信息,不安全,高效
post:比较安全,传输大文件
<form action="网页.html" method="get">
<p>名字:<input type="text" name="username"></p>
<p>密码: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
文本框text和单选框radio
都是用input标签
文本框:type为text
参数:value:默认初始值 ,maxlength:最长能写几个字符,size:文本框的长度
单选框:type选radio
value:单选框的值,name:表示组
<p>性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
多选框checkbox和按钮button
<p>爱好(多选):
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">代码
<input type="checkbox" value="chat" name="hobby"> 聊天
<input type="checkbox" name="game" name="hobby">游戏
</p>
<p>
<input type="button" name="button1" value="按下">
</p>
下拉框select(不需要input)、文本域textarea(不需要input)和文件域file
<!--下拉框
selected 指默认选项
-->
<p>国家选项:
<select name="选项" id="">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="UK" selected>英国</option>
</select>
<!--文本域-->
</p>
<textarea name="textarea" cols="30" rows="10"></textarea>
<p>
</p>
<!--文件域-->
<p>
<input type="file" name="file">
<input type="button" value="上传">
</p>
简单验证、搜索框search和滑块range
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL验证-->
<p>网址:
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字验证:
<input type="number" name="number" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<!--滑块-->
<p>音量:
<input type="range" name="range" max="100" min="0">
</p>
表单应用
隐藏域:hidden
只读:readonly
禁用:disabled
表单初级验证
提示信息:placeholder
非空判断:required
正则表达式:pattern