2.HTML5基本标签
一、标题标签 h1-->h6
h1最大
h6最小
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
二、特殊符号
<body>
Copyright © 1999-2011 "北大青鸟" All rights.
</body>
空格的连续写法
<body>
让子弹 多飞一会!!<br />
让子弹
多飞一会!!<br />
</body>
三、行控制标签 <p>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p> #段落
<p>我是郭德纲!</p>
</body>
<body>
<h1>静夜思</h1>
床前明月光<br />
疑是地上霜<br /> #换行
举头望明月<br />
我是郭德纲!<br />
</body>
四、范围标签和下划线<span><hr />
<h1>静夜思</h1>
<hr />
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
<span style="color:red; font-size:40px;">低头思故乡
</span><br />
</body>
五、图像标签
<html>
<body>
<img style=width:100px height=100px src="1.jpg"; alt="游戏手柄" title="游戏手柄" />游戏手柄超便宜!!
<br />
<br />
<img src="2.jpg" style=width:100px height=100px alt="音乐播放器" title="音乐播放器" />音乐播放器2折!!<br />
</body>
</html>
src:指定图片所在的路径
alt:指定的替代文本
表示图像无法显示时(图片路径错误等)替代显示的文本
title:额外的提示或帮助信息
六、超链接的用法
<a href="链接地址" target="目标窗口位置">具体内容</a>
href:用于设定链接地址
target:指定链接在哪个窗口打开
_blank:将链接的文档加载到一个未命名的新浏览器窗口中
_self:将链接的文档加载到该链接所在的同一框架中,默认值
例子:
在从新编辑一个网页,名称为a.html。以便下边的语句调用
<a href="a.html" target="_blank">abc</a>
会在新的窗口中打开a.html页面
(2)a标签还可以用图片作为超链接
<a href="http://www.baidu.com"><img src="1.jpg" width="200px" height="200px"></a>
(3)锚链接
在本页之间跳转位置
<p>唐诗三百首</p>
<a href="#abc">李白</p> #点击"李白"的超链接就会跳转到本页的abc位置。
<a name="abc">望庐山瀑布</a> #定义好位置,位置名称为abc
七、HTML支持有序、无序和定义列表
(1)有序列表
例子: <ol> 效果: 1.c
<li>c</li> 2.b
<li>b</li> 3.a
<li>a</li>
</ol>
<ol start="10" > 效果:
<li>3</li> 10.3
<li>2</li> 11.2
<li>1</li> 12.1
</ol>
start="10" 表示从10开始 有序列表默认是从1开始的。
(2)无序列表
例子:
<ol>
<li>c</li>
<li>b</li>
<li>a</li>
</ol>
效果如下
- c
- b
- a
(3)自定义列表
用这个标签<dl></dl>
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
例子:
<dl>
<dt>年龄</dt>
<dd>1、2、3</dd>
<dt>姓名</dt>
<dd>pang、bing、bing</dd>
</dl>
效果:
年龄
1、2、3
姓名
pang、bing、bing
八、HTML表格
表格:由 <table> 标签来定义。
行:每个表格均有若干行(由 <tr> 标签定义),
单元格:每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例子:
<table>
<tr>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>abc</td>
<td>ghb</td>
</tr>
</table>
效果:
123 |
456 |
abc |
ghb |
2、边框
<table
border="1">
3.表格表头
<th>表头</th>
4.跨多列的表格
<td
colspan="所跨的列数">单元格内容</td>
5.跨多行的表格
<td
rowspan="所跨的列数">单元格内容</td>
6.为了使表格的宽度充满整个浏览器 可以使用width="100%"
<table
width="100%"></table>
7.表格的填充属性 和间距属性
1.文字与边框的距离 :cellpadding
2.表格与表格的距离 : cellspacing
例子:
<table width="100%"
cellpadding="10" cellspacing="200">
2.HTML5基本标签的更多相关文章
- HTML5 <details> 标签
HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...
- JavaScript----Js操控-HTML5 <progress> 标签
Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...
- HTML5新标签 w3c
w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...
- HTML语义化:HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
随机推荐
- Oracle存储过程游标for循环怎么写
一.不带参数的游标for循环 首先编写存储过程的整体结构,如下: create or replace procedure test_proc is v_date date; --变量定义 begin ...
- transient关键字和volatile关键字
看到HashSet的源代码的时候,有一个关键字不太认识它..transient,百度整理之: Java的Serialization提供了一种持久化对象实例的机制,当持久化对象时,可能有一些特殊的对象数 ...
- 监控网站是否异常的shell脚本
本节内容:shell脚本监控网站是否异常,如有异常就自动发邮件通知管理员. 脚本检测流程,如下:1,检查网站返回的http_code是否等于200,如不是200视为异常.2,检查网站的访问时间,超过M ...
- NoSQL之Redis学习笔记
一.NoSQL与Redis 1.什么是NoSQL? NoSQL=Not Only SQL ,泛指非关系型数据库.随着互联网的兴起,传统的关系型数据库已经暴露了很多问题,NoSQL数据库的产生就是为了解 ...
- 使用递归方法,遍历输出以.java结尾的文件
package cn.itcast.demo01;import java.io.File;/** * @author newcityman * @date 2019/7/27 - 19:17 * 题目 ...
- Springboot集成velocity
1.加入maven包 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Windows下搭建FFmpeg开发调试环境
背景 如果你是一个FFmpeg的使用者,那么绝大部分情况下只需要在你的程序中引用FFmpeg的libav*相关的头文件,然后在编译阶段链接相关的库即可. 但是如果你想调试FFmpeg内部相关的逻辑,或 ...
- shell脚本 检查mysql节点数据一致性
一.简介 源码地址 日期:2018/4/12 介绍:参考pt checksum思想改写,可以定制化的检查随意两个mysql节点的数据一致性. 功能: 检查随意两个几点的数据一致性 支持并发检查,基于库 ...
- smbclient 使用方法
1,列出某个IP地址所提供的共享文件夹 smbclient -L 198.168.0.1 -U username%password 2,像FTP客户端一样使用smbclient smbcl ...
- Redis入门及常用命令学习
Redis简介 Redis 是完全开源的,遵守 BSD 协议,是一个高性能的 key-value 数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持 ...