web前端——初识html

最新推荐文章于 2024-06-26 22:26:36 发布

日服第一狐闹

最新推荐文章于 2024-06-26 22:26:36 发布

阅读量289

点赞数 1

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/weixin_56976215/article/details/125685862

版权

初识html

html基本标签

h标签：

h标签在文本标题中起到一个强调的作用.
h标签可以将其中的字体样式(加粗,变大).
.h标签可以在后边加上1-6来控制h标签的大小.并且其大小是由1-6依次递减的.

示例:

<body>
	<h1>一级标题</h1>
	<h2>一级标题</h2>
	<h3>一级标题</h3>
	<h4>一级标题</h4>
	<h5>一级标题</h5>
	<h6>一级标题</h6>
</body>

H标签的实际使用效果

p标签 hr标签 br标签：

p标签是段落标签，使用p标签可以使文本自动换行，且与其它标签有行距；
hr标签是水平线标签可以使文本下面出现一条横跨页面的水平线；
br标签可以使文本内容换行；
示例:

<body>
	<p>
	 <!--<!--内容-->这是一个备注标签-->
	 <!--</br>标签中里边的斜杠（/）可以省略-->
	 1. p标签是段落标签，使用p标签可以使文本自动换行，<br>且与其它标签有行距；<br>
 	 2. br标签可以使文本内容换行
	 </p>
	 <hr>
	 <p>2. hr标签是水平线标签可以使文本下面出现一条横跨页面的水平线;</p>
</body>

p标签;h标签;hr标签的实际使用效果

超链接的使用

1. 页面链接

<a href="http://www.baidu.com">百度</a>
<!--引用图片(用./来引用同文件图片)-->
<a href="./***">图片链接</a>
<!--邮件链接-->
<a href="mailto:邮箱账户">邮箱</a>

2. 锚链接

<!--在要跳转的段落加上id=""标记 在a标签加上#""即可跳转-->
<h1><a href="#ten">第十章</h1>
<p id="ten">锚链接的使用</p>

特殊符号

<body>
        <h2>特殊符号应用</h2>
		奇     酷<br>
		<!--&nbsp;空格 &ensp;半角空格&emsp;全角空格-->
		奇&nbsp;&nbsp;&nbsp;酷<br>
		奇&ensp;&ensp;&ensp;酷<br>
		奇&emsp;&emsp;&emsp;酷<br>
		<hr>
		<h2>大于号小于号</h2>
		<!--&lt;小于号&gt;大于号-->
		&lt;span&gt;奇酷&lt/span&gt;<br>
		<hr>
		<h2>双引号</h2>
		<!--&quot;引号-->
		&quot;奇酷&quot;<br>
		<h2>版权符号</h2>
		<!--&copy;版权符号-->
		&copy;奇酷版权
</body>

图片引用

<body>
	src：图片路径
		       绝对路径:从盘符开始
			   相对路径:相对于当前编辑的文件寻找图片，添加图片名字
			            1、先跳到能看得到图片所属的文件位置
						2、再进到图片所属路径
			    ./：同级目录
				../：回到上一级，不用写上级文件名
		   title:鼠标悬浮时的提示文字
		   alt:图片未加载时的代替文字
		   width:图片宽度
		   height:图片高度
		   
		-->
		<!--绝对路径-->
		<img src="D:\workspace\初始html\img\核桃.png">
		<!--相对路径-->
		<img src="./img/核桃.png" title="核桃" alt="核桃" width="100" height="100">
		<img src="../img/核桃.png">
		<!--从浏览器引用图片-->
		<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.iilMusn3clq4IvVfdvzjOwHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
</body>

其它标签

<body>
	<!--i,strong 为加粗 且strong用于强调内容 span为不换行的行内标签-->
	<span>年年雪里，常插<strong>梅花</strong>醉，挼尽<b>梅花</b>无好意，赢得满衣<br>
	   清泪！</span>	
					<!--i,em使字体倾斜，且em用于强调内容-->
	<span>今年<i>海角</i>天涯，萧萧<em>两鬓</em>生华。</span>
					<!--加粗和倾斜可以同时使用-->	
	<span>看取晚来风势，故应<b><i>难看</i></b>梅花。</span>
</body>