HCI Week 36 - HTML and CSS tags
HCI Week 36 - HTML and CSS tags
HTML 标签及属性详解
1. 结构性标签
| 标签 | 功能 | 常见属性 | 示例 |
|---|---|---|---|
<html> | HTML 文档的根元素 | lang（语言）、dir（文本方向，ltr/rtl） | <html lang="en" dir="ltr"> |
<head> | 定义文档头部信息 | 无 | <head><meta charset="UTF-8"></head> |
<body> | 定义页面主体 | onload（加载时触发）、onunload（卸载时触发） | <body onload="init()"> |
<div> | 定义文档块状容器，用于分组和布局 | class、id、style | <div class="container" id="main"></div> |
<span> | 内联容器，用于样式或标记部分文本 | class、id、style | <span style="color:red;">Important</span> |
<section> | 表示页面的分区或章节 | class、id | <section id="introduction"></section> |
<article> | 定义独立的内容块 | class、id | <article><h2>News</h2></article> |
<header> | 定义页面或章节的头部内容 | class、id | <header><h1>Title</h1></header> |
<footer> | 定义页面或章节的尾部内容 | class、id | <footer>Copyright 2024</footer> |
<main> | 页面主内容 | class、id | <main role="main">Content</main> |
<aside> | 侧边栏内容 | class、id | <aside>Related Links</aside> |
2. 文本标签
| 标签 | 功能 | 常见属性 | 示例 |
|---|---|---|---|
<h1> - <h6> | 标题标签，用于定义分级标题 | class、id | <h1 id="main-title">Welcome</h1> |
<p> | 段落 | class、id、style | <p style="font-size:14px;">Hello</p> |
<a> | 超链接 | href（目标链接）、target（打开方式）、rel（关系） | <a href="https://example.com" target="_blank" rel="nofollow">Link</a> |
<strong> | 强调重要文本，通常显示为加粗 | 无 | <strong>Important</strong> |
<em> | 表示强调文本，通常显示为斜体 | 无 | <em>Emphasized</em> |
<br> | 换行 | 无 | <p>Line 1<br>Line 2</p> |
<hr> | 水平分割线 | class、id | <hr style="border:1px solid #ccc;"> |
3. 表单标签
| 标签 | 功能 | 常见属性 | 示例 |
|---|---|---|---|
<form> | 定义表单 | action（提交地址）、method（GET/POST）、target | <form action="/submit" method="POST"></form> |
<input> | 定义输入字段 | type（文本、密码、复选框等）、value、placeholder、required | <input type="text" placeholder="Enter name"> |
<textarea> | 多行文本输入 | rows（行数）、cols（列数）、maxlength | <textarea rows="4" cols="50"></textarea> |
<button> | 按钮 | type（提交/重置）、disabled（禁用） | <button type="submit">Submit</button> |
<select> | 下拉菜单 | name、multiple（允许多选）、disabled | <select><option>Option 1</option></select> |
<option> | 下拉菜单选项 | value | <option value="1">Option 1</option> |
<label> | 绑定输入字段的描述 | for（绑定 input 的 id） | <label for="name">Name:</label> |
4. 媒体标签
| 标签 | 功能 | 常见属性 | 示例 |
|---|---|---|---|
<img> | 插入图片 | src（图片地址）、alt（替代文本）、width、height | <img src="image.jpg" alt="Example" width="300"> |
<audio> | 插入音频 | src（音频地址）、controls、autoplay、loop | <audio src="audio.mp3" controls></audio> |
<video> | 插入视频 | src、controls、autoplay、loop | <video src="video.mp4" controls></video> |
<iframe> | 嵌入其他网页 | src（嵌入链接）、width、height | <iframe src="https://example.com" width="600"></iframe> |
CSS 属性详解
1. 文本与字体
| 属性 | 功能 | 示例 |
|---|---|---|
font-size | 设置字体大小 | font-size: 16px; |
font-family | 设置字体系列 | font-family: Arial, sans-serif; |
font-style | 字体样式（斜体/正常） | font-style: italic; |
text-align | 文本对齐方式 | text-align: center; |
text-transform | 文本大小写转换 | text-transform: uppercase; |
2. 盒模型
| 属性 | 功能 | 示例 |
|---|---|---|
margin | 设置外边距 | margin: 10px; |
padding | 设置内边距 | padding: 20px; |
border | 设置边框 | border: 1px solid black; |
box-shadow | 添加盒子阴影 | box-shadow: 5px 5px 10px gray; |
3. 背景与布局
| 属性 | 功能 | 示例 |
|---|---|---|
background-color | 设置背景颜色 | background-color: #f0f0f0; |
background-image | 设置背景图片 | background-image: url('bg.jpg'); |
display | 布局模式（块、内联、弹性布局） | display: flex; |
position | 定位方式（静态/相对/绝对/固定） | position: absolute; |
z-index | 层级控制 | z-index: 10; |
This post is licensed under CC BY 4.0 by the author.