html5 基础
程序员文章站
2022-05-08 11:08:32
...
html5 基础
1.html 作用
序号 | 名称 | 描述 | 用途 |
---|---|---|---|
1 | HTML | 超文本标记语言 | 页面结构 |
2 | CSS | 层叠样式表 | 元素样式与排列 |
3 | JavaScript | 前端通用脚本语言 | 元素行为与交互 |
2.超文本标记语言
序号 | 名称 | 描述 |
---|---|---|
1 | 超文本 | 普通文本上添加 属性 定义特殊行为 |
2 | 标记 | 使用标签 作为页面元素的标识符 |
3 | 语言 | 没有流程控制算不上真正的语言 |
3.元素
- 网页是 html 元素的集合:由功能各异的 html 元素按照一定的规则排列而成。
-
网页是二维平面:任何元素只存在
垂直
或水平
两种排列方式
根据元素的功能与排列方式 html 元素分为三类:| 序号 | 名称 | 描述 | 举例 |
| —— | ————— | ———————————————————— | ———————— |
| 1 | 块级元素 | 垂直排列,宽高可定义,与内容无关 |<div>,<p>
|
| 2 | 行内元素 | 水平排列,宽高由内容决定,无法自定义 |<span> ,<a>
|
| 3 | 行内块元素 | 水平排列,但宽高可定义,常用用于外部资源 |<img> ,<video>
|
4.标签和属性
序号 | 名称 | 描述 | 举例 |
---|---|---|---|
1 | 标签 | 元素的基本用途 | <h3>Hello</h3> |
2 | 属性 | 元素的基本特征 | <h3 class="title" >Hello</h3> |
5.标签分类
序号 | 名称 | 语法 | 描述对象 |
---|---|---|---|
1 | 双标签 | <h3 class="title" >Hello</h3> |
自定义内容 |
2 | 单标签 | <img src="1.jpg" alt="logo" > |
外部资源 |
- 双标签:由
起始标签
和结束标签
组成,属性写在起始标签
中 - 单标签:也叫
空标签
,由属性制定描述对象,如src
6.属性分类
序号 | 名称 | 举例 | 描述 |
---|---|---|---|
1 | 预置属性 | <ul class="nav" >...</ul> |
标签不同差异较大 |
2 | 自定义属性 | <div data-index="5" >...</div> |
用户根据需求自定 |
7.通用属性
尽管不同标签预置的属性各不相同,但也有一些公共属性,绝大多数标签都具有
序号 | 属性名称 | 描述 | 举例 |
---|---|---|---|
1 | id | 元素唯一标识 | <div idx="warp" >...</div> |
2 | class | 给元素添加样式 | <div class="box" >...</div> |
3 | style | 设置当前元素样式 | <div style="..." >...</div> |
8.属性和值
序号 | 值类型 | 备注 | 描述 |
---|---|---|---|
1 | 字符串 | 小写,值加双引号 | <p class="active" >...</p> |
2 | 预定义值 | 仅限预置 | <input type="text" > |
3 | 指定格式 | url/email/… | <a href="https://baiduc.om" >...</a> |
4 | 数值 px | 默认像素 px | <table width="200" >...</table> |
5 | 布尔值 | 存在即为 true | <input type="email" required > |
9.元素的种类
- 标签的语化是元素的基本要求
- html5 提供了大量语义化的元素
- html 元素众多,但常用的并不多,我们重要放在以下几类元素上
序号 | 元素类型 | 描述 | 举例 |
---|---|---|---|
1 | 结构元素 | 布局 | <header> </header>, <main> ,<nav> |
2 | 文本元素 | 内容 | <p> ,<addr>,<strong> |
3 | 链接元素 | 页面跳转 | <a herf="..." >...</a> |
4 | 列表元素 | 关联数据 | <ul>+<li> <ol>+<li> |
5 | 表格元素 | 数据格式化 | <table><tbody> <tr><td></table> |
6 | 表单元素 | 前后端交互 | <form>+<label>+<input> |
7 | 其他元素 | 不常用 | <iframe>+</iframe> <video></video> |
表单是前后端数据交互的重要通道,除了 url 之后,表单是非常重要的。
需要花费大量的时间研究学习和实践
上一篇: Dubbo 一些你会忽略的却好用的功能
下一篇: MYSQL 架构与历史