H5快速上手

JSU_曾是此间年少

已于 2022-10-18 20:50:44 修改

阅读量154

点赞数

分类专栏：前端文章标签：前端

于 2022-10-17 20:35:42 首次发布

本文链接：https://blog.csdn.net/m0_72678953/article/details/127374242

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

段落标签 p

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<h2>语文</h2>
		<p>语文是一门好课程</p>
		<h2>数学</h2>
		<p>数学是一门好课程</p>
		<h2>英语</h2>
		<p>英语是一门好课程</p>
		<h2>计算机</h2>
		<p>计算机是一门好课程</p>
		<!--这是注释，验证可以有两个h1标题-->
	</body>
</html>

换行标记 /br

H5标准中 /没有都可以，所以错写成<br/> <br>都能达到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<h3>语文</h3>
		<p>语文是一门好课程	数学是一门好课程</p>
		
		<p>英语是一门好课程	计算机是一门好课程</p>
	</body>
</html>

发现效果不理想

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<h3>语文</h3>
		<p>语文是一门好课程	数学是一门好课程</br>英语是一门好课程	计算机是一门好课程</p>
		<!--勉勉强强紧凑了-->
	</body>
</html>

几个标签

斜体标签 i em cite标签

上标标签：sup

下标标签：sub

中划线：s

下划线：u

水平线：hr 单标签

使用div进行层次划分，便于以后css进行区域内控制格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<div>
			<h3>语文</h3>
			<p>语文是一门好课	数学是一门好课</br>英语是一门好课	计机是一门好课</p>
		</div>
		<hr/>
		<div>
			<h3>English</h3>
			<p>数学是一门好课 	数学是一门好课</br>数学是一门好课	计机是一门好课</p>
		</div>
	</body>
</html>

添加空格&nbsp

不过跟在<br>后面好像没什么用

可能是因为只能在段落行首使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
	    <h1>小测试</h1>
		<div>
			<h3>语文</h3>
			<p>&nbsp&nbsp&nbsp阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</p>
		</div>
		<hr/>
		
		<div>
			<h3>English</h3>
			<p>&nbsp&nbsp&nbsp阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</p>
		</div>
		<hr/>
		
		<div>
			<h3>English</h3>
			<p>&nbsp&nbsp&nbspc<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup></p>
		</div>
		<hr/>
		
		<div>
			<h3>English</h3>
			<p>No Pain No Gain</p>
		</div>
		
		
		
	</body>
</html>

-----------------------------------------------------------------------------------------------------------------------

网页列表，现在都采用无序列表UI

实际上有序和无序应该是有没有顺序序号的区别来命名

而不是有没有特定顺序

有序列表 ordered list

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<ol type="1">
			<li>数据结构</li>
			<li>离散数学</li>
			<li>高等数学</li>
			<li>离散数学</li>
			
		</ol>
	</body>
</html>

注意，那个<ol>标签开头不能有逗号链接，否则设置的属性值会失效

但是只要开头的ol标间后面有空格就不会出问题

无序列表 unordered list

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<ul type="circle">
			<li>数据结构</li>
			<li>离散数学</li>
			<li>高等数学</li>
			<li>离散数学</li>
			
		</ul>
	</body>
</html>

type里面的属性值大小写不敏感

这里还是没大看懂

定义列表

模板代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<dl>
			<dt>HTML5</dt>
			<dd>一门优美的语言</dd>
			<dt>python3</dt>
			<dd>一门简洁的语言</dd>
			
		</dl>
	</body>
</html>

注意dt dd的顺序

我们来完成一个小任务吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<h1>问卷调查</h1>
		<h3>1.你是通过什么途径来到绿叶学习网的？</h3>
		<ol type="A">
			<li>百度搜索</li>
			<li>谷歌搜索</li>
			<li>其他途径</li>
		</ol>
		
		<h3>2.你觉得绿叶学习网页面设计怎么样？</h3>
		<ol type="A">
			<li>酷炫大方</li>
			<li>比较普通</li>
			<li>非常粗糙</li>
		</ol>
		
		<h3>3.你觉得这本书怎么样？(多选)</h3>
		<ul type="Circle">
			<li>轻松易懂</li>
			<li>内容丰富</li>
			<li>好到爆</li>
		</ul>

	</body>
</html>

这是用定义列表来做的，不过格式有点不好看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科普小知识</title>
	</head>
	<body>
		<h1>问卷调查</h1>
		<dl>
			<dt>1.你是通过什么途径来到绿叶学习网的？</dt>
			<dd>
				<ol type="A">
					<li>百度搜索</li>
					<li>谷歌搜索</li>
					<li>其他途径</li>
				</ol>
			</dd>
		</dl>
		
		<dl>
			<dt>2.你觉得绿叶学习网页面设计怎么样？</dt>
			<dd>
				<ol type="A">
					<li>酷炫大方</li>
					<li>比较普通</li>
					<li>非常粗糙</li>
				</ol>
			</dd>
		</dl>
		
		<dl>
			<dt>3.你觉得这本书怎么样？(多选)</dt>
			<dd>
				<ul type="Circle">
					<li>轻松易懂</li>
					<li>内容丰富</li>
					<li>好到爆</li>
				</ul>
			</dd>
		</dl>
	</body>
</html>