HTML

# HTML

# 0.e...

// 后缀是.htm 或.html

// 要运行的话浏览器里输入路径就行

//<> 中的就是关键词，通常成对出现。（即 < xx> 和 </xx>）

// 开始和结束标签（<xx> 与 </xx>）, 也叫开放标签和闭合标签

1.html 本身是一种标记语言（超文本标记语言， Hyper Text Markup Language ），而不是编程语言，是一套编辑标签。（使用其来描述网页）

2.html 可以使用记事本来写

也有专业的：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

# 1. 标签

# 一般

#还有部分在文本格式化

<html>：文本描述网页，写在最前和最后
<body>：可见页面文本,是文档的主体
<h1/2/3/4/5/6>：标题，会自动空行
<p>：段落，也会自动空行
#块级元素都会自动空行#
<br />：没有关闭标签的空元素（定义换行），似乎<br />也可以用来创建列表
*#连续的空格或者空行（换行），都会变成一个空格，这包括空白字符和回车#
<hr />：用于分割内容，创建水平线，单个出现

*：这是为了在拖动浏览器窗口时，还能正常显示。如果想要保留，可以使用 <pre>（预格式文本）标签，这适合显示代码（也有其他专门为显示代码的，见文本格式化）

# 特殊

# 1. 锚 (a)

<p><a href="网页链接或者另一个html（需要路径）" style="text-decoration:none" target="_blank">link</a></p>

// 这时 link 是个超链接

style 用于去除默认带的下划线

target 表示在新窗口打开

href 属性还可以链接邮件

写成 (%20 用于代替空格)

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

<a> 还有 name 属性，用于定义锚。不会直观体现，但可以被链接，注意被调用时是写 name 的属性，而不是 <a> 的元素

# 2. 图像 (img)

动图一样

<img src="图片地址" width="104" height="142" border="0" />

//<img> 不是闭合标签，并且套在 < p > 时会和该文本对齐（默认底部）

//border 是边框

//width 和 height 实际上是调整大小，而不是定义

<del>src 其实是是 scource 的意思 </del>

最后的 / 不能省略

其他属性：

alt: 替换文本，当不能正常加载图片时显示，很多时候鼠标移上去也会

其它图像插入：

// 背景图像，写在 body 里，只能.jpg 或.gif，小了会重复

# 3.map 与 area

这个不太好说，自己体会

	<html>
	<body>

	<p>请点击图像上的星球，把它们放大。</p>

	<img
	src="/i/eg_planets.jpg"
	border="0" usemap="#planetmap"
	alt="Planets" />

	<map name="planetmap" id="planetmap">

	<area
	shape="circle"
	coords="180,139,14"
	href ="/example/html/venus.html"
	target ="_blank"
	alt="Venus" />

	<area
	shape="circle"
	coords="129,161,10"
	href ="/example/html/mercur.html"
	target ="_blank"
	alt="Mercury" />

	<area
	shape="rect"
	coords="0,0,110,260"
	href ="/example/html/sun.html"
	target ="_blank"
	alt="Sun" />

	</map>

	<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

	</body>
	</html>

# 4. 表格 (table)

	<table border="1">
	//有background属性，同插入背景图像的写法，不在style里
	<tr>
	<th>Heading</th>
	<th>Another Heading</th>
	<td>row 1, cell 1</td> //有background属性，同上。也有align,同样不在
	<td>row 1, cell 2</td>
	</tr>
	<tr>
	<td>row 2, cell 1</td>
	<td>row 2, cell 2</td>
	</tr>
	</table>
	//tr定义行（之间为一行）
	//td分割行形成单元格（之间的为数据可以是文本、图片、列表、段落、表单、水平线、表格等等(普通，左对齐)
	//th是表头(居中粗体，就是不会动的那个，自带td)
	//border为1时有边框，默认为0
	//有时空单不会显示，缺少单元格边框，可以填个空格（&nbsp）来防止
	//表格的单元格里可以嵌套表格，列表
	#table的其他参数有：
	frame(分割线的位置)：box,above,below,hsides(上下)，vsides(左右)
	cellpadding/cellspacing：单元格边距/间距，参数只有数字

th 的参数：colspan="x", 横跨 x 列

rowspan="x", 横跨 x 行

其他表格标签：

# 5. 列表 (ul/ol)

A. 无序列表

	<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
	</ul> //每行前面一个点的那种

B. 无序列表

	<ol start="50">
	<li>咖啡</li>
	<li>牛奶</li>
	<li>茶</li>
	</ol> //start属性就是第一个排序数字，默认从1开始

# 6. 类

将 html 元素分成各个类，并按类分别定义不同样式（可以使用 CSS 样式）

比如：

	<html>
	<head>
	<style>
	.cities {
	background-color:black;
	color:white;
	margin:20px; //（设定）外边距，可以使用百分比
	padding:20px; //填充（边距），可以使用百分比
	}
	</style>
	</head>

	<body>

	<div class="cities">
	<h2>London</h2>
	<p>London is the capital city of England.
	It is the most populous city in the United Kingdom,
	with a metropolitan area of over 13 million inhabitants.</p>
	</div>

	<div class="cities">
	<h2>Paris</h2>
	<p>Paris is the capital and most populous city of France.</p>
	</div>

	<div class="cities">
	<h2>Tokyo</h2>
	<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
	and the most populous metropolitan area in the world.</p>
	</div>

	</body>
	</html>

自己看咯～跟下面块的一样，方便搞类似的样式内容

# 7.id

与 class 不同，它必需是唯一的，这涉及到 js

位于文件头的 <style> 与 </style>> 中，格式：

	#myHeader {
	background-color: lightblue;
	color: black;
	padding: 40px;
	text-align: center;
	} //id名和值在在该html中必须唯一，区分大小写

后面属性就可以直接调用该 id，比如：

<h1 id="myHeader">My Header</h1>

id 还可以创建书签：

<h2 id="C4">第四章</h2>   //创建

<a href="#C4">跳转到第四章</a>   //html内部使用跳转

	<a href="html_demo.html#C4">Jump to Chapter 4</a>
	//从另一页面跳转

# 8. 块 (div/span)

// 这两者本身没有什么意义，可以用 CSS 来样式设置

HTML 元素分为块级元素和内联元素两种：

块级元素在浏览器显示时，通常会以新行来开始或结束 // <h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始 // <b>, <td>, <a>, <img>

A.<div>(块级元素)

<div> 标签定义 HTML 文档中的分割或部分（分区或小节，division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联

任何类型的内容都可以放在标签内！标签可用作 HTML 元素的容器，然后使用 CSS 设置样式或使用 JavaScript 进行操作。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。通过使用 class 或 id 属性，可以轻松地对 <div> 标签设置样式。

注意：默认情况下，浏览器总是在 <div> 元素前后放置一个换行符。

<div> 是块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

属性：

class 用于元素组（某一类元素），而 id 标识唯一元素

比如：

	<div class="myDiv">
	<h2>这是 div 元素中的标题</h2>
	<p>这是 div 元素中的一些文本。</p>
	</div> //定义方法同id，但是前面的#换成.

B.<span>(内联元素)

<p> 这位姑娘有一双 < span style="color:blue;font-weight:bold"> 蓝色 </span > 的眼睛。</p> :: 其实就是给行内部分加 style，div 则是为多行加上 style

# x. 注释

也有条件注释：

// 这表示只在 IE 显示

# 2. 语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容 (没有内容的 HTML 元素被称为空元素)
[空元素]( 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。 ) 在开始标签中关闭，以开始标签的结束而结束
大多数 HTML 元素可拥有属性

// 大多 html 可以嵌套

比如：<p>This is<br />a para<br />graph with line breaks</p>

# 属性

#必须加引号

[# 参考手册](完整的：https://www.w3school.com.cn/tags/index.asp 标准属性的：https://www.w3school.com.cn/tags/html_ref_standardattributes.asp)

总是以名称 / 值对的形式出现，比如：name="value"。（像是上面的 <a>）

总是在 HTML 元素的开始标签中规定。

比如：

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的。

<table> 定义HTML表格
<table border="1"> 拥有关于表格边框的附加信息

# 1.style

align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

写成

<body style="background-color:yellow">  //设置背景色

<h2 style="background-color:red">This is a heading</h2> //同上

	<p style="font-family:arial;color:red;font-size:20px;text-align:center;">A paragraph.</p>
	//设置字体，字体颜色，字体大小,水平对齐方式

# 2. 文本格式化

一般操作：

<b>/<strong>：加粗

<big>：加大

<small>：缩小

<em>/<i>：强调（斜体）

<sub>/<sup>：下标 / 上标

用于计算机输入输出：

<code>：代码

<kbd>：键盘输入

<samp>：例子

<var>：变量

？：

<address>： 该元素定义文档或文章的联系信息（作者 / 拥有者）。

**<cite>：** 定义著作标题，默认斜体，需要 < p>

**<acronmy title="wo wo wo">www<acronym>：** 首字母缩写

#鼠标移上去显示完整

不同于 <addr>, 这个不能定义其它缩写，但是不用 < p>(<addr> 的用法也可用于 <dfn>，不给参数的 <dfn> 当作没有，但不会错)

<bdo dir="rtl">：即 bi-directional override

#需要浏览器支持，rtl 实际上是 right to left, 这会是下面内容的实际输出顺序

**<blockquote>/<q>：** 长引用 / 短引用，前者自带换行，边距，缩进。后者没有。

#blockquote 可以跟参数，但是没什么用，一般是被引用内容的网址

**<del>：** 删除文本（其实就是中间划线）

**<ins>：** 下划线 3.

#老旧浏览器可能不支持 del 和 ins, 只会普通显示

# 3. 颜色

命名的有：

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

// 就这 16 个

其他写成：

#00FF00 // 十六进制，相当于 rgb (0,255,0), 按顺序看，这其实就是绿色

# 4.css (的调用)

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

// 外部样式表和内部样式表都在 head 里放前面，只有内联样式在 body 里

外部样式表会改变所有页面，内部可以指定特定，内联则只有个别元素

外部用 link

	<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	</head>

内部和内联用 style

	<head>
	<style type="text/css">
	body {background-color: red}
	p {margin-left: 20px}
	</style>
	</head>

	<p style="color: red; margin-left: 20px">
	This is a paragraph
	</p>

# 3. 表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

这是本章中使用的类型：

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）// 需要 action 属性，省略会变成当前页面

例如：

	<form>
	First name:<br>
	<input type="text" name="firstname"> //name属性的值就是被你所输入的
	<br> 文本赋值的变量
	Last name:<br>
	<input type="text" name="lastname">
	</form>
	//文本默认宽度只有20

以及

	<form>
	<input type="radio" name="sex" value="male" checked>Male
	//checked表示被选中
	<br>
	<input type="radio" name="sex" value="female">Female
	</form>

还有

	<form action="action_page.php">
	First name:<br>
	<input type="text" name="firstname" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
	</form>

可以使用 min 和 max 属性限制输入值的范围

# 题外话：

这个 head 疑似是用来添加请求头参数的，存在：

<p id="js_and_id">HTML JavaScript</p>