网站制作之HTML

最新推荐文章于 2024-03-13 07:57:58 发布
最新推荐文章于 2024-03-13 07:57:58 发布
阅读量550 收藏 4
点赞数
分类专栏： 网站制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41387301/article/details/87709351
版权

HTML 语言教程 

  • HTML的扩展名是.html 或.htm，格式：<标志名></标志名>
  • HTML 元素以开始标签起始
    HTML 元素以结束标签终止
    元素的内容是开始标签与结束标签之间的内容
    某些 HTML 元素具有空内容（empty content）
    空元素在开始标签中进行关闭（以开始标签的结束而结束）
    大多数 HTML 元素可拥有属性
  • HTML 语言用于描述网页。
    HTML 是指超文本标记语言: Hyper Text Markup Language
    HTML 不是一种编程语言，而是一种标记语言(标记语言是一套标记标签 (markup tag))
    HTML 使用标记标签来描述网页
    HTML 文档包含了HTML 标签及文本内容
    HTML 文档也叫做 web页面
  • HTML 标记标签通常被称为HTML标签 (HTML tag)。
    HTML 标签是由尖括号包围的关键词，比如 <html>
    HTML 标签通常是成对出现的，比如 <b> 和 </b>
    标签对中的第一个标签是开始标签，第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签
  • HTML 空元素即为没有内容的 HTML 元素。
    HTML 空元素应该在开始标签中关闭。
    HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。
    HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受这种方式。
    注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。
  • <!...> 注解 ( 不会显示在浏览器上 )，可以多行

 1.、HTML 语言的基本结构： 

<html>//文件开始
  <head>//标头区开始
  <title>HTML 语言的基本结构</title>//标题区
  </head>//标头区结束 
  <body>//本文区开始
   本文区内容 
  </body>//本文区结束
</html>//文件结束
元素描述格式
DOCTYPE声明了文档的类型,不区分大小写，有助于在浏览器中正确地显示网页(1)HTML5-><!DOCTYPE html>;
(2)HTML 4.01-><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
(3)XHTML 1.0-><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>网页文件格式。HTML页面的根元素  
<head>标头区 : 记录文件基本资料，如作者、编写时间。<meta charset="utf-8">定义网页编码格式为utf-8
<body>本文区 : 文件资料，即在浏览器上看到的网站内容。  

2、颜色单位有三种表示方法：16进制颜色代码、10进制RGB码、直接颜色名称

<html>  
  <head> 
  <title>HTML 语言中颜色的不同表示方法</title> 
  </head> 
  <body> 
  <font color="red">静夜思</font><br>//直接颜色名称
  <font color="#FF0000">静夜思</font><br>//16进制颜色代码
  <font color="RGB(255,0,0)">静夜思</font><br>//10进制颜色代码
  </body> 
</html>

3、html 文档中 head 部分的基本使用方法

元素描述格式
title文档标题，定义了浏览器工具栏的标题；当网页添加到收藏夹时，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题<title> …… …… </title> 
meta描述非 html 标准的一些文档信息

1、定义搜索关键字：

<meta name="keywords" content（内容）="html,css,javascript">  
<meta name="description"(描述，描写) content="网页制作"> 

 2、控制页面缓存： 
<meta http-equiv="pragma"（杂注）content="no-cache"> 

3、定义语言： 
<meta http-equiv="content-type"content="text/html;charset="GB2312">

GB2312简体中文，BIG5 繁体中文

4、刷新页面 
<meta http-equiv="refresh"content="60",URL="new.htm">  

link描述当前文档与其他文档之间的连接关系<link rel="描述" href="URL 地址"> 
  rel 说明两个文档之间的关系；href 说明目标文档名。以下是一个指定外联样式表文件的例子： 
<link rel="stylesheet" href="style.css"> 
base定义体试时默认的外部资源<base href="原始地址" target="目标窗口名称"> 
script脚本程序内容<script language="脚本语言"> …… …… </script> 
style样式表内容  用来指定当前文档的 css 层叠样式表。css 对于网页的字体样式、背景、边界等都有很大的应用。详细 部分请大家参阅 css 有关内容。

4、html 语言中的 body 的部分用法

  • 背景
元素描述格式
bgcolor背景色 <body bgcolor="颜色值"> 
background背景图案 <body background="URL"> 
text文本颜色 <body text="color" > 
link链接文字颜色 <body link="color"> 
alink活动链接文字颜色 <body alink="color"> 
vlink已访问链接文字颜色 <body vlink="color"> 
leftmargin页面左侧的留白距离 <body leftmargin="value"> 
topmargin页面顶部的留白距离 <body topmargin="value"> 
  • 字体
元素描述格式
<b>定义粗体文本<b>.....</b>
<em>定义着重文字<em>.....</em>
<i>定义斜体字<i>.....</i>
<small>定义小号字<small>.....</small>
<strong>定义加重语气<strong>.....</strong>
<sub>定义下标字<sub>.....</sub>
<sup>定义上标字<sup>.....</sup>
<del>定义删除字<del> .....</del> 
<tt>打字体 ( 固定宽度文字 )<tt>.....</tt>
<ins>定义插入字<ins>.....</ins> 
  • 计算机输出
元素描述格式
<code>定义计算机代码<code>一段电脑代码</code>
<kbd>定义键盘码(标签已废弃)<kbd>键盘输入</kbd>
<samp>定义计算机代码样本<samp>计算机样本</samp>
<var>定义变量<var>变量</var>
<pre>定义预格式文本<pre>定义预格式化的文本</pre>
  • 引文、引用、及标签定义
元素描述格式
<abbr>

<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。

通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<address>标签定义文档作者/所有者的联系信息。

如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。

如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

<address>

Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

<bdo>

bdo 指的是 bidi 覆盖（Bi-Directional Override）。

<bdo> 标签用来覆盖默认的文本方向。

<bdo> 标签必须配合 dir 属性使用。

<bdo> 标签有 ltr 和 rtl 两个属性值，分别表示：从左到右显示文本和从右到左显示文本。

<p>该段落文字从左到右显示。</p> 
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 
<blockquote>定义长的引用,浏览器通常会对 <blockquote> 元素进行缩进。<blockquote cite="http://www.worldwildlife.org/who/index.html"> 
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 
</blockquote>  
<q>

<q> 标签定义一个短的引用。

浏览器经常会在这种引用的周围插入引号。

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q> 
We hope they succeed.</p>
<cite>

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

注释：人名不属于作品的标题。

提示：<cite> 标签还有一个不为人知的功能：使用该标签，您或其他人可以从文档中自动摘录参考书目。例如：浏览器能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。也就是说，文档的内容可以通过浏览器以不同的方式展示给用户。

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<dfn>

<dfn> 标签是一个短语标签，用来定义特殊术语或短语。

提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

<dfn>定义项目</dfn>

 

mu_Yana
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用html制作网页
2301_76469377的博客
07-10 1万+
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容 ，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。<p>HTML称为超文本标记语言，是一种标识性的语言。
HTML网页制作——制作一个属于自己的网页
一起努力共同进步，为了未来一起奋斗吧！
10-04 5万+
不想要一个属于自己的网页嘛，想要就进来看看吧，手把手教你制作一个属于自己的网页
HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)
weixin_42283461的博客
03-13 722
HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 34万+
制作一个简单的HTML个人网页
HTML网页制作
2301_76192170的博客
06-30 3436
链接 JavaScript：如果需要为页面添加交互和动态功能，可以创建一个 JavaScript 文件，并使用 <script> 标签将其链接到 HTML 文件中。链接 CSS：如果需要为页面添加样式，可以创建一个 CSS 文件，并使用 <link> 标签将其链接到 HTML 文件中。兼容性：在编写 HTML 和使用 CSS 和 JavaScript 时，要考虑不同浏览器的兼容性，确保网页在各种环境下正常显示和运行。语义化：使用合适的 HTML 标签来描述元素和内容，以提高页面的可读性和可访问性。
如何用html制作一个简单的网页
m0_56398485的博客
07-09 6万+
如何用html制作一个简单的网页
html 宠物网站制作模版
最新发布
04-26
html 宠物网站制作模版
HTML 制作1号店网页
05-14
HTML 制作1号店网页
轻松学HTML+CSS之个人网站制作.pptx
11-17
轻松学HTML+CSS之个人网站制作.pptx
使用HTML+CSS技术制作篮球明星介绍网站
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
纯手工html+JavaScript制作的班级网站
07-23
班级网站涉及到学生班级管理，例如通知一项班级紧急通知，如果通过老师一个-一个学生联系，那将会浪费大量的时间和人力，而且容易造成处理时间的不及时，学生方面容易得不到完整的通知。为了满足老师和学生对班级...
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 3万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 2975
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
七分钟学会 HTML 网页制作
LS_952754的博客
08-21 1万+
七分钟学会 HTML 网页制作
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML 教程：学习如何构建网页||HTML 简介
爱编程的鱼的博客
06-24 3600
我的第一个网站
用html制作简易网页
Cc1735781705的博客
09-04 1万+
66
HTML期末设计——代码篇
greengirl5的博客
06-22 12万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
【手把手】制作一个简单的HTML网页
java小白翻身
11-20 8万+
新建一个html文件： 我要给body添加一些样式，就在head元素上挂载一个style元素。 然后，写样式表： 效果： 这样的话，我们就可以看到body部分了。现在，我给body添加一点padding。 页面上看不出区别，让我们打开F12，看一下现在的body变成了什么样子。 示意图： 从图中可以看出，body元素分为三层，最里面的一层，就是520 x 500的那部分，这个叫做内部真实空间，也就是说，你可以在里面添加其他元素，比如div元素，p元素，a元素等等。然后中间的一层就是paddin
html旅游网站制作
04-10
HTML旅游网站制作是指使用HTML（超文本标记语言）来创建一个专门用于展示旅游信息和服务的网站。以下是制作HTML旅游网站的一般步骤： 1. 确定网站需求：首先，你需要明确你的网站的目标和需求。确定你想要提供哪些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值