HTML从这里开始

  • 一. 什么是HTML?
  • 二. HTML 标签
  • 三. HTML语法结构
  • 四. HTML 语法执行顺序
  • 五. HTML 基本标签
  • 1. 标题标签
  • 2. 段落标签
  • 3. 行内标签
  • 4.换行标签
  • 5. 水平线分割标签
  • 6. 上标，下标
  • 7. 加粗标签
  • 8. 标记标签
  • 9. 引用标签
  • 10.块级标签
  • 11. 有序列表
  • 12. 无序列表
  • 13. 定义列表
  • 14. 文本显示方向
  • 15. 常用特殊符号
  • 16. 注释
  • 六. a 超链接标签
  • 1. 超链接
  • 2. 锚点设置
  • 七. img 图片标签
  • 八. 媒体标签
  • 1. audio 音频标签
  • 2. video 视频标签
  • 3. embed 嵌入标签
  • 九. marquee 飘动标签
  • 十. table 表格标签
  • 十一. form 表单标签
  • 十二. input 输入标签
  • 1. text 文本框
  • 2. password 密码框
  • 3. file 文件上传
  • 4. radio 单选框
  • 5. checkbox 多选框
  • 6. image 图片
  • 7. submit 提交按钮
  • 8. reset 重置按钮
  • 9.普通按钮
  • 十三. textarea 文本域
  • 十四. select 选择列表
  • 1.选择列表
  • 2.选项组
  • 十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换
  • 1. 行内标签
  • 2. 块级标签
  • 3. 行内块标签
  • 4. 行标签与块标签相互转换
  • 十六. HTML三种常见页面布局方式
  • 1. Frameset 布局
  • 2. Table 布局
  • 3. DIV 布局


一. 什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

二. HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

三. HTML语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四. HTML 语法执行顺序

从上至下

五. HTML 基本标签

1. 标题标签

<h>系列

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

页面展示：

前端用的html 后端fabric如何启动前端_html

2. 段落标签

<p></p>

<p>这是段落标签</p>
<p>这是段落标签</p>

页面展示：

前端用的html 后端fabric如何启动前端_html_02

3. 行内标签

<span></span>

<span>这是一行！</span>
<span>这是一行！</span>

页面展示：

前端用的html 后端fabric如何启动前端_html_03

4.换行标签

<br/>

<span>这是一行！</span>
<br/>
<span>这是一行！</span>

页面展示：

前端用的html 后端fabric如何启动前端_html_04

5. 水平线分割标签

<hr/>

<hr/>

页面展示：

前端用的html 后端fabric如何启动前端_html_05

6. 上标，下标

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

M<sup>2</sup>
<br/>
H<sub>2</sub>O

页面展示：

前端用的html 后端fabric如何启动前端_html_06

7. 加粗标签

<strong></strong>

<p>未加粗</p>
<strong>加粗</strong>

页面展示：

前端用的html 后端fabric如何启动前端_超链接_07

8. 标记标签

<em></em>

<em>标记标签</em>

页面展示：

前端用的html 后端fabric如何启动前端_超链接_08

9. 引用标签

<q></q>

<q>引用标签</q>

页面展示：

前端用的html 后端fabric如何启动前端_HTML_09

10.块级标签

<div></div>

<div>块级标签</div>
<div>块级标签</div>

页面展示：

前端用的html 后端fabric如何启动前端_超链接_10

11. 有序列表

<ol>
    <li>标签</li>
    <li>标签</li>
</ol>

页面展示：

前端用的html 后端fabric如何启动前端_表单_11

12. 无序列表

ul无序列表变迁默认类型为type="disc",黑色实心圆点
type="circle"，黑色空心圆点
type="square"，黑丝实心方块

<ul>
    <li>标签</li>
    <li>标签</li>
</ul>

页面展示：

前端用的html 后端fabric如何启动前端_表单_12

13. 定义列表

<dl>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
</dl>

页面展示：

前端用的html 后端fabric如何启动前端_表单_13

14. 文本显示方向

<bdo></bdo>

<bdo dir="ltr">从左开始</bdo>
<br/>
<bdo dir="rtl">从右开始</bdo>

页面展示：

前端用的html 后端fabric如何启动前端_超链接_14

15. 常用特殊符号

&nbsp;空格
&gt;大于号（>)
&lt;小于号（<）
&quot;引号（"）
&copy;版权号（©）

16. 注释

<!---->

<!--内容-->

不会在页面进行显示

六. a 超链接标签

1. 超链接

<a href="" target="">跳转</a>
  • href：链接指向的页面的 URL。
  • target：打开链接的方式。默认为_sel。
    _self：在本页面打开链接。
    _blank：在新的页面打开链接。
  • download：下载超链接目标。

2. 锚点设置

  • 回到页面顶部
<a href="#top">顶部</a>
  • 回到页面指定位置
<p id="aaa">跳到这里</p>
 <a href="#aaa">指定位置</a>

七. img 图片标签

<img src="" alt="">
  • src：必需的属性。它的值是图片的URL地址，也就是图片路径地址。
  • alt：图像的替代文本。如果图片因为某些原因无法显示，浏览器将显示代替文本。
  • title：鼠标放上去显示的文字。
  • width：设置图片的宽度。
  • height：设置图片的高度。
  • align：图片的对其方式。
    top：以顶部对其。
    right：以右面对其。
    buttom：以底部对其。
    left：以左边对其。
    middle：中间显示。

八. 媒体标签

1. audio 音频标签

<audio src=""></audio>
  • src：必需的属性。它的值是音频的URL地址，也就是音频路径地址。
  • autoplay：自动播放
    autoplay=“autoplay”
  • controls：控制台
    controls=“controls”
  • hidden：隐藏控制台
    hidden=“hidden”
  • loop：每当音频结束时重新开始播放
    loop=“loop”

2. video 视频标签

<video src=""></video>
  • src：必需的属性。它的值是视频的URL地址，也就是视频路径地址。
  • autoplay：自动播放
    autoplay=“autoplay”
  • controls：控制台
    controls=“controls”
  • hidden：隐藏控制台
    hidden=“hidden”
  • loop：每当音频结束时重新开始播放
    loop=“loop”
  • height：视频播放器的高度
  • width：视频播放器的宽度

3. embed 嵌入标签

<embed src="" type=""></embed>
  • src：嵌入内容的 URL
  • type：嵌入内容的类型
  • height：嵌入内容的高度
  • width：嵌入内容的宽度

九. marquee 飘动标签

用来插入一段滚动的文字。目前此标签已经过时，不推荐使用。

<marquee>飘动内容</marquee>
  • loop：飘动的次数
  • scrollamount：飘动的速度
  • direction：飘动方向
    left：从右向左
    right：从左向右
  • direction：飘动方向
  • behavior：滚动方式
    scroll：循环滚动，默认。
    slide：滚动一次
    alternate：两端来回滚动

十. table 表格标签

<table>
    <caption>表头</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
</table>
  • caption：表头
  • th：文本自动居中、加粗
  • tr：控制表格的行
  • td：控制行中的单元格（列）
  • border：表格的边框线
  • bgcolor：背景颜色
  • width：表格的宽度
  • height：表格的高度
  • cellpadding：单元格的内容与单元格之间的距离
  • cellspacing：单元格与单元格之间的距离
  • rowspan：设置单元格所占的行数（设置 td）
  • colspan：设置单元格所占的列数（设置 td）
  • align：设置文本的对齐方式（设置 td）
    left：左对齐
    center：居中对齐
    right右对齐

十一. form 表单标签

<form action="http://www.baidu.com">
    <input type="submit" value="提交">
</form>
  • action：表单提交的URL地址
  • method：表单的提交方式
    get：默认的提交方式。提交的数据会显示在地址栏上。
    post：提交的数据不会显示在地址栏上，传送的数据一般不受限制。
  • name：表单的名称

十二. input 输入标签

<input type="">
  • type： input 元素的类型
  • value：input 元素的初始值
  • placeholder：帮助用户填写输入字段的提示
  • maxlength：输入字段中的字符的最大长度
  • size：输入字段的宽度
  • name：input 元素的名称

1. text 文本框

<input type="text">

2. password 密码框

<input type="password">

以小黑点形式显示输入的内容，比较安全。

3. file 文件上传

<input type="file">
  • multiple：多选
    multiple=“multiple”

4. radio 单选框

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

name名称相同情况下，只能单选

5. checkbox 多选框

<input type="checkbox" name="fruits">西瓜
<input type="checkbox" name="fruits">香蕉
<input type="checkbox" name="fruits">葡萄
  • checked：默认选择的
    checked=“checked”
  • disabled：不可选的，禁止选择
    disabled=“disabled”

6. image 图片

<input type="image" src="" alt="错误" />
  • src：图片的URL地址
  • alt：图片无法显示情况，提示的文字

7. submit 提交按钮

<input type="submit" value="提交">

提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

8. reset 重置按钮

<input type="reset" />

重置按钮会清除表单中的所有数据。

9.普通按钮

<input type="button"  onclick="to()" />

定义可点击的按钮，但没有任何行为。可以结合onclick事件使用。

十三. textarea 文本域

<textarea rows="3" cols="20">
	这是一个文本域。。
</textarea>
  • rows：文本区内的可见行数
  • cols：文本区内的可见宽度
  • maxlength：文本区域的最大字符数
  • placeholder：文本区域预期值的文字提示
  • readonly：文本区为只读

十四. select 选择列表

1.选择列表

select>
    <option>葡萄</option>
    <option>香蕉</option>
    <option>西瓜</option>
</select>
  • size：下拉列表中可见选项的数目
  • name：下拉列表的名称
  • disabled：禁止该下拉列表项（设置option）
  • selected：选项（在首次显示在列表中时）表现为选中状态

2.选项组

<select>
    <optgroup label="一组"></optgroup>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <optgroup label="二组"></optgroup>
    <option>D</option>
    <option>E</option>
    <option>F</option>
</select>
  • label：定义当使用 时所使用的标注，选项组的名称。

十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换

1. 行内标签

可以多个标签存在一行，不能直接设置行内标签的宽、高，完全靠内容撑开宽和高。
常用的行内标签：
<span>、 <a>、 <big>、 <em>、 <i>、 <lable>、 <input>、 <select>、 <small> 、<strong>、 <sub> 、<sup>、 <u>、 <textarea>、 <img>

2. 块级标签

独占一行，可以设置宽、高。
如果不给宽度，块级标签的宽度将默认为浏览器的宽度，即100%。
常用的块级标签
<div>、 h系列、 <li>、 <p>、 <form>、 <ul>、 <ol>、 <table>、 <hr>、 <address>、 <dl>、 <dt>、 <dd>

3. 行内块标签

结合行内和块级标签的优点，不仅可以对宽、高属性生效，还可以多个标签存在一行显示。

常用的行内块标签：
<img>

4. 行标签与块标签相互转换

  • 行标签转块标签：
display:block;
  • 块标签转行标签：
display:inline;
  • 转换为行内块标签：
display:inline-block;

十六. HTML三种常见页面布局方式

1. Frameset 布局

一些常见的后台管理系统大部分是用 Frameset 来布局的，所以固定了结构类的布局用 Frameset 来实现比较好。

2. Table 布局

是一种旧的布局方式，在现在的项目中还是很常见，Table 实际上它更适合做数据的展示，而非布局。但在 DIV + CSS 布局还没有流行起来之前，大量的网站是 Table 来布局。包括现在依然有人在使用。
缺点：

  1. Table 布局的话，只有把 Table 内的所有内容加载完成了，才会加载样式，所以加载速度要慢一些。
  2. Table 布局属于表格形式，不利于SEO优化。
  3. Table 对于页面布局来说，从语法上看是不正确的。

3. DIV 布局

现在最流行的一种布局方式，它相比比 Table 更灵活，定位比 Table 更好用，简单，修改起来也方便。