标签：-- 标签 元素 HTML nbsp 跳转 100 Lesson18
Lesson18：HTML
W3C标准
World Wide Web Consortium（万维网联盟）
国际中立性技术标准机构
W3C标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言（CSS）
-
行为标准（DOM、ECMAScript）
第一个网页
<!DOCTYPE html>
<!-- DOCTYPE 告诉浏览器我们要使用什么规范 -->
<!-- Ctrl+/:注释标签快捷键 -->
<html lang="en">
<head>
<!-- meta:描述性标签，用来描述网站的一些信息 -->
<!-- meta一般用来做seo（seo：搜索引擎优化） -->
<meta charset="UTF-8">
<meta name="keywords" content="26岁大龄菜鸡学前端">
<meta name="description" content="不久我一定会成为技术大牛！">
<title>测试网页</title>
</head>
<body>
测试！
<br>
啊哈！
<hr>
<b>粗体字</b>
<i>斜体字</i>
<p></p>
<!--特殊符号-->
空 格
<p></p>
<>
<p></p>
©版权符号
<br>
<img src="../resources/image/1.jpg" alt="测试图片" title="DNF女机械" width="700" height="718">
<hr>
</body>
</html>
注
-
br换行标签比p段落标签的行间距要小
-
strong和b都是粗体标签
-
em和i都是斜体标签
-
idea的html可以用&加个字母来选择符号
-
BMP格式的图片叫位图
-
锚链接可以用作书签
-
行内元素：不会换行，只会撑开宽度的元素标签
-
块元素：会自动换行的元素标签
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试网页2</title>
</head>
<body>
<!--锚链接:
1.需要一个标记:<a name="top">顶部</a>
2.跳转到标记:<a href="#top">跳转到顶部</a>-->
<a name="top">顶部</a>
<hr>
<!--超链接标签的target值含义：
_blank:在新页面中打开
_self:默认，在当前页面打开-->
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="#top">跳转到顶部</a>
<a name="down">底部</a>
<!--功能性链接：
1.邮件链接：
2.qq链接:-->
<a href="mailto:13560941342@163.com">邮件链接</a>
<hr>
<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>
</body>
</html>
<a href="测试网页2.html#down">跳转</a>
列表与表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试网页3</title>
</head>
<body>
<ol>
<li>有序列表</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>无序列表</li>
<li>2</li>
<li>3</li>
</ul>
<dl>
<dt>自定义列表1</dt>
<dd>1</dd>
<dd>2</dd>
<dt>自定义列表2</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
<table border="1px">
<tr>
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦将</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
<video src="../resources/video/3.mp4" controls autoplay></video>
页面结构分析
<header>头部</header>
<section>主要区域</section>
<footer>底部</footer>
内联框架
<iframe src="测试网页4.html" name="测试网页4" frameborder="0" width="500" height="500"></iframe>
<a href="测试网页3.html" target="测试网页4">跳转</a>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--<form action="测试网页3.html" method="get">-->
<!-- <p><h2>登录</h2></p>-->
<!-- <p>用户名：<input type="text" name="username"></p>-->
<!-- <p>密 码：<input type="password" name="password"></p>-->
<!-- <input type="submit">-->
<!-- <input type="reset">-->
<!--</form>-->
<!--get方式不安全且只能传输少量数据，但高效
post方式安全，可以传输大文件-->
<form action="测试网页3.html" method="post">
<p><h2>登录</h2></p>
<p>用户名：<input type="text" name="username"></p>
<p>密 码：<input type="password" name="password"></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
表单元素格式
<p>用户名：<input type="text" name="username" maxlength="8" size="30" value="李大冶"></p>
<p>密 码：<input type="password" name="password" maxlength="8" size="30" value="123456"></p>
<p>
性别：
<input type="radio" value="boy" name="gender">男
<input type="radio" value="girl" name="gender">女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="girlfriend" name="hobby">女朋友
<input type="checkbox" value="game" name="hobby">打游戏
</p>
<input type="button" name="btn1" value="无效按钮">
<br>
<input type="image" src="../resources/image/1.jpg">
<!-- 图片有自动提交功能-->
<p>
国家：
<select name="select">
<option value="nation1" selected>China</option>
<option value="nation2">Japan</option>
<option value="nation3">American</option>
</select>
</p>
<p>
自我介绍：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</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="10">
</p>
<p>
音量：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<p>
搜索：
<input type="search" name="search">
</p>
<p>
<!--增强鼠标可用性-->
<label for="mark">点击这里选中id对应框:</label>
<input type="text" id="mark" name="testtext">
</p>
表单初级验证
标签：--,标签,元素,HTML,nbsp,跳转,100,Lesson18 来源： https://www.cnblogs.com/learnforlive/p/15173245.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。