什么是HTML
HTML是超文本标记语言的缩写
? 超文本:超越普通文本 能够在普通文本内插入图片、音频等
? 标记语言:
? 本身不具备逻辑能力和行为能力
? 只能被浏览器读取
o 步骤:本地编写代码->本地浏览器运行->部署到服务器端
o 地址:
? 标准URL路径:协议名称://IP地址:端口号/项目路径
o 常见项目:
? B/S架构项目(直接访问):Browser/Server
? C/S架构项目(下载软件):Client:客户机/Server
HTML的特点
o 按顺序从上至下依次解析(重要)
o 有一定的容错性/宽松性
o 对大小写不敏感
文档结构
o 创建html文档:.html 或 .htm 为后缀名的文件
o 默认文档结构:
? doctype:文档类型声明
? html:根标签
? head:文档头部
o meta:设置字符编码
o title:设置标签页名称
o 引 入第三方文件
? body:文档主体
o 在浏览器上想要展示的内容
元素
o 元素的组成
? 开始标签 元素内容 结束标签:<标签名称> … </标签名称>
? 有一部分标签没有结束标签:单标签/空元素
? 标签不能交叉嵌套(重要)
o 元素的分类(重要)
? 块级元素:独占一行空间;宽度占满整个父级元素,高度由子级元素撑起;可以直接设置宽高;可以包含行内元素
? 行内元素:可以和其他元素共享一行空间;宽度由子级元素撑起,不能直接设置宽高;不能直接设置上下的内外边距;不能嵌套块级元素
属性
o 属性设置
? 写在开始标签内部,和标签名称使用" “隔开
? 属性名key(键)和属性值value(值)之间使用”=“连接:html lang=“en”
? 多对属性之间使用” “连接:meta name=“viewport” content=“width=device-width, initial-scale=1.0”
o 属性分类
?按照公有性分类
o 公有属性:所有标签都能设置的属性
? id:元素的唯一标识
? class:按类标识元素;多个属性值之间使用” “隔开
? title:设置提示
? style:设置行内样式;按照css语法设置
o 私有属性:为当前标签设置,只有当前标签能使用
? 按照属性特性分类
o 基本属性
?属性值使用字符串类型;”" 和’’ 不能嵌套使用
o 布尔值属性
? 属性值只有true和false:key = ‘key’ / key = “true” / key(常用)
特殊语法
o 空白:在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白
? pre标签:段落标签,保留用户所输入的格式
o 字符实体:使用"&"开头 ";"结尾 中间写实体名称
o 注释
? 注释不会被浏览器解析,内容不会展示在页面上,不能嵌套使用
? 作用:提升代码的可读性,便于维护和管理