W3C标准
- 结构化标准语言（HTML,XML）.
- 表现标准语言（CCS）.
- 行为标准语言（DOM，ECMAscript）
HTML基本结构
<body> <-body>等成对的标签分别叫做开放标签和闭合标签
单独出现的叫自闭合标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="java">
<meta name="description" content="第一次尝试" >
<title>Title</title>
</head>
<body>
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3>
<h4>标签</h4>
<h5>标签</h5>
<h6>标签</h6>
<hr/>
<p>我的</p>
<p>第一次</p>
<p>尝试</p>
我的 <br/>
第一次 <br/>
尝试 <br/>
<strong>Hello World</strong><br/>
<em>Hello World</em>
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../resources/image/1.jpg" alt="帅气自拍" title="悬停" height="250" width="250">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>
<br/>
<a href="基本标签.html" target="_blank">
<img src="../resources/image/1.jpg" alt="帅气自拍" title="点击图片跳转" height="250" width="250">
</a>
<br/>
<a href="#top">回到顶部</a>
<a href="mailto:1536478643@qq.com">点击联系我</a>
</body>
</html>
块元素和行内元素
- 块元素：无论内容多少都会占据一行。
- 行内元素：内容撑开宽度，左右都是行内元素的可以放在一行。
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
<hr/>
<ul>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
<hr/>
<dl>
<dt>学科</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>C</dd>
<dd>Python</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1px">
<tr>
<td >姓名</td>
<td colspan="2">成绩</td>
</tr>
<tr>
<td>一号</td>
<td>80</td>
<td>60</td>
</tr>
<tr>
<td>二号</td>
<td>90</td>
<td>50</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<video src="../resources/video/歌曲.mp3" controls>音乐</video>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="" name="mark" frameborder="0" width="1000px" height="800px">内联</iframe>
<a href="https://123.sogou.com" target="mark">点击跳转</a>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="get">
<p>账号: <input type="text" name="username"> </p>
<p>密码: <input type="password" name="pwd"> </p>
<p>
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<p>
<input type="button" value="点击出发" name="btn" >
<input type="image" src="../resources/image/1.jpg" name="ima">
</p>
<p>国家
<select name="国家" id="国家">
<option value="中国" selected>中国</option>
<option value="韩国" >韩国</option>
<option value="英国" >美国</option>
</select>
</p>
<p>
反馈 <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="file" name="files" >
</p>
<p>亮度:
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<p>邮箱:
<input type="email" name="email" >
</p>
<p>数字:
<input type="number" name="num" max="100" min="0" step="1" value="0">
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单应用
- 隐藏：hidden
- 禁用：disabled
- 只读：readonly
- 提示信息：placeholder
- 必填项（非空判断）：required
|