一、标题标签  h1-->h6

h1最大

h6最小

 

<body>

  <h1>一级标题</h1>

  <h2>二级标题</h2>

  <h3>三级标题</h3>

  <h4>四级标题</h4>

  <h5>五级标题</h5>

  <h6>六级标题</h6>

</body>                    

 

 

 

二、特殊符号

 

<body>

  Copyright &copy; 1999-2011 &quot;北大青鸟&quot; All rights.

</body>

 

空格的连续写法

 

 <body>

  让子弹           多飞一会！！<br />

  让子弹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;多飞一会！！<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基本标签的更多相关文章

  1. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  2. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  3. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  4. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  7. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  8. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  9. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  10. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

随机推荐

  1. Static data members in C++

    Predict the output of following C++ program: 1 #include <iostream> 2 using namespace std; 3 4 ...

  2. SpringSecurity Oauth2.0

    1.用户认证分析 上面流程图描述了用户要操作的各个微服务,用户查看个人信息需要访问客户微服务,下单需要访问订单微服务,秒杀抢购商品需要访问秒杀微服务.每个服务都需要认证用户的身份,身份认证成功后,需要 ...

  3. 【力扣】19. 删除链表的倒数第 N 个结点

    给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 进阶:你能尝试使用一趟扫描实现吗? 示例 1: 输入:head = [1,2,3,4,5], n = 2输出:[1,2,3,5]示例 ...

  4. 11、Redis的配置文件

    Redis的配置文件 一.Redis配置文件简介 Redis是通过配置文件启动的 Redis对大小写字母不敏感 Redis基本上环境搭建都在配置文件 关于Redis配置文件位置是安装时放的位置,关于R ...

  5. 【模型推理】量化实现分享一：详解 min-max 对称量化算法实现

      欢迎关注我的公众号 [极智视界],回复001获取Google编程规范   O_o   >_<   o_O   O_o   ~_~   o_O   大家好,我是极智视界,本文剖析一下 m ...

  6. SWPUCTF_2019_login(格式字符串偏移bss段）

    题目的例行检查我就不放了,将程序放入ida中 很明显的值放入了bss段的格式字符串,所以我们动态调试一下程序 可以看到ebp这个地方0xffd0dd17-->0xffd0dd38-->0x ...

  7. MySQL 分区表，为什么分区键必须是主键的一部分？

    随着业务的不断发展,数据库中的数据会越来越多,相应地,单表的数据量也会越到越大,大到一个临界值,单表的查询性能就会下降. 这个临界值,并不能一概而论,它与硬件能力.具体业务有关. 虽然在很多 MySQ ...

  8. LuoguP7694 [COCI2009-2010#4] AUTORI 题解

    Content 科学论文会大量引用一些早期的著作,因此在一个论文中出现两种不同的命名约定并不少见.这两种不同的命名约定分别是: 长变体,由每个作者姓氏的完整单词由连字符连接而成,例如 Knuth-Mo ...

  9. Spring学习（五）Spring和Mybatis的整合

    1.前言 在整合之前.要搞清楚是谁整合谁.后续会学到很多整合的例子.在这里.是Spring整合Mybatis.Spring中集成了很多关于Mybatis中一些关键类的jar包.通过这些.可以更加方便的 ...

  10. cmake全面教程

    1. 官网教程 2. 中文教程 3. Modern CMake