打工人的Html学习之路
2024-05-17 08:59:46
Html
- 网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
- 图像标签
- 链接标签
- 列表标签
- 表格标签
- 视频和音频
- 内联框架
- 表单
网页基本标签
标题标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6></body>
</html>
段落标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body><!--段落标签--><p>我预言下一秒危机</p><p>有你就不怕荆棘</p><p>并肩创造的奇迹</p><p>都记在心底 友情和恒心</p><p>宁愿相信爱永不会绝迹</p><p>谁能抹去那些古老传奇</p><p>我们手握紧 勇气和信心 就能够无敌 Yeah</p><p>渴望每个明天绝不放弃</p><p>努力燃烧用不完的活力</p><p>幻想的天地 揭开了奥秘 心跳永不暂停</p><p>不管经过多少难题</p><p>不管穿越多少距离</p><p>心和你 越靠近</p><p>梦想就会更清晰</p></body>
</html>
换行标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body><!--换行标签-->
你好<br>
我来自西安<br>
</body>
</html>
水平线标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<p>心和你 越靠近</p>
<p>梦想就会更清晰</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
你好<br/>
我来自西安<br/>
</body>
</html>
字体样式标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<strong>粗体字</strong>
<br/>
<em>斜体字</em>
</body>
</html>
注释和特殊符号
<!-- 注释-->
<!--空格 -->
<!--大于号 > -->
<!--小于号 < -->
<!--版权符号 © -->
图像标签
基本语法：
<img src=“path” alt=“text” title=“text” width=“x” height=“y”/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<!--
img表示图像标签
相对路径和绝对路径
../表示上一级目录-->
<img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<!--使用name作为锚标记-->
<a name="top">页面顶部</a>
<!--a标签
href属性：表示要跳转的页面
target属性：表示窗口在哪里打开_blank：表示在新标签页面中打开_self：在自己的页面中打开
-->
<a href="http://www.sogou.com" target="_blank">点我跳转到搜狗</a>
<br/>
<a href="http://www.baidu.com" target="_self">点我跳转到百度</a><p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="MyFirstHtml.html"><img src="./resource/img/pic.png" alt="图片加载失败显示的文字" title="悬停文字" width="300" height="300"></a>
</p>
<!--锚链接
1,需要一个锚标记
2，需要跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<a href="mailto:1434278632@qq.com">点击联系我</a>
</body>
</html>列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol><li>C/C++</li><li>Java</li><li>PHP</li><li>Python</li><li>Vue</li><li>Html</li>
</ol>
<hr/>
<!--无序列表-->
<ul><li>COCO</li><li>奈雪的茶</li><li>喜茶</li><li>书亦烧仙草</li><li>蜜雪冰城</li><li>益禾堂</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C++</dd><dd>PHP</dd><dt>地址</dt><dd>北京</dd><dd>西安</dd><dd>安康</dd>
</dl></body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--table 表格
行：tr
列：td
-->
<table border="1px"><tr><!--跨列：colspan--><td colspan="3" align="center">学生成绩</td></tr><tr><td rowspan="2">张三</td><td>语文</td><td>100</td></tr><tr><td>数学</td><td>100</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>100</td></tr><tr><td>数学</td><td>100</td></tr>
</table>
</body>
</html>
视频和音频
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音频和视频</title>
</head>
<body>
<!--
src：路径
controls：控制条
autoplay：进入网页自动播放
-->
<!--<video src="./resource/video/22.3M.mp4" controls autoplay></video>-->
<audio src="./resource/audio/高鱼%20-%20风度（全网第一锦鲤）.mp3" controls autoplay></audio>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<body>
<iframe src="" name="hello" height="500" width="900"></iframe>
<a href="http://www.baidu.com" target="hello">click me</a>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title>
</head>
<body>
<!--表单form
action：跳转的页面或者网站
method：请求方法post或者get
-->
<form action="MyFirstHtml.html" method="post"><!--文本输入框input type="text"value="哈哈哈" 代表默认初始值"maxlength="8" 代表能输入的最长字符size="30" 代表文本框的长度--><p>姓名：<input type="text" name="username" ></p><!--密码输入框input type="password"--><p>密码：<input type="password" name="pwd"></p><!--单选框input type="radio"value：单选框的值name：表示一个组，name相同的元素为一个组checked：默认选中--><p>性别：<input type="radio" name="sex" value="boy"/>男<input type="radio" name="sex" value="girl" checked/>女</p><!--多选框input type="checkbox"checked：默认选中--><p>爱好：<input type="checkbox" name="hobby" value="sleep"/>睡觉<input type="checkbox" name="hobby" value="study">学习<input type="checkbox" name="hobby" value="eatting">吃饭<input type="checkbox" name="hobby" value="game">游戏<input type="checkbox" name="hobby" value="code" checked>敲代码</p><!--按钮input type="button" 普通按钮input type="submit" 提交按钮input type="reset" 重置按钮--><p>按钮：<input type="button" name="btn1" value="hhh"></p>国家：<!--下拉框selectselected：默认选中--><select name="列表名称" ><option value="China" selected>中国</option><option value="USA">美国</option><option value="Canada">加拿大</option><option value="Italy">意大利</option></select><p><!--文件域input type="file" name="files"--><input type="file" name="files" ><input type="button" name="upload" value="提交"></p><!--邮箱验证--><p>邮箱：<input type="email" name="mail"></p><p>年龄：<input type="number" name="num" min="1" max="150" step="1"></p><!--文本域textarea name="text"--><p>反馈：<textarea name="text" cols="40" rows="10">请输入你想说的话</textarea></p><p>滑块:<input type="range" name="voice" max="100" min="0" step="20" ><input type="submit"><input type="reset"></p></form></body>
</html>
打工人的Html学习之路相关推荐
- java学习之路目录（已完结）
java学习之路目录(持续更新中-) 第一阶段 javaSE(完结) 序号 标题 内容 001 java初识 java语言特点.体系结构.运行机制 002 java SE基础语法 注释.关键字.变量. ...
- Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- 学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论 转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
- 拿下斯坦福和剑桥双offer，00后的算法学习之路
董文馨,00后,精通英语,西班牙语.斯坦福大学计算机系和剑桥大学双Offer,秋季将进入斯坦福大学学习. 10岁开始在国外上学:12岁学Scratch: 13岁学HTML & CSS: 14岁 ...
- Markdown学习之路
Markdown学习之路 作者:CFishHome 转载请注明地址:https://blog.51cto.com/12731497/2164274 Markdown是什么? Markdown是一个 W ...
- [EntLib]微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——上篇...
本文是为后面的学习之路做铺垫,简单介绍下企业库中的Validation模块的一些相关知识,包括Validation模块的简介.用途.使用方法.默认提供的多种验证器的介绍等. 一.简介及用途 在实际的项 ...
- 转载： Qt 学习之路 2归档
Qt 学习之路 2归档 http://www.devbean.net/2012/08/qt-study-road-2-catelog/
最新文章
- android设置光标闪烁,Android EditText闪烁光标
- Vmware安装与使用
- WebService 学习之路（一）：了解并使用webService
- 锁绑定多个条件Condition
- ECC椭圆曲线算法（2）初步介绍
- 使用远程工具连接提示**Host *** is not allowed to connect to this mysql server**拒绝连接错误
- wuhan2020：武汉新型冠状病毒防疫开源信息收集平台
- SpringSecurity 案例父工程创建
- SpringBoot打包成Docker镜像
- 103.及时清除缓存
- html实心向右三角形,css 如何在html页面上输出一个左三角形或右三角形呢？
- 关于广告系统的定向，看这篇就够了
- C#配置文件操作】程序配置文件App.Config操作
- Android stdio报错:“xxx keeps stopping“解决方案
- 墨客与网易云达成战略合作
- 海伦公式 (利用三边长求三角形面积）
- python pymysql 如何输出 json 字符串
- 从程序员到产品经理 第四章：敏捷开发和项目管理
- P4VASP的安装 使用P4VASP画DOS(态密度)图
- 为什么说“低估值买入，买到即赚到”？| 佛系理财