HTML基础

1.1 最简单的基本结构

1. 标签下有：、两个部分
2. 让页面显示中文不会出错
3. 只有内容才会在网页上显示
   代码：

我的第一个段落。

2 HTML基础

2.1 HTML标题

HTML标题通过

-

标签定义的

代码：

一级标题

二级标题

2.2 HTML段落

HTML段落通过

标签定义

代码:

第一个段落

第二个段落

2.3 HTML链接

HTML链接通过标签定义的

代码:

链接百度
2.4 HTML图像

HTML图像通过标签定义

代码:

3 HTML元素

3.1 HTML元素

HTML元素比较多，有开始标签和闭合标签。比如，段落标签中

是开始标签，

为结束标签

3.2 HTML元素语法

1. HTML元素以开始标签起始
2. HTML元素以结束标签终止
3. 元素的内容是开始标签和结束标签之间的内容
4. 某些HTML元素具有空内容，比如换行标签:
   
5. 大多数HTML元素可拥有属性
   3.3 HTML提示：使用小写标签

HTML标签不区分大小写，但是推荐使用小写字母。

4 HTML属性

属性是HTML元素的附加信息

4.1 HTML属性

1. HTML元素可以设置属性
2. 属性可以在元素中添加附加信息
3. 属性一般描述在开始标签中
   代码：

百度链接
4.2 HTML提示：使用小写属性

HTML属性也是不区分大小写，但是推荐使用小写属性

4.3 HTML属性手册

大多数HTML元素都适用的属性

属性 描述
class 为html元素定义一个或多个类名(类名将从文件中引入)
id 定义元素的唯一id
style 规定元素的行内样式
title 描述元素的额外信息
5 HTML标题

1. HTML标题是通过元素

   -

   定义，大小一次递减

2. 1到6号标题与1到6号字体逆序对应
   代码：

1号标题

6号字体文本 5.1 HTML水平线

---

标签在HTML页面中创建水平线

代码:

3级标题

hr 标签定义水平线:

---

5.2 HTML注释 用于代码注释

6 HTML段落

1. 段落通过

   标签定义的。且浏览器会在

   后加上折行+空行

2. HTML代码中添加额外的空行和换行都是无用的。只能通过HTML标签才能进行排版
   6.1 HTML折行

折行通过
标签定义的。

代码:

第一个段落

第二个段落

第三个段落

---

第一个段落
第二个段落
第三个段落

7 HTML文本格式化

标签 描述
定义粗体文本
定义着重文字
定义斜体
定义小号字
定义加重语气
_{定义下标字
^{定义上标字}}
定义下划线
定义删除字
代码：

粗体
着重文字
斜体
小号字
加重语气
_下标字
^上标字
下划线
删除字
8 HTML链接

HTML使用标签来设置超文本链接。超链接可以是文字或图片。

8.1 HTML链接-target属性

使用target可以定义被链接的文档在新窗口中打开

代码:

新窗口打开gitHub主页 8.2 HTML链接-id属性

id属性用于创建一个HTML文档书签标记。可以利用id属性实现页面内的跳转

代码:

跳转到下一页地方
下一页 8.3 HTML链接注意事项-有用提示

请始终将正斜杠添加到子文件夹上，否则会产生两次HTTP请求。如：href=“http://www.runoob.com/html/”

8.4 HTML图片链接

链接标签也可以用图片来作为内容

代码：

图片链接跳转 9 HTML头部

1. 元素包含了所有头部标签元素。在元素中，可以插入脚本(scripts)、样本(CSS)、及各种meta信息。
2. 头部区域的元素标签：

标签描述基本的链接地址／链接目标。如果链接前面没有http，该标签会补充到文档所有链接地址上。

代码：

图片链接跳转 9.2 HTML 元素 标签通常被用于链接到样式表。引入样式表，

代码:

9.3 HTML 9.4 HTML

10.3 外部样式表

当样式需要被应用到多个页面的时候，外部样式表是理想的选择。对样式进行统一管理.

代码:

11 HTML图像

HTML中使用定义图像

1. 是空标签，意思是，它只包含属性，并且没有闭合标签

2. src是源属性，用于指定该图像所在的位置

4. 标签定义图像地图，标记图像映射的具体区域
   11.1 HTML图像-属性

5. alt属性用来为图片定义一串预备的可替换的文本。当浏览器无法加载图像时，显示替换文本

6. height(高度)和width(宽度)属性用来设置图像的宽度和高度

7. border(边框)用来为图像加上边框,如:border=“10”
   代码：

12 HTML表格

HTML中使用

标签定义表格，数据单元可以包含文本、图片、表单等等。

12.1 HTML表格属性介绍

1. 定义表格标题
2. (table row)定义表的一行
3. (table head)用来定义表头
4. (table data)定义表的数据部分
5. border属性定义表格边框粗细
   代码:

傻逼名单

号	姓名	年纪
1	ppp	26
2	lwl	24

12.2 表格跨行或跨列的表格单元格

1. colspan属性用于单元格跨行单元格
2. rowspan属性用于单元格跨列单元格
   代码:

<table border="1">
    <caption>男女朋友关系</caption>
    <tr>
        <th>号</th>
        <th colspan="2">姓名</th>
    </tr>
    <tr>
        <td>1</td>
        <td>lwl</td>
        <td>ppp</td>
    </tr>
    <tr>
        <td>2</td>
        <td>sunzibo</td>
        <td>wcf</td>
    </tr>
</table>

<!-- 跨列单元格 -->
<table border="1">
    <caption>男女朋友关系</caption>
    <tr>
        <th>号</th>
        <td>1     </td>
    </tr>
    <tr>
        <th rowspan="2">姓名</th>
        <td>sunzibo</td>
        <td>wcf</td>
    </tr>
</table>

13 HTML列表

1. 标签
   • (unorder list>用于无序标签
2. 标签
   1. (order list>用于有序标签
3. 标签
4. 列表
   代码:

无序列表

• Coffee
• Tea
• Milk

有序列表

1. Coffee
2. Tea
3. Milk

13.1 HTML无序列表

使用style="list-style-type:disc"属性来定义不同的无序列表，包括：圆点、圆圈和正方形

代码:

• Coffee
• Tea
• Milk

13.2 HTML有序列表

代码:

1. Coffee
2. Tea
3. Milk

13.3 HTML自定义列表

自定义列表以

为标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以

开始

代码:

Coffee

black and drink

Milk

white cold drink

14 HTML区块

HTML可以通过

和 将元素组合起来

14.1 HTML

元素

1. 元素是一个块级元素，没有特定的含义，通常被用做文档布局
2. 元素浏览器会在前后显示折行

14.2 HTML元素

是内联元素，被用做文本容器，没有特定的含义

15 HTML布局

虽然页面布局可以使用

和，但是推荐使用

进行页面布局。

代码:

网页标题

菜单
HTML
CSS
JavaScript

内容在这里

版权@thinking_fioa

16 HTML表单和输入

16.1 HTML表单

1. 表单是一个包含表单元素的区域
2. 使用标签来设置
3. 表单元素是允许用于交互界面，比如输入内容(文本域、下拉列表和单选框等)
4. 表单本身是看不见的，只能看到输入框或选择框
5. 属性name表示的是提交后对应的key
6. 属性value作为提交后对应的value
   代码:

Username:
Passowrd:

<p><b>注意: </b>密码字段中的字符是隐藏的</p>

16.2 HTML表单-输入元素

1. 多数情况下都是使用表单标签输入标签
2. 对于输入标签，使用类型属性type来定义不同的输入
3. 属性name表示的是提交后对应的key
4. 属性value作为提交后对应的value
5. 单选按钮使用属性:checked="checked"来默认选择
   类型属性(type) 使用样例 说明
   type=“text” 输入框
   type=“password” 输入不显示框
   type=“radio” 单选框
   type=“checkbox” 复选框
   type=“submit” 输入框
   代码:

单选按钮

Male
Female

<p>复选框</p>
<form>
    <input type="checkbox" name="vehicle" value="Bike"><span>Bike</span><br/>
    <input type="checkbox" name="vehicle" value="Car"><span>Car</span><br/>
</form>

<!-- 提交按钮 -->
<form name="input" action="html_form_action.php" method="get">
    <span>Username:</span><input type="text" name="user"><br/>
    <span>Password:</span><input type="password" name="pwd"><br/>
    <input type="submit" value="Submit">
</form>

16.3 HTML表单-预选下拉列表

1. 使用标签来定义下拉选项
2. 属性selected来显示预选
   代码:

下拉选择框

Volvo Fiat Benz 16.4 HTML创建按钮

属性type的值为button

代码:

创建按钮

16.5 带边框的表单

1. 表单带上边框
2. 单选按钮使用属性:checked="checked"来默认选择
   代码:

有边框的表单

Personal information: UserName:
Address:
Sex:
Male
Female
16.6 HTML标签

HTML使用标签为input元素定义标注

代码

Male
Female

17 HTML 框架

1. 通过使用框架，可以在同一个浏览器窗口中显示不止一个页面
2. 使用iframe标签可以实现内嵌一个页面
   17.1 iframe标签语法

iframe语法: src="URL"><iframe>&#35813;URL&#25351;&#21521;&#19981;&#21516;&#30340;&#32593;&#39029;

17.2 iframe属性

1. 属性height和属性width用来定义iframe标签的高度和宽度
2. frameborder属性用来定义是否显示边框
   代码:

<iframe src="https://www.baidu.com/" width="500px" height="500px"></iframe> 18 HTML 颜色

请参考下列url地址:

1. 颜色:
2. 颜色名:
3. 颜色值:
   19 HTML脚本

HTML使用标签

20 HTML字符实体

HTML中有预留字，所以如果页面中显示的话，需要使用字符实体，具体可见字符实体

20.1 不间断空格(No-breaking Space)

HTML中常用的字符实体是不间断空格: &nbsp。HTML会主动截短HTML页面中的空格，为了保证空格个数，使用不间断空格: &nbsp。

21 HTML视屏

如果想播放视频，请参考下面代码，最大兼容多种浏览器。

代码:

--------------------- 作者：thinking_fioa 来源：CSDN 原文：https://blog.csdn.net/thinking_fioa/article/details/78972847?utm_source=copy 版权声明：本文为博主原创文章，转载请附上博文链接！