HTML5

最新推荐文章于 2025-06-02 17:37:35 发布

22信息安全技术应用慕川

最新推荐文章于 2025-06-02 17:37:35 发布

阅读量918

点赞数 28

文章标签： html5

本文链接：https://blog.youkuaiyun.com/2302_77669548/article/details/143199597

版权

学习笔记

1 Web标准

2 HTML标签

2.1 语法规范

由尖括号包围的关键字，<html>
成对出现，<html></html>,称为双标签。第一个是开始标签，第二个是结束标签
特殊的单个标签，，称为单标签

2.2 标签关系

包含关系：标签里面还有标签
并列关系：标签之间并列

2.3 基本结构标签

标签	定义	说明
html	HTML标签	页面中最大的标签，称为根标签
head	文档的头部	注意在head标签中我们必须要设置title
title	文档标题	网页标题
body	文档主体	包含文档的所有内容

2.4 框架代码释义

文档类型声明标签：<!DOCTYPE html>
语言种类：lang
- en：英语
- zh-CN：中文
字符集：meta charset = "UTF-8"
- 规定文档应该使用哪种字符

3 基础小知识

目录文件夹：普通文件夹，放了相关素材而已
根目录：打开目录文件夹的第一层就是根目录
相对路径：文件相当于HTML页面的位置
绝对路径：目录下的绝对位置，直达目标位置

4 VSCode常用的快捷键

操作	作用
shift + alt + 箭头	快速复制一行
Ctrl + d	选定多个相同的单词
Ctrl+ alt + 箭头	添加多个光标
Ctrl + h	全局替换
Ctrl + g	快速定位某一行
Ctrl + /	单行注释
Ctrl + shift + /	多行注释（自定义）

5 常用标签

标题标签

<h1到h6>,6个等级的标题标签
作标题使用

段落标签

<p段落标签/p>
- 将文字分成段落

换行标签

强制换行
- ```
<br>
```

强调标签

突出重要性

盒子标签

<div和span>标签：没有语义
- 用来装内容的
- div是大盒子，独占一行
- span是小盒子，可以一行放多个

图像标签

格式：
```
<img src="URL"/>
```
- src是必须属性，指定了图像的路径和文件名
- 其他属性可直接在src后面添加，例如：
```
<img src="URL" alt="我是图片">
```

超链接标签

<a>,从一个页面到另一个页面

格式：

<a href="页面" target="目标窗口打开方式”>文本或图像</a>

分类
- 外部链接：例如：
```
<a href="http://www.baidu.com" target="_blank">百度</a>
```
  (blank是新窗口打开、self是当前窗口打开)
- 内部链接：例如
```
<a href="本地文件的路径和名字">链接介绍<a/>
```
- 空链接：
```
<a href="#">链接的介绍</a>
```
- 下载链接：
```
<a href="文件压缩包">压缩包介绍</a>
```
- 网页元素链接：
```
<a href="http://www.baidu.com">img src="图片.jpg/"</a>
```
  (很多网页元素都可以添加链接)
- 锚点链接：类似与大纲，可快速定位内容
  - 1、在链接的文本的href属性中，设置属性值为#名字的形式，如
```
<a href="#two">第二集</a>
```
  - 找到目标位置的标签，里面添加一个id属性=刚才打名字，如：
```
<h3 id="two">第二集介绍</h3>
```

注释标签

格式：
```

```
- 快捷键：Ctrl + /

特殊字符

表格标签

展示结构化数据，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

<table>（在这个标签里添加属性）
  <thead>（头部结构标签）
    <tr>
      <th>列标题1</th>（标题使用）
      <th>列标题2</th>
      <th>列标题3</th>
      <td>普通单元</td>（表格内容使用）
    </tr>
  </thead>
  <tbody>

要写在表格标签里

合并单元格
- 跨行合并：rowspan="合并单元格个数"
- 跨列合并：colspan="合并单元格个数
目标单元格：写合并代码
- 跨行：要合并的最上侧单元格为目标单元格，写合并代码
- 扩列：要合并的最左侧单元格为目标单元格，写合并代码
- 代码写在<td>里面

列表标签

作用：布局页面的，分两种
- 无序列表：使用<ul>标0签,<ul>只能嵌套<li>,<li>里面就无所谓了
  - ```
  <ul>
  <li>Coffee</li>
  <li>Milk</li>
  </ul>
```
- 有序列表：使用<ol>标签，只能嵌套<li>,按顺序写元素
  - ```
  <ol>
  <li>Coffee</li>
  <li>Milk</li>
  </ol>
```
- 自定义列表：自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始（只能出现这两个标签，不能有其他的标签）
  - ```
  <dl>
  <dt>名词</dt>
  <dd>名词解释</dd>
  <dt>名词2</dt>
  <dd>名词2解释</dd>
  </dl>
```
- 场景使用

表单标签

表单：为了收集信息，跟用户交互信息就需要表单
组成：表单域、表单控件、提示信息
表单域：包含表单元素的区域
- 作用：收集用户信息、向服务器传递信息
- form标签定义表单域
- ```
<form action="URL地址" method="提交方式" name="表单域名称">
各种元素
</form>
```

in put（表单元素）

收集用户信息

```
<input type="属性值"/>
```

注意：name是表达元素名字，要实现多选一的话必须要有相同的名字

label标签（表单元素）

绑定表单元素，点击lable标签里面的文本时，浏览器就会自动选择对应的元素，用来增加用户体验感
for属性对应的是input里面的id属性

<label for="sex">男</label
<input type="radio" name="sex" id="sex" />

select下拉表单（表单元素）

作用：节省网页空间

<select>
	<option>选项</option>
	<option>选项</option>
</select>

注意：<select>中至少要有一对<option>、在option中定义selected="selected"时，当前为默认

表单元素被form包含

textarea文本域（表单元素）

当用户输入内容较多时使用，这个标签用于定义多行文本输出，常用于留言板、评论区

<textarea>
留言
</textarea>

表单元素被form包含