HTML
HTML
什么是HTML
HTML是一种超文本标记语言用来描述网页
结构如下
<!DOCTYPE html>
<html lang="en"> <!-- 内容写在一对<html></html>标签中-->
<head><!-- head标签中是提供网页信息，像网页名就写在其中-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><!-- body中就是存放网页的内容-->
</body>
</html>什么是标签
标签是HTML中的基本单位
标签是由尖括号包围的关键字像上面的<html>,<head>,<body>
它们经常是成对出现，内容就写在一对标签标签中。
也有不成对的标签
还有标签关键字不区分大小写
常用标签
下面对常用标签进行简单的试例，详情见http://www.w3school.com.cn
基础标签
<!DOCTYPE>定义文档类型
<html>定义HTML文档
<title>网页名
<h1>到<h6>定义内容字体是几级标题
<p>定义段落，就是会换两行再起一段
<hr>单标签，定义水平线
<br>单标签，定义换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标签页</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<hr>
<p>这是一段</p>
<p>这是另一<br>段</p>
</body>
</html>
格式标签
<em>定义斜体文本
<small>定义小号文本
<b>定义文本加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标签页</title>
</head>
<body>
<p>常规字体</p>
<small>小号字体</small>
<b>加粗字体</b>
<em>强调字体</em>
</body>
</html>
图片与链接
<img>单标签，定义图片，一个src属性来定义地址，一个alt定义的文字是图片不出来时显示的
<a>定义链接，有个href属性填入地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
</head>
<body>
<img src="https://img02.sogoucdn.com/app/a/100520024/65942bbd107b6aae59164ce2d821971c" alt="图片消失了">
<a href="https://img02.sogoucdn.com/app/a/100520024/65942bbd107b6aae59164ce2d821971c">点这个</a>
</body>
</html>
列表标签
<ul>无序列表
<ol>有序列表
<li>列表中的实际项
<dt>定义列表
<dt>定义列表中的项
<dd>项之下的解释项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标签页</title>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</ul>
<ol style="text-transform:lowercase">
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</ol>
<dl>
<dt>aa</dt>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<dt>aa</dt>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</dl>
</body>
</html>
表单标签
<form>定义供用户输入的HTML表单
<input>定义输入控件
<textarea>定义多行的文本输入控件
<select>定义下拉选择列表
<option>定义选择列表中的选项
<label>定义input元素的标注
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标签页</title>
</head>
<body>
<form action="test2.html">
<label >用户：</label>
<input type="text" placeholder="输入"><br>
<label>密码:</label>
<input type="password"><br>
<label>简介</label><br>
<textarea ></textarea><br>
<select >
<option value="a">选项1</option>
<option value="b">选项2</option>
<option value="c">选项3</option>
</select><br>
<input type="submit">
</form>
</body>
</html>
表格标签
<table>定义表格
<caption>定义表格标题
<tr>表格的每一行
<td>行中的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标签页</title>
</head>
<body>
<table>
<caption>我的表格</caption>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr><td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr><td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr><td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>
</body>
</html>
快到碗里来
!
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读