HTML 学习笔记

1 基础标签

<h1> ~ <h6> 	定义标题
<font> 			文本字体 字体尺寸及颜色
<b> 			定义粗体文本
<i> 	        定义斜体文本
<u> 	        定义文本下划线
<center>	    定义文本居中
<p> 	        定义段落
<br>			定义折行
<hr>   			定义水平线

1.1 标题标签

<html><!--定义html文档-->
    <head>  <!--定义关于文档的信息-->
        <meta charset="UTF-8">
        <title>英雄联盟</title> <!--定义文档标题-->
    </head>
    <body><!--定义文档主体-->
        犯我德邦者，非远必诛
    </body>
</html>

展示效果
在这里插入图片描述

1.2 h标签

<html><!--定义html文档-->
    <head>  <!--定义关于文档的信息-->
        <meta charset="UTF-8">
        <title>英雄联盟</title> <!--定义文档标题-->
    </head>
    <body><!--定义文档主体-->
        犯我德邦者，非远必诛
        <h1>盖伦</h1>
        <h2>皇子</h2>
        <h3>寒冰</h3>
        <h4>德邦</h4>
        <h5>剑圣</h5>
    </body>
</html>

效果
在这里插入图片描述

1.3 字体标签

<font color="red">犯我德邦者，非远必诛</font> <!-- font已废弃 -->

在这里插入图片描述

1.4 换行标签

人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在
<br>
我的大刀已饥渴难耐我的大刀已饥渴难耐我的大刀已饥渴难耐

在这里插入图片描述

1.5 居中标签

<center>
    <b>面对疾风吧</b>
</center>

效果
在这里插入图片描述

1.6 段落标签

我的大刀已饥渴难耐我的大刀已饥渴难耐我的大刀已饥渴难耐我的大刀已饥渴难耐我的大刀已饥渴难耐
<p>
    心脏是最强壮的肌肉
</p>

效果
在这里插入图片描述

1.7 加粗，斜体，下划线标签

<p><b> 我从山中来 </b><br></p>
<p><i> 呆着莲花草 </i><br></p>
<p><u> 沙柳河水流淌 </u></p>

效果
在这里插入图片描述

2 图片，音频，视频

<img src="a.jpg" width="389" height="500">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" width="400" height="300"></video>

效果
在这里插入图片描述

3 超链接标签

<a href="https://www.baidu.com" target="_blank">百度一下</a>

点击后直接跳转到百度官网

4 列表标签

有序列表

<ol>
	<li>祖安</li>
	<li>德玛西亚</li>
	<li>恕瑞玛</li>
</ol>

效果
在这里插入图片描述

无序列表

<ul>
    <li>无尽之刃</li>
    <li>海克斯电刃</li>
    <li>魔抗斗篷</li>
</ul>

在这里插入图片描述

5 表格标签

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>英雄名称</th>
        <th>英雄头像</th>
        <th>英雄W技能</th>
        <th>英雄R技能</th>
    </tr>
    <tr align="center">
        <td>剑圣</td>
        <td><img src="jiansheng.png" width="50" height="50"></td>
        <td>冥想</td>
        <td>无极剑道</td>
    </tr>
    <tr align="center">
        <td>寒冰</td>
        <td><img src="hanbing.png" width="50" height="50"></td>
        <td>万箭齐发</td>
        <td>鹰击长空</td>
    </tr>
    <tr align="center">
        <td>盖伦</td>
        <td><img src="gailun.png" width="50" height="50"></td>
        <td>勇气</td>
        <td>坚韧</td>
    </tr>
</table>

在这里插入图片描述

6 布局标签

<div>天龙八部</div>
<div>倚天屠龙记</div>
<span>神雕侠侣</span>
<span>还珠格格</span>

在这里插入图片描述

7 表单标签

表单示例

<form>
    <input type="hidden" name="id" value="123">

    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <br>

    <label for="password">密码：</label>
    <input type="text" name="password" id="password"><br>
    <br>

    性别：
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女</label><br>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">游戏
    <br>
    <br>

    头像：
    <input type="file"><br>
    <br>

    城市：
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>
    <br>

    个人描述：
    <textarea cols="20" rows=""5 name="desc"></textarea><br>
    <br>
    <br>

    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="刷新">
</form>

效果展示
在这里插入图片描述

版权声明：本文为SImple_a原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。