day06
目录
一、HTML介绍
1. 概念
HTML（HyperText Markup Language）就是超文本标记语言。”超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
2. 分类
基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
二、基本语法
1. 标签
(1)<标签名>
单标签,不设置属性值。
<br/>、<hr/>(2)<标签名称 属性=”属性值”>
单标签(也叫空元素)，设置属性值。
<hr width=”800”/>(3)<标签名称>…</标记名称>
双标签，不设置属性值。
<title>…</title>(4)<标签名称 属性=”属性值”>…</标记名称>
双标签，设置属性值
<body bgcolor=”red”>…</body>
<font size=”7”>…</font>（5）标签的分类
HTML 中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
- 块级元素特点： 元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
- 行内元素特点 ：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
- 行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
他们的属性不是固定不变的，后期也可以通过 CSS 进行修改。
2. 整体框架
（1）概念
HTML 的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 文档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>（2）<html>…</html>
<html>标志用于 HTML 文档的最前边，用来标识 HTML 文档的开始。而</html>标志放在HTML 文档的最后边，用来标识 HTML 文档的结束，两个标志必须一块使用。
（3）<head>…</head>
- <head>和</head>构成 HTML 文档的开头部分。<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
- 在此标志对之间可以使用<title></title>、<script></script>、<meta>、<link>等标签。
- <meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是 utf8，而浏览器也设置utf8 即可正确显示中文。
- <link>：用来引入 css 文件
- <script>：用来引入 js 文件或编写 js 代码。
（4）<title>…</title>
- <title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
- 注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。
（5）<base>
- <base> 标签为页面上的所有链接规定默认地址或默认目标。
- 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
- 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的URL。
（6）<body> …</body>
- 一般情况下浏览器上显示的内容的都放在 body 中，不排除其他标签可以不用 body，比如frameset 框架集标签。
- <body>和</body>是 HTML 文档的主体部分，在此标志对之间可包含<p>…</p>、<h1>…</h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。
（7）常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| bgcolor | rgb(x,x,x)：red、green、blue，x:0-255 #xxxxxx：十六进制的数字，00-ff Colorname：Red、Green... |
规定文档的背景颜色，以后可以用样式取代它 |
| text | rgb(x,x,x) #xxxxxx colorname |
规定文档中所有文本的颜 色，以后可以用样式取代它 |
3. HTML解析标准
由于使用的场景或者版本的更替间，HTML 使用的标准不同，所以需要浏览器按照不同的标准来解析 HTML 文本内容，这就需要告知浏览器我当前的 HTML 页面是按照那种方式进行编写的，需在html文件的最顶端写上<!DOCTYPE>
三、常用标签
HTML 页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染 ，我们需要记忆常用的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span、格式化文字的。
1. 标题和水平线
- <h1> - <h6> 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。
- 相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
- <h999>这样的标签不产生错误，但是不具有标题的效果。
- h1 标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个 h1 标签，否则可能进入搜索引擎的黑名单。
<h1></h1><hr /> 标签在 HTML 页面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，<hr> 标签没有结束标签。
<hr />常用属性
2. 段落和换行
<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
各个段落之间会有大的空隙。
<p></p>br 标签为换行符号，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
注意：<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行，而不是分割段落。
<br />3. 图片
img 元素向网页中嵌入一幅图像。
注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
行内：
<img src=”” alt=””>必须属性
常用属性
4. a 标签
- <a>标签定义超链接，用于从一张页面链接到另一张页面。
- <a>元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有 href 属性 a 标签内的内容与普通文本没有区别，也就失去了超链接的功能。
- 若是想要跳转到当前页面，那么 href 的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
<a href=”http://www.baidu.com”>百度</a>利用 a 标签的 name 属性：<a name="top"></a>
一般标签的 id 属性：div id=""、a id=""等：
<div id="top"></div>、<a id="top"></a>
<a href="#top">返回首部</a>
常用属性
5. div 和 span
- <div>是一个块级元素，通常与 css 配合使用，用于布局。
- <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
- <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
<div>content</div>常用属性
<span>标签被用来组合文档中的行内元素 ，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
<span>content</span>6. 表格
- <table></table> 标签定义 HTML 表格。
- <tr></tr>标签定义表格的行。tr 元素包含一个或多个 th 或 td 元素
- <td></td>标签定义 HTML 表格中的标准单元格。
- <th></th>定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
理解：table 相当于一个表格的外框，tr 为行，td 为一个一个单元格，th 为有标题作用的单元格，th 中的内容同时有加粗的效果。
table 常用属性
tr 常用属性
<td>的 colspan 和 rowspan 分别规定单元格横跨的列数和行数
7. 列表
（1）有序列表
由<ol></ol>和<li></li>标签组成。
<ol>
<li></li>
<li></li>
......
</ol>常用属性
（2）无序列表
由<ul></ul>和<li></li>标签组成。
<ul>
<li></li>
<li></li>
......
</ul>8. fom表单
- 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea、fieldset、legend 和 label 等 元素。
- <form> 标签用于为用户输入创建 HTML 表单。
- 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
（1）常用属性
（2）提交方式
- method：表单提交方式：get、post
- get：默认，主动的获取方式，数据放在 url 上，数据的容量有限，安全性差，有缓存
- post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存
（3）<input>
- <input> 标签用于搜集用户信息。
- 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用属性
若上传文件，请求方式为 post，且表单添加一个属性：enctype="multipart/form-data"
注意：
- 没有 name 属性的属性是无法提交到后台的！！！！
- Radio 单选按钮以 name 相同为一组。
- Checkbox 复选按钮以 name 相同为一组。
<label></label>
- <label> 标签为 input 元素定义标注（标记）。
- label 元素不会呈现任何的特殊效果。label 标签的 for 属性应当与相关元素的 id 属性相同。
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/><button></button>
<button> 按钮 </button>常用属性
<select></select>
<select>用于定义下拉列表。
<select name="cars" >
<option value="audi">Audi</option>
<option value="qq">QQ</option>
<option value="bmw">BMW</option>
</select>select 常用属性
option 常用属性
<textarea></textarea>
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。
<textarea>content</textarea>9. 格式化文字的标签
<font>
规定文本的字体、字体尺寸、字体颜色。
<b>（粗文本）、<i>（斜体文本）、<u>（下划线文本）、 < del >（中划线文本）、<sub>（下标文本）、<sup>（上标文本）
10. HTML 常用字符实体
- 在 HTML 中，某些字符是预留的。
- 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
- 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（characterentities）。
实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |  ； |
 ； |
|
| < | 小于号 |
<； |
<； |
| > | 大于号 | >； | &； |
| © | 版权 | © | ©； |
<body>
<
>
©
</body>
上一篇： NC25136 切长条 贪心