HTML
网页基本信息
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<!--meta,描述性标签，描述网页的一些基本信息-->
<!--一般用来做SEO-->
<meta charset="UTF-8">
<meta name="ccj" content="haha">
<title></title>
</head>
hello world
<body>
</body>
</html>
网页基本标签
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!--段落标签，间距大点-->
<p>这是一个段落</p>
<p>这是一个段落</p>
<!--换行标签，没有间距-->
我我我<br>
你你人人<br>
<!--水平性标签-->
<hr>
<strong>加粗</strong>
<em>斜体</em>
<u>下划线</u><br>
<!--特殊符号-->
空 格
<br>
>大于号
<br>
<小于号
<br>
<!--
特殊符号记忆方式
& ;
-->
图像标签
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
alt属性：当图像无法显示时，显示alt属性中的文本。
推荐用相对地址
-->
<img src="../resources/image/ba.png" alt="Tulip" width="150" height="150">
</body>
</html>
链接标签
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<!--
href属性指定链接地址,当用户点击该链接时,浏览器会打开指定地址的页面
target属性指定在何处打开链接,target="_blank"表示在新窗口打开
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
<br>
<a href="https://www.baidu.com"><img src="../resources/image/ba.png" alt="百度logo"></a>
</html>
<br>
<br>
<br><br><br><br><br><br>
<!--
锚链接
1，需要一个锚标记
2，跳转到标记
3，使用a标签的name属性
也能跳到指定html文件的位置
<a href="4.XXhtml#top">回到顶部</a>
-->
<a href="#top">回到顶部</a>
<！--
功能性链接
邮件链接
QQ链接
-->
<a href="mailto:<692345678@qq.com>">发送邮件</a>
行内元素和块元素
标签会单独占一行，例如P标签，h1等
标签不会独占一行，例如strong标签，a,em
列表
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--无序列表-->
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--自定义列表
dt：列表名称
dd：列表描述-->
<dl>
<dt>选择</dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dd>第三项</dd>
</dl>
</body>
</html>
表格标签
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table,
行 tr
列 td
-->
</body>
<table border="1">
<tr>
<!--colspan表示跨越几列-->
<td colspan="3">姓名</td>
</tr>
<tr>
<!--rospan表示跨越几行-->
<td rowspan="2">张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
</tr>
</table>
</html>
媒体元素
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频 ,-->
<video src="video.mp4" controls autoplay></video>
<audio src="audio.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--
article: 文章
aside: 侧边栏
nav: 导航栏
-->
<header>
<h1>页面标题</h1>
</header>
<section>
<h2>主要内容</h2>
</section>
<footer>
<h1>页面底部</h1>
</footer>
</body>
</html>
iframe内联框架
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
iframe 内联框架
src: 要嵌入的网页地址
width: 嵌入网页的宽度
height: 嵌入网页的高度
name: 嵌入网页的名称
-->
<body>
<iframe src="" name="hello" frameborder="0" width="1000">
</iframe>
<a href="https://www.baidu.com" target="hello">点击</a>
</body>
</html>
初识表单post和get提交
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<h1>登陆注册</h1>
<!--
action:提交表单的地址,可以是网站，也可以是一个请求处理的地址
method:提交表单的方式，get或post
文本框：<input type="text">,name属性表示表单元素的名称
密码框：<input type="password">,name属性表示表单元素的名称
会通过提交到指定的地址，并使用指定的方式进行处理
get方式提交：我们可以通过URL看到我们提交的信息http://localhost:63342/untitled/HTML/tedy.html?username=admin&pwd=1111，不安全，但高效
post方式提交：我们提交的信息不会显示在URL中，安全性高，但不够高效,可以传输大文件
-->
<form action="tedy.html" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit" >
<input type="reset">
</p>
</form>
<body>
</body>
</html>
文本框和单选框，多选框，按钮
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<h1>登陆注册</h1>
<!--
action:提交表单的地址,可以是网站，也可以是一个请求处理的地址
method:提交表单的方式，get或post
value:提交表单的默认值
maxlength:输入框的最大长度
size:输入框的宽度
文本框：<input type="text">,name属性表示表单元素的名称
密码框：<input type="password">,name属性表示表单元素的名称
会通过提交到指定的地址，并使用指定的方式进行处理
get方式提交：我们可以通过URL看到我们提交的信息http://localhost:63342/untitled/HTML/tedy.html?username=admin&pwd=1111，不安全，但高效
post方式提交：我们提交的信息不会显示在URL中，安全性高，但不够高效,可以传输大文件
-->
<form action="tedy.html" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--
name要定成一样
-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--
多选
-->
<p>爱好：
<input type="checkbox" value="reading" name="hobby">阅读
<input type="checkbox" value="swimming" name="hobby">游泳
<input type="checkbox" value="running" name="hobby">跑步
</p>
<!--
按钮
-->
<p>按钮：
<input type="button" name="btn1" value="提交" onclick="alert('提交成功')">
</p>
<input type="submit" >
<input type="reset">
</p>
</form>
<body>
</body>
</html>
列表框文本域和文件域
<!-- This is the basic structure of an HTML file -->
<!DOCTYPE html>
<html lang="en">
<!--网页头部,-->
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<!--
下拉框
-->
<p>城市：
<select name="city">
<option value="beijing" >北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<!--
文本框
-->
<p>用户名：
<textarea name="textarea" rows="5" cols="30"></textarea>
</p>
<!--
文件域
-->
<p>上传文件：
<input type="file" name="file">
</p>
<form action="tedy.html" method="get">
<!--
文本框，要加上name属性，以便提交表单时能够识别,http://localhost:63342/untitled/HTML/tedy.html?textarea=111&username=&pwd=
-->
<p>用户名：
<textarea name="textarea" rows="5" cols="30"></textarea>
</p>
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit" >
<input type="reset">
</p>
</form>
</body>
</html>
搜索框滑块和简单验证
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL 验证-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字：
<input type="number" name=" number" max="100" min="0">
</p>
<!--滑块验证-->
<p>滑块：
<input type="range" name=" number" max="100" min="0">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name=" search" >
</p>
表单的应用
<!--设置只读或隐藏，以及disabled属性,禁用-->
<p>名字：<input type="text" name="username" value="cjf"readonly></p>
<p>密码：<input type="password" name="pwd" hidden="true"></p>
<!--增强鼠标可用性，点击文字跳到对应的文本框-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark" >
</p>
表单初级验证
<!--默认信息，placeholder属性，显示提示信息
required属性，必填项，不填会提示
pattern 正则表达式-->
浙公网安备 33010602011771号