整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一文讲解HTML标题标记

于所有Web开发人员来说,无论你选择的是哪种框架或后端语言,都需要大量使用HTML(超文本标记语言)。

HTML标题标记

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
    </head>
    
    <body>
        <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>
    </body>
</html>12345678910111213141516复制代码类型:[html]

图示

h的级别越小文字大小越小。

当然了,这些文字标题都是左对齐的。

其实在标题标记中还有重要的属性!详情见文章------

我们可以给<h1>,<h2>......等标记加属性值让其变得更加多样化!

代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
    </head>
    
    <body>
        <h1 align="center">1级标题</h1>
        <h2 align="left">2级标题</h2>
        <h3 align="right">3级标题</h3>
        <h4 align="justify">4级标题</h4>
        <h5 align="right">5级标题</h5>
        <h6 align="center">6级标题</h6>
    </body>
</html>12345678910111213141516复制代码类型:[html]

图示

align标记在----文章已经有些许叙述,我们再来讲讲吧。

<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左对齐-->
<h3 align="right"></h3> <!--右对齐-->
<h4 align="justify"></h4><!--段落两端对齐-->1234复制代码类型:[html]

所以图示才是如此显示的。

开课吧广场-人才学习交流平台

lt;thead>标签定义HTML中<table>元素的标题;

<thead>标签与<tbody>和<tfoot>标签一起使用,它们定义HTML表格中的表头,表主体和表脚。

<thead>标签作为<table>标签的子元素,需出现在<caption>、<colgroup>元素之后;<tbody>,<tr>或<tfoot>元素之前。

<thead>标记内应至少包含一行<tr>元素。

提示:<thead>、<tbody>和<tfoot>元素默认不会影响表格的布局。不过可以使用CSS来为这些元素定义样式,从而改变表格的外观。

语法格式

<thead>

<tr>……</tr>

<thead>

示例代码

<table border="1">
    <caption>图书大厦书目价格单</caption>  
    <thead>  
        <tr>  
            <th>书名</th>  
            <th>单价</th>  
        </tr>  
    </thead>  
    <tr>  
        <td>HTML入门教程</td>  
        <td>79.00元</td>  
    </tr>  
    <tr>  
        <td>JavaScript基础教程</td>  
        <td>46.00元</td>  
    </tr>  
    <tr>  
        <td>Python精品教程</td>  
        <td>99.00元</td>  
    </tr>  
</table>  123456789101112131415161718192021复制代码类型:[html]

效果展示:

图书大厦书目价格单

书名

单价

HTML入门教程

79.00元

JavaScript基础教程

46.00元

Python精品教程

99.00元

HTML4.01与HTML5差异

在HTML5中,不再支持HTML4.01中<thead>标签的任何属性。

浏览器支持

所有主流浏览器都支持<thead>标签。

标签属性

属性

描述

align

right
left
center
justify
char

HTML5 不支持。定义 <thead> 元素中内容的对齐方式。

char

character

HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。

charoff

number

HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。

valign

top
middle
bottom
baseline

HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead>标签支持HTML的全局属性。

事件属性

<thead>标签支持HTML的事件属性。

开课吧广场-人才学习交流平台

图是一至六级标题.HTML代码是怎么样的?(自学示例1)

一级标题至六级标题

标题标签表示一段文字的标题或主题,并支持多层的内容结构。例如一级标题采用<h1>,二级标题采用<h2>,其他级别标题以此类推。HTML共提供了六级标题 <h1>~<h6>.并赋予了标题一定的外观,所有标题字体加粗,<h1>最大<h6>最小。

通过使用WebStorm工具,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同等级的标题标签对比</title>
</head>
<body>
<h1>头条号</h1>
<h2>头条号</h2>
<h3>头条号</h3>
<h4>头条号</h4>
<h5>头条号</h5>
<h6>头条号</h6>
</body>
</html>

是不是很简单,自己操作试一下吧。

这里的<html lang="en">可以理解为我编辑的这个页面是英文的。Chrome之类的浏览器会提示是否需要翻译。