HTML5的基本标签详解与运行截图

目录

 

HTML默认元素

HTML基本元素

HTML表格元素

HTML列表元素

HTML表单元素


 

HTML默认元素

<!DOCTYPE html><!--告诉浏览器要处理的是html文档-->
<html lang="en"><!--文档中html的开始,其中lang是html的一个语言属性,这里默认en是英语的意思-->
<head><!--头元素,在html下面,提供有关文档内容和标注信息-->
    <meta charset="UTF-8"><!--meta标签的charset属性是编码的意思-->
    <title>默认元素</title><!--title元素是标题的意思-->
    <!--标签和元素的区别:在这里<title>是一个标签,而 <title>默认元素</title>是一个元素-->
</head><!--这是head元素的结束-->
<body><!--body元素里的内容可以在网页直接输出,当然了body里面也有很多元素-->
<h1>hello world</h1>
hello world
</body><!--body元素的结束-->
</html><!--html元素的结束-->

运行结果

HTML基本元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本元素</title>
</head>
<body>
hello world1
<br><!--这是换行的意思-->
<a href="https://blog.csdn.net/HeZhiYing_">hello world2</a><!--超链接标签,点击是直接在本地刷新窗口不变--><br>
<a href="https://blog.csdn.net/HeZhiYing_" target="_self">hello world2</a><!--_self是默认,等价于上面--><br>
<a href="https://blog.csdn.net/HeZhiYing_" target="_blank">hello world3</a><!--该标签会新建一个窗口--><br>
<b>hello world4</b><!--这是粗体的意思--><br>
<em>hello world5</em><!--这是斜体--><br>
<u>hello world6</u><!--这是下划线--><br>
<s>hello world7</s><!--这是删除线-->
</body>
</html>

运行结果:

HTML表格元素

创建表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
<table border="1px"><!--这是表格标签,border属性是边框的大小,并设为1px,px是像素的意思-->
    <thead><!--这是表头标签-->
    <tr><!--这是行标签-->
        <th>账号</th><!--这是标题列元素有加粗-->
        <th>姓名</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody><!--这是表体标签-->
    <tr>
        <td>123</td><!--这是列元素-->
        <td>aaa</td>
        <td>123</td>
    </tr>
    <tr>
        <td>456</td>
        <td>bbb</td>
        <td>456</td>
    </tr>
    <tr>
        <td>789</td>
        <td>ccc</td>
        <td>789</td>
    </tr>
    </tbody>
    <tfoot><!--这是表脚标签-->
    <tr><!--这是行标签-->
        <td>账号</td><!--这是标题列元素有加粗-->
        <td>姓名</td>
        <td>密码</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行结果:

合并表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <th rowspan="2">合并行</th><!--合并行单元格,把改行及下面一个位置也占了-->
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
    </tr>
    <tr>
        <td colspan="2">合并列</td><!--合并列单元格,意思是该列的该元素占两个位置,即把后面的位置也占了-->
        <td>aaa</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
    </tr>
</table>
</body>
</html>

运行结果:

HTML列表元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表元素</title>
</head>
<body>
<ol><!--该标签是有序列表-->
    <li>aaa</li><!--该元素表示列表中的项-->
    <li>bbb</li>
    <li>ccc</li>
</ol>
<ol reversed><!--该标签的reversed元素是降序的意思-->
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>
<ol type="a"><!--该标签是有序列表,默认是1,2,3升序,这里设置为a,b,c-->
    <li>aaa</li><!--该元素表示列表中的项-->
    <li>bbb</li>
    <li>ccc</li>
</ol>
<ol>
    <li>ol的嵌套</li>
    <ol type="a">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ol>
<ul><!--这是无序标签-->
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
</body>
</html>

运行结果:

HTML表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<form><!--该标签用于为用户输入创建HTML表单-->
    <input><!--单行文本框-->
    <br><br>
    <input type="text"><!--默认是text属性,不写也行-->
    <br><br>
    <input type="text" value="hello"><!--value属性是初始化赋值-->
    <input type="text" placeholder="请输入账号"><!--placeholder属性是占位,有提示作用-->
    <input type="text" placeholder="请输入账号" maxlength="8"><!--maxlength是输入的最大长度-->
    <br><br>
    <input type="text" placeholder="请输入账号" size="50"><!--size属性是文本框的大小-->
    <input type="text" value="hello" readonly><!--readonly属性是只读的,该文本框的内容不能编辑-->
    <br><br>
    <input type="password" placeholder="请输入密码"><!--这里是密码,不在文本框中显示具体内容,而是******-->
    <br><br>
    <textarea rows="3" cols="15">helloworldgfffffffffffffffffffffffffhgfhghdgfgjoiiiiiiiiypoipyoiypoiuy
        ohfgjhjhgjhgd</textarea><!--textarea元素是多行文本框,rows属性是行的意思,cols属性是列-->
</form>
</body>
</html>

运行结果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<form>
    <button>按钮</button><!--这种写法可以跟js合作,用来绑定事件-->
    <input type="button" value="按钮"><!--这是button元素,即是按钮的意思,但是没有与js合作功能-->
    <input type="submit" value="按钮"><!--只是提交表单-->
    <br>
    <input type="range" min="-100" max="100" step="100" value="-100">
    <!--这是一个滑表默认在0的位置,min是最小值,max是最大值,step是每滑动一下移动的值,value是设置初始值-->
    <br>
    <input type="number" min="-100" max="100" value="0"><!--可以用上下调节数值-->
    <br>
    <input type="checkbox">选择1<!--这是一个选择复选框, 选了之后还能取消选中-->
    <input type="radio">选择2<!--该选择复选框选择之后就不能取消了-->
    <br>
    <input type="radio" name="a" checked>a<!--name是实现了三选一,checked属性是默认先选中一个-->
    <input type="radio" name="a">b
    <input type="radio" name="a">c
    <br>
    你喜欢干什么
    <select><!--选择框,只能选择下面的东西-->
        <option>写代码</option>
        <option>读书</option>
        <option>玩游戏</option>
    </select>
    <br>
    <input type="text" list="123">
    <datalist id="123"><!--选择框,下面的东西会优先提示,你也可以输入其他的-->
        <option>写代码</option>
        <option>读书</option>
        <option>玩游戏</option>
    </datalist>
</form>
</body>
</html>

运行结果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<form>
    <input type="email"><!--在这里进行识别email-->
    <input type="tel"><!--在这里进行识别tel-->
    <input type="url"><!--在这里进行识别url-->
    <br>
    <input type="date"><!--这个是日期-->
    <br>
    <input type="color"><!--这个是颜色-->
    <br>
    <input type="search"><!--搜索文本框-->
    <br>
    <input type="hidden" value="123"><!--这个是隐藏的,但是传输的时候还是存在的-->
    <input type="image" src="网络头像.JPG" width="120px"><!--嵌入图片按钮并设置大小,高度会默认-->
    <br>
    <input type="file" multiple><!--这里是上传文件,multiple属性可以上传多个文件-->
</form>
</body>
</html>

运行结果:

发布了466 篇原创文章 · 获赞 324 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览