HTML5入门之常用标签

Web TOMORROW 2个月前 (10-05) 207次浏览 0个评论 扫描二维码
文章目录[隐藏]

HTML5 是新一代的 HTML。现在已经渐渐推广开来了。HTML 入门只需将一些常见的标签自己敲一遍出来就可以了。

下图是HTML5的基本文档结构:

HTML5 入门之常用标签

HTML5必需代码

<!DOCTYPE html><!-- 必需标签 -->
<html><!-- 必需 -->
<head><!-- 必需 -->
	<title>HTML5必需标签与常见标签</title><!-- 必需 -->
	<meta charset="utf-8">
</head>
<body><!-- 必需 --><!-- HTML 文档主体 -->
	
</body>
</html>

上面的代码就算是每一个标准的HTML5文档所必备的结构,<meta charset="utf-8">也是,没有这个通常会出现乱码,HTML 都是用来给人看的,乱码了可以说就没有它的存在意义了。

HTML 常用标签

有了 HTML 文档的基本结构就可以往里面填东西了,把一些常见的标签代码敲一遍,就对 HTML 有了一个总体的认知,也算是入门了。

<!DOCTYPE html><!-- 必需标签 -->
<html><!-- 必需 -->
<head><!-- 必需 -->
	<title>HTML5必需标签与常见标签</title><!-- 必需 -->
	<meta charset="utf-8">
</head>
<body><!-- 必需 --><!-- HTML 文档主体 -->
	<h1>html5 必需标签与常见标签的使用</h1>
	<div>
		<p>段落标签</p>
		<a href="https://www.tomorrow.wiki/">TOMORROW 星辰</a>
		<ul><!-- 无序列表 -->
			<li>列表项 1</li>
			<li>列表项 2</li>
			<li>列表项 3</li>
		</ul>		
		<ol><!-- 有序列表 -->
			<li>列表项 1</li>
			<li>列表项 2</li>
			<li>列表项 3</li>
		</ol>
		<form><!-- 为用户输入创建 HTML 表单 -->
			<input type="text" name="单行文本输入框">
			<input type="submit" name="提交按钮">
			<p>多选按钮:
				<input type="checkbox" name="多选按钮">
				<input type="checkbox" name="多选按钮">
				<input type="checkbox" name="多选按钮">
			</p>
			<p>单选按钮 1:
				<input type="radio" name="单选按钮 1">
				<input type="radio" name="单选按钮 1">
				<input type="radio" name="单选按钮 1">
			</p>
			<!-- 同一个 form 标签内的 radio 是根据 name 属性分组的 -->
			<p>单选按钮 2:
				<input type="radio" name="单选按钮 2">
				<input type="radio" name="单选按钮 2">
				<input type="radio" name="单选按钮 2">
			</p>
			<textarea><!-- 多行文本输入框 --></textarea>
			<select><!-- 下拉菜单 -->
				<option>选项 1</option>
				<option>选项 2</option>
				<option>选项 3</option>
			</select>
		</form>
	</div>
</body>
</html>

 


TOMORROW 星辰 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 入门之常用标签
喜欢 (0)
TOMORROW
关于作者:
TOMORROW星辰第一作者。如有疑问或者发现错误,请留言作者。
机智的招牌发表我的评论  如需接收评论回复通知,请填写正确的 个人信息
取消评论
表情 加粗 斜体 签到