HTML基础标签代码实例

HTML基础标签实例

在这里插入代<body><p title="小明日记"id="xiaoming"class="big blue"><small>今天</small>天气很好</p><span><em>今天</em><i>天气</i><strong>很好</strong></span><span><span id="pink">小明</span><span id="skyblue">很开心</span></span><span>8<sub>1</sub></span><span>8 <sup>3</sup> </span></body>码片

行级元素和块级元素

 <style>p {height: 1000px;width: 400px;background-color: pink;}</style>
</head><body><p>今天天气很好</p><span>小明很开心</span><!-- <a id="three"></a> -->
</body>

链接

<body><a href="http://www.baidu.com" target="_blank" id="one">百度一下</a><a href="01标签.html" target="_self">跳转</a><a href="#two">滚动到底部</a><a href="#one" id="two">滚动到百度一下</a><a href="02-行级和块级元素.html" target="_blank">去01中且返回百度一下</a></body>

img图片标签

    <img src="img/1.jpg" alt="这是annie的照片" title="annie" width="500"  >

列表

<body><!-- 无序列表 --><!-- <ul style="list-style: none;">周杰伦的歌<li><a href="#">《夜的第七章》</a></li><li><a href="">《听妈妈的话》</a></li><li><a href="">《最伟大的作品》</a></li><li><a href="">《等你下课》</a></li><li><a href="">《青花瓷》</a></li></ul> --><!-- 有序列表 --><div><dl><div class="dl_item"><dd><img src="./img/1.jpg" alt="" width="200"></dd><dt>annie1-1</dt></div><div class="dl_item"><dd><img src="./img/2.jpg" alt=""width="200"></dd><dt>annie2-1</dt></div><div class="dl_item"><dd><img src="./img/1.jpg" alt=""width="200"></dd><dt>annie3-1</dt></div><div class="dl_item"><dd><img src="./img/2.jpg" alt=""width="200"></dd><dt>annie4-1</dt></div></dl></div>
</body>

表格

<body><table border="1" width="500" cellpadding="10" cellspacing="0"><caption>学生信息表</caption><thead><tr height="100" align="left" valign="top"><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>年龄</th></tr></thead><tbody><tr><td>123456</td><td>annie</td><td>MRS</td><td>人才班</td><td>18</td></tr></tbody><tfoot></tfoot></table><table border="1px" width="500" cellpadding="10px" cellspacing="0"><caption>学生信息表</caption><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>年龄</th></tr></thead><tbody><tr><td>123456</td><td>annie</td><td>MRS</td><td>人才班</td><td>18</td></tr></tbody><tfoot></tfoot></table><table width="500" border="1" height="400"><tr width="40"><td colspan="2"></td><!-- <td></td> --><td></td><td></td><td></td></tr><tr width="40"><td></td><td rowspan="3" colspan="2"></td><!-- <td></td> --><td></td><td></td></tr><tr width="40"><td></td><!-- <td></td> --><!-- <td></td> --><td></td><td></td></tr><tr width="40"><td rowspan="2"></td><!-- <td></td> --><!-- <td></td> --><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td><td></td></tr></table>
</body>

实体运用

 大于号&gt;  小于号&lt;  空格&nbsp;  版权符号&copy;

表单元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=q, initial-scale=1.0"><title>Document</title>
</head><body><!-- ul>li*3>a[class='red']{$} --><!-- <ul><li><a href="" class="red">11</a></li><li><a href="" class="red">2</a></li><li><a href="" class="red">3</a></li></ul> --><form action="" method="post"><fieldset><legend><strong>用户注册</strong></legend><table><tr><td>用户名：</td><td><input type="text" name="usename" placeholder="请输入用户名" size="20"></td></tr><tr><td>密码：</td><td><input type="password" name="password" id="" maxlength="10"></td></tr><tr><td>头像：</td><td><input type="file" name="img" id="" multiple></td></tr><tr><td>性别：</td><td><label for="MR"><input type="radio" name="sex" value="男" id="MR">男</label><label for="MRS"><input type="radio" name="sex" value="女" id="MRS" checked>女</label></td></tr><tr><td>籍贯：</td><td><select name="np" multiple size="2"><option value="北京">北京</option><option value="上海">上海</option><option value="深圳">深圳</option></select></td></tr><tr><td>爱好：</td><td><label for="basketball"><input type="checkbox" name="hobby" id="basketball" checked="checked">篮球</label><label for="game"><input type="checkbox" name="hobby" id="game" checked="checked">打游戏</label><label for="eat"><input type="checkbox" name="hobby" id="eat" checked="checked">吃零食</label></td></tr><tr><td>个人简介:</td><td><textarea name="text" id="" cols="30" rows="10" wrap="hard"></textarea></td></tr><input type="hidden" name="id" value="007"><tr><td></td><td><input type="submit" value="登录"><input type="reset" value="重置"><button>按钮</button><input type="image" src="img/1.jpg" alt="" width="40px"></td></tr></table></fieldset></form></fieldset><fieldset><legend>H5新增控件</legend><div>年月日：<input type="date" name="" id=""></div><div>年月日时间：<input type="datetime-local" name="" id=""></div><div>时间：<input type="time" name="" id=""></div><div>年月：<input type="month" name="" id=""></div><div>年周：<input type="week" name="" id=""></div><hr><form action="" id="f1"><div><input type="number" max="10" min="2" step="2"></div><div><input type="range" name="" id=""></div><div><input type="search" name="" id=""></div><div><!-- <input type="tel" autofocus pattern="[1][3|8|7]\d{9}" placeholder="请输入11位手机号" required> --></div><div><input type="url" name="" id=""></div><div><input type="color" name="" id=""></div><div><input type="email" name="" id=""></div><input type="submit" value="提交"></form><input type="tel" form="f1" autofocus pattern="[1][3|8|7]\d{9}" placeholder="请输入11位手机号" required></fieldset><div><progress max="100" value="80"></progress></div><div><meter value="90" max="100" min="0" optimum="100" low="20" high="80"></meter></div><input type="text" list="color" placeholder="请输入您喜欢的颜色"><datalist id="color"><option>红色</option><option>蓝色</option><option>绿色</option></datalist><div>在表单的输入内容可以放在output元素中<output>0</output></div>
</body></html>

HTML基础标签代码实例相关推荐

vuejs实现添加tag标签代码实例
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
php生成excel完整实例代码,php生成excel列序号代码实例
php生成excel列序号代码实例发布于 2015-02-01 11:55:57 | 112 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext P ...
pytorch生成对抗网络GAN的基础教学简单实例（附代码数据集）
1.简介这篇文章主要是介绍了使用pytorch框架构建生成对抗网络GAN来生成虚假图像的原理与简单实例代码.数据集使用的是开源人脸图像数据集img_align_celeba,共1.34G.生成器与判 ...
input type=range标签用法实例代码
在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要 ...
python代码大全中文注释_零基础小白必看篇：Python代码注释规范代码实例解析操作（收藏）...
本文内容主要介绍了Python代码注释规范代码实例解析,通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下!!! 一.代码注释介绍注释就是对代码的解释和说明 ...
python代码_零基础小白必看篇：Python代码注释规范代码实例解析操作（收藏）
本文内容主要介绍了Python代码注释规范代码实例解析,通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下!!! 一.代码注释介绍注释就是对代码的解释和说明 ...
Java 解析xml 使用SAXReader获取所有标签的key和value的代码实例
Java中使用SAXReader获取xml信息中所有标签的key和value,若是有二级或者继续嵌套,也可以递归获取的代码实例 /*** @author LiXuekai on 2020/7/26*/ ...
java编程找出吸血鬼数字,Java 找到四位数的所有吸血鬼数字基础代码实例
Java 找出四位数的所有吸血鬼数字基础代码实例 /** * 找出四位数的所有吸血鬼数字 * 吸血鬼数字是指位数为偶数的数字,可以由一对数字相乘而得到,而这对数字各包含乘积的一半位数的数字,其中从最 ...
【编程实践】Git命令基础教程和代码实例讲解
Git命令基础教程和代码实例讲解 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git与常用的版本控制工具CVS.Subversion等不同,它采用了分布式版本库的方式. ...
html5的video标签实现对HLS(m3u8格式)的支持（附代码实例）
html5的video标签实现对HLS(m3u8格式)的支持(附代码实例) <script src="https://cdn.jsdelivr.net/hls.js/latest/hl ...

HTML基础标签代码实例

标签

行级元素和块级元素

链接

img图片标签

列表

表格

实体运用

表单元素

HTML基础标签代码实例相关推荐

最新文章

热门文章