HTML基础｜ 青训营笔记

Lattic丶
191 阅读8分钟

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

认识前端。

前端工程师，是通web技术栈来解决多端图形用户界面交互问题的工程师。今天我们就从web技术中最简单的HTML来学起

前端技术栈
  1. HTML负责页面结构和内容。
  2. CSS来负责页面的样式。
  3. JavaScript来负责页面的行为与页面的响应。
  4. 网络协议负责前端信息与服务器端的交互。

认识HTML

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

如果你想开始设计你自己的网页，那就从HTML开始吧，你只需要一个浏览器（建议使用Google）还有一个文本编辑器 （可以使用WebStorm或者VS code）。

HTML文件

当你用VS code打开一个空的HTML文件，输入！并回车就会出现如图

Snipaste_2022-07-25_23-26-26.png 这里所呈现的就是HTML文件的结构。

<!DOCTYPE html>是为HTML5的文档声明

<html lang="en">是告诉浏览器你写的是英文网站，运行时会弹出“是否翻译”，当你想告诉你的浏览器你写的是中文网站时你可以改成<html lang="zh">或者<html lang="ch">

接下来就到了head的部分了<head></head>，在HTML中head元素是元数据（metadata），可以理解为用来描述数据的数据。写有控制整个网页内容的东西，比如样式表、编码格式等。

其中<meta charset="UTF-8">是设置字符集与编辑器保持一致，若编码解码的字符集不一致将会出现乱码问题。 <title></title>表示的是网页的标题

<body></body>元素是隆莱定义文档的主体的，文档中的内容就是要写在body元素中。

Dom 树

Dom（Document Object Model）是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。而HTML文件是超文本，在浏览器中也以这种方式被渲染。

图片1.png DOM 结构构成的基本要素是 “节点”，而文档的结构就是由层次化的节点组成。在 DOM 模型中，节点的概念很宽泛，整个文档 （Document） 就是一个节点，称为文档节点。除此之外还有元素（Element）节点、属性节点、Entity节点、注释（Comment）节点等。

具体可参考《webkit技术内幕》

HTML中的常用元素（标签）

关于元素

我们先来认识元素，元素（element=起始标记（begin tag）+元素内容+结束标记（end tag）+元素属性（非必须）。而有些元素没有结束标记，这样的元素叫做空元素例如<meta charset="UTF-8">也可以写成<meta charset="UTF-8">

元素的嵌套：元素不能互相的嵌套，父元素，子元素，祖元素，后代元素，兄弟元素（同一个父元素的元素），结合上面所讲的DOM树例图，body元素就是P元素和div元素的父元素，而p与div元素互为兄弟元素。

元素的语义化

在HTML中，90%以上的元素都是有具体的意义的，这些与元素使用所展现的效果无关，因为展现的效果与样式我们是可以通过HTML+css来进行后期的改变。对阅读者而言可能改变了原有的语义，但对于计算机浏览器来说各个元素的语义是固定的。元素决定了含义，样式可以更改。所以选择什么元素，取决于具体内容的关系与含义，而不是显示的效果。 那么我们为什么需要语义化？

1.为了搜索引擎优化（SEO）

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码，如果不使用语义化，搜索引擎没办法识别网页的大致内容。 语义化做的越好，搜索引擎就越能理解我们网页的内容，提高网页被搜索到的可能。

2.为了让浏览器理解网页

阅读模式 、语音模式 像div这样没有任何语义的元素很有可能被阅读模式插件给忽略掉，对于盲人，不方便直接浏览网页的人会造成很大的困扰，对于插件的使用，与后续功能的开发使用将造成阻碍。

具体的常用元素

标题元素：h

h1~h6:表示一级标题到六级标题

    <h1>1级的标题</h1>
    <h2>2级的标题</h2>
    <h3>3级的标题</h3>
    <h4>4级的标题</h4>
    <h5>5级的标题</h5>
    <h6>6级的标题</h6>

默认的效果为

图片4.png

在一个HTML文件中一般只有一个一级标题，一级标题与SEO有重要的关系，当你搜索一条信息时，搜索引擎会先将一级标题与搜索信息进行匹配。而有些搜索引擎为了安全，会将设有多个h1元素的网页认定为k站（作弊网站）故一般只有一个一级标题。

HTML实体

在HTML中直接输入字符时，编译器无法识别，这时我们就需要用到字符实体。

 - 小于符号:
 &lt;
 &#60;
 - 大于符号：
 &gt;
 - 空格符号
 &nbsp;  non-breaking space
 - 版权符号（）
 &copy;
 - &符号
  &amp;

还有很多可以参考[t.zoukankan.com/DswCnblog-p…]

超链接元素a
普通链接

<a href="">点我跳转</a>href中填入跳转用的地址，当点击元素内容时可以进行跳转，元素内容可以是文字，可以是图片等。

锚点链接

<a href="#">回到顶部</a>当href="#"或者为href=""时，我们点击元素内容时会回到当前网页的顶部。

    <h2 id="title2">hello world</h2>
    <a href="#title2">回到hello world</a>

当你给定元素一个id，并且在href="#+元素id"时点击链接就会跳转到当前页面的给定元素的位置。

功能链接

顾名思义，点击后会触发一些功能。

比如说

  • 执行JavaScript代码。
  • 发送邮件，mailto：
  • 下载文件
图片元素img
  • img元素是image的缩写，是空元素
  • src属性：中填入图片的来源，可以是网址，也可以是路径（相对路径或绝对路径）
  • alt属性：是当图片资源失效时，加载吧出来的时候用该属性的文章描述来替换图片

与a元素的结合（那一长串是百度的图标）

<a href="https://www.baidu.com/">
    <img src="https://www.baidu.com
    /s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=
    ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" alt="百度">
</a>
多媒体元素

多媒体元素与img元素使用方法相似。有vido视频元素，audio音频元素，同样在src属性中填入地址即可。

    <video src=""></video>
    <audio src=""></audio>

列表元素

在列表元素中有父元素与子元素的概念，子元素只能被父元素包裹着。

  • ol: ordered list 父元素：有序列表。
  • li: list item 子元素：列表项。
  • 无序列表就是将ol替换成ul：unordered list。 <ol>或<ul>是有序或无序列表的开始<li></li>中包裹的就是列表的内容</ol>或</ul>就是有序或无序列表的结束。

就举一个简单的例子：

    <h2>兵乓球女单世界排名</h2>
    <ol>
        <li>孙颖莎</li>
        <li>陈梦</li>
        <li>王曼昱</li>
    </ol>
    <h2>兵乓球女单世界排名中的中国选手</h2>
    <ul>
        <li>王曼昱</li>
        <li>陈梦</li>
        <li>孙颖莎</li>
    </ul>

效果如图

图片3.png

除了有序列表还有无序列表外，还有一种就是定义列表：通常用于一些术语的定义或者是表单中标签的再描述。 例如：

    <h2>定义列表</h2>
    <dl>
        <dt>dl</dt>
        <dd>definition list 是父元素</dd>
        <dt>dt</dt>
        <dd>definition title 是子元素</dd>
        <dt>dd</dt>
        <dd>definition description 是子元素</dd>
    </dl>

Snipaste_2022-07-26_14-11-53.png

输入控件元素

网页中除了可以看的列表，图片，多媒体之外，还经常会有然我们输入一些东西，这就涉及到了我们的输入控件input元素了，其中再input元素中用type元素的属性来控制你要输入的类型，type属性众多玩法就很多啦。

<input type="text" placeholder="请输入您的姓名" >type="text"就是输入文本；placeholder="请输入您的姓名"则是设置输入框的占位文字为“请输入您的姓名”。

<td>性别</td>
            <td>
                <input type="radio" name="sex">
                <label>男</label>
                <input type="radio" name="sex">
                <label>女</label>
            </td>

type="radio"则是选择属性你可以再设定的选项中进行选择，当你的选项的name值相同时，你的选择方式就变为了单选。当你觉得选项太多了的时候，我们还可以用：下拉选择表。通过<select></select>来建立下拉菜单，<optgroup label=""></optgroup>来给定一个选择标签（范围）再通过<option ></option>给定选项。

<select>
                    <optgroup label="广东省">
                        <option >广州市</option>
                        <option >深圳市</option>
                        <option >东莞市</option>
                        <option >佛山市</option>
                        <option >汕头市</option>
                        <option >清远市</option>
                    </optgroup>
                    <optgroup label="北京">
                        <option >东城区</option>
                        <option >海淀区</option>
                        <option >丰台区</option>
                        <option >朝阳区</option>
                    </optgroup>
                </select>

对于type的属性有很多，大家可以自行搜索尝试。最后可以做出如图这样的效果。

Snipaste_2022-07-26_14-44-47.png

网页设计

学会了一系列的元素之外，想做好一个网页，网页的设计与布局也是很重要的。一个好的网页布局既方便管理，又便于浏览者找到自己需要的信息。我们可以参考如图：

图片5.png 想设计出自己漂亮网页的可以看看：宁不会真以为咱前端仔只会切图吧？！喏，给你 2021 最酷网页设计指南！ - 掘金 (juejin.cn)

总结

HTML前端的基础，虽然代码比较简单，但十分的重要。除了对各种元素的运用，还要熟悉各个元素的语义，计算机是无法通过字体的大小，文本的样式来判断我们所想表达的，计算机只能通过元素原本所含有的语义来识别。所以在使用和学习的过程中我们要注重代码的语义化。更深层的理解代码的含义。

avatar
文章
阅读
粉丝