标签：-- 标签 元素 笔记 学习 点击 HTML HTML5 nbsp
目录1、HTML简介
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
- HTML5
html5 提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。HTML5基本取代了Flash。
2、基础标签
<!DOCTYPE html> <!-- 告诉浏览器 我们使用什么规范 -->
<!--<html lang="en">-->
<head>
<meta charset="UTF-8">
<title>基本标签学习</title> <!-- 网页标题 -->
</head>
<body>
<!-- 标题标签 -->
<h2>二级标签</h2>
<h1>一级标签</h1>
<!-- 段落标签 -->
<p>ieodeoi</p>
<p>wkjkodsem</p>
<p>edkne3</p>
<!-- 换行标签 -->
odiejiedjekbr <br/>
ejdieoj3 <br/>
edekon3ked <br/>
<!-- 水平线标签 -->
<hr/>
<hr/>
<!-- 粗体，斜体 -->
粗体：<strong>酷酷酷</strong> <br/>
斜体：<em>酷酷酷</em> <br/>
<!-- 特殊符号 -->
空格: :空格: <br/>
大于：> <br/>
小于：< <br/>
版权：© <br/>
</body>
</html>
3、行内元素和块元素
4、页面结构分析
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>页面结构学习</title>
</head>
<body>
<header>
<h2>网页头部</h2>
<p>swdwq</p>
</header>
<section>
<h2>网页主体</h2>
<p>wdwsw</p>
</section>
<footer>
<h2>网页脚步</h2>
<p>wdqw</p>
</footer>
</body>
</html>
5、图像标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<img src="/Picture/1.jpg" alt="图片加载失败" title="好看吗？" width="300px" height="200px">
<a href="链接标签.html#down">跳转</a>
</body>
</html>
6、链接标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!-- 锚标记 -->
<a name = "top1">顶部</a>
<p>南昌航空大学：<a href="https://www.nchu.edu.cn" target="_blank">传送门</a></p> <br/>
<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/1.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/3.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/4.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/5.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/1.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/2.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<a href = "#top1">回到顶部</a>
<a name = "down">底部</a>
<!-- 邮箱功能性链接 -->
<a href="mailto:2625445438@qq.com">点击联系我</a> <br/>
<!-- qq推广 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2625445438&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2625445438:51" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
</body>
</html>
7、列表标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>列表标签学习</title>
</head>
<body>
<ol>
<li>Java</li>
<li>C/C++</li>
<li>Python</li>
<li>Spring</li>
<li>运维</li>
</ol>
<hr/>
<ul>
<li>Java</li>
<li>C/C++</li>
<li>Python</li>
<li>Spring</li>
<li>运维</li>
</ul>
<hr/>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dt>语言</dt>
<dd>Java</dd>
<dd>C/C++</dd>
<dd>Python</dd>
<dd>Spring</dd>
<dd>运维</dd>
</dl>
</body>
</html>
8、表格标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<table border="1px">
<tr>
<!-- colspan跨列 -->
<td colspan="4" >1-1</td>
</tr>
<tr>
<!-- rowspan跨行 -->
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</body>
</html>
9、媒体元素
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<video src="/Video/18207320-刘翔-实验三.mp4" controls autoplay width="300px" height="200px"></video>
<audio src="/Audio/1.mp3" controls></audio>
</body>
</html>
10、iframe内联框架
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=629607053&bvid=BV1Yb4y197wv&cid=309342005&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="400px" height="400px" >
</iframe>
<iframe src="https://www.baidu.com/" frameborder="0" width="400px" height="400px"></iframe>
<iframe src="" name = "hello" frameborder="0" width="320px" height="280px" ></iframe>
<a href="表格.html" target="hello">点击跳转</a>
</body>
</html>
11、表单
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form action表单提交的位置 -->
<form action="基础标签.html" method="GET">
<p>名字：<input type="text" name="username" placeholder="请输入用户名" readonly></p>
<p>密码：<input type="password" name="password" maxlength="8" hidden></p>
<p>
性别：
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃
</p>
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="/Picture/3.jpg" width="300px" height="200px">
</p>
<p>下拉框：
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="meiguo">美国</option>
<option value="ruis">瑞士</option>
<option value="yd">印度</option>
</select>
</p>
<p>反馈
<textarea name="textarea" id="" cols="10" rows="20" required>文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>邮箱：
<input type="email" name="email" required>
</p>
<p>DIY邮箱：
<input type="text" name="diyemail" pattern=".*\\@.*">
</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" max="100" min="0" step="2">
</p>
<p>
<input type="search" name="search">
</p>
<p>
<!-- 增强鼠标可用性 -->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p><input type="submit"> <input type="reset" value="清空表单"></p>
</form>
</body>
</html>
标签：--,标签,元素,笔记,学习,点击,HTML,HTML5,nbsp 来源： https://www.cnblogs.com/lx2001/p/15103318.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。