半小时速成HTML笔记(一)

学过XML的话HTML可以很快上手

目录

什么是HTML?

HTML 标题

实例

HTML 段落

实例

HTML 链接

实例

HTML 图像

实例

注意引用文件的路径:

上述实例合集:

HTML 属性

注意:

常用属性:

注释

水平线

常用标签

改变字体大小

HTML输出省略多余空格


什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

实例

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

实例

<p>这是一个段落</p>

<p>这是另外一个段落</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

实例

<a href="https://blog.csdn.net/qq_41895747">我的CSDN博客</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例

<img src="/images/logo.png" width="258" height="39" />

注意引用文件的路径:

1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下:

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、*.html 文件跟 *.jpg 图片在相同目录下:

<img src="*.jpg" width="300" height="120"/>
3、 *.html 文件跟 *.jpg 图片在不同目录下:

a、图片 *.jpgimage 文件夹中,*.html 跟 image 在同一目录下:

<img src="image/*.jpg/"width="300" height="120"/>

b、图片 *.jpgimage 文件夹中,*.htmlconnage 文件夹中,imageconnage 在同一目录下:

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图片来源于网络,那么写绝对路径:

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

上述实例合集:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习实例</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
 
<p>我的第一个段落</p>
<a href="https://blog.csdn.net/qq_41895747">我的CSDN博客</a>
<br><!--换行-->
<img src="image/icon.png" width="100" height="100">
 
</body>
</html>

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

注意:

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

常用属性:

属性 描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(inline style)
title 描述了元素的额外信息 (作为工具条使用)

注释

<!-- 这是一个注释 -->

水平线

<hr />

常用标签

标签 描述
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释

改变字体大小

<font size = "1">1号字体文本</font>

HTML输出省略多余空格

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

例子:

发布了277 篇原创文章 · 获赞 289 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/qq_41895747/article/details/104243943
今日推荐