【学习笔记】：一天搞定HTML
PS：许多控制样式的标签在HTML5中都不推荐使用，建议使用CSS，如align，border等。
一、概念
HTML的英文全称：Hypertext Marked Language 超文本标记语言。
超文本
超文本是一种组织信息的方式，它通过超链接的方法将文本中的文字、图表与其他信息媒体相关联。
标记语言
-
由标签构成的语言，格式：
<标签名称>。 -
标记语言不是编程语言。
-
通过html的属性可以控制样式，但是不推荐使用。
二、语法
-
html文档后缀名
.html -
标签分为：
- 围堵标签：开始和结束标签，如
<html> </html> - 自闭合标签：开始标签和结束标签在一起，如
<br/>
- 围堵标签：开始和结束标签，如
-
标签可以嵌套：需要正确嵌套，不能你中有我，我中有你。
-
在开始标签中可以定义属性，属性由键值对构成，值需要用引号引起来。
-
html标签不区分大小写，但是建议用小写。
三、标签
1. 文件标签
<html>：定义HTML文档<head>：用于指定html文档的一些属性，引入外部的资源。<title>：定义文档的标题<body>：定义文档的主体<!DOCTYPE html>:html中定义该文档是html文档
2. 文本标签
- 注释：
<!-- xxx --> <h1>to<h6>：标题标签<p>：段落标签<br>：换行标签（空标签）<hr>：水平线<b>：字体加粗<i>：字体斜体<font>：字体标签（不赞成使用）
3. 图片标签
<img>：图片标签
- 必需属性
- alt：规定图像的替代文本，如果图片没有正常加载，将会显示alt文本。
- src：规定显示图像的URL。
- 绝对URL：指向其他站点，如
src="https://www.baidu.com" - 相对URL：如指向上一层同级目录images的1.png文件，
src="../images/1.png"。
- 绝对URL：指向其他站点，如
- 可选属性
- width：图像宽度
- height：图像高度
4. 列表标签
-
有序列表
<ol type=''>- type：规定列表的标记类型。
- start：规定有序列表的起始值。
- reversed：规定降序。
<li>：定义列表项目
-
无序列表
<ul type=''>- type：规定列表的标记类型，不赞成使用。
<li>：定义列表项目
type属性可以选择标记类型
5. 链接标签
<a>:定义一个超链接。- href：规定链接指向的页面的 URL
- target：规定在何处打开链接文档，如果不使用href，就不能有target。
- _self：默认在当前页面打开
- _blank：在空白页打开
6. div和span
<span>：文本信息在一行展示，行内标签，内联标签。<div>：每一个div占满一行，块级标签。
这俩标签配合id、class属性调整样式，格外有效。
7. 语义化标签
提高程序可读性。
<header><footer>
8. 表格标签
-
<table>：定义表格-
width：表格宽度
-
border：表格边框长度
-
cellpadding：定义内容和单元格的距离
-
cellspacing：定义单元格之间的距离，如果为0，则线合为一条
-
-
<tr>：定义行，一个<tr>可以包含多个<td>、<th>。 -
<td>：定义单元，正常字体左对齐。 -
<th>：定义表头单元格，粗体居中。<td>和<th>跨行、列的属性：- rowspan：定义单元格可跨的行数。
- colspan：定义单元格可跨的列数。
-
<caption>:表格标题，居中于表格上
下面这仨需要配套使用：
<thead>：定义表头<tbody>：定义表主体。<tfoot>：定义脚注。
9. 表单标签
表单项中的数据想要被提交，必须指定其name属性
<form>
<form>用于定义表单，可以定义一个范围，代表采集用户数据的范围。
<form>属性-
action：指定提交数据的URL
-
method：指定提交方式共七种，get/post比较常用
- get:请求参数会在地址栏显式，参数大小有限制，不太安全
- post：请求参数不会在地址栏中显式，会封装在请求体中，参数大小没有限制，较为安全
-
target：规定在何处打开链接文档。
- _self：默认在当前页面打开
- _blank：在空白页打开
-
<input>
<input>用于定义输入空间，搜集用户信息，根据不同的type属性值，拥有很多样式：
- text：默认文本框。
- password：密码框。
- radio：单选框。要想达到单选的效果，必须name值一致，且建议每种选择定义一个value。
- checkbox：复选框。复选框name值建议也一致，value值不一致。
- file：文件选择框。
- image：将图片作为提交按钮。
- submit：提交表单数据的按钮。
- reset：重置数据的按钮。
- button：普通按钮。
- email：邮箱。
<input> 标签还有其他的属性，比如：
- placeholder：定义输入字段的提示。
- checked：规定该元素首次加载被选中。
- value：
- 对于button、reset、submit：value值是按钮上显示的文本。
- 对于text、password、hidden：value是输入字段的初始值。
- 对于checkbox、radio、image：value是输入相关联的值。
表单其他元素
<textarea>：定义多行的文本输入空间。
- cols：定义宽度。
- rows：定义行数。
- placeholder：定义预期提示字。
<select>与<option>：
<select>定义单选或多选菜单。<option>定义下拉列表中的一个选项。- selected：规定该选项首次显示时为选中状态。
- value：选项值。
<label>：为<input>元素定义标注。
- for属性：可以绑定到指定id的元素，在点击label文本的时候，就会自动聚焦到相关元素上，非常好用。
四、全局属性
全局属性可以应用于所有的HTML元素。
- id：规定元素唯一的id，作为链接锚。
- class：规定元素的一个或多个类名（不能以数字开头）。
- style：规定行内CSS样式。
五、重要实体名称
| 结果 | 实体名称 |
|---|---|
| > | > |
| < | < |
| & | & |
| ' | ' |
| " | " |
浙公网安备 33010602011771号