html基础知识入门(1)

HTML基本的语法规则

1.主体构成

<!--解释文档类型-->
<!DOCTYPE html>

<!--一个html分为head+body两块-->
<html>

<!--头部-->
<head>
<!--描述文档的各种属性和信息,包括文档的标题、在web中的位置及其他文档的关系等-->
<!--绝大数文档头部包含的数据都不会真正作为内容显示给读者-->
</head>

<!--主体部分-->
<body>

</body>
</html>

2.基本细则

  1. Title
    放在head中,定义网页的名称
<title>
This is a title
</title>

结果:
title

  1. Heading
<!--不同大小的heading-->
<h1>heading one</h1>
<h2>heading one</h2>
<h3>heading one</h3>

结果:
heading
3. List

<!--无序号-->
<ur>
<li>List Item 1</li>
<li>List Item 2</li>
</ur>
<!--有序号-->
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>

结果:
list
4. Paragraph

<!--段落-->
<p>ashdahsduia asdasdhasdioasjdio</p>

<!--加粗-->
<p><strong>书撒刷刷</strong></p>

<!-超链接-->
<!--以新打开网页的方式-->
<p><a href="https://baidu.com" target="_blank"><strong>超链接</strong></a><p>

结果:
paragraph
5. Table

<!--Table-->
<table>

<!--表头-->
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Age</th>
			<th>Email</th>
		</tr>
	</thead>
<!--主体-->
	<tbody>
		<tr>
			<td>Lenord</td>
			<td>Chan</td>
			<td>45</td>
			<td>ABC@qq.com</td>
		</tr>
		
		<tr>
			<td>Lenord</td>
			<td>Chan</td>
			<td>45</td>
			<td>ABC@qq.com</td>
		</tr>
		<tr>
			<td>Lenord</td>
			<td>Chan</td>
			<td>45</td>
			<td>ABC@qq.com</td>
		</tr>
	</tbody>
</table>

结果:
table
6. br、hr
空行、加横线的空行
7. Form

<!--form-->	
<form>
	<div>
		<label>First Name</label>
		<input type="text" name="firstname" placeholder="Enter First Name">
	</div>
	
	<div>
		<label>Last Name</label>
		<input type="text" name = "lastname" placeholder="Enter Last Name">
	</div>

	<div>
		<label>Email</label>
		<input type="email" name="email" placeholder="Enter Email">
	</div>
	<input type="submit" name="submit" value="Submit">
</form>
<button>This is a Button</button>

结果:
form
8. 加载图像

<!--Image-->
<!--alt定义如果无法加载图像时显示的文本-->
<img style = "width:100vw" src="C:/Users/16102/Desktop/图标.png" alt="This is a img tag">

结果:
img
9.引用

<!--Quotation-->
<p>
<cite>通过尝试自己没有做过的事情,可能会发掘出新的可能性</cite>——坂本龙一
</p>

结果:
cite

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值