HTML

HTML基础教程

最新推荐文章于 2025-05-30 09:55:02 发布

起航zhang

最新推荐文章于 2025-05-30 09:55:02 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41009234/article/details/84891423

本文详细介绍了HTML的基本结构，包括文档类型声明、HTML根标记、文本样式、标题元素、段落元素等，同时讲解了如何使用图像、超链接及表格，以及列表的分类和语法。

HTML

基本结构

<!-- 1、文档类型声明 -->
<!DOCTYPE html>
<!-- 2、HTML根标记 -->
<html>
<!-- 包含两对子元素-->
	<head>
		<title>网页标题</title>
		<meta charset="utf-8"/>
	</head>
	<body text="red" bgcolor="yellow">
		<p>我的第一个html页面</p>
	</body>
</html>

文本

特殊文本的实现

文本样式相关标记
1. <b></b>: 加粗
2. <strong></strong>：强调加粗
3. <i></i>: 斜体
4. <em></em>：强调倾斜
5. <u></u>: 下划线
6. <ins></ins>：强调下划线
7. <s></s>: 删除线
8. <del></del>：强调删除线
9. <sup></sup>: 上标
10. <sub></sub>: 下标
标题元素
- 语法：
  1. <h1>一级标题</h1>
  2. <h2>二级标题</h2>
  3. <h3>三级标题</h3>
  4. <h4>四级标题</h4>
  5. <h5>五级标题</h5>
  6. <h6>六级标题</h6>
```
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
- 属性： align
  - 设置文本水平对齐方式
  - 取值：left / center / right
段落元素
- 语法：
- 属性：align : left / center / right

	<!-- 段落标签 -->
	<p>the first paragraph</p>
	<p align="right">the second paragraph</p>

换行元素
- <br>
分割线元素
- 作用：在页面中表现为一条直线
- 语法：<hr>
- 属性:
  1. size
    - 尺寸，px为单位
  2. width
    - 宽度，px为单位
  3. align
    - 水平对齐方式
  4. color
    - 颜色
预格式化
- 作用：保留源文档中的回车和空格的作用
- <pre></pre>
分区元素
- 块分区元素
  - 语法：<div></div>
  - 作用：布局
- 行内分区元素
  - 语法：<span></span>
  - 作用：设置同一行文字的不同样式
行内元素与块级元素
安装元素的表现形式来分为行内元素和块级元素
- 行内元素
  - 在一行内允许显示多个元素，称为“行内元素”
  - span ，i，em，strong，b，u，sub，sup
  - 作用：包裹文本，处理文本的表现形式
- 块级元素
  - 每个元素独占一行显示的。称为“块级元素”
  - div，p，h1~h6
  - 作用：布局
注意：
- p标签不能嵌套其他块元素
- 行内元素中最好不要嵌套块级元素
图形和连接
- URL
  - 目录结构：
  - 目录：保存文件的文件夹名称
  - 什么是URL
    - URL（Uniform Resource Location）,统一资源定位符
    - 识别资源存放的位置
  - URL在WEB中的表现形式：
    - 绝对路径
      - 特点：从文件的最高级目录处开始查找资源文件所经过的路径，就是绝对路径
      - 完整的绝对路径分四部分：
      - 使用场合，当要访问互联网上的资源时使用
        协议名
        域名（主机名，IP地址）
        目录路径
        文件名
    - 相对路径
      - 场合：使用本机文件时
      - 从当前文件位置起查找指定文件的位置
    - 根相对路径
      - 路径形式是以 / 作为开始的
      - / ：表示的是服务器的根路径
- 图像
  - 图像格式
    1. *.gph
    2. *.gif(动图)
    3. *.png
  - 图像的语法
    - 标记：<img>
    - 属性：
      1. src：指定要显示图像的URL
      2. width：图像的宽度
      3. height：图像的高度
      4. title：鼠标悬停时要显示的文本（提示）
- 超链接
  - 语法
    - 标记：<a>内容</a>
    - 属性：
      1. href:要连接的HTML页面的URL
      2. _target:指定新连接的打开形式
        取值：
        _blank: 在新标签页面中打开网页
        _self: 在自身标签页面中打开新网页（默认值）
- 连接的四种表现形式
  1. 点击操作时，完成资源下载操作（连接的资源为zip/rar时自动下载）
  2. 电子邮件连接
    - <a href="mailto:1354246500@qq.com">联系我们</a>
    - 必须在计算机中安装并配置好至少一个邮件客户端的信息
  3. 返回页面顶部的空连接
    - <a href="#">返回顶部</a>
  4. 执行JavaScript代码片段
    - <a href="javascript:JS脚本代码">执行JS</a>
  5. 锚点
    - 作用:用于网页中的某个位置处理记号，允许从其他位置处跳转到记号位置处
    - 使用方式
      - 定义锚点
        使用a标记的name属性定义锚点
        任何标记的id属性定义锚点
      - 链接到锚点
        <a href="#锚点名称">链接到锚点</a>
        <a href="页面URL#锚点名称">链接到锚点</a>
表格
1. 表格的作用
  - 按照一定的格式来显示数据
  - 表格由单元格（行，列）组成
2. 表格的语法
  - <table></table>：表示一个表格
  - <tr></tr>：表示表格中的一行
  - <td></td>：表示表格中的一列
  - <th></th>：行/列标题（加粗，水平居中）
  - <caption></caption>：表格的标题，该元素必须添加在<table>之下，所以tr之上
3. 表格的常用属性
  - table
    - width
    - height
    - align
    - border：边框宽度，取值以px为单位的数值
    - bgcolor
    - cellspacing：单元格外边距（单元格与单元格或单元格与表格之间的距离）
    - cellpadding：单元格内边距（单元格与内容的距离）
  - tr
    - align：控制当前内容的水平对齐方式
    - valign：控制当前内容的垂直对齐方式（top/ middle/ bottom）
    - bgcolor
  - td / th
    - align
    - valign
    - width
    - height
    - colspan：跨行
    - rowspan：跨列
4. 表格的复杂应用
  - 行分组：允许将若干行划分到一个组中，以便实现统一管理
    1. 表头行分组
      - 允许将第一行的内容单独分到表头行分组中
      - <thead></thead>
    2. 表尾行分组
      - 允许将最后一行的内容单独分到表尾行分组中
      - <tfoot></tfoot>
    3. 表主体行分组
      - <tbody></tbody>
  - 不规则表格创建
    - 通过 td 的跨行和跨列来实现不规则的表格
    1. 跨列
      - <td colspan="">
      - 从指定单元格位置处开始，横向向右，合并单元格（包含自己）被合并的单元，要删除
      - <td rowspan="">
      - 从指定单元格位置处开始，纵向向下，合并单元格（包含自己）被合并的单元，要删除
  - 表格的嵌套
    - 被嵌套的所以内容，只能放在td中
列表
- 列表的分类和语法
  1. 列表的组成
    - 由列表类型和列表项组成
  2. 分类 & 语法
    - 有序列表
      - <ol></ol>–>Order List
      - 允许包含若干列表项：
      - <li></li>–>List Item
    - 无序列表
      - <ul></ul>–>Unorder List
      - 允许包含若干列表项：
      - <li></li>–>List Item