前端学习之HTML
程序员文章站
2022-07-11 12:19:46
...
HTML学习
HTML 基础标签实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习HTML</title>
</head>
<body bgcolor="red">//在这里更改了浏览器的背景颜色
<p>段落标签</p>
<br>//折行标签
<h1>标题标签</h1>
<h1 align="center">居中的标题标签</h1>
<hr >//这是一条水平线
<!--这是一条注释-->
</body>
</html>
HTML 文本格式化实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习HTML</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<big>字体变大</big>
<em>强调</em>
<i>斜体</i>
<small>字体变小</small>
<sub>上标</sub>
<sup>下标</sup>
<pre>保留原来格式的预格式文本</pre>
<address>地址标签</address>
<bdo dir="rtl">文字从右朝左</bdo>
<blockquote>
这是一个长引用
这是一个长引用
这是一个长引用
这是一个长引用
浏览器会插入换行和外边距
</blockquote>
<q>这是一个短引用</q>
<del>删除线</del>
<ins>下划线</ins>
</body>
</html>
HTML 链接实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习HTML</title>
</head>
<body>
<a href="https://www.baidu.com/">进入百度</a>
<a href="https://www.baidu.com/"target="_blank">打开新的网页进入百度</a>
<a href="#xiamian">点击移动到浏览器的下面</a>
// 锚
<br>
<br>
<a href=""name="下面"></a>
</body>
</html>
HTML 框架实例
<html>
<frameset cols="50%,50%">
//将左右分成两份
<frame src="zuo.html" >
<frame src="you.html" >
</frameset>
</html>
<html>
<frameset rows="50%,50%">
//将上下分成两份
<frame src="zuo.html" >
<frame src="you.html" >
</frameset>
</html>
<html>
<frameset rows="50%,50%">
//将上下分成两份
<frame src="zuo.html">
<frame src="you.html">
<noframes>
<body>
当浏览器不能使用框架时给用户一个提示
</body>
</noframes>
</frameset>
</html>
<html>
<frameset rows="50%,50%">
<frame src="shang.html">
<frameset cols="50%,*">//*表示剩余的
<frame src="zuo.html" >
<frame src="you.html" >
</frameset>
</frameset>
</html>
noresize="noresize"不允许调整框架的大小
//导航框架
<html>
<frameset rows="50%,50%">
<frame src="shang.html">
<frameset cols="50%,*">//*表示剩余的
<frame src="daohang.html" >
<frame name="pagecontent" >
</frameset>
</frameset>
</html>
<html>
<body>
<ul>
<li><a href="zuo.html" target="pagecontent">第一个</a></li>
<li><a href="you.html" target="pagecontent">第二个</a></li>
<li><a href="shang.html" target="pagecontent">第三个</a></li>
</ul>
</body>
</html>
内联框架
<iframe src="//player.bilibili.com/player.html?aid=63231686&cid=109812577&page=1" scrolling="yes" border="0" frameborder="no" framespacing="0" allowfullscreen="flase"> </iframe>
外联B站的视频
跳转锚使用a标签
HTML 表格实例
- 每个表格由 table 标签开始。
- 每个表格行由 tr 标签开始。
- 每个表格数据由 td 标签开始。
<caption>放在table标签中的标题</caption>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
<table border="1" cellpadding="10">
cellpadding调表格的内间距
<table border="1" cellspacing="10">
cellspacing调单元格之间的内间距
HTML 列表实例
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul type="circle"></ul>空心圆点
<ul type="disc"></ul>实心圆点
<ul type="square"></ul>实心正方形
<ol type="A"></ol>
<ol type="a">
<ol type="I">
<ol type="i">
//定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
HTML 表单与输入实例
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get/post">
//get和post的区别：
//get不会编译输入的内容，在地址栏会显示出来
//post不会在地址栏显示出来
<input type="text" id="" value="" />文本框
<input type="password" name="" />密码框
<input type="checkbox" name="" id="" value="" />复选框
<input type="checkbox" name="" id="" value="" />复选框
<input type="radio" name="Sex" id="" value="" checked="checked" />单选框
<input type="radio" name="Sex" id="" value="" />单选框 //name要一致
<select name="">下拉列表
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<textarea rows="20" cols="3">
备注框
</textarea>
<input type="button" name="" id="" value="按钮" />按钮
<fieldset>数据周围绘制一个带标题的框。
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
</body>
</html>
上一篇： web学习之-html