ANALYSIS
-语法规范
兄弟标签
PRTCL // HTML
1.<html> <head> </head> <body> </body></html>2.<html> <title> </title></html>### 单标签<br />-基本结构
PRTCL // HTML
<html> <!根标签 > <head> <!头标签 > <title></title> <!标题 > </head> <body> <!主体 > Test,Test1,Test2 </body></html>- 案例
PRTCL // HTML
<html> <head> <title> 第一个页面 </title> </head> <body> 我要发财!我要发财!我要发财! </body></html>- VSCode 常用的插件
Chinese (Simplified)汉化Auto Rename TagOne Dark Pro颜色主题格式化代码（vscode 系统自带）open in browser浏览器预览页面Live Server实时预览（推荐）vscode-icons设置文件图标主题Easy LESS `` 编译 less 文件会了吧` 学习单词插件
-网页开发工具
- 骨架代码含义
<!DOCTYPE> 声明标签:文档类型申明,告诉浏览器 HTML 的版本.必须位于代码头部lang 语言:定义当前网站所属语言charset 字符集:存储字符编码,大部分为 UTF-8,基本包含所有主要字符
-HTML 常用标签
- 标题标签
<h1>-<h6>:标题标签,1~6<p></p>:段落标签,每一个标签中为单独一段落<br />:换行标签,打断当前格式立即换行
- 格式化标签
<strong></strong>:加粗<b></b><ins></ins>:下划线<u></u><em></em>:倾斜<i></i><del></del>:删除线<s></s><mark></mark>:高亮<small></small>:小号文字<sup>sup</sup>:上标文本<sub>sub</sub>:下标文本<br>:抬行<hr>:分割线
- 容器标签
<div></div>:一行只能放一个<span></span>:一行可以放多个
- 图像标签
<img src="url">:单标签,指定图片的路径src:图片路径alt:当图片无法显示,替代文字显示title:提示文本,当光标在图片时所显示的文字width:宽度height:高度border:边框粗细宽高只设置一个可以避免变形属性之间没有优先级
属性 ="值"的格式
- 路径
相对路径- 同级路径:*Picture.jpg
- 下一级路径:
img\Picture.jpg - 上一级路径:
..\
绝对路径:- 盘符路径:
Z:\learn\HTML\img* 不建议使用 - 网址路径:
https://file.ipadown.com/tophub/assets/images/sponsors/iam-jishixiezuo.jpeg
- 盘符路径:
- 超链接
- 注释
- 格式:
<!--这些都是注释-->ctrl+/:注释快捷键
- 格式:
- 特殊字符
- 空格
: - 小于
<:< - 大于
>:> - 和号
&:& - 人民币
¥:¥ - 版权
©:© - 注册商标
®:® - 度
°:° - 正负号
±:± - 乘号
×:× - 除号
÷:÷ - 平方
²:²( 数字是几就是几次方 )
- 空格
- 表格标签
- 案例
PRTCL // HTML
<table> <tr> <th> 表头 </th> </tr> <tr> <td> 文字 </td> ... </tr> ... </table> ```------------- 表格属性
| 属性名 | 属性值 | 描述 || ---------------- | ----------------------- | -------------------- || align | `left` `center` `right` | 表格与周围元素对齐方式 || border | 1 或者"" | 表格边框,`"""`为默认,表示没有边框 || cellpadding | 像素大小 | 内容与单元格边距,默认 1px || cellspacing | 像素大小 | 单元格间距默认 2px || `width` `height` | 像素大小或百分比 | 表格`宽度` `高度` |- 合并单元格 - `rowspan`跨行,<s> 上下合并为行 </s> - `colspan`跨列,<s> 左右合并为列 </s> - <i> 以最`左上`为基准 </i> - <i> 合并后按需删除多余单元格 </i>## 列表- ** 无序列表: - 各项都是同级的,且`<ul>`中只能包含`<li>`标签,`<li>`中可以包含所有标签 - <s> 无序列表都带有自己固有的样式,一般会用 CSS 修改 </s> ```html <ul> <li> 列表 1</li> <li> 列表 2</li> <li> 列表 3</li> ... </ul>- 有序列表:
- 按序号排序,且
<ol>中只能包含<li>标签,<li>中可以包含所有标签 有序列表都带有自己固有的样式,一般会用 CSS 修改
PRTCL // HTML - 按序号排序,且
- list1
- list2
- list3
- list4
- ...
- `中只能包含`
- ` `
- `,在`
- ` `
- `中可以包含所有标签 ```html
关注我们
- QQ:965704308@qq.com
- Github:whr2211204@outlook.com
- Mail:echohaoran@gmail.com ....
表单
- 用途:
- 收集用户信息
- 组成:
- 表单域
- 表单控件 ( 表单元素 )
- 提示信息
- 案例
<form>:用于定义表单域<action>:指定 URL 地址<method>:用于设置表单数据提交方式get 或者 post
PRTCL // HTML
- `<lable>`: - 绑定表单元素,点击`<lable>`中的文字也能实现焦点选中html男 PRTCL // PLAINTEXT- `lable`中的`for`与`input`中的`id`属性为对应关系- `select`下拉表单元素```html<select><option>option1</option><option selected="selected">option2</option><!---以上为默认显示选项---><option>option3</option>...</select>PRTCL // PLAINTEXT- `<select>`下至少包含两个`<option>`- 可以在`<option>`中定义一个`<selected="selected">`,即为默认选项- `textarea`:文本域元素```html<!---rows 显示的行数,cols 每行字数---><!---实际开发不会使用,都是采用 CSS 进行窗口设置 )---><textarea rows="3" cols="20">文本内容</textarea>```
R P
Rhine Lab Pioneer Division
Auth_Verified: 2026.04.08
Auth_Verified: 2026.04.08
