HTML基础

郁金香~~~

已于 2025-05-26 16:24:18 修改

阅读量234

点赞数 5

CC 4.0 BY-SA版权

文章标签： html css 前端

于 2025-05-26 13:11:15 首次发布

本文链接：https://blog.youkuaiyun.com/2401_88894736/article/details/148227684

HTML基础技术文章大纲

一、HTML简介

什么是HTML
HTML的发展历史
网页基本构成原理
开发环境准备

二、HTML文档结构

<!DOCTYPE>声明
<html>根元素
<head>头部元素
- <title>标签
- <meta>标签
- <link>标签
<body>主体内容

三、常用HTML标签

文本格式化标签
- 标题<h1>-<h6>
- 段落<p>
- 文本修饰标签（<strong>, <em>, <span>等）
列表类型
- 无序列表<ul> (应用：新闻列表;ul里面包括li里面包括任何的内容)
- 有序列表<ol>(应用：排行榜;ol里面包括li里面包括任何的内容当使用数字的时候，只能以1开头;属性 :type 根据你想要的类型来进行排序)
- 定义列表<dl>(网页的底部dl dt dd)
媒体元素
- 图片<img>(语法：<img src="照片的地址" alt:"">)
- 音频<audio>()语法<audio src:"音频的地址">
- 视频<video>()语法<video src:"视频的地址">
超链接<a>
- 页面跳转()语法<a herf:"跳转的网页">

四、表格与表单

表格结构
- 作用：在网页中整齐的展示数据和整理数据
  table：表示的就是表格的整体
  tr：表格的每一行，包裹多个td
  td：单元格，内容
  属性：设置表格的基本展示效果
  border：边框(none)
  宽度:width
  高度:heigh
  表格的标题：caption 居中但是配合标题标签来使用
  表头的单元格标签 th 加粗居中
  表格的结构标签
  头部标签 thead
  身体标签 tbody
  尾部标签 tfoot
  合并单元格标签
  上下合并按照上面的内容，去掉下面的内容
  rowspan
  左右合并按照左边的内容，去掉右边的内容
  colspan
表单元素
- form表单用来收集用户的信息
  input标签
  属性：
  type=text 文本格式 placeholder：水印输出
  type=“password” 密码框
  type=“radio” name=“gender” 单选框当必须只有一个值被选中的时候我们就给他加属性name然后起一样的名字
  type=“checkbox” 多选框
  默认选中 checked
  input type=“file” 上传文件
  input type=“submit” “reset” “button” 提交重置没作用
  按钮标签 button
  双标签需要标签之间加内容还有用type声明他的属性
  下拉菜单
  select>option 表示就是下拉菜单
  文本域标签
  textarea 通过rows和cols设置宽和高
  form表单提交到新的页面用来统计信息
  提交方式 method: get携带的数据量小，可能会导致信息的泄漏 post：携带的信息量大，不会造成信息的泄漏
  action=“属性值” 提交到哪一个具体的页面中
表单属性
- action与method
- 输入验证属性
- 数据提交方式

五、语义化标签

HTML5新特性
布局标签
- <header>
- <nav>
- <article>
- <section>
语义化优势
- 可访问性
- SEO优化

六、最佳实践

代码规范
- 嵌套规则
- 属性书写顺序
调试工具
- 开发者工具使用
- 代码验证
SEO基础
- meta标签优化
- 标题层级结构
- 图片alt属性

七、总结与扩展

HTML学习路线
相关技术栈衔接建议
推荐学习资源

附录：简单网页结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <nav>
        <a href="#about">关于</a>
    </nav>
    <main>
        <article>
            <h2>最新文章</h2>
            <p>这里是文章内容...</p>
        </article>
    </main>
</body>
</html>