前端——HTML5 基础

m0_74098588

已于 2024-08-01 11:31:03 修改

阅读量346

点赞数 4

文章标签： html5 前端 html 备忘录模式

于 2024-07-03 08:34:36 首次发布

本文链接：https://blog.csdn.net/m0_74098588/article/details/140141560

版权

基础与列表、表格

HTML 基本结构
HTML 文档的基本结构是由三个部分组成:文档类型声明、<head>标签和<body>标签。
<!DOCTYPE html>:位于 HTM 文档的第一行，告诉浏览器这是一个 HTML5 文件。
<htm1></html〉标签:是 HTML 文档的根标签，lang 属性表示文档的语言
<head></head〉标签:定义文档的头部信息。只有一些特定的标签才允许放在<head〉标签内，如〈title></title〉标题标签、〈meta〉参数标签、<scirpt></scirpt〉脚本标签、<1ink/〉链接样式表标签、<style></style〉样式标签。
<body></body>标签:用于定义 HTML 文档的正文内容,

HTML 网页中常见的标签:标题标签、段落标签等。
<body></body>等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签(空标签)如<hr/>，意为用/来关闭空标签

网页基本标签

文档标题标签

<title>标签用于设置 HTML 文档的标题，标题会显示在浏览器的选项卡栏上。
文档参数标签
<meta〉标签用于设置网页的摘要信息，包括字符集编码、网页关键词、网页描述等。
内容标题标签
<h1></h1>~<h6></h6>标签用于设置文档标题。

段落标签

<p></p〉标签用于开始一个新的段落，当浏览器遇到〈p〉/p〉标签时，通常会在相邻的段落之间插入一些垂直的间距，这使得<p></p〉标签内的文本内容形成了一个独立的段落。

换行标签

<br/〉标签用于强制换行，它只是一个简单的换行符，不会在浏览器中创建额外的空间或边距。该标签已经被废弃，使用<p></p>标签代替。

水平标签

<hr/>标签用于展示一条水平线。

字体样式标签

<font></font〉标签用于设置字体样式、字体大小、字体颜色。该标签在 HTM5 中已经废弃。<b></b〉标签用于设置文本为粗体。该标签已经被废弃，使用<strong></strong〉标签代替。<sma11></sma11>标签用于设置小字体的描述、声明等文本。<u></u〉标签用于设置文本下划线。该标签已经被废弃，使用<ins></ins〉标签代替<i></i〉标签用于设置文本倾斜。该标签已经被废弃，使用<em></em〉标签代替<s>/s〉标签用于设置文本删除线。该标签已经被废弃，使用<de1>/de1>标签代替z

废弃标签

HTML,中以前存在一部分不是用来添加语义的标签(如<u>)，而与我们 HTM 标签是用来添加语义的，这与我们的定义不相符，故会废弃一些标签

图像标签

<img/>标签用于加载图像。
<img/>标签的基本用法:
<img src="path" alt="text" title="text" width="x" height="y" />
<img/>标签的常见属性:
src:图像地址，支持本地图片和远程图片，
alt:图像的替换文本。
title:鼠标悬停时提示的文本。
width:图像宽度。
height:图像高度。

超链接标签

<a></a〉标签用于设置超链接。
超链接的应用场景有:
页面间链接:从A页面跳转到B页面。
锚链接:在A页面中从A区域跳转到B区域。
功能性链接:从A页面跳转到发送邮箱窗口。

基本用法
<a href="url" target= "target">text</a>
常见属性:
href：要跳转的链接地址。
target：目标窗口。
self:在当前窗口打开链接(默认值)。

blank:在新窗口打开链接。

parent:在父窗口打开链接

top:在顶层窗口打开链接。

行内元素和块元素

行内元素:左右都是行内元素的可以排在一行，如〈a>标签块元素:无论内容多少，该元素独占一行，如<h1>~<h6>标签。
HTML 注释
HTML 注释的基本用法:

列表

无序列表

<ul><ul>、<li></li〉标签用于定义无序列表。

无序列表的特点:
没有顺序，每个<li>标签独占一行。
默认<li></li>标签项前面有个实心小圆点。

有序列表

<ol></ol>、<li></li〉标签用于定义有序列表。

有序列表的特点:
有顺序，每个<li></li>标签独占一行。
默认<li>标签项前面有个顺序标记。

定义列表

<dl></dl>、<dt></dt>、<dd></dd〉标签用于定义定义列表。
·定义列表是标题及列表项的结合。
<dl></dl>标签作为列表的开始。
·<dt></dt>标签作为每个列表项的开始。
<dd></dd>标签作为每个列表项。
定义列表的特点:
没有顺序，每个<dt></dt>、<dd></dd〉标签独占一行。
默认没有标记。

表格

表格基本结构

表格由单元格、行、列组成。
表格使用规范
定义一个表格的规范步骤:
使用<table></table>标签定义表格。
使用<thead></thead>标签定义表头。
使用<tr></tr〉标签在<thead></thead〉标签中定义表头的第一行，可以有多行。
使用<th></th〉标签在<thead><tr></tr>/thead〉标签中定义表头的单元格。
使用<tbody></tbody〉标签定义表格内容主体。
使用<tr></tr〉标签在<tbody></tbody〉标签中定义表格内容的第一行，可以有多行。
使用<td></td〉标签在<tbody><tr></tr></tbody〉标签中定义表格内容的单元格。

表格标签的常用属性

属性描述
border 设置 table 表格边框
align 设置内容的对齐方式，可以让表格在网页内居中，也可以让表格内容在单元格居中。left 左对齐/right右对齐/center 居中对齐。
color 设置内容颜色。
width 设置内容宽度。
height 设置内容高度

表格跨列

指定这一格横向跨2列
<td colspan="2">学生列表</td>
表格跨行
表格跨行是指单元格的纵向合并。

表格跨列

指定这一格纵向跨2行
<td rowspan="2">张三</td>

媒体元素与表单

媒体元素

视频元素

<video></video>标签用于加载视频

基本用法:
<video src="url"></video>

常见属性
属性描述
src 视频的路径。
controls 向用户显示视频播放控件。
autoplay 视频就绪后立即播放。
1oop 循环播放视频。
preload 视频在页面加载时加载，并预备播放。
muted 静音播放。
width 播放器宽度。
height 播放器高度。
虽然在<video></video〉标签中加上 autoplay 属性，但在浏览器中，视频还是无法自动播放。有些浏览器禁止自动播放带有声音的音视频。如果要实现自动播放，可以将视频静音。

音频元素

<audio></audio>标签用于加载音频。
<audio></audio〉标签的基本用法:
<audio src="url"></audio>
<audio></audio>的常见属性:
属性描述

src 音频的路径。
controls 向用户显示音频播放控件
autoplay 音频就绪后立即播放
loop 循环播放音频。
preload 音频在页面加载时加载，并预备播放。
muted 静音播放。
width 播放器宽度。
height 播放器高度。

结构标签

一个页面大体可以由三部分组成:页面头部、页面主体、页面底部。
在制作网页时，必须先划分结构，再编写内容。HTML, 中具有语义化的结构标签:
<header></header>标签:定义页面头部。
<footer></footer〉标签:定义页面底部。
<main></main〉标签:定义文档的主要内容，在整个 HTML 文档中只能出现一次。
<section></section〉标签:定义页面中的某一个独立区域。
<article></article〉标签:定义独立的文章内容。
<aside></aside〉标签:定义相关内容或应用，常用于侧边栏。
<nav></nav>标签:定义导航类辅助内容。

iframe标签

解释：
<iframe></iframe>标签用于内联网页
<iframe></iframe〉标签的基本用法:
<iframe src="url"></iframe>
常见属性:
属性描述
name 内联框架的名称
src 支持远程链接和本地文件，内联网页的地址，
width 主内联框架的宽度。
height 内联框架的高度。
frameborder 删除内联框架的边框。该属性已经被废弃，
iframe 存在的问题:
iframe 需要加载嵌入的网页，因此会增加整体页面的加载时间。
·对搜索引擎不友好，搜索引擎通常会忽略 iframe 中的内容。
恶意网站可以通过 iframe 来进行钓鱼、点击劫持等攻击，从而危害用户的隐私和安全。
不同浏览器对 iframe 的支持程度不同。
有些网站禁止被 iframe，如百度。

表单

表单用法

基本用法:
<form method="xx" action="url">
<!--->
</form>

常见属性:
属性描述
method 表单请求方式，GET(默认)/POST
action 表单请求地址。
enctype 表单数据提交到服务器时应如何编码。application/x-www-form-urlencoded:默认编码。
multipart/form-data:文件上传编码

input标签

解释

表单元素 input标签用于定义输入字段，用户可以在其中输入数据通常情况下，<input/>标签会使用<labe1></labe1>标签为元素定义标签<input/> 标签的基本用法:
label for="id">xxx:</label>
<input type="xxx” name="xxx" id="xxx" value="xxx"/>

常见属性

属性   描述
type   表单元素的类型。
name   表单元素的名称。
id   表单元素的 id。
value   表单元素的初始值
maxlength type为text 或password 时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中。
readonly 表单元素只读。
disabled   禁用表单元素。
required   表单元素必填。
placeholder 表单元素的提示信息。

标签常见类型:

类型描述
text(默认值)   普通文本输入框。
password   密码框。
radio 单选框。
checkbox 多选框。
button 普通按钮。
submit 提交表单请求按钮
reset 重置表单内容按钮。
file 文件上传选择按钮
email 邮箱输入框。
url   网址输入框。
number 数字输入框。

range 滑块。
search 搜索框
hidden 隐藏表单域。

表单元素 textarea:

<textarea></textarea>标签用于定义多行文本框。
<textarea></textarea>标签的基本用法:
<textarea id="xxx" name="xxx" rows="5" cols="50">
XXX
</textarea>
<textarea></textarea>标签的常见属性:
属性描述
cols 多行文本框可见宽度
rows 多行文本框可见行数

表单元素 select 和 option

<select></select〉标签用于创建下拉框，<option></option〉标签用于创建下拉框中的每一个选项。
<select></select〉标签和<option></option〉标签的基本用法:
<select name="cars" id="cars">
<option value="xxx">xxx</option)
</select>
常见属性:
属性描述
value 选项的值。
selected 选项默认被选中。

表单元素 button

<button></button〉标签用于创建按钮。
在<button>、button〉元素内部，可以放置文本、图像、图标等标签，这是用<input/〉元素创建的按钮所不能做到的。
<button></button〉标签的基本用法:
<button type="xxx">xxx</button)
<button></button〉标签的常见属性:
属性描述
type :按钮类型。
button:普通按钮。
submit:表单提交按钮(默认)。
reset:重置表单按钮。