HTML知识

小孟学Java

已于 2024-09-03 10:12:28 修改

阅读量824

点赞数 20

文章标签： html 前端

于 2024-08-18 21:15:38 首次发布

本文链接：https://blog.csdn.net/m0_67929601/article/details/141288105

版权

HTML是什么:

HTML:超文本标记语言(Hyper Text Markup Language).超文本:就是指页面内可以包含图片,链接,音乐,视频等非文字元素. 标记:一种标记符,可以告诉浏览器如何显示其中的内容.

BS与CS架构

BS和CS架构通常是指两种不同的软件系统架构模型.它们分别代表Browser/Server(浏览器/服务器)架构和Client/Server(客户端/服务器)架构.

CS架构

在 CS 架构中，客户端（Client）应用程序安装在用户的计算机上，并通过网络与一个或多个服务器（Server）进行通信。客户端负责用户界面和部分业务逻辑处理，而服务器端则主要处理数据存储、管理和复杂的业务逻辑。这种架构的特点包括：

客户端需要预先安装特定的应用程序。

客户端应用可能需要定期更新。

适用于固定用户群且对安全性要求较高的场景。

BS架构

BS 架构是基于 Web 的应用架构，其中客户端仅需要一个现代的 Web 浏览器即可访问服务器上的应用程序。在这种架构下：

用户通过浏览器与服务器交互，无需在本地安装任何特殊软件。

服务器提供动态生成的网页或 Web 应用程序。

维护和升级更容易，因为只需要更新服务器端的应用程序。

适用于广泛的用户群体，特别是那些需要从不同设备访问应用的情况。

对比:

部署和维护: BS架构更容易部署和维护,因为所有的工作都在服务器端完成,而CS架构可能需要再每个客户端上进行更新.

性能: CS架构可以利用客户端的计算资源,因此在某些情况下可能会有更好的性能.

安全性: CS架构由于其封闭性,在某些方面更加安全,但BS架构可以通过各种安全措施来加强安全性.

可访问性: BS架构允许用户从任何地方使用任何设备访问应用程序,而CS架构通常需要特定的客户端软件.

HTML标签格式:

单标签与双标签:

单标签:是指没有结束标签的标签,由一个标签构成即为开始也是结束,但是注意XHTML的规范,标签一定要有结束,于是写上自结束标签.

双标签:是指由开始标签和结束标签组成:内容.

标签属性:1.一般写在开始标签上 2.属性总是以名称/值对的形式存在(名值对) 3.属性的值建议使用双引号.

HTML基本结构

DOCTYPE:文档声明

html:标签告知浏览器其自身是一个HTML文档

head:标签用于定义文档的头部(文档的描述信息)

body:标签用于定义文档的主体(文档的主题内容)

HTML编码

常见的编码格式:

HTML的默认声明是<meta charset="utf-8"/> 注:文件编码+HTML的编码声明必须保持一致

HTML基本标签

标题标签

h1,h2,h3,h4,h5,h6

注:由于h元素有确切的语意.因此不要使用标题标签来改变同一行的字体大小.

P标签

标签定义段落

p元素会自动在其前后创建一些空白(段间距)

换行标签

可以插入一个简单的换行符.(单标签)在浏览器遇到标签时,通常会在相邻的段落之间插入一些垂直的间距.而br不会.

水平分割线

<hr/>标签在HTML页面中创建一条水平线.

文本标签

加粗标签

b和strong标签,用于页面上某些文本数据加粗.建议使用

倾斜(斜体)标签

将文字斜体显示表示强调

变大或变小标签变大：<big></big>，变小：

超链接标签

超链接：主要功能完成页面上的点击跳转。

<a href="https://www.baidu.com">百度</a>

根据跳转的目标（地址）不同，超链接可以分为：外部链接、内部链接、锚点(哈希hash)链接

在a标签的href属性上，书写的时候，跳转外部地址的时候，需要书写完整的地址协议://网址协议：https: 、 http: 、 ftp: 、 thunder:（迅雷自己的协议.

关于a标签有两个重要的属性：

href：用于书写跳转的地址

target：用于书写以什么方式打开的新页面

_self : 默认值，在当前窗口打开

_blank : 在一个新窗口中打开

锚点链接

在同一个页面上，点击链接，可以跳转到当前页面的其他位置。书写时需注意:

1.使用a标签，书写跳转的地址，需要使用#加锚点的id属性值

2.需要使用任意的一个标签，在页面不同位置去定义锚点，标签上一般建议使用id属性去给锚点命名.

多媒体标签

多媒体：通过不同的标签，可以将图片、视频、音频放到页面上。

图片标签

img:图片标签,单标签, 将图片显示在页面上
src: 用于书写图片的路径（书写项目中的图片路径，也可以书写网络中的在线图片地址）
alt: 当图片加载失败，无法显示的时候，浏览器会显示提示信息
title: 鼠标悬停在图片上的提示信息
width ：设置图片的宽度
height ：设置图片的高度
border ：图片设置边框 img设置页面上的图片，要么设置宽度，要么设置高度，另外一个值浏览器会根据图片的原始大小进行等比例缩放图片的扩展名：jpg、jpeg、png、gif、svg、webp

<img src="相对路径/绝对路径/网络链接" alt="" title="" width="" height="" border="">

video标签

video : 视频标签
src：书写视频文件的路径（本地、在线）
controls:用于控制播放器上的控制按钮(如果没有添加呈现为图片效果)
autoplay：自动播放
muted：静音
loop：单个视频循环播放

<video src="视频路径" controls autoplay muted loop>

audio标签

audio : 视频标签
src：书写视频文件的路径（本地、在线）
controls:用于控制播放器上的控制按钮(如果没有添加呈现为图片效果)
autoplay：自动播放
muted：静音
loop：单个视频循环播放

<audio src="视频路径" controls autoplay muted loop>

列表标签

无序列表【重点】

无序列表它是一组标签：ul与li组合

ul书写列表的范围，li书写列表中的每一项，在页面上，ul中只能书写li，li标签中可以书写其他标签 ul标签上可以书写type属性，来修改li前面默认的无序的符号（disc square circle ）,样式可通过type="none"或者list-style:none 取消.

<ul type="I">
<li>唱</li>
<li>跳</li>
<li>rap</li>
<li>篮球</li>
</ul>

有序列表

有序列表也是一组标签：ol与li组合， ol中也只能书写li，li中可以书写其他标签

<ol type="I">
<li>唱</li>
<li>跳</li>
<li>rap</li>
<li>篮球</li>
</ol>

自定义列表

自定义列表：dl与dt和dd组成，dl中可以出现dt或dd，不能出现dt与dd之外的其他标签，dt与dd中可以书写其他标签

<dl>
<dt>唱</dt>
<dd>跳</dd>
<dd>rap</dd>
<dd>篮球</dd>
</dl>

table表格

简单的表格

一个表格由若干部分组成：表格整体：table标签表格行：tr标签表格单元格：td标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border:1px solid #f00;
/* 去除表格单元格之间的缝隙
border-collapse : 设置表格中的单元格之间的缝隙
separate ： 默认值，单元格与单元格之间分离
collapse ： 将表格单元格之间的缝隙合并（边框合并）
*/
border-collapse: collapse;
}
td{
padding: 10px 20px;
border:1px solid #0af;
}
</style>
</head>
<body>
<!-- 简单的表格 -->
<table> <!-- 表格的整体 -->
<tr> <!-- 表格的行 -->
<td>这是一个简单的表格</td> <!-- 表格的单元格，真正存放表格的数据的标签 -->
<td>这是一个简单的表格</td>
<td>这是一个简单的表格</td>
<td>这是一个简单的表格</td>
<td>这是一个简单的表格</td>
</tr>
</table>
<br>
<hr>
<!-- 书写一个人员信息的表格 -->
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>住址</td>
<td>电话</td>
</tr>
<tr>
<td>夏云皓</td>
<td>18</td>
<td>女</td>
<td>东莞</td>
<td>10086</td>
</tr>
<tr>
<td>毛珊</td>
<td>女</td>
<td>16</td>
<td>岳麓区</td>
<td>10010</td>
</tr>
<tr>
<td>李均</td>
<td>女</td>
<td>16</td>
<td>岳麓区</td>
<td>10010</td>
</tr>
<tr>
<td>黄河</td>
<td>男</td>
<td>20</td>
<td>玉兰路</td>
<td>12123</td>
</tr>
</table>
</body>
</html>

完整表格

完整表格的标签：table > caption | thead | tbody | tfoot > tr > td | th

table(表格整体)
caption(表格的标题)
thead(表格头部)
tbody(表格身体，表格数据区域)
tfoot(表格的尾部)
tr(表格的行)
th或td(单元格)

注:完整表格一般在要给特定位置加样式时使用.

表格行或列合并(注:将多余的单元格删除)

合并行(跨行)表格:找到需要合并的单元格,使用rowspan属性,设置合并的行数(包含当前这个单元格)

<td rowspan="3"></td>  当前单元格需要合并三行

合并列(跨列)表格:找到需要合并的单元格,使用colspan属性,设置合并的列数(包含当前的这个单元格)

<td colspan="3"></td>

基于表格的css样式:border-collapse:collapse;

表单标签

表单标签:他主要用于在页面上收集(用户)数据,并且可以将数据最终提交给后端程序.

表单标签:

表单标签:form
表单项标签:input(输入框),select(下拉框),多行文本域(textarea)
表单按钮:button

表单标签form

form标签：表示标签整体

        action属性：用来书写数据最终给哪里提交（后端给出的地址）

        method属性：以什么方式将数据提交给action所指的后端程序

                 get方式：默认值，数据提交的时候会在action的地址后面使用?隔开，拼接提交的数据 https://www.baidu.com/s?ie=utf-8&wd=孟子

                 post方式：提交的数据会被隐藏起来

                 enctype属性：提交的数据，

                采用的编码格式 application/x-www-form-urlencoded：普通表单（默认值）                 multipart/form-data ：提交的表单中，还有文件上传数据

                 text/plain : 普通文本数据

表单的细节：

                1、一般要求每个表单项上都必须添加name属性，用于提交数据将neme属性的值与用户输入的值，拼成 name属性值=输入的值例如：提交后：account=abc

                 2、针对单选按钮，必须添加name属性，name属性值一样的，它们才是一组，才能保证为单选

                3、针对页面上的表单项是让用户选择的，不是用户输入的，必须书写value属性，                 4、针对下拉框，name属性需要书写在select标签上，而value需要书写在每个option标签上，如果option上没有书写value属性，默认使用option中的文本数据

<!--
    表单项介绍：
input标签：它是一个单标签，同时是一个行内标签
type属性：
<input type="text"> 单行文本框（输入框）
<input type="password"> 密码框（掩码）
<input type="radio"> 单选按钮
<input type="checkbox"> 复选（多选）按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
<input type="button"> 普通按钮
select标签：它是下拉框，需要配合option标签完成
每个option标签，是select中的一个下拉项
textarea标签：文本域（多行文本框）
    =========html5中添加的type的新属性值==========
type="color" 颜色选择框
type="number" 颜色选择框
type="date" 日期选择框
type="time" 时间选择框
type="datetime" 日期时间选择框（目前浏览器还不支持）
type="datetime-local" 日期时间选择框

input标签的其他属性：
    placeholder ： 提示文字，输入数据，会自动隐藏，没有数据自动显示
    readonly：输入项只能看不能改
    disabled：禁用
    checked ： 单选获取复选按钮的默认选中


-->
<form action="" method="" enctype="" multipart/from-data>
<div>
账号：<input type="text">
</div>
<div>
密码：<input type="password">
</div>
<div>
性别：
<input type="radio">男
<input type="radio">女
</div>
<div>
爱好：
<input type="checkbox">琴
<input type="checkbox">棋
<input type="checkbox">书
<input type="checkbox">画
</div>
<div>
选择地址：
<select>
<option>-请选择-</option>
<option>北京</option>
<option>天津</option>
<option>西安</option>
<option>上海</option>
</select>
</div>
<div>
<textarea cols="30" rows="3"></textarea>
</div>
<div>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</div>
</form>