基本标签

新建HTML文件

  • 新建HTML其实很简单的,只需要新建一个txt文件,然后改名就ok了
  • 比如:新建文本文档.txt → 改成 index.html

HTML语法的宽松性

  • HTML的语法其实也没这么严格的,比如就算没有<html>标签,有些浏览器还是能够解析出来(就算浏览器能够理解你写的html代码,并且能够呈现出来)
  • 建议还是按规范写,浏览器能”猜”出来不代表你写对了

HTML基本结构

  • <html> 是放在最外面的标签,叫根标签
  • 下面这两个是头部标签和身躯标签:
<html>
    <head>
    </head>
    <body>
    </body>
</html>Code language: HTML, XML (xml)
  • <head> 标签:​ 里面的东西是给浏览器看的,用来提示浏览器去做什么。比如我要浏览器去加载一个js文件。放在head里的内容在页面上是看不到的
  • <body> 标签:​ 我们能看到的网页的内容,都是放在body标签里面的

标签的嵌套

  • 标签是嵌套的(标签里面还可以有其他的标签)
  • 每一个标签里面能含有的标签不是随便的,有限制的。比如head里面就不能放body标签

运行HTML的两种方式

  1. 直接用浏览器打开本地html文件,就跟你用酷狗打开一个mp3音乐一样
  2. (后续可以学:通过本地服务器运行,比如Live Server、Apache等)

标题标签 <title>

  • 标签的大小写是不区分的,比如 <title><tiTle> 是一样的
<html>
    <head>
        <title>这是我第二个网页</title>
    </head>
    <body>
    </body>
</html>Code language: HTML, XML (xml)
  • <title> 里写的内容会显示在浏览器的标签页标题栏

内容的标题标签 H1–H6

  • HTML里面的标题和Word里面的”标题1、标题2……”是一个意思
  • H系列的特性是:加粗、换行、大小不一样(数字越小字越大)
<html>
    <head>
        <title>这是我第二个网页</title>
    </head>
    <body>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <h7>h7</h7>
    </body>
</html>Code language: HTML, XML (xml)

注意:HTML标准里标题只有 h1 到 h6,h7不是标准标签(浏览器可能不认或当普通文字处理)

换行

  • 换行的意思是?就是内容从下一行开始显示
  • 很多标签里面本身就自带换行特性(比如h1-h6、p)

段落标签 <p>

  • 特性:自动换行,并且宽度会随着浏览器的宽度而变化
<html>
    <head>
        <title>这是我第二个网页</title>
    </head>
    <body>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <h7>h7</h7>
        <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
    </body>
</html>Code language: HTML, XML (xml)

超链接标签 <a>

  • 如果没有超链接这个标签,互联网就是一张”死网”了
  • 标签的属性:在开始标签里面有一些键值对 key=value,后面会详细来讲这个
<a href="https://www.foxdevelop.com">进入foxdevelop</a>Code language: HTML, XML (xml)
  • href 就是属性,指定链接跳转到哪里

图片标签 <img>

<img src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png"/>Code language: HTML, XML (xml)
  • src 属性指定图片的地址(可以是网络地址,也可以是本地路径)

换行标签 <br/>

  • 如果就需要图片换行来显示,就用 <br/>
<a href="http://www.foxdevelop.com">进入foxdevelop</a>
<br/>
<img src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png"/>Code language: HTML, XML (xml)

本节代码

<html>
	<head>
		<title>这是我第二个网页</title>
	</head>
	<body>
	    <h1>h1</h1>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4>h4</h4>
		<h5>h5</h5>
		<h6>h6</h6>
		<h7>h7</h7>
		<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
		<a href="http://www.foxdevelop.com">进入foxdevelop</a>
		<br/>
		<img src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png"/>
	</body>
</html>Code language: HTML, XML (xml)
Previous:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注