HTML
初识网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywordls" content="Java，博客">
<meta name="description" content="交流学习">
<title>lichennan—slide</title>
</head>
<body>
Hello,world
</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>
<p>阿格是只傻狐狸。所有狐狸都这么说。 </p>
<p>因为除了他，没谁愿意接触那只新来的老疤狐狸。</p>
<p>老疤是从草原来的。一个和终年飘雪的雪山完全不一样的地方。</p>
<p>那里有河水，有阳光，有好吃的浆果，也有阴险的猎人。</p>
<p>老疤炫耀他死里逃生的疤痕，但无人羡慕。</p>
<p>除了阿格。“太酷了。”他说。“你还有其他故事吗？”“</p>
<p>当然有，不过——”老疤狡猾地笑，“我饿得厉害，那可没法讲故事。”</p>
<hr>
阿格是只傻狐狸。所有狐狸都这么说。<br/>
因为除了他，没谁愿意接触那只新来的老疤狐狸。<br/>
老疤是从草原来的。一个和终年飘雪的雪山完全不一样的地方。<br/>
那里有河水，有阳光，有好吃的浆果，也有阴险的猎人。<br/>
老疤炫耀他死里逃生的疤痕，但无人羡慕。<br/>
除了阿格。“太酷了。”他说。“你还有其他故事吗？”“<br/>
当然有，不过——”老疤狡猾地笑，“我饿得厉害，那可没法讲故事。”<br/>
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you</em>
<br/>
空 格：
空 格
<br/>
>
<
©版权所有李臣楠
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像</title>
</head>
<body>
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字">
<a href="4.链接标签.html#down">跳转</a>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<a href="2.标签.html" target="_blank">点击我跳转到页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点击我跳转到页面</a>
<br>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
<p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height=120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p><p>
<a href="2.标签.html">
<img src="../resource/image/1.jpg" alt="图像" title="悬停文字" width="100" height="120">
</a>
</p>
<a href="#top">回到顶部</a>
<a name="down"></a>
<a href="mailto:2962012937@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我有惊喜" title="加我有惊喜"/></a>
<img border="0" src="http://wpa.qq.com/pa?p=2:2962012937:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ol>
<hr>
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
</ul>
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>南京</dd>
<dd>黄石</dd>
<dd>武汉</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="3"> 学生成绩</td>
</tr>
<tr>
<td rowspan="2" >李臣楠</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦婷婷</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<video src="../resource/video/轮滑.mp4" controls autoplay></video>
<audio src="../resource/audio/薛之谦尘.mp3" controls autoplay></audio>
</body>
</html>
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src=" " name="hello" frameborder="0" width="2000px" height="1000px"> </iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="1.网页.html" method="post">
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码：<input type="password" name="pwd" hidden value="123456"></p>
<p>性别：
男<input type="radio" value="boy" name="sex" checked disabled>
女<input type="radio" value="girl" name="sex">
</p>
<p>爱好：
<input type="checkbox" value="游戏" name="hobby">游戏
<input type="checkbox" value="轮滑" name="hobby">轮滑
<input type="checkbox" value="乒乓" name="hobby">乒乓
<input type="checkbox" value="刷剧" name="hobby">刷剧
</p>
<p>按钮
<input type="button" name="btn1" value="点击">
<input type="image" src="../resource/image/1.jpg" width="100" height="100">
</p>
<P>下拉框
<select name="列表名称">
<option value="China">中国</option>
<option value="American">美国</option>
<option value="England">英国</option>
<option value="Switzerland" selected>瑞士</option>
</select>
</P>
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<p>文件
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>邮箱
<input type="email" name="email">
</p>
<p>URL
<input type="url" name="url">
</p>
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<p>音量
<input type="range" name="voice" min="0" max="100" step="1">
</p>
<p>搜索
<input type="search" name="search">
</p>
<p>
<label for="mark">点我</label>
<input type="text" id="mark">
</p>
<p>自定义邮箱：
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<input type="submit" disabled>
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
1860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
