HTML5入门之常用标签

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

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
关于作者:
一个从石头坑掉到泥坑里的攻城狮。
舒心的大地发表我的评论  请填写正确的 个人信息
取消评论
表情 加粗 斜体 签到
(3)个小伙伴在吐槽
  1. Online Generic Propecia For Sale Propecia Kaufen Osterreich Generique Amoxicillin Sans Ordonnance Pilule Contraceptive viagra Secure Zentel By Money Order Without Rx Viagra Cialis In Farmacia Cialis Erste Einnahme
    RebReumma2019-06-03 02:05 回复 Windows 7 | Chrome 66.0.3359.170
  2. 好文章!666,学习了
    001799搜图2019-05-05 21:32 回复 Windows 7 | 未知浏览器
  3. 签到成功!签到时间:2019-02-20 14:22:52 :mrgreen: 签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52签到成功!签到时间:2019-02-20 14:22:52,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~,每日打卡,生活更精彩哦~
    苹果鸡2019-02-20 14:23 回复 Windows 10 | Chrome 73.0.3679.0