HTML学习
一、什么是HTML?
html是超文本标记语言,一种标识性的语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一。
超文本可以理解为超越普通文本,能够在文本内插入图片、音频、视频、超链接等等。标记语言不同于编译语言和脚本语言,本身不具有逻辑能力和行为能力,只能被浏览器所读取。
二、HTML特点
1.从上到下依次解析
2.容错性(宽松性)
3.对大小写不敏感
三、文档结构
1.创建html文档:
.html
.htm
为后缀名的文件
2.默认文档结构:
快捷键生成:
html:4t
html:5
!
3.代码结构
doctype声明:
html:
根元素
最大父元素
head
meta:设置字符编码
html5中:meta:设置手机端属性
title:
设置标签页名称
引入第三方文件
body:
在浏览器上想要展示的内容
编译器中显示(Visual Studio Code)
四、元素
1.元素的组成
开始标签 元素内容 结束标签
<标签名称> hello </标签名称>
有一部分标签没有结束标签:
单标签/空元素
标签不能交叉嵌套
例:
2.元素的分类
块级元素:
div
特点:
独占一行空间,不与其他元素共享一行空间
宽度占满整个父级元素
高度由子级元素撑起
块级元素可以包含块级元素和行内元素
行内元素:
span
特点:
可以和其他元素共享一行空间
宽高由子级元素撑起,不能直接设置宽高
不能直接设置上下的内外边距
行内元素只能包含文本或者其它行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 30px;
border: 1px solid red;
background-color: pink;
}
span{
border: 1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div>hello</div>
<span>world</span>
</body>
</html>
浏览器显示
五、属性
1.属性的设置
写在开始标签内部
属性名和属性值之间使用等号连接
多对属性之间使用空格连接
2.属性的分类
1)按照公有性分类
公有属性:
所有标签都能设置的属性
id:元素的唯一标识
class:按类表示元素
多个属性值之间使用空格隔开
style:设置行内样式
按照css语法设置
title:设置提示
私有属性:为当前标签设置
2)按照属性特性分类
基本属性:
属性值使用字符串类型
“”
‘’
布尔值属性:
属性值只有true和false
readonly='readonly';//true
readonly='true'
readonly=true
readonly
key=value:
键值对
key='key'
key='true'
key=true
key
六、语法
1.空白
在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白
pre标签:段落标签,保留用户所输入的格式
2.字符实体
使用 & 开头
使用 ; 结尾
中间写实体名称
->空格
<-> <
>-> >
"
©
®
×
3.注释
注释的作用:
用来提升代码的可读性,便于代码的维护和管理
注释的表现形式:
<!--注释内容-->
被注释掉的内容不会被浏览器所解析
html注释不能嵌套使用