1 简介
Hyper Text Markup Language(HTML)
超文本标记语言
2 使用IDEA编写HTML
新建html项目,新建文件夹,新建html文件。
3 HTML基本语法
3.1 注释
以<!- - 开始
以- ->结尾
<!-- zhushi -->
3.2 DOCTYPE
告诉浏览器该使用什么规范
3.3 META
meta标签描述了网页的相关信息
3.4 标签开始与结束
原标签加/ 表示闭合
<h1> </h1>
3.5 HTML代码补全
敲好标签,然后按tab键,补全开始标签与结束标签
4 标签大全
- <h1>
- <p> 段落标签
- <br/> 换行标签(单标签、自闭合标签,仍是一段话)
- <hr/> 水平线标签
- <strong> 粗体标签
- <em> 斜体标签
- 空格
- > 大于号
- < 小于号
- © 版权符号
- <img src="’ alt=“替代文字” title=“悬停文字”>
- <a href=“” target=“”> 文字</a> target表示在哪里打开,新标签页或当前标签页 <a>标签还有功能性链接,比如打开邮箱等(自行百度搜索)
- <ol> <li>1</li><li>2</li></ol> 有序列表-order-list
- <ul> <li>1</li><li>2</li></ul> 无序列表-unorder-list
- <video> 视频标签,设置controls属性可以播放
- <audio> 音频标签,也可以设置autoplay设置自动播放
4.1 自定义标签
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C</dd>
<dd>php</dd>
<dt>位置</dt>
<dd>111</dd>
<dd>222</dd>
<dd>333</dd>
</dl>
4.2 表格标签
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
单元格跨列使用单元格标签的colspan属性指定跨的列数
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨行使用单元格标签的rowspan属性指定要跨的行数
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
4.3 iframe内联标签
<iframe src="https://www.bilibili.com/" width="1000px" height="800px"></iframe>
4.3.1 通过a标签改变iframe
本来iframe无连接,点击a标签后,a标签将连接送到iframe中,此时iframe显示连接网页
<iframe name="txt" src="" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com" target="txt">点击跳转</a>
4.4 form表单
在页面上点击提交按钮的画,页面会跳转的Second.html上,即action属性知名响应对象
<form action="Second.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>
4.4.1 Get与post的区别
GET:
提交后,网址中会看到提交的信息
POST:
看不到提交的信息,这种方式较为安全,适用于传输大文件
但浏览器同样可以获取到POST传输的信息(自行百度)
4.5 form表单中的属性
<input>标签可设置maxlength设置最长长度
<input type=“radio” value=" " name=" “/>使用name指定组名,实现单选
<input type=“checkbox” value=” " name=" “/>使用name指定组名
<input type=“image” src=” ">图片就是按钮
下拉框:
<select name="列表名称">
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
</select>
<textarea>文本域标签
<input type=“file” name=“files”>文件域标签
<input type=“email” name=“email”> 邮箱验证
<input type=“url” name=“url”>
<input type=“number” name=“num” max=“100” min=“0” step=“1”>
<input type=“range” name=“voice” min=“0” max=“100” step=“2”>滑块
4.6 表单应用
隐藏域 hidden
只读 readonly
禁用 disable
5 表单验证
作用:在前端将不合法的数据过滤一次
5.1 placeholder
placeholder:输入框中提示信息
<p>名字:<input type="text" name="username" placeholder="请输入名字"></p>
5.2 required
要求必须输入
<p>密码:<input type="password" name="pwd" required></p>
5.3 pattern
正则表达式判断
<input type="text" name="diymail" pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$">