当前位置：首页 > 行业动态 > 正文

html简单网站

HTML简单网站由基础结构组成，含DOCTYPE、head、body，使用div、ul等标签布局，CSS美化

HTML简单网站制作指南

HTML基础结构

DOCTYPE声明

<!DOCTYPE html>

声明文档类型,告知浏览器使用HTML5标准解析。

html标签

<html lang="zh-CN">
</html>

根元素,设置语言属性为中文。

head标签

<head>
    <meta charset="UTF-8">网页标题</title>
</head>

包含元数据：字符编码设置、页面标题。

body标签

<body>
    <!-页面内容 -->
</body>
```区域。
## 二、常用HTML标签
| 标签类型 | 标签示例 | 功能说明 |
|---------|---------|---------|标签 | `<h1>一级标题</h1>` | 定义6级标题（h1-h6） |
| 段落标签 | `<p>文本段落</p>` | 定义段落 |
| 链接标签 | `<a href="url">链接文字</a>` | 创建超链接 |
| 图片标签 | `<img src="image.jpg" alt="描述">` | 插入图片 |
| 列表标签 | `<ul><li>列表项</li></ul>` | 无序列表<br>`<ol><li>...</li></ol>`有序列表 |
| 表格标签 | `<table><tr><td>单元格</td></tr></table>` | 创建表格 |
## 三、页面布局方式
 1. 表格布局
```html
<table border="1">
  <tr>
    <td colspan="2">头部</td>
  </tr>
  <tr>
    <td>左侧</td>
    <td>右侧</td>
  </tr>
  <tr>
    <td colspan="2">底部</td>
  </tr>
</table>

通过表格实现简单页面布局,使用rowspan/colspan合并单元格。

CSS布局

<div style="width:80%;margin:auto;">
  <div style="float:left;width:30%">侧边栏</div>
  <div style="float:right;width:70%">主内容区</div>
</div>

使用div+CSS实现更灵活的布局方式。

样式美化方法

内联样式

<h1 style="color:red;text-align:center;">标题</h1>

直接在标签内设置样式。

内部样式表

<style>
    body {font-family:Arial;}
    .container {width:900px;margin:0 auto;}
</style>

在head标签内定义全局样式。

外部样式表

<link rel="stylesheet" href="style.css">

引用独立CSS文件进行样式管理。

常见问题与解答

Q1：如何在网页中嵌入视频？
A1：使用video标签：

<video width="600" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频
</video>

支持多种视频格式和控件选项。

Q2：怎样让网页在不同设备上都能良好显示？
A2：使用响应式设计：

  1. 设置viewport元标签： 
    <meta name="viewport" content="width=device-width,initial-scale=1">
  2. 使用百分比宽度布局
  3. 添加媒体查询： 
    @media (max-width:600px){
  .container{width:100%;}
简单
0

相关文章