标签：love 标签 语法 完整 html nbsp 跳转 跑得快 100
第一个html
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta 描述性标签，用来描述网站的一些信息-->
<!--meta 标签一般用来做SEO-->
<meta charset="UTF-8">
<meta name="key" content="第一个网站，学html">
<meta name="description" content="学习html">
<title>第一个网站</title>
</head>
<body>
Hello,World!
</body>
</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>
<!--段落标签 将文字分为一个个段落-->
<p>两只老虎，两只老虎</p>
<P>跑得快，跑得快</P>
<P>一只没有眼睛</P>
<P>一只没有尾巴</P>
<P>真奇怪！真奇怪！</P>
<!--水平线标签-->
<hr/>
<!--换行标签 只是换了一行，但是还是一段-->
两只老虎，两只老虎<br/>
跑得快，跑得快<br/>
一只没有眼睛<br/>
一只没有尾巴<br/>
真奇怪！真奇怪<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong> <br/>
斜体：<em>i love you</em> <br/>
粗体：<B>i love you</B> <br/>
斜体：<I>i love you</I> <br/>
<hr/>
<!--特殊符号-->
空 格； <br/>
<!-- 代表一个空格-->
空 格 <br/>
<!--> 代表大于号 <代表小于号-->
>
< <br/>
<!--版权符号-->
©
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
src:图片的地址
绝对地址：使用盘符找到的文件 D:\代码\HTML\resources\image\2.png
相对地址：相对于当前项目的文件 ../resources/image/2.png
../返回上一级目录
alt ： 如果src路径下的文件未找到，就用这里名的内容替代
title ： 将鼠标放置在这个图片上面会显示title里卖弄的内容
width : 图片显示的宽度
height ： 图片显示的高度
-->
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
<!--从这里可以直接跳转到下面这个链接的down这个锚标记处-->
<a href="4.链接标签.html#down">跳转</a>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用a标签里面的name属性设置锚链接标记-->
<a name="top">顶部</a>
<br/>
<!--
a标签：
href ： 必填，表示要跳转到哪里去
target : 表示窗口在哪里打开
_blank ： 在新标签中打开
_self : 在自己的网页中打开，属于默认设置
a标签中间填写链接的文本或图片
-->
<a href="1.我的第一个html.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一个html.html">
<img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255">
</a>
</p>
<!--
锚链接 ：
1.需要一个锚标记
2.跳转到锚标记
使用方法为 #+锚链接的标记名
可以实现页面内的跳转，，也可从一个页面直接跳转到锚链接的标记位置
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--
功能性链接：
mailto:邮箱地址（可以将内容发送到这个邮箱里面）
QQL链接
-->
<a href="mailto:1713791837@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1713791837&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1713791837:52" alt="你好，加我领取小电影" title="你好，加我领取小电影"/>
</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表 ： Orderly list 显示出有顺序的结构，前边用数字显示顺序
应用范围：试卷，答题卡...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>汇编</li>
<li>前端</li>
<li>编译原理</li>
</ol>
<!--无序列表 显示出没有顺序的结构，前边用黑点显示
应用范围：导航，侧边栏...
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>汇编</li>
<li>前端</li>
<li>编译原理</li>
</ul>
<!--自定义列表
dl : 列表标签
dt : 列表名称
dd : 列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>linux</dd>
<dd>spring</dd>
<dd>c</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
colspan : 合并多少列为一列
rowspan : 合并多少行为一行
border : 设置边框宽度
-->
<table border="1px">
<tr>
<td colspan="3"> 学生成绩</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>
<!--视频和音频
controls : 控制条
autoplay : 设置视频自动播放
-->
<video src="../resources/video/2.qlv" controls autoplay></video>
<br/>
<audio src="../resources/audio/ai.mp3" controls></audio>
</body>
</html>
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h1>网页头部</h1>
</header>
<section>
<h1>网页主体</h1>
</section>
<footer>
<h1>网页脚部</h1>
</footer>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--
iframe : 可以将src里面的网页内容嵌套在本网页内
src : 链接地址
w-h : 宽和高
还可以使用name属性：
将a标签里面的链接内容放置到iframe里面
-->
<iframe src="" name="hello" width="855px" height="512px"></iframe>
<a href="https://www.bilibili.com/" target="hello">点击跳转</a>
</body>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单form
action : 提交到哪个位置，可以是网站也可以是请求处理地址
method : 提交方式，，有post与get
get方式提交，数据可以在url里面看到，不安全，但高效
post方式提交：比较安全，能够提交数据量较大的文件
-->
<h1>注册</h1>
<form action="1.我的第一个html.html" method="get">
<!--文本输入框 ： type="text"
value="你好帅" 默认初始值
maxlength="8" 最多能输入几个字符
size="30" 文本框的长度
readonly 只读
placeholder 提示的默认信息 只能用在输入框上
required 非空判断，表示此字段必须填写 只能用在输入框上
-->
<p>名字：<input type="text" name="userName" placeholder="请输入用户名" required> </p>
<!--密码框 ： type="password"
hidden 隐藏，将这个框用户看不到，但是却是存在的，可以放置默认值
-->
<p>密码：<input type="password" name="pwd" hidden value="123456"> </p>
<p>性别：
<!--单选框:
type="radio"
value:单选框的值
name : 表示组，name值一样则表示为一组数据，不能同时选择两个
disabled : 禁用，禁止选择男性
-->
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!--多选框
type="checkbox"
value:多选框的值
name : 表示组，name值一样则表示为一组数据
-->
<input type="checkbox" value="sleep" name="hobby">睡觉
<!--checked : 默认选中-->
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<p>
<!--按钮
type="button"
name ： 按钮名称
value : 按钮上显示的内容
-->
<input type="button" name="btn1" value="点击按钮">
<!--图片按钮 相当于提交按钮-->
<input type="image" src="../resources/image/2.png" width="50px" height="50px">
</p>
<p>国家：
<!--下拉框
使用select标签
name ：列表的名称，后台可以获得列表名称
value ： 传到后端的值
-->
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<!--selected 表示默认选择法国-->
<option value="fa" selected>法国</option>
<option value="ying">英国</option>
</select>
</p>
<p>反馈：
<!--文本域
textarea标签
cols : 默认显示几列
rows : 默认显示几行
-->
<textarea name="textarea" cols="30" rows="10">默认文本</textarea>
</p>
<p>
<!--文件域-->
<input type="file" name="files">
</p>
<p>
<!--邮箱验证 输入的值必须添加@并且前后都有值-->
邮箱：<input type="email" name="email">
</p>
<p>
<!--url验证 输入的值必须是一个网址-->
url:<input type="url" name="url">
</p>
<p>
<!--数字验证 输入的值必须大于0小于100并且是10的倍数
max ： 最大值
min ： 最小值
step ： 步长，每次加几
-->
数字:<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>
<!--滑块
range 标签
可以在参数中获取得到的多少数值
-->
滑块：<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<!--搜索框-->
搜索:<input type="search" name="search">
</p>
<p>
<!--增强鼠标可用性
label标签
也就是在点击label这个标签里面的内容时，会自动将光标锁定到输入框id为for属性里面的内容
-->
<label for="work">你点我逝世：</label>
<input type="text" id="work">
</p>
<p>
<!--pattern 正则表达式，这里输入的东西必须满足pattern的规则-->
自定义邮箱：
<input type="text" name="diyEmail"
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<!--提交按钮 ： type="submit" -->
<input type="submit">
<!--重置按钮 ： type="reset"-->
<input type="reset">
</p>
</form>
</body>
</html>
标签：love,标签,语法,完整,html,nbsp,跳转,跑得快,100 来源： https://www.cnblogs.com/douluo/p/15582217.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。