HTML基本标签详解与运行截图

已于 2022-05-15 10:55:17 修改
阅读量1.8k 收藏 1
点赞数 2
分类专栏： 【Web前端的学习】 文章标签： html5 html 前端
于 2019-08-14 13:17:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeZhiYing_/article/details/99535269
版权

Web前端基础修炼

HTML基本标签详解与运行截图

CSS基本操作详解及截图演示

JavaScript基础(ECMAScript)

JavaScript中DOM操作

JavaScript中BOM操作

目录

HTML默认元素

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>

运行结果：

HTML注册页面

 先看看效果吧

直接上代码吧，我相信你能看懂

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="500px">
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex">女
        </td>
    </tr>
    <tr>
        <td>生日</td>
        <td>
            <select>
                <option>--请选择年--</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
            </select>
            <select>
                <option>--请选择月--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>所在地区</td>
        <td>
            <input type="text" value="河南">
        </td>
    </tr>
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="a" value="未婚" checked="checked">未婚
            <input type="radio" name="a" value="已婚">已婚
            <input type="radio" name="a" value="离婚">离婚
        </td>
    </tr>
    <tr>
        <td>学历</td>
        <td>
            <input type="text" value="本科">
        </td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="love" value="妩媚">妩媚
            <input type="checkbox" name="love" value="可爱">可爱
        </td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea>个人简介</textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="免费注册">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="#">我是会员，立即登录</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <h4>我承诺</h4>
            <ul>
                <li>年满18岁</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>
    </tr>
</table>
</body>
</html>

贺志营
关注
专栏目录
「HTML和CSS入门指南」table 标签详解
a451319296的博客
06-04 677
table 标签是一个重要的标签，在 HTML 中用于创建表格。使用 table 标签可以帮助您以可视化和结构化的方式呈现数据。在使用 table 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。
一二章代码运行截图
weixin_61913369的博客
10-29 328
html 实现桌面截图,使用HTML5 Canvas实现的界面元素截屏功能
weixin_42314680的博客
05-30 500
无论VR、AR和3D打印，其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作，耗时耗力，凡这类工作都会是被新技术革命的地方，自动3D建模技术就是为了解决...ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性：A. 鲁棒跟踪，包括基于标记的跟踪与基于特征的跟踪；随着HTML技术的发展，网页要解决的问题已经远不止是简单的文本信息，而包...
js实现一键任意html元素生成截图功能
最新发布
ACBC12345的博客
07-13 728
js实现一键生成任意html图片功能, 对于出现滚动条看不见的元素也能生成图片
web程序运行流程图
月夜寻花香的博客
10-14 3609
web程序的运行流程
HTML入门笔记（案例+截图）
xiaoluzi8的博客
02-25 2482
案例1.0 hello.html <html> <head> <title>html技术</title> </head> <body> 大家好！ </body> </html> 案例2.0 第一个html页面.html <html> <head> <...
HTML5标签使用方法详解
09-28
一些标签如`<meter>`和`<progress>`提供了表示度量和进度的功能，这对于反馈应用程序的运行状态或文件下载进度非常有用。`<output>`用于显示脚本生成的结果，而`<details>`和`<summary>`则可以创建可折叠的详细信息...
《HTML5开发精要与实例详解》配套源码
11-21
《HTML5开发精要与实例详解》这本书无疑是一本深入学习HTML5的优秀教程，通过配套的源码，我们可以更直观地理解并实践书中的理论知识。 首先，HTML5的新元素是其一大亮点。例如，`<header>`、`<footer>`、`<nav>`和...
jQuery实现基本隐藏与显示效果的方法详解
12-10
本文将深入探讨如何使用 jQuery 来实现基本的元素隐藏与显示效果。 一、jQuery 隐藏（hide）方法 jQuery 的 `hide()` 方法用于隐藏选定的元素。该方法接受两个可选参数： 1. `speed`：指定隐藏动画的速度，可以是...
ios运行html游戏,详解iOS 加载本地HTML，css，js
weixin_32586767的博客
05-30 1304
在IOS开发中，可以通过webView来加载HTML文件步骤如下：1.需要有一个webView，可以通过storyboard拖拽一个 或者 alloc 一个(我在这里是拖拽了一个)，是否要给webView设置delegate ，根据自己的需要决定(如果只是展示页面可以忽略)。2.创建HTML文件、CSS文件、js文件，同样的创建方式，只是后缀名不同。New File -> Other -&g...
使用html2canvas实现浏览器截图的示例代码
09-28
主要介绍了使用html2canvas实现浏览器截图的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
第四章运行截图
weixin_61913004的博客
01-01 364
html笔记05：html、css、javascript综合案例
weixin_30251829的博客
08-07 175
1.首先是html代码： <!-- markup time --> <div class="wrapper wb"> <div class="black-bar wb-bottom"> <div class="battery">22% <i class="fa fa-bolt"></i...
python运行截图_Python + Selenium操作一：截图详解
weixin_39852688的博客
11-28 576
在做测试的时候，空口无凭都是白掐，特别是自动化测试的时候，更需要图片来佐证自己发现的问题话不多说，直接进入主题，技术就是这么直白Webdriver自带截图功能，get_screenshot_as_file()，save_screenshot()，使用起来还是蛮方便的get_screenshot_as_file()方式该方式很简单，通过driver获取该方法，将截图要保存的路径写入就好，先看一张图，...
web快速入门之基础篇-html：10、表格-常用属性：th、align、valign
鲁迷那的专栏—坚持实践后再写出来！
01-28 1054
目录 一、前言 二、实例演示 实例代码 效果演示 三、知识点说明 常用属性:th/align/valign 1、th 标签 2、align 和 valign 标签 一、前言 上一篇文章我整理以前的笔记是：表格-常用属性：border、width、height，详细可参考博文web快速入门之基础篇-html：9、表格-常用属性：border、width、height这篇文章我...
html 实现桌面截图,使用HTML截图并保存为本地图片的实现代码
weixin_42667269的博客
05-30 857
具体代码如下所示：html2canvas_downloada {cursor: pointer;color: rgb(85, 26, 139);text-decoration: underline;}hello world!var oDiv = document.getElementById('oDiv');// body截图// html2canvas(document.body).then(f...
HTML页面截屏，完整demo，html2canvas，二维码生成，头像上传
qq_42780323的博客
04-14 569
这个是完整的HTML页面截屏。截屏主要用到html2canvas这个js库。 本文章涉及3个小功能：1.用qrcode生成带logo二维码。2.头像上传功能。3html页面截屏功能。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <met...
基于SpringBoot+Vue的在线教育网站项目运行截图
lx__angel的博客
03-17 814
基于SpringBoot+Vue的在线教育网站 后端项目结构： 前端项目目录结构： 管理员后台项目： 用户前台项目目录结构： 用户前台运行截图 前台用户首页 全部课程 全部讲师 讲师详情界面： 课程详情界面： 课程购买 管理员后台运行截图： 讲师管理： 添加讲师： 课程列表： 添加课程： 学生列表： 订单列表： 个人信息： ...
HTML注释标签详解与基本结构介绍
"HTML语言教程8，讲解了HTML的注释标签和基本结构，适用于静态网页制作学习" 在HTML中，注释标签是一个重要的辅助工具，它允许开发者在代码中添加解释性文字，这些注释在网页最终展示时并不会被显示。在给定的描述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贺志营

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值