HTML超文本基本标签和使用
标题标签
1.标题标签, 有h1到h6这六个标签, 文字的大小是逐渐减递减
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
2.段落标签, 一般用来写文章锻段落的
<p>人才是最宝贵的资源</p>
<p>当前, 我国"人口红利"正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
3.强调标签, 倾斜标签em, 加粗标签b
<p>当前, 我国<em>"人口红利"</em>正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
<p>当前, 我国<b>"人口红利"</b>正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
4.换行标签br, 这个是没有结尾的标签, 只有一个br
床前名月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
5.分割标签hr, 和br一样也是没有结尾的标签
你好
<hr />
哈哈哈
6.div标签, 没有语义, 代表盒子, 主要是用来布局的
<div><p></p><h1>代表一个盒子</h1></div>
7.span标签, 一般用来包裹文字, 能够让文字更好的被我们选中
<span>我爱你</span>
8.图片标签,img标签
img标签说明:
src引入图片路径, 引入的是本地的图片, 也可以引入在线的图片
alt属性的作用: 如果图片无法加载, 那么就会显示alt里面文本
如果遇到在线的图片引入不进来, 很正常, 尝试换一张图片
<img src="img/login_and_register_background_image.png" alt="图片无法加载" width="200px"/>
<img src="https://img0.baidu.com/it/u=2936523526,719751699&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="图片无法加载" width="300px"/>
9.超链接标签a
href 指定访问页面
指定页面打开方式, _self是默认值, 在当前页面打开, _blank 在新页面打开
<a href="https://www.baidu.com" target="_blank"></a>
10.列表标签 有序列表 无序列表
定义一个有序列表 ol, li
定义一个有序列表, 在列表项前面会自动的加上序号
<ol>
<!-- li代表的是列表项 -->
<li>景明</li>
<li>小红</li>
<li>小明</li>
<li>小帅</li>
</ol>
定义一个无序列表 ol, li
定义一个无序列表, 在列表项前面不会加上序号, 但是会自动加上小圆点
<ul>
<!-- li代表的是列表项 -->
<li>景明</li>
<li>小红</li>
<li>小明</li>
<li>小帅</li>
</ul>
11.表格标签 table
<table>
<!-- tr添加一行 -->
<tr>
<!-- 添加表头 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- tr添加一行 -->
<tr>
<!-- 添加列 -->
<td>张三</td>
<td>18</td>
</tr>
</table>
12.表单标签, 主要负责数据的采集功能
text是默认值, 定义的是单行输入框
用户: <input type="text" name="" id=""><br />
password是密码框
密码: <input type="password" name="" id=""><br />
13.单选框 radio, 如果你想要多个单选框互斥, 需要给他们一个属性name, 把name的值设置为一样的, value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项
提交进去之后根据值来判断是男是女
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
14.复选框checkbox, 需要给他们一个属性name, 把值设置为一样的, value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3">学习
<input type="checkbox" name="hobby" value="4">玩游戏
15.按钮, 用input type="button"也是可以, 但是不常用, button这个标签比较常用
<input type="button" value="这是一个普通的按钮">
<button>这是一个普通的按钮第二种写法</button>
16.文件上传
<input type="file"><br />
17.视频标签, video, controls:显示视频的控制栏, autoplay:自动播放
<video width="400px" controls>
<source src="video/高空秋千.mp4" autoplay/>
</video>
18.定义下拉列表 定义了下拉列表value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项
<select>
<!-- option是选项 -->
<option value="1">红色</option>
<option value="2">绿色</option>
<option value="3">黄色</option>
<option value="4">蓝色</option>
</select>
19.文本域, 用来写文字的, 多行文本框输入
<textarea></textarea>
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 1.标题标签, 有h1到h6这六个标签, 文字的大小是逐渐减递减 -->
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<!-- 2.段落标签, 一般用来写文章锻段落的 -->
<p>人才是最宝贵的资源</p>
<p>当前, 我国"人口红利"正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
<!-- 3.强调标签, 倾斜标签<em>, 加粗标签<b> -->
<p>当前, 我国<em>"人口红利"</em>正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
<p>当前, 我国<b>"人口红利"</b>正加快向"人才红利"转化。东北全面振兴, 人的高质量发展是重要支撑。</p>
<!-- 4.换行标签<br />, 这个是没有结尾的标签, 只有一个<br /> -->
床前名月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
<!-- 5.分割标签<hr />, 也是没有结尾的标签 -->
你好
<hr />
哈哈哈
<!-- 6.div标签, 没有语义, 代表盒子, 主要是用来布局的 -->
<div><p></p><h1>代表一个盒子</h1></div>
<!-- 7.span标签, 一般用来包裹文字, 能够让文字更好的被我们选中 -->
<span>我爱你</span>
<!-- 8.图片标签,img标签 -->
<!-- src引入图片路径, 引入的是本地的图片, 也可以引入在线的图片 -->
<!-- alt属性的作用: 如果图片无法加载, 那么就会显示alt里面文本 -->
<!-- 如果遇到在线的图片引入不进来, 很正常, 尝试换一张图片 -->
<img src="img/login_and_register_background_image.png" alt="图片无法加载" width="200px"/>
<img src="https://img0.baidu.com/it/u=2936523526,719751699&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="图片无法加载" width="300px"/>
<!-- 9.超链接标签<a> -->
<!-- href 指定访问页面 -->
<!-- 指定页面打开方式, _self是默认值, 在当前页面打开, _blank 在新页面打开 -->
<a href="https://www.baidu.com" target="_blank"></a>
<!-- 10.列表标签 有序列表 无序列表 -->
<!-- 定义一个有序列表 <ol><li>-->
<!-- 定义一个有序列表, 在列表项前面会自动的加上序号 -->
<ol>
<!-- li代表的是列表项 -->
<li>景明</li>
<li>小红</li>
<li>小明</li>
<li>小帅</li>
</ol>
<!-- 定义一个无序列表 <ul><li>-->
<!-- 定义一个无序列表, 在列表项前面不会加上序号, 但是会自动加上小圆点 -->
<!-- 无序列表<ul><li> -->
<ul>
<!-- li代表的是列表项 -->
<li>景明</li>
<li>小红</li>
<li>小明</li>
<li>小帅</li>
</ul>
<!-- 11.表格标签 table -->
<table>
<!-- tr添加一行 -->
<tr>
<!-- 添加表头 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- tr添加一行 -->
<tr>
<!-- 添加列 -->
<td>张三</td>
<td>18</td>
</tr>
</table>
<!-- 12.表单标签, 主要负责数据的采集功能 -->
<!-- text是默认值, 定义的是单行输入框 -->
用户: <input type="text" name="" id=""><br />
<!-- password是密码框 -->
密码: <input type="password" name="" id=""><br />
<!-- 13.单选框 radio, 如果你想要多个单选框互斥, 需要给他们一个属性name, 把name的值设置为一样的, value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项 -->
<!-- 提交进去之后根据值来判断是男是女 -->
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
<!-- 14.复选框, <input type="checkbox">, 需要给他们一个属性name, 把值设置为一样的, value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项 -->
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3">学习
<input type="checkbox" name="hobby" value="4">玩游戏
<!-- 15.按钮, 用<input type="button">也是可以, 但是不常用, <button> -->
<input type="button" value="这是一个普通的按钮">
<button>这是一个普通的按钮第二种写法</button>
<!-- 16.文件上传 -->
<input type="file"><br />
<!-- 17.视频标签, <video>, controls:显示视频的控制栏, autoplay:自动播放 -->
<video width="400px" controls>
<source src="video/高空秋千.mp4" autoplay/>
</video>
<!-- 18.定义下拉列表 定义了下拉列表value就是指当你选择这个按钮时, 值为多少, 网页就是通过这个value值, 来做判断我到底选择了哪个选项 -->
<select>
<!-- option是选项 -->
<option value="1">红色</option>
<option value="2">绿色</option>
<option value="3">黄色</option>
<option value="4">蓝色</option>
</select>
<!-- 19.文本域, 用来写文字的, 多行文本框输入 -->
<textarea></textarea>
</body>
</html>
运行结果如下:
总结:
以上就是一些关于html超文本语言的基本标签的使用。
如果有哪里不懂的地方,可以在评论区讨论, 欢迎大家随时来提问题!!!
如果我有写错的地方, 望大家指正, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!
1765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
