H5全栈_行内元素/table

最新推荐文章于 2021-11-10 10:50:35 发布

AKIRAZXX

最新推荐文章于 2021-11-10 10:50:35 发布

阅读量546

点赞数 1

分类专栏： html/css 文章标签： table 个人简历 html

本文链接：https://blog.csdn.net/AKIRAZXX/article/details/97810777

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html

行内元素

作用：用于页面填充或装饰

特性：

1、多个内元素共享一行空间
2、默认宽高有内容决定
3、不可指定宽高
4、行内元素不可以嵌套块元素
（注意与块元素做对比）

元素：

span 无意义的行内元素
a
href
url http://ip:port/path
相对地址 ./11.html
. 当前文件夹
…上一级文件夹
绝对地址 /user/…或 d://briup/…
mailto 邮件
锚点（使用id）
target
img src(同href）
alt(图片找不到时的文本替代)
功能性标签
strong 强调加粗
b 加粗
em 强调
i 斜体
del 删除线
sub/sup 上标/下标

<body>
	<a href="http://www.baidu.com" target="_blank">百度一下</a>
	<!-- href打开外网地址（在原网页跳转），target用于打开新页面 -->
	<a href="./11.html">个人简历</a>
	<!-- 内网，相对地址，绝对地址（. 当前目录   .. 为上一级目录）  --> 
	<a href="mailto:zxiaoxuan327@gmail.com">发邮件给我们</a>
 	<!-- 跳转至邮件 -->
 	<div id="dd">
 		<a href="#grjl">个人经历</a>
 	</div>
	<!-- 锚点：通过id跳转 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="grjl">个人经历</h2>
<div>
	<a href="#dd">回到顶端</a>
</div>
<p>写过代码。。。。获过大奖</p>
<!-- 锚点：通过id跳转 -->


<img src="./1.jpg" alt="图没了">
	<!-- 相对路径，alt：图片找不到时的文本替代 -->

<!-- 行内元素 -->

<!--装饰类型行元素-->
	<strong>强调加粗</strong>
	<b>加粗</b>
	<em>强调</em>
	<i>斜体</i>
	<del>删除线</del>
	<sub>2</sub>
	<!-- 下标 -->
	<sup>3</sup>
	<!-- 上标 -->

</body>

在这里插入图片描述
以上具体：file:///D:/briup/2.htmlcss/Day4%E3%80%815%E3%80%816/1/33.html

元素使用策略

列表性质：ul、ol、li
标题性质：h1~h3
段落性质：p
不知道用什么时就用div
总体：先使用块元素搭建框架，再使用行元素填充页面

功能性标签

table

作用：展示数据列表

元素

caption 标题
thead 表头有tr__td/th（td 列；th 居中加粗）
tbady 表体有tr__td/th
tfoot 表底有tr__td/th

属性

1、border标签：设定围绕表格的边框的宽度
style=“border-collapse: collapse;” 可使表格线合为一条【下划线部分可改为：separate(默认值边框会分开)、inherit(将从父类继承)】
cellspacing标签:设定单元格之间的间距(也向table标签添加border-spacing样式进行设置）
cellpadding标签：设定单元内边距

<table border=1 style="border-collapse: collapse;" align="center">

2、width标签：设定表格的宽度
height标签：设定表格的高度
bgcolor标签：设定表格背景色(可用颜色名，如：pink；也可使用十六进制值表示如下）

<td width=80 bgcolor="#ffcc99" height=40>姓名：</td>

3、align标签：指定表格相对于周围标签的对齐方式（有left、right、center）

<td rowspan=5 width=120 align="center">

4、valign标签：设置表格行中单元格内容的垂直对齐方式(有top上、middle中、bottom下、baseline基准线)
5、colspan样式：设置单元格合并多少列
rowspan样式：设置单元格合并多少行

<td rowspan=5 width=120 align="center">
<td colspan=4>xxx省xx市</td>

6、nowrap标签：设定单元格内文本的内容是否换行（不加则自动换行）

以下为部分属性应用及显示

<body>
 <table border=1 style="border-collapse: collapse;" align="center">
 <!-- border 给表格加线-->
 <!-- style="border-collapse: collapse;"  使线变为一根，而不是两根粘一起 -->
 <!-- align="center"   居中（加在tr上一行都可居中）-->

	<h2 align="center">个人简介</h2>
	<tbody>
	<!-- 一定记得写tbody -->

		<tr>
		<td width=80 bgcolor="#ffcc99" height=40>姓名：</td>
		<!-- bgcolor 设置颜色 -->
		<!-- width 宽  hight 高 -->
		<td width=70>xxx</td>
		<td width=80 bgcolor="#ffcc99">籍贯：</td>
		<td width=70>xxx</td>
		<td rowspan=5 width=120 align="center">

		<!-- rowspan 合并行 （td的属性）-->

		<img src="1.jpg" height="200">
		</td>
    </tr>
    <tr>
		<td bgcolor="#ffcc99" height=40>出生日期：</td>
		<td>0000.00.00</td>
		<td bgcolor="#ffcc99" >政治面貌：</td>
		<td>xx</td>
    </tr>
    <tr>
		<td bgcolor="#ffcc99" height=40>性别：</td>
		<td>x</td>
		<td bgcolor="#ffcc99">民族：</td>
		<td>x</td>
	</tr>
	<tr>
		<td bgcolor="#ffcc99" height=40>学位：</td>
		<td>学士学位</td>
		<td bgcolor="#ffcc99">移动电话：</td>
		<td>12345678912</td>
	</tr>
	<tr>
		<td bgcolor="#ffcc99" height=40>专业：</td>
		<td>嵌入式</td>
		<td bgcolor="#ffcc99">电子邮件：</td>
		<td>123@163.com</td>
	</tr>
	<tr>
		<td bgcolor="#ffcc99" height=40>地址：</td>
		<td colspan=4>xxx省xx市</td>

		<!-- colspan 合并列 （td的属性）-->
	</tr>
	<tr>
		<td bgcolor="#ffcc99" height=40>兴趣爱好：</td>
		<td colspan=4>篮球、足球、羽毛球、游泳、旅游</td>
	</tr>
	<tr>
		<td height=80 bgcolor="#ffcc99">教育背景：</td>
		<td colspan=4>2015~2017就读于xxx学校</td>
	</tr>
	<tr>
		<td height=70 bgcolor="#ffcc99">获奖情况：</td>
		<td colspan=4>无</td>
	</tr><tr>
		<td height=70 bgcolor="#ffcc99">自我评价：</td>
		<td colspan=4>
			.....
			<br>。。。。。
		</td>
	</tr>
	</tbody>
	
</body>

个人简介

AKIRAZXX

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5全栈_行内元素/table

Day 5html行内元素作用：用于页面填充或装饰特性：1、多个内元素共享一行空间2、默认宽高有内容决定3、不可指定宽高4、行内元素不可以嵌套块元素（注意与块元素做对比）元素：span 无意义的行内元素a href url http://ip:port/path 相对地址 ./11.html . 当前文件...
复制链接

扫一扫

专栏目录