安装环境

安装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的更多相关文章

  1. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  2. html5学习之路_007

    CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...

  3. html5学习之路_006

    表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. html5学习之路_005

    PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...

  5. html5学习之路_004

    HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...

  6. html5学习之路_003

    html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...

  7. html5学习之路_002

    html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...

  8. 8年,从2D到3D,我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. springboot 学习之路 8 (整合websocket(1))

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. 网络流--最大流--Dinic模板矩阵版(当前弧优化+非当前弧优化)

    //非当前弧优化版 #include <iostream> #include <cstdio> #include <math.h> #include <cst ...

  2. 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 ...

  3. P1516 青蛙的约会和P2421 [NOI2002]荒岛野人

    洛谷 P1516 青蛙的约会 . 算是手推了一次数论题,以前做的都是看题解,虽然这题很水而且还交了5次才过... 求解方程\(x+am\equiv y+an \pmod l\)中,\(a\)的最小整数 ...

  4. PLAI那些事_06 FAE

    没有了with表达,with,exp,body的id换成exp的lambda函数,从而可以没有with来进行实现.即,{with {id exp} body}换成了{{fun {id} body} e ...

  5. inode block 软硬链接

    inode block 软硬链接 1 inode 1.1 inode(索引节点)作用 (1)用于存储文件数据属性信息(2)用于存储数据指针信息 1.2 如何产生 格式化时,创建文件系统 1.3 如何查 ...

  6. java反编译软件

    1.Java反编译插件 —— Jadclipse JadClipse是Jad的Eclipse插件,是一款非常实用而且方便地Java反编译插件,我们只需将下载的插件包复制到eclipse的plugins ...

  7. C# 数据操作系列 - 2. ADO.NET操作

    0.前言 在上一篇中初略的介绍了一下SQL的基本写法,这一篇开始我们正式步入C#操作数据库的范围.通过这一系列的内容,我想大家能对于数据库交互有了一定的认识和基础.闲话不多说,先给大家介绍一个C#操作 ...

  8. Semaphore和AQS

    Semaphore意思的信号量,它的作用是控制访问特定资源的线程数量 构造方法: public Semaphore(int permits) public Semaphore(int permits, ...

  9. 排序算法:图解快速排序算法--不超过18行代码Python和JavaScript实现快速排序算法

    快速排序有三大要素 分别是 第一:找基准值--key 第二:分区 第三:比较数字大小 先来看下快速排序流程: 基准值key选取了第一个元素78 基准值是可以任意一个元素 因为选择了最左边的数据,那么就 ...

  10. Linux常用命令详解—基于CentOS7

    ## Linux 目录- /:根目录,一般只存放目录,不存放文件- /bin -> /usr/bin:可执行二进制文件的目录,也是常用命令目录,如常用的命令 ls.cat.mv 等- /boot ...