HTML基础
1.基础配置
配置浏览器的路径:
2.我的第一个网页
<!--
注释信息
DOCTYPE :告诉浏览器,我们要使用什么规范
-->
<!DOCTYPE html>
<!-- 快捷键 Ctrl+/ 直接生成注释信息 -->
<!-- head标签代表网页头部 -->
<html lang="en">
<head>
<!-- mate描述性标签,它用来描述网站一些信息 -->
<!-- mate标签一般用来做SEO -->
<meta charset="UTF-8">
<mate name="keywords" content="关于java">
<!-- title标签网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello,world!
</body>
</html>
3.网页基本标签
标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>三级标签</h4>
<h5>三级标签</h5>
段落标签
<!--段落标签-->
<h5>说散就散</h5>
<p>干嘛听苦情歌以为多浪漫</p>
<p>再浪漫都被拆散</p>
<p>说要平平淡淡</p>
<p>长路漫漫一起再共患难</p>
<p>高脚杯 在陪伴</p>
<p>以为决定 多果断</p>
<p>在青春 快过半的阶段</p>
<p>失去了对爱的基本判断</p>
换行标签
<!--换行标签-->
跳出爱的苦与疯 <br/>
很痛也必须放你走<br/>
简单得很遗憾 因为成长<br/>
我明白谁都有苦衷<br/>
毕竟我牵过你的手<br/>
水平线标签
<!--水平线标签-->
<hr/>
字体样式标签
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong><br/>
斜体:<em>i love you </em>
<br/>
注释和特殊符号
<!--特殊符号-->
空 格:
©
<
图像标签
<!--图像标签-->
<!--img学习
src:图片地址(相对地址:推荐使用,绝对地址)
../ --上一级目录
-->
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
超链接标签
<!--使用name做标记-->
<a name="top">顶部</a>
<!--a标签
herf:必填,表示要跳转到那个页面
target:表示窗口在哪里打开
_blank:在新标签中打开
_self:在自己中打开
-->
<!--链接标签-->
<!--文本链接-->
<a href="demo01.html" target="_blank">点击我跳转到页面1</a><br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>
<!--图像链接-->
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
<p>
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
</p>
<p>
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
</p>
<p>
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
</p>
<p>
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
</p>
<p>
<a href="demo01.html">
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>
</p>
<!--锚链接
1.需要一个锚标记
2,跳转到标记
3.#+标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!--功能性链接
邮件链接:mailto
qq链接:QQ推广
-->
<a href="msilto:2420863642@qq.com">点击联系我</a>
列表
<!--有序列表
应用范围:试卷,问答
-->
<ol>
<li>java</li>
<li>Pyhton</li>
<li>yunwei</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<!--无序列表
导航
-->
<ul>
<li>java</li>
<li>Pyhton</li>
<li>yunwei</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>liunx</dd>
<dd>C</dd>
<dd>qianduan</dd>
</dl>
表格
<!--表格table
行 tr rows
列 td
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨行 -->
<td rowspan="2">2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
音频和视频
<!--音频和视频
src:资源路径
controls: 控制条
autoplay:自动播放
-->
<video src="../resources/video/01.mp4" controls></video>
<autio src=""></autio>
页面结构分析
header 标题头部区域内容
footer 脚部区域内容
section web中独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容
iframe内联框架
<!--iframe
src:引用页面路径 地址
name:框架标识名
w-h:宽度高度
-->
<iframe src="https://www.baidu.com/" frameborder="0" width="300" height="300"></iframe>
<iframe src="//player.bilibili.com/player.html?aid=763053076&bvid=BV1u64y1a7hW&cid=409435705&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="500" height="300">
</iframe>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<!--表单from
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
methon:post ,get 提交方式
get :我们可以在url中看到我们提交的信息,不安全,高效
post: 比较安全,传输大文件
value :默认初始值
maxlength :最大长度
size :文本框长度
hidden :隐藏域
readonly :只读
disabled :禁用
placeholder :提示信息
required :非空
pattern :正则表达式
-->
<form action="demo01.html" methon="post">
<!--文本输入框: input type =“username” -->
<p>名字:<input type="text" name="uername" placeholder="请输入名字" required maxlength="10" size="15"> </p>
<!--密码框 : input type=“password” -->
<p>密码: <input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value :单选框的值
name :表示组,同一组只能选择一个
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框
input type =“checkbox”
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="habby">睡觉
<input type="checkbox" value="code" name="habby" checked>敲代码
<input type="checkbox" value="chat" name="habby">聊天
<input type="checkbox" value="game" name="habby">游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>
<!--value是按钮的内容 -->
<input type="button" name="btn1" value="点击变长">
<!--<input type="image" src="../resources/image/1.JPG" width="100" height="100">-->
</p>
<!--下拉框,列表框
selected 默认选中
-->
<p>下拉框国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="indian">印度</option>
<option value="eth" selected>瑞士</option>
</select>
</p>
<!--文本域
cols ,rows 行列
-->
<p>反馈:
<textarea name="textarea" id="12" cols="30" rows="10"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="file">
<input type="button" value="提交">
</p>
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="商品数量" max="100" min="0" step="2">
</p>
<!--滑块
input type ="range"
-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索框:
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<!--自定义邮箱
https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
-->
<p>自定义邮箱:
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单基本语法
<!--表单from
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
methon:post ,get 提交方式
get :我们可以在url中看到我们提交的信息,不安全,高效
post: 比较安全,传输大文件
value :默认初始值
maxlength :最大长度
size :文本框长度
hidden :隐藏域
readonly :只读
disabled :禁用
placeholder :提示信息
required :非空
pattern :正则表达式
-->
文本输入框
<!--文本输入框: input type =“username” -->
<p>名字:<input type="text" name="uername" placeholder="请输入名字" required maxlength="10" size="15"> </p>
<!--密码框 : input type=“password” -->
<p>密码: <input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value :单选框的值
name :表示组,同一组只能选择一个
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
多选框
<!-- 多选框
input type =“checkbox”
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="habby">睡觉
<input type="checkbox" value="code" name="habby" checked>敲代码
<input type="checkbox" value="chat" name="habby">聊天
<input type="checkbox" value="game" name="habby">游戏
</p>
按钮
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>
<!--value是按钮的内容 -->
<input type="button" name="btn1" value="点击变长">
<!--<input type="image" src="../resources/image/1.JPG" width="100" height="100">-->
</p>
下拉框
<!--下拉框,列表框
selected 默认选中
-->
<p>下拉框国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="indian">印度</option>
<option value="eth" selected>瑞士</option>
</select>
</p>
文本域
<!--文本域
cols ,rows 行列
-->
<p>反馈:
<textarea name="textarea" id="12" cols="30" rows="10"></textarea>
</p>
文件域
<!--文件域-->
<p>
<input type="file" name="file">
<input type="button" value="提交">
</p>
邮箱验证
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
URL
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
数字
<!--数字-->
<p>商品数量:
<input type="number" name="商品数量" max="100" min="0" step="2">
</p>
滑块
<!--滑块
input type ="range"
-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
搜索框
<!--搜索框-->
<p>搜索框:
<input type="search" name="search">
</p>
增强鼠标可用性
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
自定义邮箱
<!--自定义邮箱
https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
-->
<p>自定义邮箱:
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
</p>