-
HTML 基础语法
表单标签
表单用于收集用户输入的数据，常见的表单元素有：
-
<input>标签：根据type属性值不同，可创建多种输入类型，如文本框（type="text"）、密码框（type="password"）、单选按钮（type="radio"）、复选框（type="checkbox"）、提交按钮（type="submit"）等。例如：
<input type="text" placeholder="请输入用户名"> <input type="password" placeholder="请输入密码"> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <input type="checkbox" name="hobby" value="reading">阅读 <input type="submit" value="提交">
2.
<textarea>标签：用于创建多行文本输入框，可通过rows和cols属性设置行数和列数。如：<textarea rows="5" cols="30">请在此处输入内容...</textarea>3.
<select>和<option>标签：<select>创建下拉菜单，<option>定义菜单中的选项。例如：<select> <option value="option1">选项1</option> <option value="option2">选项2</option> </select>
4.
<label>标签：用于关联表单元素和说明文字，方便用户点击文字激活表单元素。通过for属性与表单元素的id属性对应。例如：<label for="username">用户名：</label> <input type="text" id="username">
列表标签
-
无序列表：使用
<ul>标签，列表项用<li>表示。常用于展示没有顺序要求的列表。例如：
<ul> <li>列表项1</li> <li>列表项2</li> </ul>
2.有序列表：使用
<ol>标签，列表项同样用<li>。常用于展示有顺序的列表，如步骤等。例如：<ol> <li>第一步</li> <li>第二步</li> </ol>
3.自定义列表：使用
<dl>标签，<dt>定义术语，<dd>定义术语的描述。例如：<dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> </dl>
表格标签
-
<table>标签：定义表格整体。 -
<tr>标签：定义表格中的行。 -
<td>标签：定义表格中的单元格。例如：
<table border="1"> <tr> <td>第一列第一行</td> <td>第二列第一行</td> </tr> <tr> <td>第一列第二行</td> <td>第二列第二行</td> </tr> </table>
4.
<th>标签：定义表头单元格，文本通常加粗并居中显示。例如：<table border="1"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>内容1</td> <td>内容2</td> </tr> </table>
5.表格相关属性：
-
border：设置表格边框。 -
width和height：设置表格宽度和高度。 -
cellpadding：设置单元格内边距。 -
cellspacing：设置单元格间距。
链接标签
-
<a>标签：用于创建超链接。通过href属性指定链接目标地址。例如：
<a href="https://www.example.com">跳转到示例网站</a>2.链接的打开方式：通过target属性控制链接在何处打开，常见值有：
-
_self：在当前窗口打开（默认值）。 -
_blank：在新窗口打开。例如：
<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>3.锚点链接：可在页面内创建链接，实现页面内跳转。首先给目标位置元素添加
id属性，然后在链接的href属性中使用#id值。例如：<a href="#section1">跳转到第一部分</a> <div id="section1">这是第一部分内容</div>
图像标签
-
<img>标签：用于在网页中插入图像。通过src属性指定图像的路径。例如：
<img src="image.jpg" alt="示例图片">2.图像相关属性：
-
alt：图像无法显示时的替代文本，有助于搜索引擎优化和无障碍访问。 -
width和height：设置图像的宽度和高度。注意保持宽高比例，避免图像变形。
段落标签
-
<p>标签：用于定义段落。例如：
<p>这是一个段落。</p>2.段落标签会自动在其前后添加一些垂直间距，使文本以段落形式呈现。
标题标签
-
<h1>–<h6>标签：用于定义不同级别的标题，<h1>是最高级标题，<h6>是最低级。例如：
<h1>一级标题</h1> <h2>二级标题</h2>
2.标题标签有助于搜索引擎理解页面结构，同时也为页面提供层次分明的视觉效果。通常
<h1>在页面中只使用一次，用于页面的主要标题。CSS 基础语法
CSS 书写格式
CSS 由选择器和声明块组成，声明块包含一个或多个声明，每个声明由属性和值组成，以分号分隔。例如：
selector { property1: value1; property2: value2; }
例如，设置段落文本颜色为红色：
p { color: red; }
CSS 引入方式
-
内联样式：直接在 HTML 元素的
style属性中编写 CSS 样式。例如：
<p style="color: blue;">这段文本是蓝色的</p>2.内部样式表：在 HTML 文档的
<head>部分使用<style>标签定义 CSS 样式。例如：<head> <style> p { color: green; } </style> </head>
3.外部样式表：将 CSS 样式写在独立的
.css文件中，然后在 HTML 文档的<head>部分使用<link>标签引入。例如，在styles.css文件中：p { color: purple; }
在 HTML 文件中：
<head> <link rel="stylesheet" href="styles.css"> </head>
基础选择器
-
标签选择器：根据 HTML 标签名称选择元素。例如：
h1 { font-size: 24px; }
2.类选择器：通过元素的
class属性值选择元素，以点（.）开头。例如：.highlight { background-color: yellow; }
3.ID 选择器：通过元素的
id属性值选择元素，以井号（#）开头。一个页面中id值应唯一。例如:#main-content { border: 1px solid black; }
4.通配符选择器：使用星号（
*）选择所有元素。例如：* { margin: 0; padding: 0; }
字体属性
-
font-family：设置字体。例如：
body { font-family: Arial, sans-serif; }
2.
font-size：设置字体大小。例如：p { font-size: 16px; }
3.
font-weight：设置字体粗细。常见值有normal（正常）、bold（加粗）、lighter（更细）等，也可使用数字 100 – 900。例如：h1 { font-weight: bold; }
4.
font-style：设置字体样式，常见值有normal（正常）、italic（斜体）。例如：em { font-style: italic; }
文本属性
-
color：设置文本颜色。例如：
a { color: blue; }
2.
text-align：设置文本水平对齐方式，常见值有left（左对齐）、center（居中对齐）、right（右对齐）。例如：h1 { text-align: center; }
3.
text-decoration：设置文本装饰，常见值有none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。例如：a:hover { text-decoration: underline; }
4.
line-height：设置行高，即文本行与行之间的距离。例如：p { line-height: 1.5; }
-