跳至主要內容

基础知识

lipengjgs大约 4 分钟

文档类型声明（doctype）

声明指定当前文档的版本和风格：告诉浏览器使用哪种HTML版本(用什么文档类型规范来解析)来显示网页

<!-- 位于文档中最前面的位置 -->
<!DOCTYPE html>

<!-- H5之前的文档类型声明 -->
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3....">
<!-- 命名空间：也就是规定哪些标记可以用 -->
<html xmlns="http://www.w3.org/1999/xhtml">

基础标记(描述功能的符号)语法

双标记（封闭类型标记）：<p></p>

单标记/空标记（非封闭类型标记）：<br>

1. 基本结构标记

  • html

  • head

    头信息；用来包含文件的基本信息，比如网页的标题、关键字，在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等标记

  • title

  • meta（页面元信息, 必须放在head里面） content属性是必须的，一般配合name， http-equiv属性

  • link

  • style

  • body（主体部分）

  • script

  • 文档注释： <!--这里是注释-->；注释不能嵌套

    • 注释不能嵌套
    • 不能再标记的尖括号之内

2. 格式标记

  • div 分区显示标记，也称之为层标记；常用来编排一大段的HTML段落，也可以用于格式化表，和<p>很相似；层可以多层嵌套使用
  • br 强制换行标记；让后面的文字、图片、表格等等，显示在下一行
  • p 段落标记，换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落
  • center 居中对齐标记: 让段落或者是文字相对于父标记居中显示
  • pre 预格式化标记: 保留预先编排好的格式
  • ul 无序列表标记：列表可以进行嵌套
  • ol 有序列表标记： 列表可以进行嵌套；value：指定一个新的序列数字起始值
  • li 列表项目标记: 每一个列表使用一个li标记
  • <dl><dt><dd> 定义型列表；对列表条目进行简短的说明
  • hr 水平分割线标记

3. 文本标记

  • hn 标题标记；共有6个级别，n的范围 1-6，不同级别对应显示大小不同的标题，h1最大，h6最小
  • font 字体设置标记；设置字体的格式 三个常用属性: <font size="14px">;<font color="red">;<font face="微软雅黑">
  • b 粗字体标记
  • i 斜字体标记
  • sub 文字下标字体标记
  • sup 文字上标字体标记
  • tt 打印机字体标记
  • cite 引用方式的字体，通常是斜体
  • em 表示强调，通常显示为斜体字
  • strong 表示强调，通常显示为粗体字
  • small 小型字体标记
  • big 大型字体标记
  • u 下划线字体标记

4. 图像标记

  • img 单标记

5. 超链接

  • a 标记

6. 表格

7. 表单

8. 框架集

<html lang="zh">
    <head>
        <meta name="keywords" content="value1,value2">
        <meta name="description" content="这是一个网站">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <!-- http响应头设置，等价物 -->
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <!-- 这样写可以达到的效果是如果安装了GCF(Google Chrome Frame(谷歌内嵌浏览器框架GCF))，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染 -->
        <!-- 像在360这种双核浏览器中 -->
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
        <title>页面名称</title>
        <link rel="stylesheet" href="./common.css">
        <style>
            .app {
                border: 0;
                margin: 0;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="app">App</div>
        <div>
            <p>这是一个段落<br>换行了<span>文本</span></p>

            <pre>
                a:111
                b:   222
                c:      333
                d:         444
            </pre>

            <hr>
            
            <ol type="1">
                <li></li>
            </ol>
            <ol type="A">
                <li></li>
            </ol>
            <ol type="a">
                <li></li>
            </ol>
            <ol type="I">
                <li></li>
            </ol>
            <ol type="i">
                <li></li>
            </ol>

            <dl>
                <dt>软件说明：</dt>
                <dd>简单介绍软件的功能及基本应用</dd>
                <dt>软件界面</dt>
                <dd>用于选择软件的外观</dd>
            </dl>
        </div>
    </body>
</html>

元素

元素： Element, 指标记及里面内容，整体性

1. 元素嵌套

2. 属性和值

字符实体

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
'单引号&apos; (IE不支持)&#39;
￠分&cent;&#162;
£镑&pound;&#163;
¥日圆&yen;&#165;
€欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

示例

tag.html

上次编辑于:
贡献者: lipengjgs
Copyright © 2025 lipengjgs