HTML基础

小朱真的很努力

已于 2023-03-03 15:11:51 修改

阅读量175

点赞数

分类专栏： html 文章标签： html5

于 2023-03-03 14:49:53 首次发布

本文链接：https://blog.youkuaiyun.com/zuandawutai/article/details/129320192

版权

html 专栏收录该内容

2 篇文章

订阅专栏

前端开发的大体流程，当下前后端分离思想已经深入人心，前端主要负责网页的编写以及对后台资源的请求和对用户操作的响应，HTML就是用于编写网页的页面结构。

HTML超文本标记语言，通过一系列标签将网页的文档格式统一，将资源整合连接为一个逻辑整体，也就是网页，其中可以包括文字、图片、音频、视频、网页链接等。

HTML的注释：(写注释的习惯是非常重要的，可以提高我们开发维护的开发效率)

HTML 的格式通常为：<标签> 标签内容</标签> 以标签对内容进行包裹，也有自结束标签:<标签/>，这种标签一般有自己的语义。

一些格式标签的解读：

<!doctype html>：声明使用的是html的标准写在代码最开始的地方

<html> 根标签：所有内容都要在根标签内部

<head> 子标签：内容网页上都是看不见的主要用来帮助浏览器或者搜索引擎来解析网页

<title> ：网页的标题栏，搜索引擎根据title的内容来判断网页的主要内容

还可以对网页进行重定向。

<body> 子标签：内容，所有可见的内容写在body里

在网页中使用某些符号需要使用其转义字符，比如空格多个空格浏览器默认解析为一个空格

需要使用&nbsp进行转义

行内元素和块元素的认识

在前端中我们将标签及其内容称为一个元素或者一个节点，独占一行的元素被称为块元素，可以在同一行且无法设置宽高的元素称为行内元素

常见块元素：

<h1>~<h6>:六级网页标题

<p>:表示对段落的引用

<hgroup>:对标题进行分组

<blockquote>表示长引用自动换行缩进，块元素

<div>无语义块（通常使用最多）

常见行内元素：

<q>短引用自动加引号，行内元素

<span>无语义行内元素

有一些元素比较特殊，需要使用某些网页资源对元素内容进行替换，称为行内替换元素

行内替换元素。height/width/padding/margin均可用。效果等于块元素。

行内非替换元素，例如：height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。

语义化标签

<header>网站某个部分的头部

<main> 网页主题,只有一个

<footer> 网页某个部分的底部

<nav>表示网页中的导航

<aside>表示侧边栏

<article>表示文章

<section>独立区块没有语义

<div> 表示一个区块,主要的布局元素,什么都可以用div

<span>一般用作行内元素

水平线标签 <hr/>

斜体 <em>…</em><cite></cite>

字体加粗 <strong>…</strong>

列表(list)

1.有序列表:<ol> <li>表示列表项，每项前面有编号，list-style: none;去除列表的项目符号

2.无序列表:<ul> 用的比较多 <li>表示列表项，每项前只有点

3.自定义列表:<dl> <dt>表示列表项 <dd>表示对应列表项的内容

超链接

可以使点击时进行跳转

使用<a>标签定义超链接，属于行内元素

可以嵌套任何元素除了超链接

属性:

href 跳转指定跳转的目标路径，可以是外部网站地址，也可以是内部页面地址

相对路径:当我们需要跳转到服务器内部的页面时使用相对路径

相对路径用./(表示当前文件所在目录)或者../(表示当前目录所在目录的上级目录)

开头可以省略默认./

target用来指定超链接打开的位置

_self当前页面(默认值)

_blank 在一个新页面打开

herf:

#:去底部

#+id:跳转指定标签位置

可以将#作为占位符表示作用未定回到顶部

也可以使用javascript:;作为属性,此时点击超链接不会发生跳转

id:

标签的唯一标识,所有标签都可以设置id表示对应的元素

图片标签

用来向当前页面引入一个外部图片，属于行内替换元素，可以设置宽高内外边距等等

使用<img/>标签来引入外部图片,img是一个自结束标签

属于替换元素介于行内元素和块元素之间

alt 图片描述,默认情况不会显示,图片无法加载时显示

搜索引擎会根据alt中的内容来识图片

width 图片宽度

height 高度单位都是像素

只修改一个另一个会等比例缩放

图片格式:

jpeg(jpg):支持颜色比较多,不支持透明效果不支持动图,用来显示照片

gif:支持颜色比较少,支持简答透明,支持动图,适合表示颜色单一的图片和动图

png:支持颜色比较多,支持复杂透明,不支持动图,颜色丰富复杂透明的图片,专为网页而生

webp:专门用来表示网页中的图片一种格式,具备其他格式的所有优点而且还小,

缺点就是兼容性不好

base64:将图片使用base64进行编码,这样可以将图片转换为字符,

通过字符的形式来引入图片,需要和网页一起加载时才会使用

使用原则:效果一样用小的,效果不一样用效果好的

编辑

音频视频

<audio>标签用来向页面中引入一个外部的音频文件

<vidio>标签用来向页面引入一个外部视频文件

默认不允许用户控制播放

contros允许用户播放

autoplay 自动播放但是对于大部分浏览器在第一次进入网站时都不会自动对音乐进行播放

loop 音乐是否循环播放

可以再写一个<source>标签来引入文件.支持的浏览器可以导入,不支持播放的浏览器的可以显示内部提示文字

embed可以兼容ie8浏览器

表格

通过<table>标签创造一个表格

在表格中使用<tr>标签来表示表格中的一行

在<tr>中使用<td>表示一个单元格

可以将表格分成三个部分

头部<thead>（不常用）

主体<tbody>（不常用，因为默认在tbody内部，所以很少会写）

<tr>表示一行

<td>表示一个单元格

<th>表示头部单元格字体加粗

底部<tfoot>（不常用）

表单（重点！）

用于向服务器提交数据

使用<form>标签包裹的代码块属于一个表单，块级元素

form的属性

action 指定表单提交的服务器的地址

method指定传递数据的方式，get或者是post

get请求和post请求的区别

get：

1.GET方法是用来向服务器上获取数据。

2.GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接

在浏览器上看到提交的数据。

3. GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符)

4.GET为form表单的默认提交方式。

5.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据。

6.数据类型的限制：GET只允许ASCII字符,

7.与POTS相比，GET更简单也更快，并且在大部分情况下都能用。

post：

1.PSOT是用来向服务器上传递修改数据。

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

4.POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中。

5.POST方法向URL添加数据,长度提交是无限制的。

6.POST数据会被重新提交可能会产生不良的后果(浏览器会告知用户数据会被重新提交)

7.数据类型的限制,POST无限制(如果提交二进制数据(例如:图片)，需要使用POST方法)

<input>文本输入框

属于行内替换元素

要提交数据必须为元素指定一个name属性

可以使用type属性指定文本框的类型

可以设置value属性来指定默认提交数据

文本框的属性

size 1-7

value 默认显示的内容

placeholder 输入提示（输入框的灰色字体）

maxlenth 控制输入最大长度

autocomplete="off"关闭自动补全

readonly 将表单项设置为只读有默认数据会提交

disabled 将表单项设置为禁用不会提交数据

autofocus 设置表单项自动获取焦点,刷新页面自动点击

type类型：

text ：一般类型

password:密码，加密输入

email：邮件形式，需要输入有效的邮件地址

radio:单选按钮，同一类单选按钮name属性相同，checked表示默认选择

date：日期

checkbox:多选按钮

submit:提交

button:普通按钮

reset:重置按钮

file：文件上传

textarea：多行文本输入标签

outline：输入框的轮廓

cursor：修改点击按钮时的光标效果

<select>下拉列表

<option>：列表元素

selected：默认选择

multiple="multiple" 下拉列表多选

size="7" 下拉列表的显示数量

至此常用的网页结构标签就学习完毕，有些标签属性尚未补全，在需要使用时查询文档即可