HTML笔记

爱写代码的吗喽

已于 2024-08-05 11:34:48 修改

阅读量1.3k

点赞数 21

文章标签： html 笔记前端

于 2024-05-04 21:39:31 首次发布

本文链接：https://blog.csdn.net/2401_83913283/article/details/138388998

版权

VSCode打开文件夹与创建文件

选择文件夹

拖拽文件夹

生成浏览器文件.html的快捷方式：！+回车

VSCode常用快捷键

Shift+Alt+F:代码格式化

Alt+Up或Alt+Down：向上或向下移动一行

Shift+Alt+Up或Shift+Alt+Down:快速复制一行代码

Ctrl+S：快速保存

Ctrl+F：快速查找

HTML5：超文本标记语言，后缀以.html结尾。标记语言是一套标记标签，标签由尖括号包围的关键字，标签有两种表现形式：单标签和双标签

HTML5的DOCTYPE声明

写在文档的最前面，避免浏览器的怪异模式<!DOCTYPE html>

HTML5基本骨架

<html>

<head>

<title>有利于SEO优化</title>

</head>

<body>

</body>

</html>

HTML标签

标题标签

<h1 align='left'>我是一级标题</h1>

<h2 align='center'>我是二级标题</h2>

<h3 align='right'>我是三级标题</h3>

<h4>我是四级标题</h4>

<h5>我是五级标题</h5>

<h6>我是六级标题</h6>

自动生成标题标签：h&*6

段落标签

<p></p>

换行

<br>

水平线

图片标签

图片路径：绝对路径（电脑盘符存储与访问的具体位置）、相对路径（两者的相对关系）、网络路径（具体的网络地址）

相对路径：子级关系：/父级关系：../同级关系：./

超文本链接标签

默认情况下：

一个未访问的链接显示为蓝色字体并带有下划线

访问过的链接显示为紫色并带有下划线

点击链接时，链接显示为红色并带有下划线

鼠标移动到某个链接上时，会变为一个小手

常用文本标签

<em>定义着重文字，斜体并且加重</em>

<b>定义粗体文字</b>

<i>定义斜体字</i>

<strong>定义加重语气，加粗加重</strong>

<del>定义删除字</del>

<span>元素没有特定的含义</span>

列表标签

有序列表：开始于<ol>标签，里面包含<li>标签

type属性可以是数字、字母、罗马数字

有序列表可以嵌套有序列表

无序列表：开始<ul>标签，里面包含<li>标签

type属性：disc默认实心圆、circle空心圆、square小方块、none不显示

常见应用：导航栏

快捷键：ul>li*个数

自定义列表：<dl>标签开始，<dt>标签定义列表项，<dd>标签定义列表项的内容

表格标签

表格：<table>

行：<tr>

单元格（列）：<td>

快捷键：table>tr*数量>td*数量{文本信息}

表格属性

border:设置表格边框

width:设置表格的宽度

height:设置表格的高度

表格单元格合并

水平合并：colspan

垂直合并：rowspan

水平合并保留左边垂直合并上面

水平垂直都有保留左上

form表单

包括表单标签、表单域、表单按钮

<input>

</form>

action服务器地址

name表单名称

method数据提交方式get提交的数据url可以看到、post看不到

get一般用来提交少量数据、post用来提交大量数据

表单元素

文本框

<form>

        name:<input type="text">

</form>

密码框

<form>

        password:<input type="password">

</form>

提交按钮

<form>

        <input type="submit" value="登录">

</form>

块元素和行内（内联）元素

块级元素	内联元素
块元素会在页面独占一行	行内元素不会独占一行，只占自身大小
可以设置width,height属性	行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素：div form h1-h6 hr p table ul

常见内联元素：a b em i span strong

不换行但能设置宽高属性的元素：buttton img input