html
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
html运行在浏览器上。
世界五大主流浏览器：
IE：微软的
FireFox：火狐（FF）Chrome：谷歌
Opera：欧朋
Safari：MAC OS专用（苹果专用的浏览器）
国内前端程序员主要安装三个：
IE
FF（FireFox）
Chrome
前端的程序员开发完成之后需要在不同的浏览器上运行程序，
以便发现浏览器兼容问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>— 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。<html></html>—<html>元素。该元素包含整个页面的内容，也称作根元素。<head></head>—<head>元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。<meta charset="utf-8">— 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。<title></title>—<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。<body></body>—<body>元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容
1 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
2 文档
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
代码解释：
<html>与</html>之间的文本描述网页<body>与</body>之间的文本是可见的页面内容<h1>与</h1>之间的文本被显示为标题<p>与</p>之间的文本被显示为段落
3 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<!-- -->
<!-- This is a comment -->
**注：**开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
4 元素
元素的主要部分有：
<p>My cat is very grumpy</p>
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，开始标签和结束标签之间的内容。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素
4.1 嵌套元素
也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“very”用 `` 元素包围，爆字将突出显示：
<p>My cat is <strong>very</strong> grumpy</p>
先开始的后结束
4.2 空元素
不包含任何内容的元素称为空元素。比如</img>元素：
<img src="images/firefox-icon.png" alt="My test image">
本元素包含两个属性，但是并没有
</img>结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像
4.3 基本标签
文本框标签input
input标签的几个基本控制属性：
name属性：元素的名称，也就是name的值代表当前input元素的名字
value属性：元素的默认值
- 当input type=“text”、“password”、"hidden"时，定义输入字段的初始值
- 当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本
- 当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值
注意：input type="checkbox"和input type="radio"中必须设置value属性
style属性：为input元素设定CSS样式
width属性：当input type="image"时，通过width属性控制元素的宽度
height属性：当input type="image"时，通过height属性控制元素的高度
maxlength属性：定义input元素中可输入的最长字符数
<!--
文本输入框input
type属性：表示文本框输入框的类型，text表示文本，password表示密码
name属性：表示此元素的名称，以后java程序中会用到
value属性：表示此文本框的默认值
maxlength属性：最大长度
size属性：文本框的长度
-->
<p>名字:
<input type="text" name="username" value="用户名" maxlength="8">
</p>
<p>密码:
<input type="password" name="password">
</p>
<!--
单选框标签
input type="radio"
value：单选框的值
name:单选框的名字,以后java程序中会用到
-->
<p>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<!--
多选框标签
input type = "checkbox"
value属性：文本值
name属性，多选框的姓名
-->
<p>爱好：
<input type="checkbox" value="sing" name="hobby">唱
<input type="checkbox" value="jump" name="hobby">跳
<input type="checkbox" value="rap" name="hobby">rap
<input type="checkbox" value="basketball" name="hobby">篮球
</p>
<!--
按钮标签input type="button"
图片按钮input type="image"
提交按钮input type="submit"
重置按钮input type="reset"
-->
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/image/img1.png">
<input type="submit" >
<input type="reset">
</p>
图像img
<!--图片标签
src:表示图片地址，分为绝对地址和相对地址
alt：alter，表示替代文字
title：鼠标停留时显示文字
width：图片宽度
height：图片高度
-->
<img src="图片路径" alt="替代文字" title="鼠标停留时显示文字" width="图片宽度" height="图片高度" >
4.4 块级元素
块级元素（block element）：在网页中一般通过块级标签来将页面分块，
从而达到布局的效果
主要特点如下：
- 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关CSS属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
- 块级元素什么都能放，但p元素里不能放h1 等分级标题元素
常用的块级元素：
| 元素 | 描述 |
|---|---|
| div | 最常用的块级容器，用来分块，没有语义 |
| h1 | 一级标题 |
| hr | 水平分割线 |
| menu | 菜单列表 |
| ol | 有序列表 |
| ul | 无序列表 |
| li | 列表项 |
| table | 表格 |
| p | 段落 |
| form | 表单 |
div
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
div标签可定义文档中的分区或节（division/section）
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效
<body>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
...
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div>
...
</body>
上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class=“news” 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对div 进行格式化
标题h
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
...
<h6>This is a heading</h6>
**注：**浏览器会自动地在标题的前后添加空行。
**注：**默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
水平线hr
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
列表li
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并且以列表的样式显示出来，以便浏览者可以快捷地获得相应的信息
无序列表ul
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>
<!--无序列表,UnOrderList简写ul
应用范围：导航，侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
有序列表ol
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<!--有序列表 OrderList简写ol
应用范围：试卷，问答等······
-->
<ol >
<li>java</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ol>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
自定义列表dl、dd、dt
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<!--自定义序列表
dl：自定义列表标签
dt：列表名称
dd：列表内容
应用范围：网站底部
-->
<dl>
<dt>编程语言</dt>
<dd>python</dd>
<dd>c++</dd>
<dd>php</dd>
<dd>java</dd>
<dt>位置</dt>
<dd>成都</dd>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
</dl>
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
表格table
表格的基本结构：
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格table border属性选择边框
行：tr
列：td
-->
<table border="1px">
<tr>
<!--td标签的colspan属性表示跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--td标签的rowspan属性表示跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
段落p
段落是通过 <p> 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
**注：**浏览器会自动地在段落的前后添加空行。（
<p>是块级元素）**提示：**使用空的段落标记
<p></p>去插入一个空行是个坏习惯。用
标签代替它！（但是不要用<br />标签去创建列表）
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格
表单form
用来盛放给用户输入信息的标签的空间
<!--表单form
action属性：表示表单提交的位置，可以是网站，也可以是一个网站处理地址
method：请求的提交方式，post和get
get方式提交：参数在url中显示，不安全，高效
post方法提交：参数不在url中显示，比较安全，上传文件
-->
<form action="图片标签.html" method="">
<!--文本输入框input
type属性：表示文本框输入框的类型，text表示文本，password表示密码
-->
<p>名字: <input type="text" name="username"></p>
<p>密码: <input type="password" name="password"></p>
<p>
<input type="submit" >
<input type="reset">
</p>
</form>
4.5 行内元素
**行内元素：**内容撑开宽度，左右都是行内元素的可以排在一行
主要特点：
- 和其他内联元素从左到右在一行显示
- 不能直接控制宽度、高度以及盒子模型的相关CSS属性，但是直接设置内外边距的左右值是可以的
- 内联元素的宽高是由本身内容的大小决定（文字、图片等）
- 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
- 通常被包含在块级元素中
常用的行内元素：
| 元素 | 描述 |
|---|---|
| a | 锚点 |
| b | 加粗 |
| span | 最常用内联元素，划分内联元素里的区 |
| strong | 加粗强调 |
| i | 斜体 |
| em | 斜体强调 |
| br | 强制换行 |
| u | 下划线 |
| sup | 上标 |
| sub | 下标 |
链接a
http://或https://是网关协议，发行出来的网址都有网关协议
<!--a标签（超链接标签）
href:必填，表示要跳转到哪个页面
target:表示窗口在哪儿打开
_blank:在新标签页中打开
_self:在当前标签页中打开，默认值
-->
<a href="图片标签.html" target="_blank">点击我跳转到图片标
签.html</a><br/>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="">
<img src="../resources/image/img1.png" alt="">
</a>
锚链接
<!-- 使用name属性进行标记 -->
<a name="top">顶部</a>
<!--
锚链接，实现页面间跳转
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top"></a>
锚链接和超链接搭配使用：
<!--链接地址后接#号表示跳转到哪个元素-->
<a href="链接标签学习.html#lowest">a</a>
span
<span> 标签被用来组合文档中的行内元素
**注：**span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
粗体strong
<!--粗体标签-->
<strong>I Love You</strong>
斜体强调em
<!--斜体标签-->
<em>I Love You</em>
换行br
不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签
<p>This is<br />a para<br />graph with line breaks</p>
<br>和<br />都可以，建议用后者
上标sup
<sup> 标签可定义上标文本。
包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
**提示：**这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注
下标sub
<sub> 标签可定义下标文本。
包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
**提示：**无论是 <sub> 标签还是和它对应的<sup>，在数学等式、科学符号和化学公式中都非常有用
4.6 转义字符
<!--空格-->
空 格 <br>
空 格<br>
<!--大于符号-->
><br>
<!--小于符号-->
<<br>
<!--版权符号-->
©<br>
5 属性
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
name='Bill "HelloWorld" Gates'
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
<p class="editor-note">My cat is very grumpy</p>
属性应该包含：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
一些简单符号可以不使用引号括起来，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读
<!-- 按钮标签 -->
<!-- 属性：写到开始标签的标签名后面，用空格隔开 结构：属性名="属性值"-->
<button class="but1">点击登录</button>
<!-- 布尔属性：没有属性值 disabled表示不能使用 -->
<button class="but1" disabled>不能使用</button>
<!-- 其它属性：id，src，href，style（设置标签的样式）…… -->
布尔属性：它的属性值与属性名相同，因此可不写属性值
id
唯一， id 用于标识单独的唯一的元素
class
类，class 用于元素组（类似的元素，或者可以理解为某一类元素）
title
鼠标悬停时显示的内容
value
不输入内容时，该标签默认显示的内容
name
该标签的名字，与后端连接时用
target
在何处打开链接文档
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档 |
954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
