html5学习之路_001
安装环境
安装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
html5学习之路_001的更多相关文章
- HTML5学习之路
出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.
- html5学习之路_007
CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...
- html5学习之路_006
表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- html5学习之路_005
PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...
- html5学习之路_004
HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...
- html5学习之路_003
html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...
- html5学习之路_002
html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...
- 8年,从2D到3D,我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...
- springboot 学习之路 8 (整合websocket(1))
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
随机推荐
- 网络流--最大流--Dinic模板矩阵版(当前弧优化+非当前弧优化)
//非当前弧优化版 #include <iostream> #include <cstdio> #include <math.h> #include <cst ...
- 2019 ICPC 银川网络赛 H. Fight Against Monsters
It is my great honour to introduce myself to you here. My name is Aloysius Benjy Cobweb Dartagnan Eg ...
- P1516 青蛙的约会和P2421 [NOI2002]荒岛野人
洛谷 P1516 青蛙的约会 . 算是手推了一次数论题,以前做的都是看题解,虽然这题很水而且还交了5次才过... 求解方程\(x+am\equiv y+an \pmod l\)中,\(a\)的最小整数 ...
- PLAI那些事_06 FAE
没有了with表达,with,exp,body的id换成exp的lambda函数,从而可以没有with来进行实现.即,{with {id exp} body}换成了{{fun {id} body} e ...
- inode block 软硬链接
inode block 软硬链接 1 inode 1.1 inode(索引节点)作用 (1)用于存储文件数据属性信息(2)用于存储数据指针信息 1.2 如何产生 格式化时,创建文件系统 1.3 如何查 ...
- java反编译软件
1.Java反编译插件 —— Jadclipse JadClipse是Jad的Eclipse插件,是一款非常实用而且方便地Java反编译插件,我们只需将下载的插件包复制到eclipse的plugins ...
- C# 数据操作系列 - 2. ADO.NET操作
0.前言 在上一篇中初略的介绍了一下SQL的基本写法,这一篇开始我们正式步入C#操作数据库的范围.通过这一系列的内容,我想大家能对于数据库交互有了一定的认识和基础.闲话不多说,先给大家介绍一个C#操作 ...
- Semaphore和AQS
Semaphore意思的信号量,它的作用是控制访问特定资源的线程数量 构造方法: public Semaphore(int permits) public Semaphore(int permits, ...
- 排序算法:图解快速排序算法--不超过18行代码Python和JavaScript实现快速排序算法
快速排序有三大要素 分别是 第一:找基准值--key 第二:分区 第三:比较数字大小 先来看下快速排序流程: 基准值key选取了第一个元素78 基准值是可以任意一个元素 因为选择了最左边的数据,那么就 ...
- Linux常用命令详解—基于CentOS7
## Linux 目录- /:根目录,一般只存放目录,不存放文件- /bin -> /usr/bin:可执行二进制文件的目录,也是常用命令目录,如常用的命令 ls.cat.mv 等- /boot ...
