HTML基本标签详解与运行截图
2024-05-24 06:28:52
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">helloworldgfffffffffffffffffffffffffhgfhghdgfgjoiiiiiiiiypoipyoiypoiuyohfgjhjhgjhgd</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基本标签详解与运行截图相关推荐
- init.d，rc.d详解 Linux运行时详解
Linux 启动时需要哪些步骤呢?本文将详细描述不同的运行级在启动中的作用. 对于那些在DOS/Win9x/NT 平台下的高级用户而言,Linux 似乎是一个怪物.没有config.sys ,没有 a ...
- java foreach标签_Java中Velocity foreach循环标签详解
Java中Velocity foreach循环标签详解 Java Velocity中foreach循环可以很容易的遍历数组或者集合. 定义 #foreach( $elem in $allElems) ...
- Java--web.xml加载过程；文件标签详解
一.web.xml加载过程 我们在启动Javaweb项目时,首先需要启动一个容器(如Tomcat,JBoss) WEB加载web.xml过程如下: 1.在启动Web项目时,容器(如Tomcat,JBo ...
- maven中强大的scope标签详解
maven中强大的scope标签详解 本文目的 接上一篇maven的版本号version的总结及理解 当我在封装工具jar包的时候,发现有些依赖,是一定要在工具代码里使用的,比如我做的工具包里 ...
- HTML marquee标签详解
HTML marquee标签详解 在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
- docker ps命令详解 列出运行中的容器
docker ps命令详解 列出运行中的容器 使用docker ps命令即可列出运行中的容器,执行该命令后,会出现如下7列表格 CONTAINER_ID 表示容器ID IMAGE ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
- JSF标签详解（全）
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...
最新文章
- iOS中 UITableViewCell cell划线那些事 韩俊强的博客
- 华硕笔记本自带win10改win7的方法
- python的文件流，初步网页爬虫，序列化和反序列化
- mysql主键用完了怎么办_MySQL 自增 ID 用完了怎么办？
- 阿里云centos远程连接mysql
- Android opencv 检测屏幕是否有坏点/检测一个颜色是否有杂点
- QGIS编译---QGIS3.10.6 + Qt5.11.2 + VS2015 ---32位版本
- Guava学习之Splitter
- java curator_使用curator实现选举
- 网友自制 MIUI 13 海报被疯传
- Windows系统使用Procrun部署SpringBoot的JAR包
- MarkDown基本语法（标题，字体，引用，分割线、插入图片，超链接，列表，表格，插入代码标段）
- 选股方法之各种指标的选股方法分析
- 央视揭秘网络推广：水军横行 想让你红你就红
- 【Python基础】字典dict和集合set
- AML8726调试记录
- 赛门铁克、思科、FireEye、微软等公司联手对抗Hidden Lynx组织
- 优思学院：六西格玛证书有用吗？有什么方法获取六西格玛证书？
- RestTemplate 详解
- javaswing 贪吃蛇双人小游戏