安装环境

安装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. The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 C Buy Watermelon

    The hot summer came so quickly that Xiaoming and Xiaohong decided to buy a big and sweet watermelon. ...

  2. 1秒内通关扫雷？他创造属于自己的世界记录！Python实现自动扫雷

    五一劳动节假期,我们一起来玩扫雷吧.用Python+OpenCV实现了自动扫雷,突破世界记录,我们先来看一下效果吧. 中级 - 0.74秒 3BV/S=60.81 相信许多人很早就知道有扫雷这么一款经 ...

  3. JS中由闭包引发内存泄露的深思

    目录 一个存在内存泄露的闭包实例 什么是内存泄露 JS的垃圾回收机制 什么是闭包 什么原因导致了内存泄露 参考 1.一个存在内存泄露的闭包实例 var theThing = null; var rep ...

  4. Linux查看redis占用内存的方法

    redis-cli auth 密码info # Memory used_memory:13490096 //数据占用了多少内存(字节) used_memory_human:12.87M //数据占用了 ...

  5. Java流式思想和方法引用

    目录 Java流式思想和方法引用 1. Stream流 1.1 概述 传统集合的多步遍历代码 Stream的更优写法 1.2 流式思想的概述 1.3 获取流 1.4 常用方法 ①逐一处理:forEac ...

  6. zookeeper（分布式协调框架）简介与集群搭建

    ZooKeeper 的由来: Zookeeper最早起源于雅虎研究院的一个研究小组.在当时,研究人员发现,在雅虎内部很多大型系统基本都需要依赖一个类似的系统来进行分布式协调,但是这些系统往往都存在分布 ...

  7. OpenWrt（LEDE）2020.4.29更新 UPnP+NAS+多拨+网盘+DNS优化+帕斯沃 无缝集成+软件包

    交流群:QQ 1030484865 电报:  t_homelede   固件说明 基于Lede OpenWrt R2020.4.8版本(源码截止2020.4.29)Lienol Feed及若干自行维护 ...

  8. python语法学习第五天--函数（2）

    命名空间: 命名空间(Namespace)是从名称到对象的映射,大部分的命名空间都是通过 Python 字典来实现的. 命名空间提供了在项目中避免名字冲突的一种方法.各个命名空间是独立的,没有任何关系 ...

  9. 数据库-第八章 数据库编程-8.1 嵌入式SQL

    嵌入式SQL 一.嵌入式SQL的处理过程 1.嵌入式SQL语句的基本格式 2.嵌入式SQL的处理过程 3.主语言访问数据库的基本步骤 ⅰ建立数据库连接 ⅱ定义必要的主变量和数据通信区 ⅲ访问数据库并返 ...

  10. uni-app高分开源电影项目源码案例分析，支持一套代码发布小程序、APP平台多个平台(前端入门必看)

    uni-app-Video 一个优秀的uni-app案例,旨在帮助大家更快的上手uni-app,共同进步! Features ​ 代码编写简洁,注释清晰,快速入门必备: 支持在线模糊搜索: 程序类目懒 ...