HTML合集
HTML合集1 基础概念2 基本标签3 图像标签4 链接标签5 列表标签6 表格标签7 媒体元素8 内联框架9 表单标签
HTML合集
1 基础概念
xxxxxxxxxx251
3
5<html lang="en">7
8<head>10 11 12 <meta charset="UTF-8">13 <meta name="keywords" content="网页">14 <meta name="description" content="我的第一个网页">15
16 17 <title>我的的一个网页title>18head>19
20<body>22
23hello,world!24body>25html>2 基本标签
xxxxxxxxxx521<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>基本标签title>6head>7<body>8
9<h1>一级标签h1>12<h2>二级标签h2>13<h3>三级标签h3>14<h4>四级标签h4>15<h5>五级标签h5>16<h6>六级标签h6>17
18<p>两只老虎爱跳舞，小兔子乖乖拔萝卜， p>20<p>我和小鸭子学走路，童年是最美的礼物。p>21<p>小螺号呀嘀嘀地吹，我学海鸥展翅飞， p>22<p>不怕风雨不怕累，快快把本领都学会。p>23
24<hr/>26
27两只老虎爱跳舞，小兔子乖乖拔萝卜， <br/>29我和小鸭子学走路，童年是最美的礼物。<br/>30小螺号呀嘀嘀地吹，我学海鸥展翅飞， <br/>31不怕风雨不怕累，快快把本领都学会。<br/>32
33<h1>字体样式标签h1>35
36粗体：<strong>两只老虎爱跳舞strong>37斜体：<em>两只老虎爱跳舞em>38<br/>39
40空 格42空 格43
44<br/>45大于号：>46<br/>47小于号：<48<br/>49版权：©50
51body>52html>3 图像标签
xxxxxxxxxx61<img src="../resources/image/2.jpg" alt="二刺螈" title="悬停文字" width="300" height="500">6<img src="../resources/image/3.jpg" alt="二刺螈" title="悬停文字" width="320" height="320">4 链接标签
xxxxxxxxxx171<a name="top">顶部a><br/>3
4<a href="1.第一个网页.html" target="_blank">点击跳转a><br>11<a href="https://www.baidu.com">点击跳转到百度a><br/>12<a href="#top">回到顶部a><br/>5 列表标签
xxxxxxxxxx301<ol>3 <li>Javali>4 <li>Pythonli>5 <li>前端li>6ol>7<hr>8
9<ul>13 <li>Javali>14 <li>Pythonli>15 <li>前端li>16ul>17
18<dl>24 <dt>学科dt>25
26 <dd>Javadd>27 <dd>Pythondd>28 <dd>Linuxdd>29 <dd>C/C++dd>30dl>6 表格标签
xxxxxxxxxx451<table border="1px">6 <tr>7 8 <td colspan="3">1.1td>9 tr>10 <tr>11 12 <td rowspan="2">2.1td>13 <td>2.2td>14 <td>2.3td>15 tr>16 <tr>17 <td>3.1td>18 <td>3.2td>19 tr>20table>21<br/>22
23<table border="1px">24 <tr>25 <td colspan="3" align="center">学生成绩td>26 tr>27 <tr>28 <td rowspan="2">小明td>29 <td>语文td>30 <td>100td>31 tr>32 <tr>33 <td>数学td>34 <td>100td>35 tr>36 <tr>37 <td rowspan="2">张三td>38 <td>语文td>39 <td>100td>40 tr>41 <tr>42 <td>数学td>43 <td>100td>44 tr>45table>
7 媒体元素
x
1<video src="../resources/video/1.mp4" controls>video>7<br/>8
9<audio src="../resources/audio/Just_a_Joker%20-%20P.T.%20Adamczyk%20-%20The%20Rebel%20Path（纯）.mp3" controls>10audio>8 内联框架
x
1<iframe src="" name="hello" frameborder="0" width="1000px" height="800px">iframe>2<a href="7.媒体元素.html" target="hello">点击看视频a> 9 表单标签
x
1
8<form action="7.媒体元素.html" method="post">9 14 <p>名字：<input type="text" name="username" maxlength="8" size="20" placeholder="请输入用户名" required>p>15 <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required>p>16 17 <p>性别：18 <input type="radio" value="boy" name="sex">男19 <input type="radio" value="girl" name="sex">女20 p>21 22 <p>爱好：23 <input type="checkbox" value="watchTV" name="hobby">看电视24 <input type="checkbox" value="playBasketball" name="hobby">打篮球25 <input type="checkbox" value="watchGC" name="hobby" checked>看鬼畜26 <input type="checkbox" value="OP" name="hobby">27
28 p>29 30 <p>31 <input type="button" name="btn1" value="">32 <input type="image" src="../resources/image/3.jpg" width="30px" height="30px">33 p>34 35 <p>国籍：36 <select name="country" hidden>37 <option value="china" selected>中国option>38 <option value="american">美国option>39 <option value="england">英国option>40 <option value="france" >法国option>41 select>42 p>43 44 <p>备注：45 <textarea name="text" cols="50" rows="10" >点击输入文本46 textarea>47 p>48 49 <p>50 <input type="file" name="files">51 p>52 53 <p>邮箱：54 <input type="email" name="email">55 p>56 57 <p>URL：58 <input type="url" name="url">59 p>60 61 <p>购买数量：62 <input type="number" name="num" max="100" min="10" step="10">63 p>64 65 <p>音量：66 <input type="range" name="voice" max="100" min="0">67 p>68 69 <p>搜索：70 <input type="search" name="search">71 p>72 73 <p>74 <label for="mark">标记label>75 <input type="text" id="mark">76 p>77 78 <p>邮箱检测：79 <input type="text" name="myEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">80 p>81 82 <p>83 <input type="submit" value="注册">84 <input type="reset">85 p>86 87form>