HTML深入学习 2019年7与2日

最新推荐文章于 2023-03-02 20:40:05 发布

Pine Leaf

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量160

点赞数 3

分类专栏：自己学习文章标签：自己学习

本文链接：https://blog.csdn.net/weixin_44751318/article/details/94472335

版权

自己学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML相关

学习了相关HTML基本知识，表格、表单等标签重点学习，合并单元格与提交重置的学习。
学会使用editplus来更加方便的写和HTML代码

IOC图片

访问一个界面时，展现在标题栏也就是title中的图片就是IOC格式的图片，这一类图片首先需要经过转换，又JPEG格式转化一下，转化为IOC格式，索引方式相同，但是需要在标题栏中，格式为：

<link href="{{url_for('static',filename='ico.ico')}}" rel="icon" type="image/x-icon"/>

建立一个小表格

书目检索系统.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习学习</title>
    <link href="{{url_for('static',filename='ico.ico')}}" rel="icon" type="image/x-icon"/>
</head>
<body>
	<h1>书目检索系统</h1>
	<table>
	<tr>
		<td><select name="">
			<option value="1" selected="selcted">题名</option>
			<option value="2">出版社</option>
		</select></td>
		<td><input type="text" name=""></td>
		<td><input value="查询" type="submit"></td>
	</tr>
	</table>
	<table>
	<tr>
		<td colspan="3">1、第一本书的书名</td>
	</tr>
	<tr>
		<td>[外链图片转存失败(img-zlKNW0at-1562067091671)(https://mp.csdn.net/mdeditor/%7B%7Burl_for('static',filename='book/1.jpg')]%7D%7D)</td>
		<td><ul>
			<li>第一本书作者</li>
			<li>第一本书出版社</li>
		</ul></td>
		<td><ul>
			<li>馆藏副本：5</li>
			<li>可借复本：2</li>
		</ul></td>
	</tr>
	<tr>
		<td colspan="3">2、第二本书的书名</td>
	</tr>
	<tr>
		<td>[外链图片转存失败(img-BpEmZr8O-1562067091673)(https://mp.csdn.net/mdeditor/%7B%7Burl_for('static',filename='book/2.jpg')]%7D%7D)</td>
		<td><ul>
			<li>第二本书作者</li>
			<li>第二本书出版社</li>
		</ul></td>
		<td><ul>
			<li>馆藏副本：4</li>
			<li>可借复本：1</li>
		</ul></td>
	</tr>
	</table>
    [外链图片转存失败(img-20eQCxpP-1562067091674)(https://mp.csdn.net/mdeditor/%7B%7Burl_for('static',filename='pic.jpg')]%7D%7D) <br>
    这是一个图片。
</body>
</html>

在上述代码中主要是熟悉了相关的HTML中表格建立以及表单相关知识，对其进行了实践应用，代码目的是建立了一个表格，用于展示基本的图书馆搜索界面；

表格相关扩展知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" align=center>
<tr>
	<td colspan="2" align=center><h2>书本基本信息表</h2></td>
</tr>
<tr>
	<td align=center width="200">书名</td>
	<td  align=center><input type="text" name=""></td>
</tr>
<tr>
	<td align=center width="200">作者</td>
	<td align=center><input type="text" name=""></td>
</tr>
<tr>
	<td align=center width="200">出版日期</td>
	<td align=center><input type="text" name=""></td>
</tr>
<tr>
	<td align=center width="200">出版社</td>
	<td align=center><select name="">
		<option value="1" selected="selcted">华中师范大学出版社</option>
		<option value="2">北京大学出版社</option>
	</select></td>
</tr>
<tr>
	<td align=center width="200">ISBN</td>
	<td align=center><input type="text" name=""></td>
</tr>
<tr>
	<td colspan="2" align=center><input type="submit" value="提交">&nbsp&nbsp&nbsp<input type="reset"></td>
</tr>
</table>
</body>
</html>

上述代码建立了一个表格，主要是呈现书本基本信息表，其中表格是居中的，表格内容也是居中的，使两者成立的代码相同，但是所在位置不同，使表格居中，align="center"需要在第一个table标签内，使内容居中，需要在第一个td标签内；
如果想合并两列，只需要在td中加入colspan="合并的列数"即可；
为表格加上边框线，可以用HTML，也可以用CSS，上述代码直接用的HTML代码实现，即在table标签中加入border=“宽度”；
如果需要在表格中加入文本框，可以选择加入input标签，指定type形式为text文本，如需输入密码等，可以指定type为password，如果需要下拉菜单，可以加入select标签，下面有n个options，但是要指定值即value，且每一个均不同，同时也可以指定某人选项，也就是在用户为输入时，显示在文本框内的内容，即参数selected=“selected”；

utf-8

中文编码格式，如果不指定该格式展现代码或者网页内容，就会出现乱码的状况。在保存含有中文字符的代码的时候，需要指定utf-8的编码格式。

Pine Leaf

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML深入学习 2019年7与2日

HTML相关学习了相关HTML基本知识，表格、表单等标签重点学习，合并单元格与提交重置的学习。学会使用editplus来更加方便的写和HTML代码IOC图片访问一个界面时，展现在标题栏也就是title中的图片就是IOC格式的图片，这一类图片首先需要经过转换，又JPEG格式转化一下，转化为IOC格式，索引方式相同，但是需要在标题栏中，格式为：<link href="{{url_for...
复制链接

扫一扫

专栏目录