html学习

最新推荐文章于 2024-06-15 09:09:45 发布

highfivesuga

最新推荐文章于 2024-06-15 09:09:45 发布

阅读量121

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45126405/article/details/123968578

版权

2、基础标签
在这里插入图片描述

<!--html5的标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--定义页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是红色h1</h1>
<h2>我是红色h2</h2>
<h3>我是红色h3</h3>
<h4>我是红色h4</h4>
<h5>我是红色h5</h5>
<h6>我是红色h6</h6>

<hr>

<font face="楷体" size="5" color="#7fff00">闵玧其</font>
<hr>
<p>
相信很多朋友在使用idea的时候都会觉得idea编译器很卡，我电脑内存16g，处理器i7，之前使用idea特别卡，
</p>
甚至上下翻动代码都会卡顿，经过这几点的修改，现在已经一点都不卡了，体验了开飞机的感觉，哈哈。废话不多说，我们直接进入正题。<br>
<hr>
相信很多朋友在使用idea的时候都会觉得<br>
<i>相信很多朋友在使用idea的时候都会觉得</i><br>
<u>相信很多朋友在使用idea的时候都会觉得</u><br>
<b>相信很多朋友在使用idea的时候都会觉得</b><br>
<hr>
<center>zzzzzzz</center>
</body>
</html>

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

3、音频、视频、图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="微信图片_20220316224311.jpg" width="500" height="600"></img>
</body>
</html>

在这里插入图片描述

4、超链接标签&列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">点我有惊喜</a>

<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>水</li>
</ol>

<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>水</li>
</ul>

</body>
</html>

在这里插入图片描述

5、表格标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--border就是一个边框-->
<!--cellspacing对应单元格之间的边框为0-->
<!--width设置表格的宽-->
<table border="1" cellspacing="0" width="500">
    <tr >
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <!align="center"让文字居中>
    <tr align="center" >
        <td>010</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>011</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>012</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
</table>
<br>
<hr>
<br>


<table border="1" cellspacing="0" width="500">
    <tr >

        <th colspan="2">品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <!align="center"让文字居中>
    <tr align="center" >
        <td>010</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>011</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>
        <td rowspan="2">三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>012</td>
        <td><img src="微信图片_20220316224311.jpg " width="60" height="50" ></td>

        <td>三只松鼠</td>
    </tr>
</table>

</body>
</html>

效果图：
在这里插入图片描述
6、表单标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
form:
     action:指定表单提交数据的url
     *表单项数据要想被提交，必须指定其name属性

     methord:指定表单提交方式
     1、get:默认值
     *请求参数会拼接在url后面
     *url的长度有限制 4kb
     2、post:
     *请求参数会在http请求协议的请求体中
     *请求参数无限制
-->
<form action="#" method="post">

    <input type="text" name="username">
    <input type="submit">
</form>
<hr>


<form action="#" method="post">
    <input type="hidden"  name="id" value="123">
    <label for="username">用户名：</label>

    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>
    性别：
    <!-- 要是只能选择其中一个，将name的值定义成相同的，例如都为gender-->
    <!-- 提交到后台的结果可以通过value来改-->
    <input type="radio" name="gender" value="1" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="famale">
    <label for="famale">女</label>
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="1">画画
    <input type="checkbox" name="hobby" value="2">游泳
    <input type="checkbox" name="hobby" value="3">下棋
    <br>
    文件：<input type="file">
    <br>
    城市：
    <select name="city">
        <option value="beijing">北京</option>
        <option>上海</option>
        <option>广州</option>

    </select>
    <br>
    个人描述：
    <textarea  cols="7"rows="7"></textarea>
    <br><input type="submit" value="注册">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
</form>
</body>
</html>

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

highfivesuga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习

5、表格标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><t
复制链接

扫一扫