亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > 学制作网页：第二篇 HTML

    学制作网页：第二篇 HTML

    时间：2023-07-26 02:21:02 | 来源：网站运营

    时间：2023-07-26 02:21:02 来源：网站运营

    学制作网页：第二篇 HTML：

    Learning is a long-term thing

    HTML（一）基础内容

    一、HTML文档由标记和属性组成。

    1、标记向页面中添加页面元素，属性是标记的补充。

    2、标记有双标记和单标记两种类型。

    双标记语法：<标记> </标记>

    单标记语法：<标记 /> 如<br />、<hr />

    3、属性语法：<标记名称 属性名1="属性值" 属性名2="属性值">

    二、HTML文档结构

    <!DOCTYPE html><html> <head> <title> </title> </head> <body> </body></html> DOCTYPE：样本代码，使用哪个 HTML 版本进行编写的指令。

    HTML：文档标记，表示该文件的类型为HTML文件。

    HEAD：头标记，里面有TITLE标题标记和META元数据标记[1]。

    BODY：体标记，浏览器显示的页面内容，文字内容要在这里面输入。

    三、HTML标记分类

    1、基本标记

    2、文字与段落标记

    3、列表标记

    4、超链接标记

    5、表格标记

    6、框架标记

    7、表单标记

    8、多媒体标记

    9、其他标记：注释标记 <! --注释内容-->

    四、需要注意！！

    1、“<”和“>”是任何标记的开始和结束。

    2、标记可以嵌套使用，但不能交叉使用

    3、文件扩展名为.html&.htm

    4、空格回车在HTML中不起作用

    5、文件名由英文字母、数字或下划线组成（注意中文！！！！）

    6、编码中不能有中文

    7、建议不同标记单独占一行

    8、优秀的编码是要有注释的

    9、html是不会自动检测出错误来的，编码时需要仔细

    10、在HBuilder中写HTML需要在<head>里写入<meta charset="utf-8">才可以顺利执行，记事本里不用写，写了反而会出错

    HTML（二）文字内容段落

    一、文字内容

    文字内容在<body>与</body>标记之间添加

    1、通文字直接输入

    2、标题字：#填数字1~6，标题文字有6个级别可选，每种都不一样

    <h#>标题文字</h#>3、空格： &nbsp

    4、特殊符号

    显示说明HTML
    半角大的空白&ensp;
    全角大的空白&emsp;
    不断行的空白格&nbsp;
    <小于&lt;
    >大于&gt;
    &&符号&amp;
    “双引号&quot;
    ©版权&copy;
    ®已注册商标&reg;
    ™商标（美国）&#8482;
    ×乘号&times;
    ÷除号&divide;

    二、文字样式

    1、普通文字标记<font>

    <font face=“ 字体” size=“字号 ” color=“ 颜色” >…</font>2、基底文字标记<basefont>

    <basefont face=“ 字体 ” size=“ 字号” color=“颜色 ” > face属性定义字体，可一次定义多个字体，字体之间用逗号分隔。size属性定义字号，取值为1~7，也可以用+或-来设置相对值 。color属性定义颜色，其值为该颜色的英文单词或十六进制数值。

    3、粗体：

    <b>…</b>斜体：

    <i>…</i>下划线：

    <u>…</u>删除线：

    <strike>…</strike>

    三、段落标记

    1、因为在文本编辑器中输入的回车空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记<p>来实现。段落标记：

    <p align=“left/center/right”>…</p>2、换行标记：

    <br />3、居中标记： 该标记也可以使图片等网页元素居中显示

    <center>…</center>4、水平分割线：

    <hr width=" " size=" " color=" " align=" " noshade>也可以直接写 <hr>，属性值均为默认值。width定义水平线的长度；size定义水平线的宽度；color定义水平线的颜色；align定义水平线的对齐方式；noshade定义水平线不出现阴影

    四、文本语义标记

    time：定义时间或日期。datetime用于定义相应的时间或日期，pubdate用于定义time标签中的文档（或article元素）发布日期。

    mark：在文本中高亮显示某些字符

    cite：以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中。

    五、插入图像

    1、常用图像格式：.PNG 、.GIF和.JPEG

    PNG图像文件格式:是Fireworks文件格式图像使用的是高速的交替显示方案，显示速度很快；图像可以是灰阶的（16位）或彩色的（48位），也可以是8位的索引色。

    GIF图像文件格式：非失真压缩方式，适用于颜色较少的情况，支持背景透明色，最多只能处理256种色彩，故不能用于存储真彩色的图像文件。

    JPEG(JPG)图像文件格式：失真压缩方式，颜色数目多，可选择压缩比例的静态图像格式。

    2、插入图像标记是单标<img>，语法：

    <img src=“url” … />3、图像的属性

    属性属性值描述
    srcURL图像的路径
    alt文本图像不能显示时的替换文本
    title文本鼠标悬停时显示的内容 程序6-3
    width像素（XHTML不支持%页面百分比）设置图像的宽度
    height像素（XHTML不支持%页面百分比）设置图像的高度
    border数字设置图像边框的宽度
    vspace像素设置图像顶部和底部的空白（垂直边距）
    hspace像素设置图像左侧和右侧的空白（水平边距）
    alignleft将图像对齐到左边
    alignright将图像对齐到右边
    aligntop将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
    alignmiddle将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方

    六、路径（不论是HTML还是CSS都是通用的）

    1、文档相对路径 (Relative Parth) 适用于在同一盘符下的

    对于大多数web站点的本地连接来说文档相对路径通常是最合适的路径。

    (1)同一目录的文件引用，直接写文件名即可，例如：

    <img src="图片.jpg" /> (2)表示上级目录：../上一级，../../上上级，以次类推，例如：

    <img src="../图片.jpg" /> (3)表示下级目录，直接写下级目录文件的路径，例如：

    <img src="images/pro1.jpg" />2、根相对路径（site root）也称相对根目录，适用于在不同的盘符下的

    描述从站点的根文件夹到文档的路径。此种路径以“/”开头，如“/images/a001.jpg”

    在处理使用多个服务器的大型Web站点，或在使用承载多个站点的服务器，则可能需要使用此种路径

    如不熟悉此种路径，请坚持使用文档相对路径。

    3、绝对路径 (Absolute Path)

    指包括服务器规范在内的带域名的完整路径，例如：

    https://www.google.cn/

    HTML（三）列表

    1、含义

    在网页中将相关资料以条目的形式排列而形成的表。

    2、列表分类

    无序列表、有序列表、无序列表、定义列表、目录列表和菜单列表。

    列表类型标记符号
    无有序列<ul>
    有序列表<ol>
    定义列表<dl>
    目录列表<dir>
    菜单列表<menu>
    无序列表：没有特定顺序的相关条目集合，没有先后顺序之分，它们之间以一个项目符号来标记。

    有序列表：有特定顺序的相关条目的集合，各个列表项有先后顺序之分，他们之间以编号来标记。

    定义列表：用于组织术语及其定义。术语独占一行并顶满格显示，定义另起一行并缩进。还可以用于组织常见问题及答案

    菜单列表：通常用于显示一个简单的单列列表，一般不做嵌套。

    目录列表：通常用于显示一个多列的文件列表，可做嵌套。

    3、语法

    无序列表:

    <ul> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li> ……</ul>有序列表：

    <ol> <li></li> <li></li> <li></li> ……</ol>定义列表：

    <dl> <dt> …</dt> <dd> …</dd> <dd>… </dd> …… <dt> …</dt> <dd> …</dd> <dd>… </dd> …… ……</dl> 菜单列表：

    <menu> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li> …… </menu> 目录列表：

    <dir> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li> …… </dir>4、列表的嵌套

    列表可以嵌套使用，也就是一个列表中还可以包含有多层子列表。

    对于内容层次较多的情况，使用嵌套列表其内容看起来更加清晰明了。

    嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。



    参考

    1. ^META元数据标记 https://baike.baidu.com/item/meta/4265710

    关键词：学制

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭