个人自用HTML学习梳理

最新推荐文章于 2024-11-03 20:03:09 发布

唐鸢

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量986

点赞数 12

文章标签： html 学习

本文链接：https://blog.csdn.net/weixin_42806623/article/details/141739741

版权

本文参考
MDN
w3shool

简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML 标签对大小写不敏感
万维网联盟（W3C）在 HTML 4 中推荐使用小写

大多数 HTML 元素可以嵌套.
HTML 文档由嵌套的 HTML 元素构成。

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

结构

<!DOCTYPE html> 文档类型声明
<html>	
<head>	头
	<nav><nav> 导航栏
</head>
<body>	体
	<main> 
		<aside></aside> 侧边栏
	</main>
</body>
<footer></footer> 页脚
</html>

无语义元素

div
section
a
- target="_blank"链接新标签打开

头

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>标题</title>
<nav>
	<ul>
	<li><a href="#标题">描述</a></li>
	<li><a href="#标题">描述</a></li>
	</ul>
</nav>
</head>

link

空元素，规定了当前文档与某个外部资源的关系。

rel
表示 <link> 项的链接方式与包含它的文档之间的关系。
- stylesheet 样式表
- alternate stylesheet 精美样式
- alternate stylesheet 基本样式
href
外部资源地址
as

nav

在当前文档或其他文档中提供导航链接。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

体

HTML文档的主体

文本

基本标签

<h1>~<h6> 各级标题
<p></p> 段落
<article></article>表示文档、页面、应用或网站中的独立结构

文本格式化

标签	描述
`<b>`	定义粗体文本
`<big>`	定义大号字
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字
“计算机输出”标签
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<tt>`	定义打字机代码
`<var>`	定义变量
`<pre>`	定义预格式文本
引用
`<abbr>`	定义缩写。
`<address>`	定义文档或文章的联系信息（作者或拥有者，通常以斜体显示）
`<bdo>`	定义文字方向
`<blockquote>`	长引用，会对元素进行缩进，块级
`<q>`	定义短的引用语，元素会被“”包围
`<cite>`	定义著作的标题
`<dfn>`	定义的项目或缩写的定义

其他

figure
figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
- figcaption
  
  <figcaption> 元素是用来描述其父节点 <figure> 元素里的其余内容的标题或说明。为 <figure> 提供一个无障碍描述。
- 通常，<figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。
- 通过在其中插入 <figcaption>（作为第一个或最后一个子元素），可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题。

表格

table 表格
caption 表格标题

colgroup 列组

<colgroup>
	<col span="5" class="workday"/><!--前五列分为一组-->
	<col span="2" class="weekends"/><!--六、七列一组-->
	<col /> <!--空-->	
</colgroup>

thead 头
- tr 行
  - th 标题格
tbody 体
- tr 行
  - td 普通格
tfoot 汇总行

表单

form 表单
属性
- method http提交方式
  - post 表单数据会包含在表单体内然后发送给服务器。
  - get 表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符
  - dialog 提交时关闭对话框。
- action 表单提交的URL
- target 表示在提交表单之后，在哪里显示响应信息。
  - _self：默认值。在相同浏览上下文中加载。
  - _blank：在新的未命名的浏览上下文中加载。
  - _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
  - _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

fieldset 对表单中的控制元素进行分组
- legend fieldset的标题

label 用户界面中某个元素的说明。

	<label for="first-name">Enter Your First Name: 
		<input id="first-name" type="text" required />
	</label>

input
- type
  - text 默认值。单行的文本字段，输入值中的换行会被自动去除。
  - button 按钮
    - value 值显示在按钮上
  - radio 单选
    
    给每一个单选按钮添加相同的 name 属性以关联单选按钮。两个单选按钮就无法同时选中了。
  - checkbox 复选框
  - email 邮箱
  - file 文件
    - accept 规定控件能选择的文件类型。
  - password 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
  - required 带有 required 属性的表单元素被定义为必填。
  - checked 规定在页面加载时应该被预先选定的元素。
- select 表示一个提供选项菜单的控件
  - id 与label关联
  - name 表示提交到服务器的相关数据点的名字。
  - optgroup 为select元素中的选项创建分组。
    - label 选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。
    - option 选项
```
	<select>
	  <optgroup label="Group 1">
		  <option>Option 1.1</option>
	  </optgroup>
```

图片、声音、视频

img
- src
  嵌入的图片的路径。
- alt
  指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
- title
  会给我们一个鼠标悬停提示，和链接标题一样
- loading
  指示浏览器应当如何加载该图像。
  - eager
    立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
  - lazy
    延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
svg
```
<svg>
	version="1.1"
	baseProfile="full"
 	width="300"
	height="200"
	xmlns="http://www.w3.org/2000/svg">
	<rect width="100%" height="100%" fill="black" />
	<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
```
- rect
  - x 矩形左上角的 x 位置
  - y 矩形左上角的 y 位置
  - width 矩形的宽度
  - height 矩形的高度
  - rx 圆角的 x 方位的半径
  - ry 圆角的 y 方位的半径
- circle
  - r 圆的半径
  - cx 圆心的 x 位置
  - cy 圆心的 y 位置
- ellipse
  - rx 椭圆的 x 半径
  - ry 椭圆的 y 半径
  - cx 椭圆中心的 x 位置
  - cy 椭圆中心的 y 位置
- line
  - x1 起点的 x 位置
  - y1 起点的 y 位置
  - x2 终点的 x 位置
  - y2 终点的 y 位置
video
- src
  同img
- controls
  用户应当能够控制视频和音频的播放（这对于患有癫痫的人来说尤为重要）。必须使用 controls 属性来让视频或音频包含浏览器自带的控制界面，或者使用适当的 JavaScript API 构建自己的界面。至少，界面必须包括启动和停止媒体以及调整音量的方法。
- video元素内的段落
  这个叫做后备内容，当浏览器不支持 <video> 元素的时候，就会显示这段内容，借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容
- width height
- autoplay
  这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要在你的网站上自动播放视频（或音频），因为用户可能会反感。
- loop
  这个属性可以让视频（或者音频）文件在结束时再次开始播放。这个也可能很恼人，同样不建议使用，除非有必要。
- mute
  这个属性会导致媒体播放时，默认关闭声音。
- poster
  这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
- preload
  这个属性被用来缓冲较大的文件，有三个值可选：
- "none"：不缓冲文件
- "auto"：页面加载后缓存媒体文件
- "metadata"：仅缓冲文件的元数据
audio 与video使用方式几乎相同
- audio元素不支持 width/heigth 属性——由于其并没有视觉部件，也就没有内容要设置 width/height。
- 它同时也不支持 poster 属性——同样，因为没有视觉部件。

页脚

footer
<footer> 元素表示其最近的祖先分段内容的页脚或分段根元素。<footer> 通常包含有关该部分作者、版权数据或相关文档链接的信息。
- adress 提供了与个人、团体或组织联系的信息。
```
<p>Contact the author of this page:</p>

<address>
 	<a href="mailto:jim@example.com">jim@example.com</a><br />
 	<a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>
```