HTML基础总结

最新推荐文章于 2023-07-28 17:44:43 发布

原创最新推荐文章于 2023-07-28 17:44:43 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

web前端专栏收录该内容

2 篇文章

订阅专栏

个人学习笔记

<!--HTML基础-->
演示示例1：不同等级的标题标签对比 

<!DOCTYPE html>
<html>
<head>
    <title>不同等级的标题标签对比 </title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级</h2>
    <h3>三级</h3>
    <h4>四级</h4>
    <h5>五级</h5>
    <h6>六级</h6>
</body>
</html>

演示示例2：段落标签p

<!DOCTYPE html>
<html>
<head>
	<title>段落标签的应用</title>
</head>
<body>
<h1>坚持学习</h1>
<p>坚持学习，努力在努力</p>
<p>没有梦想何必远方</p>
<p>勇往直前</p>
</body>
</html>

演示示例3：换行标签br

<!DOCTYPE html>
<html>
<head>
	<title>换行标签的应用</title>
</head>
<body>
	<h1>我是一名大学生</h1>
	<p>
		有梦想谁都了不起<br/>
		想去上海，北京，深圳赚钱<br/>
		不知道未来会怎么样<br/>
		加油吧！<br/>
	</p>
</body>
</html>

演示示例4：水平线标签hr

<!DOCTYPE html>
<html>
<head>
	<title>水平线标签 </title>
</head>
<body>
	<h1>早睡早起身体好</h1><hr>
		<p>
			生活的样子很美<br>
			The way of life is beautiful<br>
			如何做一名合格的程序员
		</p>
</body>
</html>

演示示例5：字体样式标签

<!DOCTYPE html>
<html>
<head>
	<title>字体样式标签</title>
</head>
<body>
<strong>徐志摩人物简介</strong>
<p>
	<em>1910</em>年入职杭州学堂<br>
	<em>1918</em>年赴美国克拉大学
</p>
</body>
</html>

演示示例6：特殊符号

<!DOCTYPE html>
<html>
<head>
	<title>特殊符号的应用</title>
</head>
<body>
&copy;2017-2019&nbsp;<br>Northwest University 西北大学&nbsp;&nbsp;
</body>
</html>

演示示例7：图像

<!DOCTYPE html>
<html>
<head>
	<title>图像标签的应用</title>
</head>
<body>
<p>
	<img src="F:\桌面\tanran.png" width="160" height="160" alt="坦然商城" title="坦然商城啊"></p>
	<p> tanran商场 应有尽有<br>
		牛奶一元x2盒<br>
	</p>

</body>
</html>

演示示例7：超链接的应用

<!DOCTYPE html>
<html>
<head>
	<title>超链接的应用</title>
</head>	
<body>
<!--图片超链接-->
<a href="F:\桌面\解析项目\index.html" target="_blank">
	<img src="F:\桌面\123.png" alt="欢迎来到坦然商城" title="热烈欢迎">
	</a>
	<br>
	<!--文字超链接-->
	<a href="F:\桌面\解析项目\index.html" target="_blank">坦然ensue</a>
</body>
</html>

演示示例8：页面间链接

<!--保留原页面打开新的跳转页面-->
<!DOCTYPE html>
<html>
<head>
	<title>页面间链接</title>
</head>
<body>
<p>
	<a href="F:\桌面\大二前端学习web素材\表单.html" target="_blank">表单啊</a>
</p>
<p>
	<a href="F:\桌面\大二前端学习web素材\API高德地图搜索选择地址实例啊/demo.html" target="_blank">地图</a>
	<!--target="_blank" ,表示浏览器总在一个新打开、未命名的窗口中载入目标文档-->
</p>
</body>
</html>

演示示例9：锚链接

详细参考:https://www.w3school.com.cn/html/html_links.asp
<!DOCTYPE html>
<html>
<head>
	<title>锚链接</title>
</head>
<body>
<p>
	<img src="F:\桌面\tanran.png" width="160" height="160" alt="坦然商城">
	<a href="F:\桌面\大二前端学习web素材\表单.html">表单</a>
	<a href="F:\桌面\大二前端学习web素材\五子棋啊\index.html">五子棋</a>
</p>
</body>
</html>

演示示例10：邮件链接

<!DOCTYPE html>
<html>
<head>
	<title>邮件链接</title>
</head>
<body>
<p>
	<img src="F:\桌面\tanran.png" width="160" height="160" alt="坦然商城"">
	<a href="mailto:420176524@qq.com">联系我们</a>
</p>
</body>
</html>

写的过程中发现了w3school的一个html/css 对于复习和参考都是很有价值的。。复习复习-多敲多练吧

HTML/css: https://www.w3school.com.cn/html/html_links.asp