html5学习之路_001
2024-09-03 17:55:18
安装环境
安装intellij idea作为开发环境
打开环境
新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"> </head>
<body> </body>
</html>
这次我们说说链接跟表格的制作。
链接
框架代码分为头和身,头为:<head></head>,身为 <body></body>。在<head></head>中有<title></title>,这个代表标题,在其中写的内容会出现在网页标题上
<title>html5:链接 </title>
出现在网页标题上的内容就是“html5:链接”。如图1
图1
链接写在body里面:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystile.css">
<title>html5:链接 </title> </head>
<body>
<a href="http://baidu.com">百度一下</a> </body>
</html>
代码中,<a></a>代表链接,在其中间输入的“百度一下”是运行后在页面看到的字符,而“href="http://baidu.com”是点击字符所切换到的页面。如上说述,点击“百度一下”就会切换到百度搜索页面,运行按钮在右上角,任意点击一款浏览器。如图2:
图2
表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</td>
<td>
<ol>
<li>西红柿</li>
<li>蘑菇</li>
<li>冬瓜</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
table代表表格,参数border代表表框厚度。<tr></tr>代表行,<td></td>代表列,<ul></ul>代表无序排列,<ol></ol>代表有序排列,运行之后如图:
可在table中插入参数,cellpadding:单元格间距; bgcolor:单元格背景颜色;background:单元格内的图片
本站文章为宝宝巴士 SD.Team原创,转载务必在明显处注明:(作者官方网站:宝宝巴士)
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4737937.html
最新文章
- 01.Bootstrap入门
- Oracle PL/SQL 入门
- VisualSFM for Structure from Motion
- Linux常见问题的处理方法(长期更新)
- 一:AndEngine的小例子
- 在asp.net mvc中使用PartialView返回部分HTML段
- asp.net mvc Ajax.BeginForm不能异步刷新,或转到新页面,或页面还是刷新了,的原因(或解决办法)(转)
- Linux命令 rpm
- 国内常用ntp服务器ip地址
- 脚本检测 media query 分界点
- 浅析一款扫描dom-xss的浏览器插件
- NOIP刷题建议(未完结)
- .net core 下编码问题
- 【原创】Mysql中select的正确姿势
- linux之目录知识
- IOS xib和代码自定义UIView
- 『MXNet』第十二弹_再谈新建计算节点
- 基于Teigha.Net实现CAD到SHP的转换方案
- Error_GL_KeyflexfieldDefinitionFactory.getStructureNumber无法找到应用产品
- Codeforces Round #361 (Div. 2) D - Friends and Subsequences