HTML

超文本标记语言（Hyper Text Markup Language）
载入内容,包括文本、音频、图片等等。是页面的主要元素的标记语言

标记类型

单标记：单标记元素没有结束标记，通常用于表示没有内容的元素。
双标记：双标记元素有开始和结束标记，用于表示包围在标记中的内容。

标签间的关系

父子关系（嵌套关系）

html

<head>
	<title> son </title>
</head>

兄弟关系（并列关系）

html

<head></head>
<body></body>

注释


<comment> 段落注释内容 </comment>

元素

注明文件

<!DOCTYPE element-name DTD-type DTD-name DTD-urk>：位于<html>标记之前，标记使用的规范类型
DTD三种类型
三者之间的区别在于：
对于你所写的html的规范性进行约束，约束标准相对宽松或是严格，允不允许使用不同时期的规范在同一文件内。
- 严格型：HTML Strict DTD
  严格型DTD要求按照较高标准，通常用于要求文档严格符合XML或HTML规范的应用中不允许使用过渡性或框架性的元素和属性。
- 过渡型：HTML Transitional DTD
  过渡型DTD要求相对较为宽松，允许一些不符合最新规范的元素和属性，以适应不同浏览器或解析器的差异，确保向前兼容。
- 框架型：HTML Frameset DTD
  框架型DTD用于定义具有框架的文档，框架被用于创建分割式的布局，通常用于划分页面内容为不同框架。
<!DOCTYPE html> ：注明文件类型为html

语言

语言标签，向浏览器指明网页主要使用的语言

html

<!DOCTYPE html>
<html lang="zh-CN">
</html>

`lang`	Explaination
zh-CN	简体中文
zh-TW	繁体中文
en	英语
ru	俄语
ja	日语
fr	法语

更多编码跳转维基百科ISO_639-1

head标签

<head> 元信息、样式、脚本、同外部资源的关系等信息 </head>

html

<!DOCTYPE html>
	<html>
		<head>
      ...
    </head>
</html>

元信息标记

常见的元信息元素有

<meta> 、<title>

head标签中的其他常见元素

<link> 、<base>、<style> 、<script>

Label	Explaination
<title>	定义网页的标题
<meta>	用于提供关于文档的元信息，字符集、作者、关键词等
<link>	用于定义与外部资源的关系，如样式表和图标
<base>	定义文档中相对URL的基本URL
<style>	包含内部级联样式，定义文档的样式信息
<script>	包含脚本代码，可用于定义交互性和功能

meta标签

<meta name="NAME" content="CONTENT">

Value	Explaination
author	网页作者
description	网页简短描述
keywords	网页关键词
generator	编辑器

Attribute	Value	Explaination
content	some_text	定义与http-equiv或name属性相关的元信息

html

<!DOCTYPE html>
	<html>
		<head>
          <meta name = "keywords" content = "CONTENT">
          <!-- 网页关键词 -->

          <meta name = "description" content = "CONTENT">
          <!-- 网页简要说明 -->

          <meta name = "author" content = "CONTENT">
          <!-- 作者信息 -->

          <meta name = "generator" content = "CONTENT">
          <!-- 指明生成页面工具 -->

          <meta name = "copyright" content = "CONTENT">
          <!-- 页面版权信息 -->

          <meta name = "robots" content = "CONTENT">
          <!-- 如👇 -->
    </head>
</html>

robots

告诉搜素引擎机器人抓取哪些页面

Value	Explain
all	文件将被检索，且页面上的链接可以被查询
none	文件将不被检索，网页上的链接不可以被查询
index	文件将被检索
noindex	文件将不被检索，但网页上的链接可以被查询
follow	页面上的链接可以被查询
nofollow	文件将被检索，但页面上的链接不可以被查询

http-equiv

用于提供http协议的响应头报文

html


  <meta http-equiv = "cache-control " content = "no-cache">
  <!-- 设置限制，仅从服务器获取资源而不是从本地cache中 -->
  <meta http-equiv = "refresh" content = "5; url = https://chenpeel.github.io">
  <!-- 5s后重定向到指定的网页 -->
  <meta http-equiv = "content-type" content="text/html;charset=utf-8"/>
  <!-- 指定编码字符集 -->
  <meta http-equiv = "expires" content="Sat, 26 Feb 2022 08:00:00 GMT"/>
  <!-- 指定到期时间 -->

响应头报文包含了关于响应的元数据，如响应的状态码、服务器信息、日期等，它们会在服务器接收到 HTTP 请求后，一起发送给客户端作为响应。响应头的目的是提供关于响应的信息，以便客户端能够正确处理和渲染响应的内容。

主体

主体样式

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="" content="">
    <title>This is A Title</title>
  </head>
	<body>
  	<!-- 主体内容 -->
  </body>
</html>

标记属性
- 设置body的标记属性可以改变页面的样式

html

 <body leftmargin="50px" topmargin="50px" text="#000000" bgcolor="#339999" link="red" alink="black" vlink="blue" background="../imags/1.jpg">

属性详情

Attribute	Value	Explaination
text	rgb(r,g,b) rgb(r%,g%,b%) #rrggbb或#rgb colorname	rgb函数（Int，取值0～255） rgb函数（percent，取值0～100）十六进制数（6位或3位，0～9，A～F）颜色英文名（red,green,blue etc. ）
bgcolor	同上	规定文档的背景颜色，不建议使用
alink	同上	规定文档中的活动链接颜色
link	同上	规定未访问的链接的默认颜色
vlink	同上	规定已被访问的链接的颜色
background	URL	规定文档的背景图像（图像过大影响访问速度）
topmargin	pixel	规定文档中的上边距的大小
leftmargin	pixel	规定文档中左边距的大小

行元素

个人分类方式

H系列

六种标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落

<p align = center> central paragraph </p>

换行&水平线

<br> or <br/>
<hr width="" size="" color="">

Attribute	Value	Explaination
width	像素（px）或百分比	设置水平线宽度
size	整数（单位px）	设置水平线高度
color	同颜色	设置颜色
align	left \| center \| right	设置位置

文本格式

文本位置

key	Explanation
`left`	左对齐
`center`	居中
`right`	右对齐
`justify`	两端对齐

特殊字符

Display	Explaination	Code
	显示一个空格	` `
<	小于	`<`
>	大于	`>`
&	&符号	`&`
"	双引号	`"`
©	版权	`©`
®	注册商标	`®`
×	乘号	`×`
÷	除号	`÷`

拼音格式

html


  <ruby>
    中<rt>
    		zhong
    	</rt>
  	国<rt>
    		guo
    	</rt>
  </ruby>

文本修饰

Explaination	key	key
加粗	`<b></b>`	`<strong></strong>`
下划线	`<u></u>`	`<ins></ins>`
倾斜	`<i></i>`	`<em></em>`
删除线	`<s></s>`	`<del></del>`
变大	`<big></big>`
变小	`<small></small>`
上标	`<sup></sup>`
下标	`<sub></sub>`

引用和术语

key	Explaination
`<abbr> etc. </abbr>`	定义缩写
`<address> Beijing China </address>`	定义地址
`<blockquote> 长引用 </blockquote>`	定义长引用
`<cite> 引用、引证 </cite>`	定义引用引证
`<q> 短语引用 </q>`	定义短引用语
`<dfn> 定义项目 </dfn>`	定义个定义项目

计算机输出标记

key	Explaination
`<code> code </code>`	定义计算机代码
`<kbd> keyboard code </kbd>`	定义键盘码
`<samp> sample </samp>`	定义计算机代码样本
`<tt> printer code </tt>`	定义打印机代码
`<var> variable </var>`	定义变量
`<pre> pre text </pre>`	定义预格式化

字体

<font key1="" key2="" ...> ... </>
字体属性标记：

Attribute	Value	Explaination
size	+1～+7，1～7，-1～-7	同数值大小相匹配
color	同颜色	同颜色
face	字体1,字体2,......	可以有多个值，用逗号分隔。从左到右依此选用，都不存在，默认为宋体

滚动文字

为文字添加滚动的效果，丰富页面内容

html

<marquee width="" height="" bgcolor="" direction="up|down|left|right"
         behavior="scoll|slide|alternate" hspace="" vspace="" scollamount="" scolldelay=""
         loop="" onmouseover="this.stop()" onMouseOut="this.start()">
  <font size="4">
  	这是一个滚动的文字
  </font>

</marquee>

宽度，高度：width,height
背景色：bgcolor，值同颜色
方向：direction 上下左右
表现：behavior平滑，滚动，交替
边距：hspace,vspace
滚动速度、暂停时间：scollamount,scolldelay
循环次数：loop
鼠标悬停停止，离开继续滚动：onmouseover,onMouseOut

链接

链接的路径
- 根路径（熟悉linux一定很清楚这个，这里的根路径一般是与网站的域名对应）
- 绝对路径：绝对路径一般是从根目录开始
- 相对路径：相对路径是从当前页面开始 ./ 代表当前的页面../代表上级
网址链接： <a href="https://chenpeel.xyz"></a> —— blog_github_page<a href="https://zachary.world"></a> —— blog
站内链接：我的首页
页面书签链接：<a href= "#name" title="" target = "_blank"> The link </a>
如Go to HTML 跳转到HTML篇首

Key	Explaination
href	指向锚点
name/id	锚点名称
title	链接的提示信息
target	指定打开的目标窗口

target有五种值

Value	Explaination
_self	在当前框架中打开链接
_blank	在新的空白页中打开链接
_top	在顶层框架中打开链接
_parent	在上层框架打开链接
framename	在指定的框架或浮动的框架内打开链接，框架名称可以自定义

链接也可用于下载文件、访问FTP服务器、打开图片详情、发送电子邮件，如下

html


  <a href="ftp://chenpeel.xyz"> chenpeel </a> <!-- FTP链接 仅示例 -->

  <a href="https://github.com/Chenpeel/Chenpeel.github.io/blob/master/imags/2.jpeg">
    ![](/imgs/2.jpg)
  </a> <!-- 图片跳转 -->

  <a href="mailto:chenpeelalpha@gmail.com;
           ?subject=point me & ?cc=example@gmail.com & ?bcc=example@gmail.com & ?body=这周没课啦！">
    点击发送邮件
  </a>

块元素

个人分类方式

列表

为网页进行合理布局，有序列表和无序列表组合嵌套使用，使页面层次分明

Type	Key
无序列表	`<ul> unordered list </ul>`
有序列表	`<ol> ordered list </ol>`
定义列表	`<dl> defined list </dl>`
菜单列表	`<menu> menu </menu>`
目录列表	`<dir> directory </dir>`

无序列表（unordered list）

html


  <ul type="">
    <li type=""> name </li>
    <li type=""> name </li>
    ...
  </ul>

Key	Explaination
disc	实心圆圈
circle	空心圆圈
square	实心正方形
none	不使用

有序列表（ordered list）

html


  <ol type="" start="" >
    <li type=""> name1 </li>
    <li type=""> name2 </li>
    ...
  </ol>

start ：数值，有序列表中的起始数值
type ：可以是数字、大小写的字母、大小写的罗马字母的首位（如使用a、A、I、i、1来使用相应的类型）

Key	Explanation
decimal	数字 123...
lower-roman	小写罗马数字 i, ii, iii...
upper-roman	大写罗马数字 I,II,III,IV...
lower-alpha	小写字母 abc...
upper-alpha	大写字母 ABC...

定义列表（difined list）

html


  <dl>
    <dt>product1</dt>
    	<dd>describ1</dd>
  	  <dd>describ2</dd>
    <dt>product2</dt>
    	<dd>describ1</dd>
  	  <dd>describ2</dd>
  </dl>

表格

表：<table> </table>
表题：<caption> name </caption>
表头：<th></th> or <thead></thead>
行：<tr></tr>
格：<td></td>
底：<tfoot></tfoot>

html

<table border="100" width="600" height="200">
  <caption>表题</caption>
  <tr>
  	<th> 表头c1 </th> <th> 表头c2 </th> <th> 表头c3 </th>
  </tr>
  <tr>
  	<td> 单元格1-1 </td> <td> 单元格1-2 </td> <td> 单元格1-3 </td>
  </tr>
  <tr>
  	<td> 单元格2-1 </td> <td> 单元格2-2 </td> <td> 单元格2-3 </td>
  </tr>
  <tr>
  	<td> 单元格3-1 </td> <td> 单元格3-2 </td> <td> 单元格3-3 </td>
  </tr>
  <tfoot>
		<td> 总结： </td> <td> 总结1 </td> <td> 总结2 </td>
  </tfoot>
    <!--<caption>当然写在这也是可以的</caption>-->
</table>

合并单元格

行合并：删掉其中一个单元格的代码，在另一个<td></td>中添加属性colspan即column span

列合并：删掉其中一个单元格的代码，在另一个<td></td>中添加属性rowspan

html

<table border="200" width="1000" height="500" align="center">
  <caption>表测</caption>
  <tr>
      <th> 表头c1 </th>
      <th> 表头c2 </th>
      <th> 表头c3 </th>
  </tr>
  <tr>
      <td> 单元格1-1 </td>
      <td rowspan="2"> 单元格1-2 & 2-2 </td>
      <td> 单元格1-3 </td>
  </tr>
  <tr>
      <td> 单元格2-1 </td>
      <!-- <td> 单元格2-2 </td> -->
      <td> 单元格2-3 </td>
  </tr>
  <tr>
      <td> 单元格3-1 </td>
      <td colspan="3"> 单元格3-2 & 3-3</td>
      <!-- <td> 单元格3-3 </td> -->
  </tr>
  <tfoot>
      <td>总结：</td>
      <td>总结1</td>
      <td>总结2</td>
  </tfoot>

div图层

（division/Section）分区/分节，会自动开始新一行，与span标记向对照
可以被标记属性id、class、style

<div id="" class="" style="" > 块包含的内容 </div>

设置style的属性

Attribute	Key	Explaination
position	static\|absolute\|relative\|fixed	静态、绝对、相对位置、图层固定
border	线粗细、线型、线颜色	边框设置
background-color	同颜色	背景颜色
left	pixes\|%	图层左边距
top	pixes\|%	图层与顶边距
width	pixes\|%	图层宽度
height	pixes\|%	图层高度
float	left\|right\|none	允许浮动元素在左边、右边、不浮动
clear	left\|right\|both\|none	清除左、右、左右浮动和允许浮动
z-index	auto\|数字	子图层按照父图层显示、无单位整数或负数
overflow	scroll\|visible\|auto\|hidden	内容溢出控制，始终显示滚动条、不显示，但超出部分可见、内容超出时显示、超出时隐藏内容
display	block\|inline\|none	表示按照块元素显示、行内方式显示和隐藏

div 图层可以嵌套和层叠使用层叠使用时必须将position设置成绝对位置

span标记

span标记是行内标记，不回自动换行。与div图层相对应
可以被标记属性id、class
纯粹的应用样式，没有结构上的意义

div标记可以包含span，反之不行
display可以转化块标记和行

Key	Explaination
none	此元素不会被显示
inline	设置为行内元素，在行内显示
block	设置为块级元素，以块状显示，自动换行
inline-block	设置为行内块标记
inherit	规定应该从父元素继承display属性

图片

单标记
<img src="" alt="" >

Attribute	Value	Explaination
alt	text	图像显示错误的替代文本
src	URL/PATH	显示的源
name	text	图像名称
height	pixels/%	图高
width	pixels/%	图宽
align	top\|middle\|bottom left\|center\|right	如何在文本中排布
border	pixels	周围边框
hspace	pexels	左右侧空白
vspace	pixels	顶部和底部空白
usemap	URL	将图像定义为客户端图像映射

usemap 可以映像跳转到其他，如下

html


  <img src="../pics/1.jpeg" usemap="#example">
  <map name="example">
  	<area shape="circle" croods="0,0,100" href="http://example.com" alt="example">
  </map>

Shape Value	Explanation	Coords Value	Explanation
rect	矩形	$x_1, y_1, x_2, y_2$	矩形的两个顶点坐标
circle	圆形	$x_o, y_o, radius$	圆心坐标和半径
poly	多边形	$x_1, y_1, x_2, y_2, ..., x_n, y_n, x_1, y_1$	各顶点坐标（首尾相同）

音频

基本同img

<audio src="" alt="">

视频

<video src="" alt="">

显示播放的控件：Control
自动播放：autoplay
循环播放：loop

多媒体

包含Midi、Mav、AIFF、SWF、AV、MP3、MOV、AVI等等

<embed src="" ... > </embed>
自动播放：atuostart （true/false）
循环播放：loop（true/false）

域元素

个人分类方式

结构元素

HTML5中新增了一些结构元素，用于给页面布局

Element	Explaination
header	页面或页面中的某一个区块的页眉，通常是引导和导航信息
nav	可以作为页面引导的链接组
section	页面中的一个内容区块，通常由内容和标题组成
article	代表一个独立的、完整的相关内容的块，可独立于页面其他元素使用
aside	非正文内容，与页面的主要元素是分开的，可独立于页面其他元素独立使用
footer	页面或页面中某一个区域的页脚

表单

表单元素

input

html

<input type="">

type属性值和描述如下：

Key	Explaination
button	定义点击按钮，用于通过js启动脚本
checkbox	复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，隐文
radio	定义单选按钮
reset	定义重置按钮，以清除表单的所有数据
submit	定义提交按钮，将数据发送给服务器
text	定义单行的输入字段，用户可输入文本，默认20字符

其他属性

Attribute	Key	Explaination
name	自定义	定义input元素的名称
value	自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	$\Z_+$	规定输入字段的最大字符长度

label标签和input共同作用

html

<label for="text"> 用户名：</label><input type="text" id = "text">

点击“用户名”三字就可输入文字等等

select

html

<select>
  <option selected="selected">default</option>
  <option>选项1</option>
  <option>选项2</option>
	<option>选项3</option>
</select>

textarea

html

<textarea cols="100" rows="20">点击输入文字……</textarea>

浮动框架

内嵌框架可以在网页中直接插入其他网页或内容

html

<body>
	<iframe src="https://chenpeel.github.io/notes/web" name="test" width="1400" height="1100" frameborder="1" marginwidth="300" marginheight="100" scrolling="yes">
	</iframe>
</body>

属性：

来源：src
命名：name
宽度：width
高度：height
边框：frameborder
边距：marginwidth,marginheight

HTML ​

标记类型 ​

标签间的关系 ​

注释 ​

元素 ​

注明文件 ​

语言 ​

head标签 ​

元信息标记 ​

meta标签 ​

robots ​

http-equiv ​

主体 ​

行元素 ​

H系列 ​

段落 ​

换行&水平线 ​

文本格式 ​

字体 ​

滚动文字 ​

链接 ​

块元素 ​

列表 ​

表格 ​

合并单元格 ​

div图层 ​

span标记 ​

图片 ​

音频 ​

视频 ​

多媒体 ​

域元素 ​

结构元素 ​

表单 ​

浮动框架 ​

HTML

标记类型

标签间的关系

注释

元素

注明文件

语言

head标签

元信息标记

meta标签

robots

http-equiv

主体

行元素

H系列

段落

换行&水平线

文本格式

字体

滚动文字

链接

块元素

列表

表格

合并单元格

div图层

span标记

图片

音频

视频

多媒体

域元素

结构元素

表单

浮动框架