HTML基础 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第一天
一、什么是 HTML
HTML称为超文本标记语言,是一种标识性的语言。 它包括一系列标签.通过这些标签可以将网络上的文档格式统一, 使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字, 图形、动画、声音、表格、链接等。
二、元素与标签
大多数元素由开始标签(Opening tag)、Content、和结束标签(Closing tag)组成。
存在一小部分元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。
-
双标签
- p、H1-H6、em、string ...
-
单标签(也称为空标签,空标签可以不闭合)
- img、br、hr、input、meta ...
元素也可以拥有属性,属性包含元素的额外信息,这些信息不会出现在实际的内容中。
三、HTML的基本结构
整个 html文档 的根标签为 html,根标签包含 head 标签 和 body 标签。
head 头部标签。用于定义HTML文档的头部信息
body 主体标签,用于定义网页的主要显示的内容,文本图片音频视频等。
DOM树
四、HTML 标签
- 基本标签:
- 段落标签 p
- 标题标签 h1~h6
- 换行 br
- 水平线 hr
- 右上角 sup
- 右下角 sub
- 斜体 i / em
- 粗体 b / strong
- 删除字 del
- 插入字 ins
- 字体标签 font
- 预留格式 pre
- 实体符号
- 大于号 >
- 小于号 <
- 空格
- 背景色 / 背景图片
- 背景色 bgcolor
- 背景图片 background
- 图片
- width 设置宽度,height 设置高度
- src 设置路径
- title 鼠标悬停时的提示信息
- targe 点击跳转方式
- alt 设置图片加载失败时的提示信息
- 表格
- 一个 table 就是一整个个表格
- 行 tr、单元格 td
- th 也是单元格,但是比 td 多了加粗和居中
- table 可以设置宽高,边框
- 合并单元格
- colspan
- rowspan
- thead、tbody、tfoot
- 超链接
- herf
- target
- 通过超链接可以从浏览器向服务器发出请求
- 列表
- 有序列表 ul
- 无序列表 ol
- 自定义列表 dl
- 表单
- action 指定数据提交到哪个服务器
- 凡是表单中含有 name 属性的一律会被提交到服务器
- 输入框
- 文本框 text
- 密码框 password
- 提交按钮 submit
- 普通按钮 button
- 复选框 checkbox / 单选框 radio
- 文件上传 file
- 下拉列表
- selected 默认选择
- size 显示数量
- mutiple 设置下拉列表支持多选
- 文本域
- 文本域没有value属性,用户填写的内容就是value
- 语义化标签
语义化标签,就是让标签有自己的含义,利用本身传达它所包含内容的一些信息,使浏览器和搜索引擎直观的认识标签和属性的用途和作用。
五、小知识
1、DOCTYPE的作用
DOCTYPE是文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的模式来渲染文档。它必须声明在HTML⽂档的第⼀⾏。
2、src 和 herf的区别
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。