首页  思维导图  详情

HTML知识梳理

2021-10-28 15:00:12   1  举报





AI智能生成

为你推荐

查看更多



HTML5

HTML

HTML使用脉络，请收藏，持续更新

CSS

HTML

vue

flex布局

作者其他创作

大纲/内容

html表示使用最新html规范

文件开头 <!DOCTYPE html>

网页头部的声明应该是用 lang=\"zh\" 还是 lang=\"zh-cn\"？

参考资料

正式结构 - <html lang=\"zh-CN\"> - 语言

语言

chartset与lang

字符集 <meta charset=\"UTF-8\">

<title>

<head>

<body>

</html>

标签骨架

语义化

路径

注释

<hr />

<br />

单标签格式问题

常见单标签

双标签

标签种类

嵌套关系与并列关系

标签关系

HTML概念与补充

<p>

<hr>

标题标签、段落、水平线与换行标签

没有语义，用于CSS

div和span

加粗强调

<em>

斜体

<del>

加删除线

<ins>

加下划线

文本格式化标签

文字标签

单标签

<img />

一般不给高度让它等比例缩放，自己掌握不好定量数值，只给个宽度就行

看到到这里标签开始有属性了！

图像标签

使用方式就是用a将要跳转的文字包裹起来

anchor的缩写

<a></a>

外部链接

内部链接

空链接

可以链接图像、表格、音频、视频等等

href

默认值：self

新窗口打开：blank

target

属性

链接标签

多媒体标签

用来显示数据，非常规整，可读性好原来用来布局，但是很坑

一拿到大量数据，就想到用表格展现

<caption> - 表格标题

<th> - 表头单元格

<tr> - 行

<td> - 单元格

<table>

01 确定跨行还是跨列合并

02 找目标单元格 - 从上往下，从左到右

03 写下rowspan或colspan属性删除多余单元格

合并单元格三部曲

表格属性

表格

去掉了行的表格

表格显示数据，列表用来布局！

<li>

<ul>

无序列表

<ol>

有序列表

用于对术语或名词进行解释

<dt>

<dd>

<dl>

自定义列表

列表

HTML 表单和输入

【Html】在表单（input）中id和name的区别

HTML创建表单时label标签怎么使用

radio

常用属性

<input>

<label>

节约空间

不同浏览器展示不一样，很难修改样式，用得少了现在基本是用div+ul模拟出来的

表单控件

提示信息

表单域

<form action=\"demo_form.php\"> <label for=\"male\">Male</label> <input type=\"radio\" name=\"sex\" id=\"male\" value=\"male\"><br> <label for=\"female\">Female</label> <input type=\"radio\" name=\"sex\" id=\"female\" value=\"female\"><br><br> <div align=\"center\"><input type=\"submit\" value=\"提交查询内容\"></div></form>

实例

表单

数据与排版

HTML