怎样简单编写一个html网页
Posted 苦瓜爆炒牛肉
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样简单编写一个html网页相关的知识,希望对你有一定的参考价值。
-
一个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常用语包含其他的标签或者普通文本内容,也是用于进行网页的内容布局。
无意义标签的本身,没有任何其他的独特属性。
这里有一个理论点需要理解下:
块元素标签(行元素)和内联元素标签(行内元素)
标签在页面上会显示成一个方块。除了显示成方块,它们一般分为下面两类:
块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。注:内联元素标签包括上面的图片标签和超链接标签。
块元素标签示例:
<!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>
内联元素标签示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>啦啦啦<span>比拉巴拉</span></h1> </body> </html>
2.实体字符
| 空白字符,一个空格 |
< | 小于号 |
> | 大于号 |
以上是关于怎样简单编写一个html网页的主要内容,如果未能解决你的问题,请参考以下文章