HTML总结

98 阅读4分钟

HTML概述

HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。通过使用不同的标签,HTML允许开发者定义网页的内容结构、展示方式和交互功能。

基本结构

  • 文档类型声明 (<!DOCTYPE html>): 每个HTML文档应该以文档类型声明开始,告诉浏览器这是一个HTML5文档。
  • HTML标签 (<html>): 是整个HTML文档的根元素。
  • 头部标签 (<head>): 包含文档的元数据,如字符编码声明 (<meta charset="UTF-8">)、标题 (<title>) 等。
  • 主体标签 (<body>): 包含实际展示给用户的内容,如文本、图片、表格等。

常用标签

  • 段落 (<p>): 用于定义文本段落。

  • 超链接 (<a>): 创建指向其他网页或资源的链接。

  • 图像 (<img>): 在网页中插入图像。

  • 列表:

    • 无序列表 (<ul>): 使用 <li> 标签定义列表项。
    • 有序列表 (<ol>): 同上,但列表项会自动编号。
  • 块级容器 (<div>): 定义一个块级区域,常用于布局。

  • 行内容器 (<span>): 定义一个行内区域,常用于应用样式。

  • 结构化标签:

    • <header>: 页面或部分的头部。
    • <footer>: 页面或部分的底部。
    • <nav>: 导航链接的集合。
    • <article>: 独立的内容块,如博客文章。
    • <aside>: 辅助信息或侧边栏。
  • 表格:

    • <table>: 表格容器。
    • <tr>: 表格行。
    • <td>: 表格单元格。
    • <th>: 表头单元格。
  • 表单:

    • <form>: 用于收集用户输入的数据。
    • <input>: 不同类型的输入字段,如文本框、按钮等。
    • <button>: 按钮。

属性

  • class: 为元素指定一个类名,用于CSS选择器。
  • id: 为元素指定一个唯一标识符。
  • src: 指定图像、脚本或视频文件的路径。
  • href: 指定超链接的目标URL。
  • alt: 当图像无法显示时的替代文本。
  • type: 指定元素的内容类型,常用于脚本和链接。
  • name: 表单元素的名称,用于提交数据时引用。
  • value: 表单元素的初始值。

注释

在HTML中,注释用来解释代码的一部分,不会被浏览器解析。注释的格式为 <!-- 这是一个注释 -->

语义化标签

HTML5 引入了许多新的语义化标签,这些标签有助于搜索引擎优化,并使页面结构更加清晰:

  • <article>: 独立的内容块,如博客文章。
  • <aside>: 与主要内容相关的辅助信息。
  • <details>: 创建可展开或折叠的内容块。
  • <figure>: 自定义媒体内容,通常配合 <figcaption> 使用。
  • <main>: 页面的主要内容。
  • <mark>: 高亮显示文本。
  • <nav>: 导航链接集合。
  • <section>: 文档中的章节、页眉或页脚。
  • <time>: 时间日期。 二、文件规范**

**2.1  文件命名规则


    文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

 

a.  HTML的命名原则
引文件统一使用index.htm  index.html  index.asp文件名(小写)
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如:
关于我们 \ aboutus
信息反馈 \ feedback
产 品 \ product

如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;
每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm  index.html  index.asp

b.  图片的命名原则

图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质
例如:广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名: banner
标志性的图片取名为: logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
装饰用的照片我们取名: pic
不带链接表示标题的图片我们取名: title
范例:banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif   logo_national.gif   pic_people.jpg**
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如:menu1_on.gif  menu1_off.gif


**c.  javascript的命名原则
例如:广告条的javascript文件名为 ad.js  弹出窗口的javascript文件名为 pop.js

d.  动态语言文件命名原则
以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。
范例:register_form.asp   register_post.asp   topic_lock.asp



2.2  文件存放位置 规范****


_Root  
 cn存放中文HTML文件
 en存放英文HTML文件
 flash存放Flash文件
 images存放图片文件
 imagestudio存放PSD源文件
 flashstudio存放flash源文件
 inc存放include文件
 library存放DW库文件
 media存放多媒体文件
 project存放工程项目资料
 temp存放客户原始资料
 js存放JavaScript脚本
 css存放CSS文件