HTML学习总结

最新推荐文章于 2024-10-18 17:23:02 发布

华开富贵,

最新推荐文章于 2024-10-18 17:23:02 发布

阅读量211

点赞数 4

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_63262330/article/details/127563032

版权

1:基础标签

html字体大小<h1>，文本加黑<b>，斜体<i>，下划线<u>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--字体大小-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<hr>
<font face="楷体" size="4" color="fuchsia">HTML基础标签</font>

<p>就在最近，又有着一部热门剧出现了，那就是《唐朝诡事录》
</p>
<hr>
<!--居中-->
<center>又有着一部热门剧出现了
  又有着一部热门剧出现了
  又有着一部热门剧出现了</center>
又有着一部热门剧出现了<br>
<!--加黑 <b>-->
<b>又有着一部热门剧出现了</b><br>
<!--斜体<i>-->
<i>又有着一部热门剧出现了</i><br>
<!--下划线-->
<u>又有着一部热门剧出现了</u>
</body>
</html>

2.图片<img>音频<audio>视频<video>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="a.png" width="1000" height="100%">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

</body>
</html>

3.超链接

使用<a href="网站地址" ></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
</body>
</html>

4.列表标签(排序开头为数字或者点）

<ol>排序时为数字<ul>圆点排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol >
    <li>华</li>
    <li>开</li>
    <li>富</li>
    <li>贵</li>
</ol>
<ul>
    <li>华</li>
    <li>开</li>
    <li>富</li>
    <li>贵</li>
</ul>
</body>
</html>

5.表格标签

合并单元格的两个函数

colspan="2"   合并两个横向的表格 2代表两个表格

rowspan="2"  合并两个竖向的的表格

仅第一张图代码

<table border="1" cellpadding="0" width="500">
  <tr align="center">

    <th colspan="2">品牌logo</th>
    <th>品牌名称</th>
    <th>企业名称</th>

  </tr>
  <tr align="center">
    <td>010</td>
    <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>

  </tr>
  <tr align="center">
  <td rowspan="2">020</td>
  <td><img src="../img/优衣库.png" width="60" height="50"></td>
  <td>优衣库</td>
  <td>优衣库</td>


  </tr>
  <tr align="center">
    <td >030</td>
    <td><img src="../img/小米.png" width="60" height="50"></td>
    <td>小米</td>

  </tr>

6.布局标签

<div>两句话自动分行

<span> 两句话连接在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>不</div>
<div>连接</div>

<span>连接</span>
<span>在一起</span>

</body>
</html>

7.表单标签

<submit>提交按钮

<label for=" ">名称</label>出现一个可输入文本框

<input type="" name="hobby" value="1">名称

<textarea cols="10" rows="1" name="desc"></textarea>文本编辑框

在这里要注意的是选择男女只可以选择一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
  <!--<input type="text" name="username">
  <input type="submit">-->
  <input type="hidden" id="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>

    性别：
    <input type="radio" name="gender" value="1"> 男
    <input type="radio" name="gender" value="2"> 女
  <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>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
    <br>
    个人描述
    <textarea cols="10" rows="1" name="desc"></textarea><br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">
</form>
</body>
</html>