HTML标准文档格式（head标签）&&（body标签）&&（列表标签）&&(图片标签)&&（超链接与锚点）&&（表格标签）

最新推荐文章于 2022-11-25 10:11:27 发布

兰知行

最新推荐文章于 2022-11-25 10:11:27 发布

阅读量333

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_43698400/article/details/102940527

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<!--
        	作者：
        	时间：2019-11-06
        	描述：给浏览器使用的数据
        -->
        <title>
        	HTML学习
        </title><!--告诉浏览器用什么标题来显示网页-->
        <meta charset="utf-8" /><!--告诉浏览器使用指定编码格式编译文档-->	
	</head>
	<body>
		this is my first html
	</body>
</html>

head标签的学习与使用

还有一些语句能够提高在搜索引擎中的搜索概率。关键字、网页描述、作者。只是了解

————————————————————————————————————————————————————————

<html>
	<head>
		<title> html的body学习</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<h1 align="center"> first</h1>
		<hr width="100" />
		<p>first</p>
		<p>first</p>
		<p>fir<b>s</b>st</p>
	</body>
</html>
<!--
	作者：
	时间：2019-11-06
	描述：
	h1到h6会将其中的字符变粗或者变细，并且具有自动换行 的功能
	align：center right left 属性：可以让h中的字符居中、左右
	水平标线hr:会在页面中显示一条水平线
	属性：
	width:宽度
	size：高度
	color：颜色
	段落标签：p：会将一段文字作为一整段来表示，主要是进行css和js时比较方便，会自动换行
	         特点：行间距较大
	换行符：
	        告诉浏览器在这个位置进行换行
	权重标签
	    b:将目标文字加黑显示
	    i:将目标文字倾斜显示
	    u:将目标文字加下划线
	    del:增加中划线
	    
-->

————————————————————————————————

列表标签学习：

无序列表 ul:

li:该标签中书写内容，一个li代表一行数据

特点：默认数据前有一个黑色点

有序列表ol:

li：该标签中书写内容，一个代表一行数据

特点：会按照顺序排序

自定义列表dl：

dt:数据的标题

dd:数据的具体内容，一个dd代表一个数据

————————————————————————————————————————————————-

图片标签

<head>
	<head>
		<title>图片标签学习</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h3>图片标签学习</h3>
		<hr />
		<img src="imag/1.jfif"title="这是个好图片" />
		<img src="http://01.minipic.eastday.com/20150923/20150923140604_b7e9c7ff6aa5349b96d9f8ca71e90f78_8.jpeg"width="200px" />
	</body>
</head>

图片之间的并不会像段落那样换行，title是当鼠标悬浮在图片上的时候，给图片的文字描述。图片的位置可以使用相对路径与绝对路径，同时还可以通过URL将网络上的图片路径拷贝过来。

——————————————————————————————————————

<html>
	<head>
		<title>超链接学习</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<!--
           本地资源
        -->
		<a href="body学习.html">图片标签学习</a><br />
		<!--
        	描述：网络资源
        -->
        <a href="https://www.taobao.com/" target="_blank">淘宝一下</a>
        <!--
  
        	时间：2019-11-07
        	描述：targe：指明要跳转的网页资源的显示位置
        	_self     在当前网页中刷新显示
        	_blank    在新的标签页中显示
        	_top      在顶层页面中显示
        	_parent   在父级页面中显示
        	注意：在超链接中一定要声明访问方式，访问方式可以是文字也可以是图片
        	锚点：
        	可以实现返回顶部返回底部的功能，就是在返回的地方添加标记
        	使用：
        	先使用超链接在指定位置后面增加锚点
        	< a name="锚点名"></a>
        	使用a标签可以跳转指定的锚点的位置
        	< a href="#锚点名">访问方式</a>
        -->
	</body>
</html>

————————————————————————————————————————————————

表格标签

<html>
	<head>
	</head>
	<body>
		<table border="1px" cellspacing=10px"" cellpadding="0">
		
		<tr height="100px">
			<th width="50px">科目</th>
			<th width="50px">分数</th>
			<th width="50px">级别</th>
			<th width="50px">说明</th>
		</tr>
		<tr>
			<td>java</td>
			<td>100</td>
			<td>8</td>
			<td>面向对象的语言</td>
		</tr>
		</table>
	</body>
</html>
<!--
	作者：1256270378@qq.com
	时间：2019-11-07
	描述：tr表示行，td表示列，th也表示列，但td默认的是居左，而th默认居中并且加黑
	border让表格边界有线，cellpadding表示单个的字符与边界线之间的举例，cellspacin表示边界线与边界线之间的距离
	同时为了看起来规范可以设置行高与列宽，因为表格会自动的根据字符大小设置边框，所以不能在table中设置
	边框的合并：
	第一步：首先确保表格是一个规整的表格
	第二步：
	根据要合并的单元格，找到其所在的位置
	第三部：行合并，在要合并的单元格中第一个单元格上使用属性rowspan="要合并的单元格的个数"，并且删除另外一个被合并的单元格
	        列合并，在要合并的单元格中的任意一个使用属性clospan="要合并的单元格的个数",并且删除另外一个被合并的单元格
-->