如何简单地创建html页面

顺晟科技

2021-09-15 11:47:47

126

# 转载请留言联系

一个HTML的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<head>”标签和“<body>”标签是它的层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

1.标签

双标签和单标签

# 双标记/双标签
结构格式：
   <标签名属性名="属性值" 属性名="属性值" ...>内容</标签名>
注意：
   一个双标签会两部分，左边叫开始标签，右边的结束标签，结束标签必须在标签名左边，有一个正斜杠 /

例如：<p></p>

# 单标记/单标签
结构格式：
   <标签名属性名="属性值" 属性名="属性值" ... />

注意：
单标签，更好在开始标签的最后，有一个正斜杠。

例如：<img />

标题标签

<h1>标题</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <!--最多只有标题6，常用的只有1-4-->
</body>
</html>

段落标签

<p>段落内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</body>
</html>

通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

<div>内容</div>

换行标签

<br/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>我是段<br/>我是第二段<br/>我是第三段</p>
</body>
</html>

图片标签

<img src="路径。可以是网上的链接路径，也可以是本地路径" alt=\'图片加载失败时显示的文字\' />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="./images/123.jpg" alt="滑稽" />
</body>
</html>

超链接标签（a链接）

<a href="链接地址">链接显示的文字或者图片</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>    
    <a href="http://www.baidu.com"><img src="./images/123.jpg"/></a>
</body>
</html>

注意：

1.链接地址一定要写http://或者https://

2.src=" " ----> 刷新当前页面

3.src="#" ----> 回到页面的顶部

关于超链接标签，还有一个很常用的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>  #如果后面还有一个href=\'...\'，只有前面的生效
     <!--target 表示用户点击链接，打开的方式:-->
     <!--target的值是固定：-->
     <!--_self  在当前页面中打开新的页面[默认值]-->
     <!--_blank 在新建的浏览器窗口中打开新的页面-->
</body>
</html>

div与span标签

div常用于包含其他的标签，用于表示，网页的一整部分内容，也就是用于进行网页的布局

span常用语包含其他的标签或者普通文本内容，也是用于进行网页的内容布局。

无意义标签的本身，没有任何其他的独特属性。

2.实体字符

  空白字符，一个空格 < 小于号 > 大于号

上一篇：正则表达式实现将html文本转换为纯下一篇：HTML入门编写

网站建设

Html

如何简单地创建html页面

一个HTML的基本结构如下：

1.标签

双标签和单标签

标题标签

段落标签

通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

换行标签

图片标签

超链接标签（a链接）

div与span标签

2.实体字符