HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。HTML是构建Web页面的基础，它使用一系列称为标签的关键字来定义页面的结构。
一、HTML的基本概念
- 定义：HTML通过标签来描述网页中的各个元素，如标题、段落、图片、链接等。这些标签告诉浏览器如何显示内容，包括文字、图片、视频等。
- 作用：定义网页的结构和内容，使网页内容能够按照预定的格式和布局显示给用户。
1 HTML的基本标签
1.1 标题标签
标题标签（Heading Tags）在HTML中用于定义网页内容的标题或子标题。它们通过<h1>到<h6>这六个标签来表示，其中<h1>表示最高级别的标题，而<h6>表示最低级别的标题。
特点：
1.重要性递减：从<h1>到<h6>，标题的重要性逐渐递减。通常，一个网页中只会有一个<h1>标签，用于表示页面的主标题或最重要的内容。而<h2>到<h6>则可以用于表示各个部分的子标题或更细化的内容结构
2.样式默认加粗：在大多数浏览器中，标题标签默认会以加粗的形式显示，并且<h1>到<h6>的字体大小会逐渐减小。但是，这些样式可以通过CSS进行自定义。
1.2 文本标签
<br> 标签在HTML中是一个空标签（意味着它不需要结束标签），用于在文本中插入一个简单的换行。它不会创建段落间的空间，而是仅仅让文本开始新的一行，就像在文本编辑器中按下回车键一样。
<b> 标签是一个简单的格式化标签，用于将文本以粗体显示。它主要关注于文本的样式，而不是文本的重要性或强调。
<i> 标签在HTML中是一个内联元素（inline element），通常用于表示一段文本应该以不同的方式显示，比如斜体文本。
在HTML5标准中，<u>标签定义为“表示非文本样式化的下划线，主要用于表示专有名词或拼写错误的文本”。
<s> 标签在HTML中用于定义加删除线的文本。
1.3 水平线标签
<hr> 标签在HTML中是一个用于在页面中创建一条水平线的元素。这个标签没有结束标签，是一个空元素，其作用是在视觉上将文档分隔成各个部分，常用于分隔内容区块，提高页面的可读性和结构清晰度。
1.4 段位标签
<p> 标签是HTML（HyperText Markup Language，超文本标记语言）中的一个基本元素，用于表示文档中的一个段落。它是“paragraph”的缩写，意味着文本的一个独立区块，通常包含多个句子，并且与其他段落之间有明显的分隔。
以下是在段落里一些特殊符号的用法：
| | 一个英文空格 |
|   | 半个字空格 |
|   | 一个字空格 |
| > | 大于号 > |
| < | 小于号< |
| © | 版权 |
| ® | 注册 |
注意事项：因为在html中被<>括起来的内容是被识别为标签的，无法直接读取，只能用>和<来使用括号。
1.5图像标签
<img> 标签是一个空元素（即没有结束标签），用于在网页中嵌入图像。它允许开发者将外部图像资源引入到HTML文档中，从而丰富页面的视觉内容和用户体验。
主要属性：
- src（source）：
- 作用：指定图像的URL地址，即图像文件的位置。
- 使用方法：将图像文件的路径或URL放置在
src属性中。路径可以是相对路径（相对于当前HTML文件的路径）或绝对路径（完整的URL地址）。 - 示例：
<img src="images/logo.png" alt="公司徽标">
- alt（alternative text）：
- 作用：提供图像的替代文本，当图像无法显示时（如网络问题、文件不存在等），将显示该文本。同时，alt属性对于无障碍设计和SEO（搜索引擎优化）也非常重要。
- 使用方法：将要显示的文本放置在
alt属性中。 - 示例：
<img src="images/logo.png" alt="公司徽标">
- width 和 height：
- 作用：分别用于指定图像的宽度和高度，有助于控制图像在页面中的布局。
- 使用方法：将要设置的宽度和高度值（可以是像素值或百分比值）放置在
width和height属性中。 - 注意：虽然这两个属性可以控制图像的大小，但现代网页设计中更推荐使用CSS来控制图像的大小，因为CSS提供了更大的灵活性和控制。
- 示例：
<img src="images/logo.png" alt="公司徽标" width="100" height="50">
- loading：
- 作用：控制图像的加载方式。
- 可选值：
lazy（懒加载，即图像在页面滚动到其位置时才加载）或eager（立即加载，默认值）。 - 示例：
<img src="images/logo.png" alt="公司徽标" loading="lazy">
- title：
- 作用：为图像提供额外的说明文本，当用户将鼠标悬停在图像上时显示。
- 使用方法：将要显示的文本放置在
title属性中。 - 示例：
<img src="images/logo.png" alt="公司徽标" title="点击访问公司官网">
- class、id、style：
- 作用：分别用于设置图像的CSS类、ID和内联样式，以便进行更精细的样式控制和布局。
1.6列表标签
（1）无序列表
无序列表使用<ul>标签定义，列表项使用<li>（List Item）标签定义。无序列表中的项目通常以圆点（bullet points）作为标记。
（2）有序列表
有序列表使用<ol>标签定义，列表项同样使用<li>标签定义。有序列表中的项目通常按数字顺序排列，如1、2、3等。
（3）定义列表
定义列表使用<dl>标签定义，它通常用于术语及其定义的列表，或者键值对的列表。定义列表中的术语使用<dt>（Definition Term）标签定义，而术语的定义或描述则使用<dd>（Definition Description）标签定义。
1.7超链接
在HTML中，<a> 标签用于定义超链接，即从一个页面链接到另一个页面的元素。<a> 标签最重要的属性是 href，它指定链接的目标地址。使用 <a> 标签，用户可以点击链接来访问不同的页面或页面上的某个部分，甚至打开电子邮件地址、电话号码、文件等。
锚点链接：
<a> 标签还可以用于创建页面内的锚点链接，允许用户点击链接后跳转到同一页面的指定部分。这通过为目标元素设置 id 属性，并在 <a> 标签的 href 属性中使用 # 加上该 id 值来实现。
<!-- 锚点 -->
<h2 id="section1">第一节</h2>
<!-- 链接到锚点 -->
<a href="#section1">跳转到第一节</a>1.8表格标签
<table> 标签在HTML中用于定义表格。表格是网页上展示数据的一种非常有效的方式，它可以包含行（<tr>）、列（<td> 或 <th>）、表头（<thead>）、表体（<tbody>）和表尾（<tfoot>）等部分。<table> 标签及其相关标签一起，为网页提供了强大的数据展示能力。
1.9表单标签
<form> 标签在HTML中用于创建表单，允许用户输入数据并提交至服务器端处理。它是构建交互式网页的重要元素之一。
1.10输入框input
<input> 标签是 HTML 中用于创建输入字段的标准元素，允许用户输入数据。它是 <form> 表单中不可或缺的一部分，通过不同的 type 属性值，<input> 标签可以变成不同类型的输入框，比如文本框、密码框、单选按钮、复选框、提交按钮等。
1.11下拉列表select
<select> 标签在HTML中用于创建下拉选择菜单，允许用户从预定义的一组选项中选择一个或多个选项。它是表单元素之一，常用于收集用户输入的数据。
1.12文本域textarea
<textarea> 标签在 HTML 中用于创建一个多行的文本输入框，允许用户输入任意长度的文本。与 <input type="text"> 相比，<textarea> 提供了更大的输入空间和更灵活的文本输入能力，特别适合需要用户输入大量文本的场景，如评论框、文章编辑器等。
2 CSS
CSS（层叠样式表，Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 能够对网页中元素的位置进行排版，包括字体、颜色、大小、边距、高度、宽度、背景图片、网页布局等几乎所有的样式。
2.1CSS基本选择器
| 全局选择器 * | *{color: red;} 选择所有标签，文字颜色为红色 |
| 标签选择器 标签名 | p{color: red;} 选择所有p标签，文字颜色为红色 |
| class类选择器 .类名 | .name_li{color: red;} 选择所有class名为name_li的标签，文字颜色为红色 |
| id选择器 #id名 | #tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色 |
| 伪类选择器 :状态名 | :link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态 |
| 包含选择器 以空格隔开 | ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{} |
| 群组选择器 以,隔开 | h1,h2,h3{} |
2.2文字样式
常用的文字样式 ：
1. 字体族（font-family）
- 作用：指定文本的字体系列。
- 用法：
font-family: "字体名称", 备选字体, sans-serif;（注意，如果字体名称包含空格或特殊字符，应使用引号括起来）。 - 示例：
font-family: "微软雅黑", Arial, sans-serif;
2. 字体大小（font-size）
- 作用：设置文本的字体大小。
- 单位：常用的单位有px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素（html）的字体大小）等。
- 用法：
font-size: 16px;或font-size: 1em;
3. 字体加粗（font-weight）
- 作用：设置文本的加粗程度。
- 用法：
font-weight: normal;（正常）、bold;（加粗）、bolder;（更粗）、lighter;（更细）或使用数字值（100-900）表示不同的粗细程度。
4. 字体风格（font-style）
- 作用：设置文本的字体风格，如斜体。
- 用法：
font-style: normal;（正常）、italic;（斜体）、oblique;（倾斜）。
5. 字体颜色（color）
- 作用：设置文本的颜色。
- 用法：
- 使用颜色名称：
color: red; - 使用十六进制值：
color: #FF0000;或简写为#F00; - 使用RGB值：
color: rgb(255, 0, 0); - 使用RGBA值（增加透明度）：
color: rgba(255, 0, 0, 0.5);
- 使用颜色名称：
6. 文本对齐（text-align）
- 作用：设置文本的水平对齐方式。
- 用法：
text-align: left;（左对齐）、center;（居中对齐）、right;（右对齐）、justify;（两端对齐）。
7. 文本缩进（text-indent）
- 作用：设置段落首行的缩进。
- 用法：
text-indent: 2em;（通常使用em单位，相对于当前字体大小）或text-indent: 30px;（使用像素值）。
8. 行高（line-height）
- 作用：设置文本行之间的基线距离，影响行间距。
- 用法：
line-height: 1.5;（相对于当前字体大小的倍数）或line-height: 30px;（使用像素值）。
9. 文本装饰（text-decoration）
- 作用：设置文本的装饰线，如下划线、删除线等。
- 用法：
text-decoration: none;（无装饰线）、underline;（下划线）、line-through;（删除线）、overline;（上划线）。
10. 字体复合属性（font）
- 作用：在一个声明中设置多个字体相关的属性。
- 用法：
font: italic bold 16px/1.5 "微软雅黑", sans-serif;（注意，必须按照特定顺序编写属性，且字号和字体族不可省略）。
2.3列表样式
列表样式类型（list-style-type）：
| disc | 实心圆点（默认值） |
| circle | 空心圆点 |
| square | 实心方块 |
| decimal | 数字（有序列表专用） |
| lower-roman | 小写罗马数字（有序列表专用） |
| upper-roman | 大写罗马数字（有序列表专用） |
| lower-alpha | 小写英文字母（有序列表专用） |
| upper-alpha | 大写英文字母（有序列表专用） |
| none | 无标记 |
列表样式位置（list-style-position）：
| outside | 标记位于列表项内容的外侧（默认值） |
| inside | 标记位于列表项内容的内侧 |
列表样式图像（list-style-image）： 这个属性允许你使用自定义图像作为列表项的标记。它接受图像的URL作为值。
列表样式简写（list-style），list-style是一个简写属性，允许你在一个声明中同时设置list-style-type、list-style-position和list-style-image。
2.4背景样式
（1）背景颜色（background-color）：设置元素的背景颜色。默认值透明而非白色。
（2）背景图片（background-image）：在元素背景中显示图像。
语法：background-image: url(图像的路径);，其中图像的路径可以是相对路径或绝对路径。
（3）背景图片平铺（background-repeat）：控制背景图片是否以及如何平铺。
属性值：
| repeat | 默认值，背景图片在水平和垂直方向上平铺 |
| no-repeat | 背景图片不平铺 |
| repeat-x | 背景图片仅在水平方向上平铺 |
| repeat-y | 背景图片仅在垂直方向上平铺 |
（4）背景图片位置（background-position）： 设置背景图片在元素中的位置。
属性值：可以是长度值（如50px 100px）或方位值（如top left、center等）。如果仅指定一个值，则另一个值默认为center。
（5）背景图片大小（background-size）：控制背景图片的尺寸。
属性值：
| cover | 背景图片足够大，能够完全覆盖元素的背景区域，同时保持图片的宽高比。可能会导致图片的某些部分不可见。 |
| contain | 背景图片被缩放以完全适应元素的背景区域，同时保持图片的宽高比。可能会导致背景区域有空白。 |
长度值（如100px 200px） | 直接指定背景图片的宽度和高度。 |
（6）背景附着（background-attachment）： 控制背景图片是否随页面滚动。
属性值：
| scroll | 默认值，背景图片随页面滚动而滚动。 |
| fixed | 背景图片固定不动，即使页面滚动，背景图片也保持在原位置。 |
| local | 背景图片随元素的滚动而滚动（如果元素是可滚动的）。 |
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
