<html lang="en">
<head>
<meta name="Keywords" connect="XXSTACK">
<meta name="decription" content="自练习网站">
<title>HTML TEST</title>
</head>
<body>
Hello,World！
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<!--段落标题-->
<p>这是一个段落</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
<br/>
首先看下各种标签<br/>
在看下这个换行标签<br/>
<!--粗体和斜体标签-->
<p><strong>这个是粗体标签</strong></p>
<p><em>这个是斜体标签</em></p>
<!--特殊符号-->
<p>空格： </p>
<p>大于号：></p>
<p>小于号：<</p>
<p>版权符号：©版权所有</p>
<!--图像标签-->
<p><img src="图像地址" alt="图像替代文字" title="鼠标悬停显示的文字" width="图像宽度" heigh
="图像高度"></p>
<!--链接标签
href 代表图像的路径
target 带遍链接在哪个位置打开，常用的有：
_self：在自己当前的网页打开
_blank：在新的标签页打开
-->
<p><a href="链接地址" target="打开窗口位置">显示链接的文本或图像</a></p>
<!--锚链接-->
<p><a href="#top">回到顶部</a></p>
<!--功能性链接
邮箱链接：mailto:
-->
<p><a href="mailto:[email protected]">点击联系我</a></p>
<!--有序列表-->
<ol>有序列表：
<li>Java</li>
<li>运维</li>
<li>云计算</li>
<li>测试</li>
</ol>
<!--无序列表-->
<ul>无序列表
<li>java</li>
<li>运维</li>
<li>云计算</li>
<li>测试</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C</dd>
<dd>Go</dd>
<dt>位置</dt>
<dd>中国</dd>
<dd>美国</dd>
<dd>瑞士</dd>
</dl>
<!--表格
tr：行
td：列
border：表格的宽
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<!--跨行和跨列-->
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td rowspan="2">2-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<!--媒体元素
音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></video>
<!-- HTML页面结构分析-->
<p>HTML页面结构分析</p>
<table border="1xp">
<tr>
<td>元素名</td>
<td>描述</td>
</tr>
<tr>
<td>header</td>
<td>标题头部区域内容</td>
</tr>
<tr>
<td>footer</td>
<td>标题脚部区域内容</td>
</tr>
<tr>
<td>section</td>
<td>web页面中的一块区域</td>
</tr>
<tr>
<td>article</td>
<td>独立文章内容</td>
</tr>
<tr>
<td>aside</td>
<td>相关内容或应用</td>
</tr>
<tr>
<td>nav</td>
<td>导航类辅助内容</td>
</tr>
</table>
<hr>
<header>
<p>网页头部</p>
</header>
<section>
<p>网页主体</p>
</section>
<footer>
<p>网页脚部</p>
</footer>
<!-- iframe内联框架
path：引用页面地址
name：框架标识名
-->
<iframe src="地址" name="test"></iframe>
<!--表单
action：表单提交的位置，可以是网站，也可以是一个请求的地址
method：post，get提交方式
get：使用此方式提交，在URL中可以看到我们的提交信息，不安全但高效
post：比较安全而且可以传输大文件
name 不管是input标签还是表单元素都是需要使用name属性
-->
<form action="页面地址" method="post">
<!--
文本输入框：input type="text"
vlaue ="请输入" 默认文本框的初始值
maxlength="8" 最长输入文字的长度
size= "30" 文本框的长度
vlaue ="admin" 输入框中默认的值
readonly 输入框设置为只读，无法修改
placeholder ="请输入用户名" 文本框中的默认值
required 非空验证，不能让文本框为空
pattern 正则表达式判断验证，需要额外学习正则表达式
-->
<p>名字：
<input type="text" name="username" value="admin" readonly>
</p>
<p>密码：
<input type="password" name="passwd">
</p>
<!--单选框标签
input type="radio"
value：单选框的值
name：表示组
checked：默认选项
disable：禁用选项
hidden：隐藏控件
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
checked 默认选项
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="coding" name="hobby"/>编程
<input type="checkbox" value="girl" name="hobby"/>女孩
<input type="checkbox" value="chat" name="hobby"/>聊天
</p>
<p>按钮1
<input type="button" name="btn1" value="点击没反应">
<input type="imgae" src="图片路径">
</p>
<!--下拉框，列表框-->
<p>国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="USA">美国</option>
<option value="ruishi">瑞士</option>
<option value="选项的值">乌克兰</option>
</select>
</p>
<!--文本域
cols="50" 行
rows="10" 列
-->
<p>反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="files"
name = "files"
-->
<p>
<input type="file" name="files">
<input type="button" value ="上传" name="upload">
</p>
<!--邮箱验证-->
<p>邮箱：
<input type="email" name="emails">
</p>
<!-- URL验证-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字：
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="1">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
<p>
<input type="submit">
<input type="reset" value="清空">
</p>
</form>
</body>
</html>```
6小时速通HTML
猜你喜欢
转载自blog.csdn.net/AC4400/article/details/132644527
今日推荐
周排行