HTML前端标签
01段落标签
<p>
段落标签
</p>
<h2>粗体标签</h2>
<!--b标签 只是物理加粗 strong 不仅加粗 还利于seo搜索-->
<b>5555</b>
<strong>6666</strong>
<h2>斜体文字</h2>
<!--i标签 只是斜体 em 不仅斜体 还利于seo搜索-->
<em>77777</em>
<h2>a标签</h2>
<a href="http://www.baidu.com" target="_blank">去百度</a>
<h2>特殊符号</h2>
<p>
大于号：-- ><br>
小于号：-- <<br>
空格符号:-- 12 34<br>
空白位:-- 12 34<br>
版权符号:-- ©<br>
</p>
图片标签
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://res.shiguangkey.com/file/201811/03/20181103195526322109920.jpg!mall_course_c" alt="">
<img src="img/01.jpg" alt="python图标" width="100" height="80" title="我是python图标">
<!--
src 定义图片路径 相对、绝对
alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上
width 定义图片宽度
height 定义图片高度
title 鼠标划入 有提示
当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小
-->
</body>
</html>列表标签
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<ul>-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--</ul>-->
<!--ul>li{$}*4 tab-->
<h2>无序列表</h2>
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- type
disc 默认 小黑圆点
circle 空心圆
square 小方框
-->
<h2>有序列表</h2>
<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!--
1 1 2 3 4 默认
a a b c d
A A B C D
I
i
-->
<h2>自定义列表</h2>
<dl>
<!--<dt>前端</dt>-->
<dd>html</dd>
<dd>css</dd>
<dd>javaScript</dd>
</dl>
</body>
</html>表单
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<table >
<caption><b>学生信息表</b></caption>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">35</td>
<td>谢昊</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<!--<td>35</td>-->
<td>陈春博</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<!--<td>35</td>-->
<td>秋秋</td>
<td colspan="2">保密</td>
<!--<td>18</td>-->
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>form表单
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
textarea{
width: 300px;
height: 200px;
/*禁止拉伸*/
/*resize: none;*/
/*水平方向可以拉伸*/
/*resize: horizontal;*/
/*垂直方向可以拉伸*/
resize: vertical;
}
</style>
</head>
<body>
<!--?gender=on&hobby=on&hobby=on&xz=2&wby=1111111111111111111-->
<!--?user=qwert&psd=asdfg&gender=woman&hobby=read&hobby=eating&hobby=on&xz=1&wby=我想你啦-->
<!--?name=value&name=value&name=value&name=value....-->
<form action="" method="get" autocomplete="off">
<!--action 规定当前提交表单向何处发送表单数据-->
<!--method 默认get post-->
<!--autocomplete自动完成，on输入框会提示 off输入框不会提示-->
账号：<input type="text" placeholder="请输入你的账号" name="user"><br>
密码：<input type="password" placeholder="请输入你的密码" name="psd" required><br>
<!--required 必填字段-->
单选框：
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">
<label for="woman">女</label>
<input type="radio" name="gender" disabled >保密<br>
<input type="file">
<!--checked 默认选中-->
<!--disabled 禁止选中-->
多选框：
<input type="checkbox" name="hobby" checked value="read">看书
<input type="checkbox" name="hobby" value="shopping">
<label for="shopping">逛街</label>
<input type="checkbox" name="hobby" value="eating">吃东西
<input type="checkbox" name="hobby">追剧
<input type="checkbox" name="hobby">打人<br>
下拉框：
<select name="xz" size="2">
<!--selected 规定在option里面默认展示第几项-->
<!--size规定下拉列表中可见选项的数目-->
<option value="1">长沙</option>
<option value="2">武汉</option>
<option value="3">深圳</option>
<option value="4" selected>天津</option>
</select><br>
文本域：
<textarea name="wby"></textarea><br>
提交：<input type="submit" value="我是提交"><br>
重置：<input type="reset" value="我是重置按钮"><br>
<!--给javascript用的-->
按钮：<input type="button" value="按钮">
</form>
</body>
</html>- 上一篇 »Web前端————微博主页模仿
- 下一篇 »入门前端之HTML