HTML

简介: 网页由HTML(结构)、CSS(样式)、JavaScript(交互)构成。常用标签包括标题h1~h6、段落p、换行br、图片img、超链接a、音视频audio/video等,配合相对/绝对路径和快捷键操作,快速构建静态页面。
  1. Web网页的组成部分(Web标准)
  • HTML:定义网页的结构(网页有哪些内容组成)
  • CSS:定义网页的表现(网页好不好看?)
  • JavaScript:定义网页的行为,让网页和人可以交互
  1. 常用标签
    2.1 标题标签【常用】
  • 标签名:h1~h6
  • 例如:

    一级标题

    header
  • 特点:
    1. 默认字体加粗
    2. 默认换行,独占一行
    3. 字体逐渐变小,h1标题字体最大,h6标题字体最小
    4. 只有6级标题
      2.2 段落标签【常用】
  • 标签名:p标签
  • 例如:

    段落内容

    paragraph
  • 特点:
    1. 独占一行
    2. 每个段落之间一个空白行(大的简写)
      2.3 换行标签
  • 标签名:br标签--->单标签
  • 例如:我爱中国
    我爱中国 break row
  • 效果:
    [图片]
    2.4 水平线标签
  • 标签名:hr标签--->单标签
  • 例如:我爱中国
    我爱中国 horizontal rule
  • 效果:
    [图片]
    2.5 图片标签【常用】
  • 标签名:img标签
  • 例如:当图片不展示的时候替代文字
  • 属性:
    必须属性
    src:定义图片的地址
    属性的语法:属性名 = "属性值",多组属性用空格隔开。例如:
    可选属性:
    alt:图片无法显示的时候显示的文字
    title:鼠标移入图片上面的时候显示的文字
    width:图片的宽度,值为数字或者百分比
    height:图片的高度,值为数字或者百分比
  • 路径的分类
    相对路径:相对当前html文件所在的目录,从当前html文件所在目录中开始查找。【常用】
    ./ 表示当前目录,使用时可以省略不写。
    ../ 表示上一级目录,使用时必须写。
    绝对路径:带盘符开头的路径(不推荐,在真正的服务器是访问不了)
    例如:C:\Users\zhoux\Desktop\code\day01-html\images\cat.jpg
    网络路径:带http://或者 https://开头的路径
    例如:https://xxx.jpg
    2.6 超链接标签【常用】
  • 标签名:a标签
  • 例如:123 anchor hypertext reference
  • 属性:
    href:链接地址,点击之后要调整的网页地址。地址的写法参考img标签的src属性
    target:指定打开方式
    _self:默认值,当前窗口打开
    _blank:新窗口打开
    2.7 音频标签
  • 标签名:audio标签
  • 例如:
  • 属性:
    src:音频地址,支持格式:mp3、ogg、wav等。和图片的src属性写法一样【必须属性】
    controls:显示播放控件【必须属性】
    loop:循环播放
    autoplay:自动播放为了提升用户体验,有些浏览器会禁用此功能
    2.8 视频标签
  • 标签名:video标签
  • 例如:
  • 属性:
    src:视频地址,支持格式:mp4、ogg、webm等。和图片的src属性写法一样【必须属性】
    controls:显示播放控件【必须属性】
    loop:循环播放
    autoplay:自动播放为了提升用户体验,有些浏览器会禁用此功能
    width:视频宽度
    height:视频高度
    muted:静音播放
  1. 快捷键【常用】
  • 生成页面骨架:!+回车
  • 注释:ctrl+/ 或者 ctrl+shift+/
  • 向下复制一行:ctrl+D 复制当前行内容粘贴到下一行
  • 删除当前行:ctrl+Y
  • 向右缩进两个空格:tab
  • 向左缩进两个空格:shift+tab
  • 剪切:ctrl+X (windows快捷键)
  • 复制:ctrl+C (windows快捷键)
  • 粘贴:ctrl+V (windows快捷键)
  • 撤销:ctrl+Z (windows快捷键)
  • 保存:ctrl+S (windows快捷键)
目录
相关文章
|
2天前
标签
HTML列表标签用于整齐展示内容,包括无序、有序和自定义列表;表格标签用于数据展示或布局,通过table、tr、td等标签构建,支持单元格合并;表单标签用于收集用户数据,由form包裹input、select等表单项。
24 3
|
2天前
标题标签
本文介绍了HTML中h1至h6标题标签的使用规范:h1用于页面主标题或Logo,建议每页仅用一次;h2到h6无使用次数限制。各级标题字体逐级减小,独占一行,具有加粗效果,共六级,用于构建网页内容的层级结构。
36 2
|
2天前
|
前端开发 JavaScript
换行和水平线
本HTML示例展示了换行(`<br>`)与水平线(`<hr>`)标签的用法。通过实例介绍文本分行及页面分隔效果,并简要介绍了尤雨溪——Vue.js作者的背景,包括其开源贡献与职业经历,体现其在前端领域的影响力。(239字)
24 0
|
开发者 程序员
阿里云开发者档案能力鉴定说明
开发者能力鉴定是通过“技能测试”(通用技术能力)以及“阿里云认证”(阿里云解决方案能力)两个模块对您的技术能力进行一个较为全面的评估。
88565 8
|
3天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
2天前
|
云安全 人工智能 安全
阿里云2026云上安全健康体检正式开启
新年启程,来为云上环境做一次“深度体检”
1474 6
|
4天前
|
安全 数据可视化 网络安全
安全无小事|阿里云先知众测,为企业筑牢防线
专为企业打造的漏洞信息收集平台
1311 2
|
3天前
|
缓存 算法 关系型数据库
深入浅出分布式 ID 生成方案:从原理到业界主流实现
本文深入探讨分布式ID的生成原理与主流解决方案,解析百度UidGenerator、滴滴TinyID及美团Leaf的核心设计,涵盖Snowflake算法、号段模式与双Buffer优化,助你掌握高并发下全局唯一ID的实现精髓。
325 160
|
3天前
|
人工智能 自然语言处理 API
n8n:流程自动化、智能化利器
流程自动化助你在重复的业务流程中节省时间,可通过自然语言直接创建工作流啦。
374 4
n8n:流程自动化、智能化利器
|
12天前
|
机器学习/深度学习 安全 API
MAI-UI 开源:通用 GUI 智能体基座登顶 SOTA!
MAI-UI是通义实验室推出的全尺寸GUI智能体基座模型,原生集成用户交互、MCP工具调用与端云协同能力。支持跨App操作、模糊语义理解与主动提问澄清,通过大规模在线强化学习实现复杂任务自动化,在出行、办公等高频场景中表现卓越,已登顶ScreenSpot-Pro、MobileWorld等多项SOTA评测。
1492 7