发表更新13 分钟读完 (大约1876个字)

前端三大件学习笔记

HTML

html参考手册

另一个html参考手册

HTML大小写不敏感，但是推荐使用小写

元素属性通常在开始标签中以键值对的形式存在

属性值通常使用双引号，不过单引号也没问题

属性名 说明 示例
id 元素的唯一标识符，用于CSS和JavaScript选择 <div id="header"></div>
class 元素的类名，用于CSS样式和JavaScript选择 <p class="text"></p>
style 内联样式，用于直接设置元素的CSS样式 <div style="color: red;"></div>
title 鼠标悬停时显示的提示信息 <a title="Go to homepage">Home</a>
href 超链接目标地址，常用于<a>元素 <a href="https://example.com">Visit</a>
src 媒体文件来源地址，常用于<img>和<script>元素 <img src="image.jpg" alt="Image">
alt 替代文本，图像无法显示时用于描述图像内容 <img src="image.jpg" alt="Description">
disabled 禁用表单控件，使其不可用 <input type="text" disabled>
readonly 设为只读，用户无法修改输入框内容 <input type="text" readonly>
checked 设为选中状态 <input type="checkbox" checked>
placeholder 输入框的占位符文本，提示用户输入内容 <input type="text" placeholder="Enter name">
maxlength 输入框允许的最大字符数 <input type="text" maxlength="10">
name 表单控件的名称，用于表单数据提交 <input type="text" name="username">
value 表单控件的默认值 <input type="text" value="Default">

HTML元素分类

元素类型 含义 常见元素 使用场景
块级元素 占据整行的元素，前后自动换行，可包含其他元素 <div>, <p>, <header>, <footer>, <section>, <article> 用于构建页面布局和结构，适合容纳其他元素
行内元素 仅占据内容所需宽度的元素，不自动换行，通常只能包含文本或行内元素 <span>, <a>, <em>, <strong>, <img> 用于修饰文本或嵌入小型内容，不打断文本流动
列表元素 用于创建项目列表，有序或无序 <ul>, <ol>, <li> 提供结构化方式展示项目集合，常用于导航菜单或项目清单
表格元素 用于显示二维数据表格，由行和列组成 <table>, <tr>, <td>, <th> 用于展示结构化数据，适合数据密集型内容展示
分割元素 用于创建视觉分隔，分隔内容块 <hr> 用于视觉分隔，不影响文档结构

注：列表元素、表格元素、分割元素均属于块内元素

常见块级元素

元素名 含义 常见使用场景 示例代码 注意事项
<div> 通用块级容器 布局、分组内容 <div>Content</div> 无语义，需配合CSS使用
<p> 段落 文本段落 <p>Paragraph</p> 自动添加上下间距
<header> 页眉或章节头部 页面或文章的头部 <header>Header</header> 语义化标签，增强可读性
<footer> 页脚或章节底部 页面或文章的底部 <footer>Footer</footer> 语义化标签，增强可读性
<section> 文档中的章节 内容分组 <section>Section</section> 需包含标题以增强语义
<article> 独立内容块 博客文章、新闻报道 <article>Article</article> 适合自包含的内容（可独立于页面其他部分存在）

常见行内元素

元素名 含义 常见使用场景 示例代码 注意事项
<span> 通用行内容器 文本样式、分组 <span>Text</span> 无语义，需配合CSS使用
<a> 超链接 链接到其他页面或资源 <a href="#">Link</a> 需设置href属性
<em> 强调文本 强调某部分文本 <em>Emphasized</em> 默认斜体显示
<strong> 重要文本 强调重要内容 <strong>Strong</strong> 默认加粗显示
<img> 图像 嵌入图片 <img src="image.jpg" alt="Image"> 需设置alt属性以增强可访问性

常见列表元素

元素名 含义 常见使用场景 示例代码 注意事项
<ul> 无序列表 项目列表 <ul><li>Item</li></ul> 列表项需使用<li>标签
<ol> 有序列表 排序项目列表 <ol><li>Item</li></ol> 列表项需使用<li>标签
<li> 列表项 列表中的单个项目 <li>List Item</li> 需嵌套在<ul>或<ol>中
<dl> 定义列表 术语及其定义 <dl><dt>Term</dt><dd>Definition</dd></dl> 需配合<dt>和<dd>使用

常见表格元素

元素名 含义 常见使用场景 示例代码 注意事项
<table> 表格 数据展示 <table><tr><td>Data</td></tr></table> 需配合<tr>, <td>使用
<tr> 表格行 表格中的一行 <tr><td>Data</td></tr> 需嵌套在<table>中
<td> 表格单元格 表格中的单个数据单元 <td>Data</td> 需嵌套在<tr>中
<th> 表格头单元格 表头数据单元 <th>Header</th> 默认加粗显示

用户交互表单元素

元素标签 用途 关键属性 示例
<form> 定义表单容器 action, method, enctype <form action="/submit" method="POST">
<input> 通用输入控件 type, name, placeholder <input type="text" name="username">
<textarea> 多行文本输入 rows, cols, maxlength <textarea rows="4"></textarea>
<select> 下拉选择框 multiple, size <select><option>选项1</option></select>
<button> 交互按钮 type (submit/reset/button) <button type="submit">提交</button>
<label> 关联输入项的标签 for (绑定输入项id) <label for="email">邮箱：</label>

表单常见属性

属性 适用元素 作用 示例
action <form> 指定表单提交的 URL action="/submit-data"
method <form> 提交方式 (GET/POST) method="POST"
enctype <form> 编码类型 (文件上传需用 multipart/form-data) enctype="multipart/form-data"
required 输入类元素 强制字段必填 <input required>
pattern 输入类元素 正则表达式验证 pattern="[A-Za-z]{3}"
autocomplete 输入类元素 自动填充 (on/off) autocomplete="off"
disabled 输入类/按钮元素 禁用元素 <button disabled>不可点击</button>
maxlength 文本输入类元素 输入最大字符数 <input maxlength="10">

注：
不建议使用<b></b>（bold），用<strong></strong>代替
不建议使用<i></i>（italic），用<em></em>代替
不建议使用<u></u>（underline），用CSS样式代替

一些示例

链接

1
<a href="url">Link text</a>

可以使用target属性指定打开方式

图像

1
<img src="url" />

可以使用alt属性指定用于替换图像的文本 <-这个文本将在图像无法渲染的时候告知用户是什么样的图像

CSS

1
<选择器>{[声明];[声明]}

每一个[声明]都是一个“属性-值”对（键值对）

例

1
2
3
4
p{
    color: red;
    text-align: center;
}

选择器的类别：

  • 简单选择器(根据名称、id、类来选取元素)
  • 组合器选择器(根据它们之间的特定关系来选取元素, 如：子元素、兄弟元素)
  • 伪类选择器(根据特定状态选取元素)
  • 伪元素选择器(选取元素的一部分并设置其样式)
  • 属性选择器(根据属性或属性值来选取元素)

添加CSS的方式

外部CSS

1
2
3
<head>
    <link rel="stylesheet" type="text/css"*href="font.css">
</head>

内部CSS

1
2
3
4
5
6
<head>
    <style>
        body { background-color: linen; }
        h1 { color: maroon; margin-left: 40px; }
    </style>
</head>

行内CSS

1
2
3
4
<body>
    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph. </p>
</body>

注：
CSS的优先级
行内 > 内部 > 外部 > 默认

CSS颜色

支持：RGB, HEX, HSL, RGBA, HSLA

当然你也可以直接指定一些预设好的颜色（指定name）

CSS边框

边框样式

1
container{border-style: <top> <rignt> <bottom> <left>}

一些可选值

  • dotted-定义点线边框
  • dashed-定义虚线边框
  • solid-定义实线边框
  • double-定义双边框

边框宽度

1
container{border-style: <top> <rignt> <bottom> <left>}

边框颜色

顺序同上；取值参考“CSS颜色”

注：
有一些属性支持边框的其中一条边
如border-top-style

CCS外边距（margin）

外边距合并：当两个margin相接（如上下相邻）会发生合并，合并后的值取较大的
外边距合并的意义是：外边距设定的是容器到容器的距离——原本设置容器1（距离20）容器2（距离10），如果不合并就距离30
详情参考

CSS内边距（padding）

内边距就是容器到边界的距离
从外到内: margin -> border -> padding -> container
像height/width这些参数设置的就是container的

CSS布局

CSS布局

JavaScript

#

评论

×