登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›HTML Learn Data Day 0

HTML Learn Data Day 0

挚魉 昨天 22:45
程序园永久vip申请，500美金$，无限下载程序园所有程序/软件/数据/等
今天想着建一个网站，因为想自己做一个个人博客，顺便给实验室做一个主页
于是就有了今天的html学习记录
2. HTML 基础骨架

HTML (HyperText Markup Language) 是网页的骨架。一个标准的 HTML5 页面结构如下：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>网页标题</title>
  7.     </head>
  8.    
  9.     <body>
  10.         
  11.     </body>
  12. </html>
复制代码
核心结构解析


  • ：文档类型声明，告诉浏览器这是一个 HTML5 网页。
  • ：根标签，所有内容都包裹在这里面。lang="zh-CN" 表示网页语言为简体中文。
  • ：头部标签。存放网页的元数据（如字符集、标题、CSS 链接），内容不会直接显示在网页正文中。
  • ：主体标签。存放网页真正显示给用户看的内容（文字、图片、视频等）。
关于标签语法：
HTML 标签主要分为两类：

  • 双标签：成对出现，有开始和结束，如 ...。
  • 单标签：不需要结束标签，通常用于空元素，如
    、<hr>、<img>。
3. 常用文本标签

3.1 布局与排版

标签类型作用备注 ~ 双标签标题h1 级别最高（字最大），h6 最小。h1 一个页面通常只用一次。
双标签段落 (Paragraph)独占一行，段落之间会有默认间距。
单标签换行 (Break)强制文字换行。<hr>单标签水平线 (Horizontal Rule)显示一条分割线。3.2 文本格式化（语义化标签）

HTML5 提倡使用具有语义的标签，而不仅仅是修改样式。
标签效果语义/作用<strong>加粗表示重要的内容（比 <b> 更好）。<em>倾斜表示强调的内容（比 <i> 更好）。下划线表示新插入的内容（Insert）。删除线表示已删除的内容（Delete）。4. 超链接与路径

4.1 超链接

超链接是互联网的核心，使用  (Anchor) 标签。
  1. 点击播放视频
复制代码

  • href (必填)：Hypertext Reference，指定跳转的目标地址。

    • 如果暂时不知道填什么，可以用 # 占位（空链接）。

  • target：指定窗口打开方式。

    • _self：默认值，在当前窗口打开。
    • _blank：在新标签页打开。

4.2 路径知识 (Path)

在引用图片、音频或链接时，路径非常重要。

  • 相对路径（推荐）：以当前文件为基准。

    • . 或 ./ ：代表当前目录（例如 ./image/pic.png）。
    • .. 或 ../ ：代表上一级目录（父级目录）。
    • / ：表示进入下一级目录。

  • 绝对路径：从盘符或域名开始的完整路径（例如 C:/Users/Desktop/img.png 或 http://www.baidu.com），通常不建议在本地开发中使用盘符路径。
5. 多媒体标签

5.1 图像 <img>
  1. <img src="https://www.cnblogs.com/image/photo.png" alt="图片描述" title="提示文字" width="500">
复制代码
属性作用重要性src图片的路径。必填alt图片加载失败时显示的替换文本（对 SEO 和盲人读屏很重要）。推荐title鼠标悬停在图片上时显示的提示文字。可选width / height设置宽高。只设置其中一个时，另一个会按比例自动缩放。可选5.2 音频  与 视频

HTML5 原生支持音视频播放，无需 Flash。
  1. [/code][table][tr]属性作用说明[/tr][tr][td]src[/td][td]资源路径[/td][td]支持 mp3, ogg, mp4, webm 等格式。[/td][/tr][tr][td]controls[/td][td]显示播放控件[/td][td]如果不写，用户无法看到暂停/进度条。[/td][/tr][tr][td]loop[/td][td]循环播放[/td][td]播放结束后自动重播。[/td][/tr][tr][td]autoplay[/td][td]自动播放[/td][td][b]注意[/b]：大部分浏览器默认禁止有声视频自动播放。[/td][/tr][tr][td]muted[/td][td]静音[/td][td][b]技巧[/b]：设置静音后，通常可以实现视频的自动播放。[/td][/tr][/table][indent][b]提示[/b]：像 controls、loop、autoplay 这种属性，如果属性名和属性值一样（例如 loop="loop"），在 HTML5 中可以简写，直接写属性名即可。
  2. [/indent][size=5]全代码：[/size]
  4. [code]<!DOCTYPE html>
  5. <html lang = "ch">
  6. <head>
  7.         <meta charset="utf-8">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <title>训练标题</title>
  10. </head>
  11. <body>
  12.         <h1>is as base web struct haha</h1>
  13.        
  14.         <h1>测试换行和分割</h1>
  15.         <hr>
  16.        
  17.         <p>
  18.                 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
  19.         </p>
  20.         <p>这是好东西</p>
  21.        
  24.        
  25.         <strong>strong 这是加粗</strong>
  26.        
  28.         <em>em 这是倾斜</em>
  29.        
  31.         <ins>ins 这是下划线</ins>
  32.        
  34.         <del>del 这是删除线</del>
  35.        
  37.        
  38.         <img src="https://www.cnblogs.com/image/成品3.png" alt="图片加载不出显示的文字" title="鼠标悬停在上面显示的东西" width = 1000>
  40.        
  42.         <strong> 相对路径的知识:</strong>
  44.         用.表示当前文件夹，./即进入当前文件夹
  45.                
  46.         用..表示父级文件夹， ../即进入父级文件夹
  48.         /表示进入的意思
  50.         如果是从盘符开始的路径，则表示绝对路径
  53.         点击播放视频
  54.        
  55.        
  56.        
  58.         </audio>
  59.        
  60. </body>       
  61. </html>
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
HTMLLearnDataDay
1.png

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
挚魉
昨天 22:45

0

粉丝关注

16

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫