HTML | 青训营笔记

Yanyy
507 阅读4分钟

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

课堂笔记

一、课堂重点内容

  1. 前端工作的定义
  2. 前端技术拆解与定义
  3. HTML作用定义
  4. HTML语义化

二、详细知识点介绍

什么是前端

前端工程师是使用web技术栈解决多端图形用户界面交互的工程师。

前端技术栈的拆解

HTML、CSS、JavaScript三者被称为前端三要素，通过HTTP网络传输协议与服务器端联系。

  • HTML：结构层，搭建网页结构
  • CSS：样式层，修饰网页样式
  • JavaScript：行为层，描述网页行为
HTML是什么
  • HTML指超文本标记性语言，区别于编程语言。
  • 它通过一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接成一个逻辑整体。
  • 超文本包括文字信息外，还包括图片、标题、链接、表格等格式的信息媒体。
HTML语义化

什么是HTML语义化？

  • 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和及其很好的解析。

三、实践练习例子

HTML是由一系列标签组成的，常见标签有：head、body、h1-h6、p、input、div、ol、ul、td、dd、img、a。

  1. head标签与body标签：:head存放不会在页面中显示出来的内容，比如title、指向css的链接而body标签存放的则是展示在页面上的内容。
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个网页title</title>
</head>

<body>
    这里是网页body中的内容
</body>

</html>

QQ图片20230116115253.png

  1. h1-h6标签：标题标签，h1-h6逐渐减小，且一个页面只能有一个h1标签，若重复出现，网页会分不清主次内容。
<body>
    <h1> 一级标签 </h1>
    <h2> 二级标签 </h2>
    <h3> 三级标签 </h3>
    <h4> 四级标签 </h4>
    <h5> 五级标签 </h5>
    <h6> 六级标签 </h6>
</body>

屏幕截图_20230115_115400.png

  1. p标签：段落标签，可存放大段落的文字。使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者
    元素。
<body>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
</body>

屏幕截图_20230115_122455.png

  1. input标签：用于接受来自用户的数据，调节type参数，可以使用各种类型的输入数据和控件小部件。
<body>
    <!-- 短文本输入框 -->
    <input type="text" placeholder="这是一个输入框">
    <br>
    <br>
    <!-- 按钮 -->
    <input type="button" value="按钮">
    <br>
    <br>
    <!-- 单选框 -->
    <input type="radio">
    <br>
    <br>
    <!-- 复选框 -->
    <input type="checkbox">
    <br>
    <br>
    <!-- 日期 -->
    <input type="date">
    <br>
    <br>
    <!-- 数字 -->
    <input type="number" placeholder="请输入数字">
    <br>
    <br>
    <!-- 密码框 -->
    <input type="password" placeholder="请输入密码">
    <br>
    <br>
    <!-- 范围选取框 -->
    <input type="range">
</body>

屏幕截图_20230115_124328.png

  1. ol、ul与li标签：ol是有序列表、ul是无序列表,ol与ul中只能嵌套li标签，但li标签中可以嵌套其他标签。
<body>
    <ol>
        <li>有序标签内容一</li>
        <li>有序标签内容二</li>
        <li>有序标签内容三</li>
    </ol>
    <ul>
        <li>无序标签内容一</li>
        <li>无序标签内容二</li>
        <li>无序标签内容三</li>
    </ul>
</body>

屏幕截图_20230115_124336.png

  1. td、dd标签：td和dd标签一起共同组成自定义标签，td中的内容相当于标题，dd中的内容相当于对标题的具体描述。td标签也可以和th、tr标签一起使用组成一个表格。
<body>
    <td>
        光头强
        <dd>性别：男</dd>
        <dd>职业：伐木工</dd>
        <dd>上级：李老板</dd>
    </td>
</body>

屏幕截图_20230115_125042.png

  1. img标签：
    • src表示图片存放的地址，可以是绝对路径也可以是相对路径
    • alt参数表示当图片加载失败时，以文字说明的方式表示这是一张什么图片，参数内容即为图片描述
    • width参数设置图片的宽度，同样的height参数设置图片的高度，同时设置两个蚕食可能会导致图片变形，建议选其一设置，另一参数会等比例由系统适配，避免图片变形
    • border参数设置图片的边框大小。
<body>
    <img src="图片存放地址" alt="电脑壁纸" title="电脑壁纸" width="500"
        border="15" />
</body>

image.png

8.a标签：链接标签，可链接向外部标签、内部标签、空链接、下载链接以锚点链接链接
    href后接链接地址
    target参数表示点击连接后页面的跳转是在当前页面实现还是新建页面实现跳转，_self表示在当前页面打开而_blank表示在新的页面打开。

<body>
    <h4>外部链接</h4>
    <a href="https://www.qq.com" target="_self"> 腾讯</a>
    <h4>内部链接</h4>
    <a href="07-图像标签.html" target="_blank">图片标签</a>
    <h4>空链接</h4>
    <a href="#">空链接</a>
    <h4>下载链接</h4>
    <a href="D:\ProgramFiles\VSCode\VSCodeWorkplace\IMG_0954(20221105-141602).zip">下载</a>
    <h4>网页元素链接</h4>
    <a href="https://www.qq.com"><img src="IMG_0954(20221105-141602).JPG" width="500"/></a>
    <h4>锚点链接</h4>
    <a href="#to"></a>
</body>

屏幕截图_20230115_133403.png

更多标签的更多解释见HTML元素参考

四、课后个人总结

  1. 编程语言、标记语言、脚本语言的区别

    • 编程语言：语言编译执行，本身具有逻辑性和行为能力的语言，通常用于向机器发出一系列复杂的指令。比如java、C、C++。

    • 标记语言：被读取的，本身没有行为能力的语言，通常用于格式化和链接文本。比如HTML、XML、XHTML。

    • 脚本语言：需要解释执行，本身具有逻辑性和行为能力的语言，是为了缩短传统的编写-编译-链接-运行过程而创建的计算机编程语言，让程序员快速完成程序的编写工作。比如JavaScript、python、php。

avatar
文章
阅读
粉丝