HTML

weixin_65317510

于 2024-07-22 20:42:22 发布

阅读量776

点赞数 8

文章标签： html 前端服务器

本文链接：https://blog.csdn.net/weixin_65317510/article/details/140570460

版权

是超文本标记语言，展现给用户的界面。

一、概述

1.基本结构

1. <!DOCTYPE html> : 声明该文档是HTML5文档，固定写法。必须放在首行

2. <html> : HTML的根标记(根元素)，该标记在文档中只能有且只有一个。

根标记中通常有两个子标记，分别是 <head>和<body><head>标记：进行网页meta的设置（规定字符集等），定义标题，引入css文件，js文件，或者编写style和javascript代码等，可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript> 和 <base>。

3.body标记：用来定义网页的可见内容。

2.元素

HTML文档由各种HTML元素来组成，而HTML元素指的就是一个个书写完整的标签(标记)

双标签：

标签的结束标签的斜杠在标签名前面，比如p标签的结束标签 </p

单标签

单标记标签的斜杠在标签名之后，比如换行标记<br/>

3.属性

元素的附加信息，一般位于开始标签中，以名/值对的形式出现。

属性的值始终被包括在双引号里，常用双引号如果属性值本身带有双引号，那么必须使用单引号

eg: class属性

4.字符实体

不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。比如在文字中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。所以用字符实体来表示。

小于号： < 或 < 或 <

大于号： &gt

空格：  

二、常用标签

2.1.HTML头部

1.<title></title>

定义了不同的标题

2.<meta>

描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。比如指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

3.<style></style>

书写内部样式表

4.<link>

2.2 基础标签

1.标题标签（块级元素）

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。 <h1>定义最大的标题。 <h6> 定义最小的标题。

2.段落标签（块级元素）<p> </p>

将文档分成若干个段落

3.换行标签 </br>

在不产生一个新段落的情况下进行换行（新行）

4.html水平线 </hr>

创建水平线，可用于分隔内容。

5.图像标签 <img>

属性作用

src 用于书写图片的引用路径，可以是本地路径，也可以是网络路径

alt 如果由于某种原因无法显示图像，则指定图像的替代文本。该属性主要用于搜索引擎

width 图片的宽

height 图片的高

6.超链接标签 <a> </a>

在一个网页上点击后，可以跳转到另一个网页，或者是本网页的其他位置。

标签内容体可以是文本也可以是图像

属性作用

href 指令链接目标的URL。可以是另一个页面，也可以是本页面的其他位置

title 鼠标悬停在超链接上时显示的内容

target 指定链接如何在浏览器中打开 _blank：在新标签页打开链接 _self; 在当前标签页打开链接

rel 规定当前文档和被链接文档之间的关系。

7.按钮标签 <button> </button>

在 <button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

8.文本格式化标签

<strong>加重语气的的文本
<b>加粗,bold的意思
<em>斜体效果，强调作用
<i>斜体效果itatic
<pre>预格式化文本
<small>更小的文本
<code>用于存放计算机代码
<bdo>文字显示的方向
<blockquote> 引用标签
<q> 双引号标签
<del> 删除文本
<ins>插入文本
<sub>下标文本
<sup>上标文本

2.3 列表标签

1.无序列表 <ul> <li> </li> </ul>

列表项使用粗体圆点（典型的小黑圆圈）进行标记

2.有序列表 <ol> <li> </li> </ol>

有序列表始于 <ol> 标签。每个列表项始于 <li>标签。

3.自定义列表 <dl> <dt></dt> <dd></dd> </dl>

项目及其注释的组合

注意事项：

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2.4 表格标签

每个表格均有若干行，每行被分割为若干单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签：

<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>

<caption> 为整个表格定义主题

<thead> 表格头部部分(也称表格页眉)。

<th> 在<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来。（table header）

<tbody> 表格主体部分

<tr> 在<tbody>中使用<tr>元素定义行（table row 的缩写）

<td> 在<tr>中使用<td>元素定义单元格数据（ table data 的缩写）

<tfoot> 可用于在表格的底部定义摘要、统计信息等内容

2.5 表单标签

用于收集用户的输入信息，将信息提交到web服务器。表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。这些元素也都被称为控件元素

标签：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。

<label> 元素用于为表单元素添加标签，提高可访问性。

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<textarea>元素用于创建文本域（多行文本输入控件），可写入字符的字数不受限制。

2.6 html区块

分类：块级元素和行内元素（内联元素）

区别：

块级元素可以设置宽高

行内元素不可以设置，高是被内容撑开的

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>， <p>， <ul>，<ol>， <table>、<form>

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>等，只要不是独占一行的，都是内联元素