总目录:https://blog.csdn.net/qq_41106844/article/details/105553392
前端 - 子目录:https://blog.csdn.net/qq_41106844/article/details/105553354
HTML:超文本标记语言(最早的Markdown语言)
day01
- 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>...</script>
<style>...</style>
<link>
</head>
<body>
</body>
</html>
- 语法解释
<!DOCTYPE html>
表示开启标准模式,使用w3c标准解析html代码,不加则默认为怪异模式。
<html></html>
HTML代码根标签。
<head></head>
HTML代码用于定义页面头部信息。
<meta>
用来声明页面所用编码和便于被搜索引擎搜索的元信息。
<title></title>
用来定义页面标题。
<script></script>
用于定义JavaScript代码。
<style></style>
用于定义css语句。
<link>
用于链接图标、CSS样式。
<body></body>
HTML代码用于定义页面正文信息。
1.常用标签
基本标签
- 概念
最基本的HTML标签。
- 语法及解释
<h1></h1>到<h6></h6>:定义标题一到标题六。
<p></p>:定义段落。
<br>:换行。
<hr>:定义水平线。
<div></div>:定义文档中的节。
<span></span>:和div相似,span内容默认不换行。
结构标签(基本都是HTML5新增的 ,同样基本不支持)
- 概念
以前HTML只有<div>一个结构元素,HTML5新增了多个。
- 语法及解释
<article></article>:该元素用于表示页面上独立完整的一片“文字”。
<header></header>:定义文章“标题”部分。
<footer></footer>:定义文章“脚注”部分。
<section></section>:定义文章“段落”
<article></article>:可以嵌套,表示附属文章。
<section></section>:该元素用于对页面的内容进行分块。
<h1>到<h6>:标题
<article>:分块
<section>:子分块
<nav></nav>:用于定义页面上的"导航条"。
<aside></aside>:用于定义页面或者文章的附属信息。
<main></main>:唯一,且如果使用,其他结构标签必须在main内。
<figure></figure>:用于表示一块独立的“图片区域”。
<figcaption></figcaption>:用来定义“图片区域”的标题。
文本标签
- 概念
可以让文本内容在浏览器中呈现出特定文本效果。
- 语法及解释
<b></b>:定义粗体文本。
<i></i>:定义斜体文本。
<em></em>:定义强调文本。
<strong></strong>:定义粗体文本。
<small></small>:定义小号字体文本。
<sup></sup>:定义上标文本。
<sub></sub>:定义下标文本。
<bdo></bdo>:定义文本显示方向。特有属性dir,值为ltr时文本从左到右显示,值为rtl时相反。
语义标签
- 概念
可以让文本内容在浏览器中呈现出特定语义效果。
- 语法及解释
<abbr></abbr>:用于表示一个缩写。
<address></address>:用于表示一个地址。
<blockquote></blockquote>:用于定义一段长的引用文本。
<q></q>:用于定义一段短的引用文本。
<cite></cite>:用于表示作品的标题。
<code></code>:用于表示一段计算机代码。
<dfn></dfn>:用于定义一个专业术语
<del></del>:定义文档中被删除的文本。
<ins></ins>:定义文档中插入的文本。
<pre></pre>:用于表示该元素所包含的文本已经进行了“预格式化”。
<samp></samp>:用于定义示例文本内容。
<kbd></kbd>:用于定义键盘文本。
<var></var>:用于表示一个变量。
<mark></mark>:用于显示HTML页面中需要重点“关照”的内容。
<time></time>:用于标注日期、时间或者日期时间。
<detaile></details>:用于显示一段详细信息或者某个主题的细节。
<summay></summay>:用于定义摘要信息
<ruby></ruby>:用于为一个或多个短语定义ruby注释。一般用于东亚文字。
<rb></rb>:用来定义注释所解释的短语。
<rt></rt>:用来定义ruby注释的说明部分。
<rtc></rtc>:作为ruby注释的说明部分的容器。
<rp></rp>:用于为不支持ruby注释提供的备用文本。
<bdi></bdi>:用于将一段文本从他所在上下文中隔离出来。
<wbr></wbr>:用于指定在文本的何处适合添加换行。
<menu></menu>:用于定义菜单。
<menuitem></menuitem>:用于定义菜单项。
列表标签
- 概念
可以让文本内容在浏览器中呈现层次列表效果。
- 语法及解释
<ul></ul>:定义无序列表
<ol></ol>:定义有序列表
<li></li>:定义列表项
<dl></dl>:定义术语列表
<dt></dt>:定义标题列表项
<dd></dd>:定义普通列表项
表格标签
- 概念
可以让文本内容在浏览器中呈现表格效果。
- 语法及解释
<table></table>:定义表格
<caption></caption>:定义表格标题
<tr>:定义表换行
<td></td>:定义单元格
<th></th>:定义表格的表头单元格
<tbody></tbody>:定义表格的主体,该元素只能包含<tr>属性
<thead></thead>:定义表格头
<tfoot></tfoot>:定义表格脚
<col></col>:用于为表格中一个或多个列指定属性值。
<colgroup></colgroup>:用于为表格中一个或多个列指定属性值。
表单标签
- 概念
HTML页面中负责和用户交互的组件。
- 语法及解释
<form></form>:用于生成输入表单。
<input>:用于生成大部分多样化表单控件。
<label></label>:用于定义表单标签中的标签。
<button></button>:用于定义按钮。
<select></select>:用于创建列表框或下拉菜单。
<option></option>:用于定义列表框选项或者菜单项。
<optgroup></optgroup>:用于定义列表项或菜单项。
<textarea></textarea>:用于生成多行文本域。
<fieldset></fieldset>:用于对表单内表单元素进行分组。
<legend><legend>:设置标题。
框架标签
- 概念
用于生成一个行内框架
- 语法及解释
<iframe></iframe>:HTML5保留的唯一一个和框架相关的元素。
特殊标签
- 概念
有特殊功能的标签
- 语法及解释
<a></a>:用于定义超链接。href属性指定超链接所链接的资源。
<img/>:用来定义图片。src属性指定图片文件所在的位置。
2.常用元素
通用元素
- 语法及解释
id:HTML标签的唯一标识。
style:为HTML标签指定CSS样式。
class:用于匹配CSS样式。
dir:设置标签文本排列方向。
title:指定额外信息,类似标签框。
lang:声明语言,zh表示中文,en表示英语,ft表示法语,ja表示日语。
accesskey:指定激活该元素的快捷键。
tabindex:用于控制窗口获取焦点的顺序。
新增属性
- 语法及解释
contenEditable:当声明为true时,允许开发者在浏览器直接编辑该HTML中的内容。
disignMode:相当于一个全局的contentEditable。
hidden:当声明为true时,浏览器不显示该标签。
spellcheck:浏览器将会对用户输入的文本进行检查。