HTML常见标签学习

最新推荐文章于 2024-06-01 23:46:19 发布

努力学习的小白灬

最新推荐文章于 2024-06-01 23:46:19 发布

阅读量341

点赞数

文章标签：学习 java html 前端后端

本文链接：https://blog.csdn.net/m0_52256357/article/details/127715844

版权

1、常见标签

在这里插入图片描述
效果：

代码：

<html>
<head>
   <meta charset="utf-8">
   <title>页面标题</title>
<!--   <base> 标签为页面上的所有链接规定默认地址或默认目标。
      使用 <base> 标签可以使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。-->
   <base href="https://"  />
<!--   连接文档与外部资源-->
   <link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
   <h1>这是标题</h1>
   <p>这是段落</p>
   <a href="https://www.baidu.com">百度网址,点击跳转</a><br>
   <a href="https://www.baidu.com" target="_blank">百度网址，点击跳转到新窗口展示</a><br>
   <img src="https://www.runoob.com/images/pulpit.jpg" with="50" heigh="100"><br>
   一条水平线↓<hr>
   <br>
   <!--哈哈哈哈，这是注释-->
   <b>加粗字体</b> <strong>加粗字体2</strong><br>
   <i>斜体</i><br>
   <sub>下标</sub><sup>上标</sup><br>
   <del>删除字效果</del><br>
   <ins>文字带下划线</ins><br>
   <bdo dir="rtl">文字显示方向为从右到左</bdo><br>
   <q>加引号</q><br>
</body>
</html>

2、表格

在这里插入图片描述
效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html练习02</title>
</head>
<body>
   <table border=1>
 	 <tr>
		<th>序号</th>
		<th>菜名</th>
		<th>数量</th>
     </tr>
     <tr>
		<td>1</td>
		<td>青椒炒肉</td>
		<td>200</td>
     </tr>
     <tr>
		<td>2</td>
		<td>番茄炒蛋</td>
		<td>150</td>
     </tr>
</table>
</body>
</html>

3、列表

在这里插入图片描述
效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html练习02</title>
</head>
<body>
    <!--有序列表-->
	<ol>
		<li>鸡蛋</li>
		<li>牛肉</li>
	</ol>
	<!--无序列表-->
	<ul>
		<li>鸡蛋</li>
		<li>牛肉</li>
	</ul>
	<!--自定义列表-->
	<dl>
		<dt>what？</dt>
		<dd>this</dd>
	</dl>
</body>
</html>

4、表单

在这里插入图片描述

效果：

代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html之表单练习</title>
</head> 
<body>
   <form action="https://www.baidu.com">
      账号：<input type="text" name="account"><br>
      密码：<input type="password" name="password"><br>
      性别：<input type="radio" name="sex" value="male">男
           <input type="radio" name="sex" value="female">女
      <br>
      爱好：<input type="checkbox" name="hobby" value="basketball">篮球
           <input type="checkbox" name="hobby" value="badminton">羽毛球
           <input type="checkbox" name="hobby" value="football">足球
      <br>
      国家：<select value="menu">
            <option selected="selected" value="null">---请选择---</option>
            <option value="Chinese">中国</option>
            <option value="America">美国</option>
            <option value="Canada">加拿大</option>
          </select>
      <br>
      <input type="submit" value="提交">
   </form>
</body>
</html>

5、框架

<!--框架 https://www.runoob.com-->
<iframe src="https://www.runoob.com" with="100" height="100"></iframe>

效果：
在这里插入图片描述

努力学习的小白灬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML常见标签学习

HTML常见标签学习，表格、表单、列表、按钮
复制链接

扫一扫