前端知识大全之HTML(上)

简介: 前端包含什么?结构:HTML(Hyper Text Markup Language--超文本标记语言)页面原始和内容

一、概念讲解

1.前端包含什么?

结构:HTML(Hyper Text Markup Language--超文本标记语言)

页面原始和内容


表现:CSS

网页原始的外观和位置等页面样式(如颜色、大小等)


行为:JavaScript

网页模型的定义与交互,简称JS

2.编写的代码加载出来的原理?

      代码变成可视化的网页就是由浏览器去渲染和加载的。也就是说有浏览器就可以运行以html后缀的代码了

3.编写代码的工具?

推荐使用vscode

4.HTML标签两大类型?

双标签:需要包裹住代码使用的标签,有一对,开头标签和结尾标签很像,结尾标签前多了一个/


单标签:通常是不需要包裹的代码使用的,例如换行使用的
,水平线使用的


5.HTML标签关系?

1.父子关系(嵌套关系)

例如:


       


2.兄弟关系(并列关系)

二、HTML正文讲解

1.注释 ()

说明:方便他人阅读。快捷键:Ctrl+/

<!--  -->

2.标题标签 (h)

 说明:1标签文中最重要,字体最大,文字加粗,逐级递减。独占一行

  <h1>今天天气真好</h1>
  <h2>今天天气真好</h2>
  <h3>今天天气真好</h3>
  <h4>今天天气真好</h4>
  <h5>今天天气真好</h5>
  <h6>今天天气真好</h6>

3.段落标签 (p)

说明:一段文字的段落需要用到这个。独占一行

<p>我是一个段落</p>

4.换行标签 (br

说明:在需要换行的文字后面加上这个标签就可以实现了换行效果

<br> 

5.水平线标签 (hr

说明:在需要添加水平分割线的位置后面添加上这个标签就可以实现添加一条水平分割线的效果

<hr>

6.文本格式化标签(加粗、下划线、倾斜、删除线)

说明:两个显示效果都一样,区别就是下面完整单词的那个强调了重要性,是给其他程序员阅读代码时候看的。

  <b> 加粗</b>  
  <strong>加粗 </strong>
  <u>下划线 </u>
  <ins>下划线</ins>
  <i> 倾斜</i> 
  <em>倾斜</em>
  <s>删除线 </s>
  <del>删除线</del>

7.媒体标签之图片标签 (img src=)

说明:src内容是图片的相对路径


alt内容是文字,当图片加载不出来时候显示的文字


title内容是文字,把鼠标放到图片上面显示的文字


width和height内容是图片的宽和高,只设置其中一个,另一个会对比缩放,两个都设置有可能会图片扭曲

<img src="./图片.jpg" alt="加载不出来" title="鼠标放这里提示" width="" height="">

8.相对路径

说明:相对路径是一定可以找到的,就了解一下就好了,绝对路径这里要好好学习,根据图片和html文件所在位置的不同去选择不同的方式去寻找图片


当前文件代码同级别目录    图片.jpg" alt="">

当前文件代码下级目录   下级包名/图片.jpg" alt="">

当前文件代码上级目录   ../上级包名/图片.jpg" alt="">

9.媒体标签之音频标签(audio src=)

说明:src:里面/文件夹/可以直接找到音频。controls显示播放的控件: autoplay:自动播放 loop:循环播放

    <audio src=" /文件夹/音乐.mp3" controls autoplay loop></audio>

10.媒体标签之视频标签(video src=)

说明: src:里面/文件夹/可以直接找到音频。controls显示播放的控件: autoplay  muted:自动静音播放 loop:循环播放

ps:这个使用和音频差不多,自动静音播放谷歌浏览器支持,其他浏览器可能不支持

<video src="/文件夹/视频.mp4" controls autoplay muted loop></video></body>

11.超链接标签(a href=)

覆盖本页面跳转

    <a href="https://www.baidu.com/">点我啊</a>

不覆盖本页面跳转

    <a href="https://www.baidu.com/" target="_blank">点我啊</a>

说明:href内容是要跳转到的目标网站,标签之间夹着的就是点击内容,点击后跳转


ps:跳转到的目标网址可以是网址也可以是本地的



目录
相关文章
|
3天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
8天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
11天前
|
前端开发 JavaScript 数据安全/隐私保护
前端秘法基础式(HTML)(第二卷)
前端秘法基础式(HTML)(第二卷)
|
11天前
|
前端开发
前端秘法基础式(HTML)(第一卷)
前端秘法基础式(HTML)(第一卷)
|
11天前
|
前端开发 JavaScript Windows
前端秘法引言(配置vscode, 以及html的基础)
前端秘法引言(配置vscode, 以及html的基础)
162 0
|
13天前
|
移动开发 前端开发 HTML5
分享83个Html前端模板,总有一款适合您
分享83个Html前端模板,总有一款适合您
23 4
|
13天前
|
移动开发 前端开发 程序员
分享90个Html前端模板,总有一款适合您
分享90个Html前端模板,总有一款适合您
11 2
|
13天前
|
移动开发 前端开发 JavaScript
分享79个Html前端模板,总有一款适合您
分享79个Html前端模板,总有一款适合您
17 0
|
13天前
|
移动开发 开发框架 前端开发
分享78个Html前端模板,总有一款适合您
分享78个Html前端模板,总有一款适合您
11 0
|
14天前
|
移动开发 前端开发 JavaScript
分享76个Html前端模板,总有一款适合您
分享76个Html前端模板,总有一款适合您
18 5

相关产品

  • 云迁移中心

  • http://www.vxiaotou.com