前端学习笔记

最新推荐文章于 2024-01-17 08:52:34 发布

凉心良意

最新推荐文章于 2024-01-17 08:52:34 发布

阅读量154

点赞数

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

本文链接：https://blog.csdn.net/weixin_44355591/article/details/104397038

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Web 标准三层组成:

结构、表现、行为 ------html -----css -------js

常见文本标签🏷️:

文本1 &nbsp; 文本2  两个文本之间加空格
&lt;  “<” 小于号 &gt ">"
<b>文本加粗</b>
<p>文本段落标签</p>
<s>删除下划线</s>
<u>文字下划线</u>
<hr/> 水平线标签
<br/>   放入文本中会强制换行
<base target=“_blank"> 整体设置网页打开方式
<del> 删除下划线 </del> (推荐)
<div>   是用来布局用的,一行只能放一个 
<ins> 文字下划线 </ins> 
<prep> 预格式化文本 </prep> 怎么写的文本格式,呈现出来的就是什么样的 (前端不常用) 
<table> 表格 </table>  # 详解⬇️
<span>  也是用来布局的,一行可以放很多个
<strong> 文本加粗 </strong> (推荐)

常见标签🏷️常见属性:

图片 / 链接


<img src="图片url" alt="替换文本" title="图片提示文本" width="XHTML不支持100%" height=“宽和高一般只设置一个,要不就很容易畸形” />

<a href="http://www.baidu.com"> 外部链接 </a>  
<a href="demo.html">内部链接</a>
<a href="#"> 空链接</a> 

<a href="#"><img src="timg.jpg"/> 图片链接 </a>

<a href="#" target="_blank"> 在新的空白页打开链接 </a>

链接属性拓展:

#那么多链接,总不能一个一个去写 target="_blank" 吧

html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base target="_blank">
		<a ...
		<a ...
		<a ...

=====================================================================================================

表哥:

<body>
		<table>
			<tr> 
				 <td>表格里的单元格</td> 
				 <td>单元格</td>  
		    </tr> 
		    <tr> 
				 <td>表格里的单元格</td> 
				 <td>单元格</td>  
		    </tr>  
		    <tr> 
				 <td>表格里的单元格</td> 
				 <td>单元格</td>  
		    </tr>   
		</table>
</body>

在这里插入图片描述
表格拓展属性:
表头单元格 / 表格信息表


<table border="0" width="80" align="right" cellspacing="10" cellspacing="10">
cellspacing= 表格左右之间的距离 cellspacing= 表格里面的距离  align=文字左对齐或者居中..
=======================================================================================
<body>
		<table border="0" width="800" align="right" cellspacing="10" cellspacing="10">
			<caption>表格信息表</caption>
			<tr> 
				<th>表格头单元格</th> 
				<td>单元格</td>  
			</tr> 
========================================================

表格案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小说排行榜案例</title>
	</head>
	<body>
		<table border="1" cellpadding="0" width="500" height="250">
			<caption> <h3>小说排行榜</h3></caption>
			<tr>
				<th>排行</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近七日</th>
				<th>相关链接</th>
			</tr>
			<tr>
				<td>1</td>
				<td>爱那个情公寓</td>
				<td>
					<img src="#">
				</td>
				<td>365</td>
				<td>3650</td>
				<td>
					<a href="#">贴吧</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>1</td>
				<td>爱那个情公寓</td>
				<td>
					<img src="#" />
				</td>
				<td>365</td>
				<td>3650</td>
				<td>
					<a href="#">贴吧</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>1</td>
				<td>爱那个情公寓</td>
				<td>1</td>
				<td>365</td>
				<td>3650</td>
				<td>
					<a href="#">贴吧</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>1</td>
				<td>爱那个情公寓</td>
				<td>1</td>
				<td>365</td>
				<td>3650</td>
				<td>
					<a href="#">贴吧</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>1</td>
				<td>爱那个情公寓</td>
				<td>1</td>
				<td>365</td>
				<td>3650</td>
				<td>
					<a href="#">贴吧</a>
					<a href="#">百科</a>
				</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

凉心良意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记

Web 标准三层组成:结构、表现、行为 ------html -----css -------js常见文本标签????️:文本1 &nbsp; 文本2 两个文本之间加空格&lt; “<” 小于号 &gt ">"<b>文本加粗</b><p>文本段落标签</p><s>删除下划线</s&gt...
复制链接

扫一扫

专栏目录