HTML学习笔记

HTML

字数统计: 1.3k阅读时长: 5 min

 2021/11/18 

HTML 基本语法学习笔记

前言：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

这是一个简单的html代码，但是这一个html文件中最基本的，也是最基础的格式。接下来就先根据这段代码来认识html。

1 2	<!DOCTYPE html> 这和=行代码用于声明该文档为HTML5文档

<html>
	......
	......
</html>
由这两个<html>、</html>包裹的代码构成一个完整的HTML网页

<head>
.....
    .....
</head>
头部元素，文档的元（meta）数据
例如：
<meta charset="utf-8">
定义网页编码格式为 utf-8

<title>菜鸟教程(runoob.com)</title>

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<body>
.....
    .....
</body>
在网页中可见的部分

1
2
3

<title> 元素描述了文档的标题
<h1> 元素定义一个大标题
<p> 元素定义一个段落

其次这些由尖括号包裹的就是HTML标签，同时这些标签都是成对出现的，比如和,前面的是开始标签和闭合标签

1.基础

1.1HTML标题

HTML标题（Heading）是通过

~

标签来定义的

1
2
3

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

运行效果：

也就是说，随着数字的增大，标题字体变小，但都会进行一个加粗处理

1.2HTML段落

HTML 段落是通过标签

来定义的。

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

效果：

1.3HTML链接

HTML 链接是通过标签来定义的。

1	<a href="https://www.runoob.com">这是一个链接</a>

会出现一个链接，点击即进入网址

在链接中可以使用id属性来达到书签的效果

1.4 HTML图片

通过标签来实现

1 2	<img loading="lazy" src="http://tva3.sinaimg.cn/mw1024/006yt1Omgy1gwiju7rjd8j32gw1p47wj.jpg" width="540" height="390" />

实现：

width--宽度

height--高度

loading--表示延时上传，这里还可以用alt，表示当上传图片失败或无法显示时，显示后面的字符串

2.HTML元素

html元素大致分为

开始标签 *	元素内容	结束标签 *
	这是一个段落
	这是一个链接
	换行

==开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）==

在拼写标签时对大小写并不敏感，也就是说和效果一样

在编写HTML元素时，应该规范使用关闭标签，即便是空元素也使用闭合标签

<br>就是空元素

3.HTML属性

在编写html元素时，我们可以对着这些元素添加一些属性

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

例如我们在编写链接元素时，href就是给这个元素添加了一个属性

还有在编写图片元素，他的宽度和高度也是属性

这里列举部分属性

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

详细各种属性可查看HTML 标准属性参考手册

4.HTML文本格式化

缩写：

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。