HTMl-banner.jpg

HTML基本框架

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML基本框架</title> 
    </head> 
    <body>    
    页面主体区域
    </body> 
</html>

头部标记

基本语法:<head>###</head>

这里包括了网页的标题、元信息,同时也在此引入外部css库和js库,定义在头部标记中的内容一般不被浏览器渲染。

标题标记

基本语法:<title>###</title>

这里的标题内容将显示在浏览器标签上。

html-title.png

元信息标签

基本语法:<meta>

meta标签不会被浏览器显示,一般用于定义网页信息的说明、关键字和刷新等等。在HTML中

meta标签不需要结束标签,其基本属性有 namehttp-equiv 其中 name 属性用于描述页面,便于搜索引擎索引。

  • 设置页面的关键字

    <meta name="keyword" content="青玉案·元夕">
  • 设置页面说明

    <meta name="description" content="众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
    出自南宋辛弃疾的《青玉案·元夕》">
  • 自定义编辑工具

    <meta name="generator" content="Typora">
  • 设置网页文字及语言类型

    <meta http-equiv="content type" content="text/html"; charset="UTF-8">
  • 设置网页定时跳转

    <meta http-equiv="refresh" content="3; url=https://joooqi.cn">

3秒后跳转至joooqi.cn。

页面注释标记

基本语法:<!-- -->

注释掉在HTMl代码中的描述性的文字或代码,用来解释代码或者提示其他信息,其同样不被浏览器渲染显示。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML基本框架</title> 
    </head> 
    <body>
    <!-- 以下是主题部分-这里的内容不会被显示 -->
    页面主体区域
    </body> 
</html>

主体标记

基本语法:<body>###</body>

body 包含文档的所有内容。比如文本、超链接、图像、表格、列表、文本、图片、音频、视频等各种内容!

标题

基本语法:<h1>###</h1>

h为英文headline的简称,标题标记由<h1><h6> 重要性由高到低。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

其被渲染为:

对于不同的浏览器 h1字高大概为标准字的2~3倍,h6则比标准字略小

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

标题对齐标记

基本语法:<align="对齐方式">

属性值含义
left左对齐
center居中
right右对齐
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML基本框架-标题对对齐</title> 
    </head> 
    <body>
    <h1 align="left">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>
    </body> 
</html>

html-align.png

段落标记&换行标记

基本语法:<p>###</p> & <br>

段落标记可以没有结束标签,每一个<p>段落的开始就意味着上一个段落的结束。

一个换行标记<br>就代表一个换行,连续的多个标记可以实现多次换行。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML基本框架-段落标签</title> 
    </head> 
    <body>《青玉案·元夕》东风夜放花千树,更吹落,星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
    <br>
    <br>
    <br>
       <p align="center">《青玉案·元夕》 南宋 · 辛弃疾</p>
    <p align="center">东风夜放花千树,更吹落,星如雨。</p>
    <p align="center">宝马雕车香满路。</p>
    <p align="center">凤箫声动,玉壶光转,一夜鱼龙舞。</p>
    <p align="center">蛾儿雪柳黄金缕,笑语盈盈暗香去。</p>
    <p align="center">众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</p>
    </body>
</html>

html-p.png

不换行标记

基本语法:<nobr>

在网页中如果某一段文字过长,浏览器会默认进行换行处理,如果需要不换行则可使用该标记。

水平线标记

基本语法:<hr>

表示了一个分割线,会在浏览器中渲染为一条线,将上下内容分开。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML基本框架-分割线</title> 
    </head> 
    <body>
       <p align="center">《青玉案·元夕》 南宋 · 辛弃疾</p>
    <hr>
    <p align="center">东风夜放花千树,更吹落,星如雨。</p>
    <p align="center">宝马雕车香满路。</p>
    <p align="center">凤箫声动,玉壶光转,一夜鱼龙舞。</p>
    <p align="center">蛾儿雪柳黄金缕,笑语盈盈暗香去。</p>
    <p align="center">众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</p>
    </body>
</html>

其他标记

可以用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不可省略。

html-nbsp.png

更多特殊符号参考w3school