TML: 网页骨架

Содержание и основные понятия

返回目录
第8章 第8页 第8.1页
TML: 网页骨架
HTML( HyperText 标记语言) 是定义每个网页的结构和内容的标记语言 。
HTML
- 这不是一个编程语言。
标记标记
:将文本转换成标签,使浏览器知道如何投影。
从Yandex到Wikipedia,你看到的每个网页都以HTML为基础。 CSS 添加样式, JavaScript 是互动的, 但骨骼总是 HTML 。
· 基本全球环境基金
PLF 受伤害
01
HTML 文档结构
任何网页的解解剖:DOCTTYPE, 负责人,身体
最短页面
每个 HTML 文件都以同样的骨架开头:
<!DOCTYPE html>
<html
lang
=
"ru"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
我的页面。
</title>
</head>
<body>
...内容...
</body>
</html>
每个元素的作用
要素要素
任用任用
<!DOCTYPE html>
文件类型声明( HTML5) 不是标签, 而是浏览器的指令 。
<html>
根元素 。
lang
表示搜索者和屏幕管理员所用的语言。
<head>
元数据: 制表符标题、 编码、 风格、 脚本 。
我看不见
见页。
<meta charset>
符号代码。
UTF-8
- 支持世界所有语言。
<title>
这对SEO很重要
<body>
所有可见内容: 文本、 图片、 按钮、 形状 。
类似
TML 文档= 书。
<head>
- 封面和名单(供图书管理员使用)。
<body>
- 案文本身(供读者阅读)。
02
文本标签
标题、段落、选择、链接、图像
标题h1-h6
六级头条新闻
<h1>
- 最重要的(每页一页),
<h6>
- 最小的。
继承和转让
<p>
- 段落(含有减损内容的封条案文)。
<br>
- 强制转移线路
<hr>
- 横向分界线。
选定文本
标签标签标记
效果效果效果
何时使用
<b>
胖发
选择视觉,没有有意义的口音
<strong>
Fat + 重要
平滑焦点(重要信息)
<i>
课程课程课程 课程 培训班课程课程
视觉斜体
<em>
曲线+撞击
句子中的逻辑影响
<code>
Моноширинный
代码碎片、命令
<mark>
照明
选择找到的文本
<del>
删除
删除/旧文本
参考参考资料
<a href="URL">текст</a>
-超链接
href
- 地址(URL或
#якорь
)
target="_blank"
- 在新标签页中打开
title
- 弹出线索
图像图像
<img src="путь" alt="описание">
- 自我关闭标签。
src
- 文件的路径(关系或 UrL)
alt
- 扫描仪和装载错误的说明
width
/
height
- 像素尺寸
重要
总是点。
alt
用于无障碍访问(盲人用户)、SEO以及图像尚未下载时。
03
名单和表格
结构数据:标记、编号清单和表格
名单清单
类型类型类型
标记标记
示例示例示例
标记
<ul> → <li>
• 项目1项目2
编号编号
<ol> → <li>
1. 项目1 2
定义定义定义
<dl> → <dt> + <dd>
定义定义定义的定义定义定义 定义的定义的定义定义的定义
列表已可用
投资投资投资
:
<li>
可能包含输入
<ul>
或
<ol>
.
表格表格表格
<table>
<thead>
♪ 帽子
<tr>
直线
<th>
名字
</th>
* 标题
<th>
年龄年龄
</th>
</tr>
</thead>
<tbody>
机构机构 机构 单位 机构
<tr>
<td>
安亚
</td>
* 正常单位
<td>
15
</td>
</tr>
</tbody>
</table>
理事会理事会理事会下下理事会理事会 理事会理事会理事会安理会理事会理事会次理事会理事会经济及社会理事会理事会理事会放理事会理事会 理事会理事会出理事会理事会
表格仅用于表格数据! 不要使用表格进行建模; 此处有 CSS Flexbox 和 Grid (第8.2章)。
04
表 表 表 形式
条目字段、按钮、复选框 -- -- 用户与之互动的所有内容。
元素公式公式
<form action="/submit" method="POST">
- 外出集装箱。
action
- 将数据发送到何处,
method
- 获取或后。
投入类型
type
视图视图视图
适用
text
单行文本字段
姓名,搜索
email
电子邮件字段( 检查@ )
注册
password
隐藏输入 ()
密码
number
数值字段
人数、年龄
checkbox
旗旗旗
同意、多重选择
radio
开关
数个中的一个
date
选择日期(日历年)
出生 出生日期 出生出生日期
range
滑动滑动器
音量, 亮度
file
正在上传文件
Avatar,文件,文件
submit
发送按钮
发送窗体
形式的其他要素
<textarea>
- 多线文本字段
<select>
+
<option>
- 下列清单
<label>
- 在字段上签字
for="id"
)
<button>
- 通用按钮
与第四章的关系
记得第4章(安全)中的表格吗?
required
使该领域成为强制性的,
pattern
- 用正则表达式检查格式。
05
语义元素
解释内容含义,而不仅仅是解释其类型的主题
为什么是语义学?
你可以把整页都剪出来
<div>
和
<span>
但语义标签:
帮助帮助
搜索引擎
理解结构 (SEA)
帮助帮助
筛选器
(盲人无障碍)
Make 法典
已读
开发者
主要语义标记
<header>
<nav>
<main>
<article>
<section>
<section>
<aside>
<footer>
图1
语义页面结构
标签标签标记
任用任用
<header>
页面或部分帽子(logtype, 导航)
<nav>
导航菜单
<main>
主要内容(每页一个)
<article>
自足单位(条款、职位、货物)
<section>
内容群集
<aside>
侧面面面板, 附加信息
<footer>
地下室(心灵、联系、联系)
<figure>
吉列尔莫·卡拉格(签名)
<details>
开放区块 (FAQ)
📖
HTML- Teg 手册
50+标签 □ 按类别过滤
插数
单击过滤类别。单击标签以查看代码示例。
✏️
动态 XML 编辑器
将代码写到左边 □ 向右看结果
插数
编辑 XML - 即时更新播放。 使用预设快速启动 。
localhost/preview