怎样创建一个HTML文件

最新推荐文章于 2024-07-24 14:14:30 发布

Goudan_Wang

最新推荐文章于 2024-07-24 14:14:30 发布

阅读量7.5k

点赞数 4

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/Goudan_Wang/article/details/71194628

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网页文件的组成部分

HTML用于描述页面的结构
CSS用于控制页面中元素的样式
JavaScrpt用于响应用户操作

二、HTML简介

HyperText Markup Language(超文本标记语言)
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

三、准备知识

1、HTML的总体结构
创建HTML文件开始时的总体结构
（1）head部分是填入给浏览器看的内容
注：在<title>Title</title>下行可从外部引入CSS样式。从外部引入方法有：
a.导入式

<!--导入外部样式：在内部样式的<style></style>标记之间导入一个外部样式表，导入时用@import。-->
<style type="text/css">
@import "example.css";
</style>

b.链表式

<link href="example.css" rel="stylesheet" type="text/css"/>

（2）框红线部分（Title）写网页标题
（3）body部分，填入在网页上可见的内容，也就是给别人看的内容

2、基本语法
（1）长标签：双标签。由开始标签和结束标签组成
如：<h1></h1>
（2）单标签：自结束标签。因为内部不需要内容，但推荐加上斜杠
如：<br/>
（3）标签的属性：例如font标签的color
如：<font color="red">这是文字</font>
（4）注释：在页面中不会显示，而在源码中会显示
如：

3、语法规范
（1）HTML标签需要正确关闭，否则会对页面中的其他内容造成影响
如：<font color="read">文字1<font><font>文字2</font>
由于第一个font标签没有正确关闭（没有结束标签），所以文字2的颜色也成了红色。
（2）标签可以嵌套，但不能交叉嵌套
如：<h1><font>文字</h1></font>
这是错误的！
（3）注释不能嵌套
（4）属性必须有属性值，属性值必须要用引号引起来。单引号、双引号都可以

四、常见标签

1、<div>
定义：<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法：<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
**案例分析

<body>

 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>
  ...

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 ...
</body>

案例解释：上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class=”news” 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。

2、<h1>-<h6>
定义和用法：<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题，<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此需要慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

实例：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

3、<li>
定义和用法：
<li>标签定义列表项目。
<li>标签可用在有序列表（<ol>）和无序列表（<ul>）中。

实例：
①

<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

②

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

</body>
</html>

3、<a>
定义和用法：
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。

4、<img>
定义和用法：
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性和 alt 属性。
<img>标签没有结束标签。
这里写图片描述

实例：

<html>

<body>

<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>

<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>

</body>
</html>