导图社区第四节-HTML

第四节-HTML

介绍了HTML简要知识总结包括一些基本语法和常见标签的引用，包含HTML文件:网页文件、HTML语言的基本语法、行内元素和块级元素，帮助初学者快速入门HTML的世界。

编辑于2024-11-09 16:04:21

html

果粒橙

他的近期作品查看更多>>

第四节-HTML
介绍了HTML简要知识总结包括一些基本语法和常见标签的引用，包含HTML文件:网页文件、HTML语言的基本语法、行内元素和块级元素，帮助初学者快速入门HTML的世界。
第二节-网页设计
简单概括了一下网页中的各部分版式与布局，描述了网页设计中版式与布局的重要性，以及它们在塑造用户体验与信息传递方面的作用。
第三节-网站UI设计
web前端技术UI设计概述，包括网站色彩，网站颜色的定义，网站中的文字选择，网站中的页面图片，设计要点的内容。帮助大家快速掌握网站UI设计的知识要点！

第四节-HTML

社区模板帮助中心，点此进入>>

果粒橙

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 33.9k
- 909
- 2.4k
- 389
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.6k
- 3
- 184
- 10
Kacyun
域控上线
- 1.6k
- 162
- 11
- 4
jackrao
python思维导图
- 5.4k
- 525
- 242
- 7
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
A张舫
CSS
- 3.3k
- 262
- 188
- 33
journey
计算机操作系统思维导图
- 4.2k
- 336
- 204
- 18
journey
计算机组成原理
- 1.5k
- 98
- 70
- 8
journey
IMX6UL(A7)
- 512
- 40
- 5
- 0
Handler XU
考试学情分析系统
- 682
- 50
- 10
- 1
蒋龙

HTML

Web标准（W3C起草和发布）

三大组成

结构：网页是什么？（文字、图片、视频……）结构化标准语言HTML或XHTML

表现：网页看起来是什么样子的？表现标准语言主要是CSS

行为：网页能做什么？（交互式行为）行为标准语言JavaScript

网站的首页面命名

index.html或default.html

HTML文件：网页文件

名词解释：超文本标记语言（Hyper Text Markup Language）

基本结构标签：一个网页文件的框架标签

<html>……<\html>：网页文件的根元素、根标签

<head>……<\head>：网页文件的头部标签，包含的内容不会显示在浏览器文档窗口中，通常用来设置外部CSS、标题、meta元素等

<body>……<\body>：网页文档的主体标签，包含文档的所有内容，同时包含内容会显示在浏览器窗口中

HTML语言的基本语法

1、HTML标签是由尖括号包围的关键词

例如：<html>、<body>……

2、HTML标签通常成对出现，称为双标签，有些特殊的标签单独出现称为单标签；对于单独不成对的标签，为了语法严谨，通常在标签的最后加一个“/”进行封闭

例如：<br/>

3、所有标签和所属的名称必须使用小写字母表示，不要大小写夹杂书写

4、对于双标签来说，有包含关系（父子）、和并列关系（兄弟）

<ul type=" "> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ul> <ul> 首标签 <\ul> 尾标签

行内元素和块级元素

块级元素：独立站一行，可以设置宽（width）和高（height）属性，块级元素中可以包含其他块级元素或行内元素

例如：<h1>-<6>;<div>……

行内元素：多个行内元素占同一行，不可以设置宽和高属性，但<img><input>等个别标签除外，行内元素只能容纳文本或者其他行内元素，通常被包含在块级元素中使用

例如：<b>i><em><span><strong>……

通过CSS中的display属性可以实现行内元素和块级元素的互转 display：inline 定义为行内元素 display：block 定义为块级元素

常用的HTML标签

1、HTML的注释标签形式：

作用：提高程序可读性，便用于开发人员阅读和理解代码的含义，注释标签中的内容是给开发人员看的，不是给浏览者看的，该代码不执行也不显示在页面中

快速创建注释的快捷键：ctrl+/

2、插入水平线 <hr/>

3、标题标签 <h1>……<h6>（标签本身具有默认样式，文字会变粗变大，一个标题独立占一行）

4、段落与换行标签

<br/>换行标签

<p>……</p>段落标签，默认的两个段落之间存在间距

5、文本格式化标签

加粗<strong>……</strong>或<b>……</b>

倾斜<em>……</em>或<i>……</i>

下划线<ins>……</ins>或<u>……</u>

删除线<del>……</del>或<s>……</s>

了解就可以

6、无语义的标签：<div>……</div>；<span>……</span>…… 特点：默认没有任何语义和样式，只是用来创建元素，一个div元素独立占一行，多个span可以同时占一行

7、图片标签<img>

alt属性：替换文字

src属性：图片文字的URL路径地址（source）

关于路径的分析 1、相对路径 ./ 表示同级目录 ../ 表示上一级目录 ../../ 表示上一级的上一级目录 / 表示相对于根目录的路径 2、绝对路径：从根目录起始的路径

8、列表标签（块级元素）

无序列表 <ul type=" "> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ul>

快捷方式：

type属性类型

实心圆点：disc（默认样式）

空心圆：circle

实心方块：square

不显示：none（无）

有序列表 <ol> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ol>

快捷方式：

普通列表 <dl> <dt>列表标题</dt> <dd>列表项目1</dd> <dd>列表项目2</dd> </dl>

快捷方式：

9、超链接标签<a>……</a>（行内元素）

站内链接（同一站点内，不同文件之间的链接）使用相对路径

href属性：设置超链接的目标文件地址（注意路径），href属性值为#时，表示空链接（只有连接状态，没有链接目标）

站外链接（使用绝对路径）

http:// 不能省略

target属性：设置超链接的目标窗口

-self：在当前窗口中打开目标页面（默认页面）

-blank：在新窗口中打开目标页面

邮件链接 <a href="mailto:123@163.com">举报邮箱：123@163.com</a>

锚点链接

创建锚点  <a name="mao"></a>

设置锚点链接，形式为：#锚点名称 <a href="#mao"><img src="./images/top.PNG" alt=""></a>

下载链接 <a href="./upload/aaa.rar">下载文件</a>

10、表格标签（通常用于设计表格或用于布局）

定义表格的标签：<table>……</table>

定义表格的行：<tr>……</tr>

定义表格行中的单元格：<td>……</td>

定义表头行：<thead>……</thead>

定义表头行中的单元格：<th>……</th>

表格的边框： border

表哥的外间距：cellspacing（单元格和单元格之间的距离）

表格的内部白： cellpadding（表格内容和边框之间的距离）

跨列合并：colspan（column一列）

跨行合并：rowspan（row一行）

HTML转义字符

一个空格符： 

版权标识符：©

注册商标：®

大于号：>

小于号：<

人民币：¥

美元符：&dollar;

与（&）：&