1 HTML组成
- 标签
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 属性（Attribute）：标签的附加信息。
- 属性
2 页面说明
<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明<html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。目前主要了解两个标签：
<meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。<title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。
3 基本语法
3.1 注释
<p>我在注释外！</p>
<!-- <p>我在注释内！</p> -->
3.2 空元素
一些元素只有一个标签，叫做空元素。
3.3 嵌套元素
把元素放到其它元素之中——这被称作嵌套。
3.4 块级和行内
- 概念
- 块级元素：
独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。 - 行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等。
- div和span
<div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。 <span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。
3.5 属性
标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以`name = value`的格式展现。
常用属性：
| 属性名 | 作用 |
|---|
| class | 定义元素类名，用来选择和访问特定的元素 |
| id | 定义元素唯一标识符，在整个文档中必须是唯一的 |
| name | 定义元素名称，可以用于提交服务器的表单字段 |
| value | 定义在元素内显示的默认值 |
| style | 定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容） |
3.6 特殊字符
| 原义字符 | 等价字符引用 |
|---|
| < | < |
| > | > |
| " | " |
| ’ | ' |
| & | & |
| 空格 | |
4 标签布局
4.1 div样式布局
-
基本格式：
<style>
标签名{
属性名:属性值;
}
</style>
-
多个属性名格式：
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
</style>
-
多个属性值格式：
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
</style>
4.2 文本标签
| 标签名 | 作用 |
|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低 |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线 |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
4.3 浮动布局和清除
概念： float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。
<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动
<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
4.4 图片标签
| 标签名 | 作用 | 备注 |
|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
其他属性：
| 属性名 | 作用 | 备注 |
|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 | |
4.5 超链接
| 标签名 | 作用 | 备注 |
|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
| 属性名 | 作用 |
|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
a {
text-decoration:none; // none 表示不显示
}
4.6 表单标签
| 标签名 | 作用 | 备注 |
|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 | |
表单的属性
| 属性名 | 作用 | 备注 |
|---|
| action | 处理此表单信息的Web服务器的URL地址 | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | HTML5 |
4.7 表单元素
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
| 标签名 | 作用 | 备注 |
|---|
| label | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
1）文本输入框
- label标签：表单的说明。
- input标签：输入控件。
- type属性：表示输入类型，text值为普通文本框
- id属性：表示标签唯一标识
- name属性：表示标签名称
- value属性：表示标签数据值
2）提交用户名的表单
- button标签：表示按钮。
- type属性：表示按钮类型，submit值为提交按钮。
4.7.1 input标签的type属性
| 属性值 | 作用 | 备注 |
|---|
| text | 单行文本字段 | |
| password | 单行文本字段，值被遮盖 | |
| email | 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 | HTML5 |
| 属性值 | 作用 |
|---|
| radio | 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。 |
| checkbox | 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器 |
4.7.2 button 标签的属性
按钮属性
| 属性值 | 作用 |
|---|
| button | 无行为按钮，用于结合JavaScript实现自定义动态效果 |
| submit | 提交按钮，用于提交表单数据。 |
| reset | 重置按钮，用于将表单中内容恢复为默认值。 |
| image | 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。 |
4.8 HTML5新增属性
| 属性值 | 作用 | 备注 |
|---|
| date | HTML5 用于输入日期的控件 | 年，月，日，不包括时间 |
| time | HTML5 用于输入时间的控件 | 不含时区 |
| datetime-local | HTML5 用于输入日期时间的控件 | 不包含时区 |
| number | HTML5 用于输入浮点数的控件 | |
| range | HTML5 用于输入不精确值控件 | max-规定最大值
min-规定最小值
step-规定步进值
value-规定默认值 |
| search | HTML5 用于输入搜索字符串的单行文本字段 | 可以点击x清除内容 |
| tel | HTML5 用于输入电话号码的控件 | |
| url | HTML5 用于编辑URL的字段 | 可以校验URL地址格式 |
| 属性值 | 作用 | 备注 |
|---|
| file | 此控件可以让用户选择文件，用于文件上传。 | 使用 accept 属性可以定义控件可以选择的文件类型。 |
| hidden | 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值 | |
| 属性名 | 作用 | 备注 |
|---|
| placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
| required | 这个属性指定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性，可省略属性值表示true
2. 当type属性是hidden,image或者button类型时不可使用 |
| autocomplete | 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on，关闭为off
2. 可以设置指定的字段为off，关闭自动补全 |
4.9 更多表单元素
| 标签名 | 作用 | 备注 |
|---|
| select | 表单的控件，下拉选项菜单 | 与option配合实用 |
| optgroup | option的分组标签 | 与option配合实用 |
| option | select的子标签，表示一个选项 | |
| textarea | 表示多行纯文本编辑控件 | rows表示行高度， cols表示列宽度 |
| fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
| legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
