HTML基础|青训营笔记

用户1495213372768
121 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

HTML是什么

HTML(Hypertext Markup Language) 超文本标记语言
它不是编程语言，而是一种标记语言，用来告知浏览器如何组织页面。

HTML基础

基本语法

  • 标签和属性不区分大小写，建议小写
  • 不是所有的标签都有开始标签和结束标签
  • 空标签可以不闭合，如input、meta
  • 属性值建议用双引号包裹
  • 注释包裹于<!--和-->之间

HTML骨架如下：

<!DOCTYPE html>
<html><!--HTML页面根标签-->
    <head><!--包含文档的元数据-->
        <meta charset = "UTF-8"><!--指定文档字符编码为UTF-8-->
        <title>HTML语法</title><!--title是文档标题，注意：区别与body里的h1~h6标题-->
    </head>
    <body><!--页面主体部分-->
        <p><!--段落标签-->
            Hello World！
        </p>
    </body>
</html>

HTML文本基础

1. 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2. 段落标签

  • 使用<p>和</p>包裹一个段落，段落后自动换行；
  • <br>是换行标签

3. 文本格式

<b>加粗1</b> <strong>加粗2</strong>
<u>下划线1</u> <ins>下划线2</ins>
<i>斜体1</i> <em>斜体2</em>
<s>删除线1</s> <del>删除线2</del>
<b><u><i><s>混合效果直接嵌套即可</s></i></u></b>

效果如下所示： image.png

链接标签

<a>元素标签用来创建超链接：

  • 属性标签target的值:_self--默认值，在当前窗口打开网页；_blank--在新窗口打开网页
  • 开发网站初期还不确定跳转的链接，可以用#代替，表示空链接
            <a href = "https://juejin.cn/" target = "_blank">打开掘金社区</a>

结果如下所示：
打开掘金社区

媒体标签

常见媒体内容有图片、音频和视频等。

1. 图片标签

<img>元素标签用来展示图片：

  • alt是替换文本，当图片无法加载时才显示；
  • title是提示文本，当鼠标悬停在图片上时提示；
  • width和height分别设置图片宽度、高度，若只设置一项，另一项会等比例放缩；
  • src属性与连接标签里的href属性相似，包含了指向图片的相对/绝对路径

相对路径：

  • 同级目录的文件，直接写文件名或./+文件名；
  • 上级文件用../+文件名
            <img src = "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp
            /c95d8a072347456bbfacb9042800a4a9~tplv-k3u1fbpfcp-
            watermark.image?" alt = "这是图片" title = "miao~" width = "400">

结果如下所示：
这是图片

2. 音频标签

<audio>用来包含音频内容：

  • controls--显示播放控件；
  • autoplay--自动播放（部分浏览器不支持）；
  • loop--循环播放
            <audio src = "#" controls></audio>

效果如下所示：
image.png

3.视频标签

<video>用来包含音频内容：

  • 与<audio>的一样属性。注意：视频自动播放对于谷歌需配合muted实现静音播放
            <video src = "#" controls></video>

效果如下所示：
image.png

表单标签

表单标签包括很多,如input、button、select... 这里简单介绍一下input系列：

  • 通过type属性值不同，展示不同形式
  • <form>是表单域标签,action表示提交数据的地址
  • placeholder是占位符，用来提示输入
  • 单选框通过name的值来区分组别，相同name值的可以单选，checked表示默认选择
  • 文件标签中multiple表示上传多个文件，不加只能上传1个

总结

上面就是我参加青训营的第一篇笔记，如有不足，还请大家多多指正。 通过今天的学习我对HTML有了初步的了解，为了还需继续加油！

avatar
文章
阅读
粉丝