当前位置: 首页 > news >正文

(前端基础)HTML(一)

前提

W3C:World Wide Web Consortium(万维网联盟)

Web技术领域最权威和具有影响力的国际中立性技术标准机构

其中标准包括:机构化标准语言(HTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

HTML:超文本标记语言

建立html文件

利用浏览器打开该文件

若出现错误提示:

  • 打开文件设置:

  • 选择Tools:

HTML基本结构

  • DOCTYPE:告诉浏览器,我们要使用什么规范
  • <html>:整个网页
  • head:网页头部
  • body:网页主体
  • title:网页标题
  • meta:描述性标签,用来描述网站的信息

Ctrl+/:html文件的注释快捷键 

meta标签使用:

如网易云:

 网页基本标签

  • 标题标签<h1>
  • 段落标签<p>
  • 换行标签<br/>
  • 水平线标签<hr/>
  • 字体样式标签<strong>、<em>
  • 注释和特殊符号&nbsp;  &gt;    &lt;    &copy;

块元素:无论内容多少,该元素独占一行(p、h1-h6)

行内元素:内容撑开宽度,左右都是行内元素的可以在排在一行(a、strong、em)

图像标签

常见图像格式JPG、GIF、PNG、BMP

利用img标签嵌入图像

<img src="图像地址" alt="图像的替换文字" title="鼠标悬停时提示文字" width="图像宽度" height="图像高度"/>

该处选择资源目录下的图片文件中的图片进行测试

src:图片地址

相对地址:../resources/image/apple.jpg

绝对地址:D:\学习资料\java\前端\resources\image\apple.jpg

图片不存在的情况:

链接标签

文本、图像超链接

<a href="链接路径" target="链接在哪个窗口打开"></a>

href:可以是html文件、URL地址

target:链接在哪个窗口打开

  • _blank:在新标签中打开
  • _self:默认值。在自己的网页中打开

锚标签

使用方法:

  • 需要一个锚标记
  • 跳转到标记#

页面跳转:

 

功能性链接

邮件链接:mailto:邮箱地址

列表标签

列表:信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者更快捷地获得相应的信息。

列表分类:

  • 无序列表
<ol><li></li>
</ol>
  • 有序列表
<ul><li></li>
</ul>
  • 定义列表
<dl><dt>列表名称</dt><dd>列表内容</dd>
</dl>

 表格

 表格简单通用,结构稳定。

基本结构有:单元格、行、列、跨行、跨列

如下:

  •  表格标签:table
  • 行row:tr
  • 列:td
  • 边框:border
  • 跨行:colspan,参数是跨的列数
  • 跨列:rowspan,参数使跨的行数
<table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

 媒体元素

视频元素标签:video

音频元素标签:audio

  • 属性src:所要选中的文件位置
  • 属性controls:控制播放
  • 属性autoplay:自动播放

<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>

 扩展:页面结构分析

header标题头部区域内容(页面或页面中的一块区域)
footer标记脚部区域内容(整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(侧边栏
nav导航类辅助内容

iframe内联框架

<iframe src="页面地址" name="框架标识名" frameborder="0"></iframe>

使用方法:

width:宽度

height:高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>

该处跳转到百度

 也可以通过a标签往iframe加东西

name:框架标识名

target:链接在哪个窗口打开

http://www.lryc.cn/news/537782.html

相关文章:

  • Linux文件管理:硬链接与软链接
  • pnpm, eslint, vue-router4, element-plus, pinia
  • 在软件产品从开发到上线过程中,不同阶段可能出现哪些问题,导致软件最终出现线上bug
  • Spring Boot中如何自定义Starter
  • 制作Ubuntu根文件
  • SpringBoot快速接入OpenAI大模型(JDK8)
  • UniApp 中制作一个横向滚动工具栏
  • react中如何获取真实的dom
  • 5G与物联网的协同发展:打造智能城市的未来
  • 【Qt】实现定期清理程序日志
  • git bisect 使用二分法查找引入错误的提交
  • 一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法
  • 【弹性计算】容器、裸金属
  • Golang关于结构体组合赋值的问题
  • DeepSeek vs ChatGPT:AI对决中的赢家是……人类吗?
  • 新建github操作
  • Spring Boot 携手 DeepSeek:开启智能交互新时代
  • 基于SSM+uniapp的数学辅导小程序+LW示例参考
  • HTML的入门
  • Windows 安装 GDAL 并配置 Rust-GDAL 开发环境-1
  • IntelliJ IDEA 接入 AI 编程助手(Copilot、DeepSeek、GPT-4o Mini)
  • 【金三银四】分享数据库笔试题及答案~~
  • 3.1 AI Agent产品管理革命:从愿景定义到用户价值交付的全链路方法论
  • MySQL常见错误码及解决方法(1130、1461、2003、1040、2000、1049、1062、1129、2002、1690等)
  • Rhel Centos环境开关机自动脚本
  • 2D 游戏艺术、动画和光照
  • 基于SSM+uniapp的鲜花销售小程序+LW示例参考
  • 【第3章:卷积神经网络(CNN)——3.1 CNN的基本结构与工作原理】
  • java原子操作类实现原理
  • 网络安全-攻击流程-传输层