前端与HTML|青训营笔记

这是我参与【第四届青训营-前端场】笔记创作活动的第1篇笔记

前端Web标准

传说中的网页三剑客:

结构：对网页元素进行整理和分类、主要表现为HTML
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为：指网页模型的定义及交互的编写，————javascript

什么是HTML？

一种用来告知浏览器如何组织页面的标记语言。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

HTML基本结构标签

概念：所有的标签都包含在这样一对"<>"尖括里，且为成对出现
关系：包含（嵌套，要注意标签结束的先后顺序）和并列
骨架标签：

QQ图片20220724161541.png

HTML常用标签

标签语义：明确标签是用来干嘛的，在合适的地方给出合理的标签是页面结构更清晰
标题标签h1-h6

    <h1>标题一共六级选</h1> 
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
复制代码

QQ图片20220725120519.png

3.段落换行标签：段落'p''/p'，另起一行的换行标签'br /'

4.文本格式化标签：

语义	标签	说明
加粗	`<strong> </strong>或者<b></b>`	用strong标签加粗语义更强烈
倾斜	`<em></em>或者<i></i>`	用'em'标签加粗语义更强烈
删除线	`<del> </del>或者<s></s>`	用del标签加粗语义更强烈
下划线	`<ins> </ins>或者<u></u>`	用ins标签加粗语义更强烈
块级应用：`blockquote`,`cite`属性用来引用文本来源
短引用：`<cite>` 、`<q>`
代码：`code`可以输入短代码，长代码。多行代码使要在前面配`pre`使用

5.<div>和<span>标签：（盒子）没有语义，仅仅用来装内容,布局。

前者为division缩写表分割，且独占一行（超大盒子）
后者表跨度、跨距，一行可以放多个span（小盒子）

<div>这是一台电脑</div> <span>电脑价格</span>

6.图像标签和路径

<img src="图像URL"/> 图像要与html文件放在同一文件夹中才能被打开

src是img标签的必须属性，用于指定图像文件的路径和文件名

<alt>属性：当图片显示不出来时，用文字替换 <title>属性：提示文本，提示鼠标放在图像上，显示的文字 <width> <height> <border>属性：设定图像宽度，图像高度，给图像设定边框

7.超链接标签

语法格式：<a href="跳转目标"target="目标窗口的弹出方式"> 文本图像 </a>

下面解释其中的几个关键：

a： anchor锚

href：目标链接的ur地址（必须属性），有了href就具有了超链接的功能

target：指定链接页面的打开方式，_self为默认值当前窗口，_blank为在新窗口中打开方式

8.注释标签： 快捷方式：ctrl + /

无序列表有序列表自定义列表

无序列表

<ul>
        <li>列表1</li>
        <li>列表2</li>
        ...
</ul>
复制代码

有序列表

<ol>
        <li>列表1</li>
        <li>列表2</li>
        ...
</ol>
复制代码

自定义列表

<dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        ...
</dl>
复制代码

input 表单元素

        <!-- text 文本框 用户可以输入任何文字 -->
        用户名：<input type="text" <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码：<input type="password" <br>
        <!-- 单选框 -->
        <p>
           <label><input type="radio" name="fruit" />荔枝</label>
           <label><input type="radio" name="fruit" />蓝莓</label>
        </p>
        <!-- 复选框 -->
         <p>
            <label><input type="checkbox" />苹果</label>
            <label><input type="checkbox" />香蕉</label>
        </p>
         <!-- 选项菜单 -->
        <p>
           <select>
           <option>苹果</option>
           <option>香蕉</option>
           <option>梨子</option>
           </select>
        </p>
        <!-- 表单 -->
        <input list="countries" />
        <datalist id="countries">
          <option>China</option>
          <option>Japen</option>
          <option>South Korea</option>
        </datalist>

复制代码

为什么要使用HTML语义化

1.开发者修改、维护页面

2.浏览器展示页面

3.搜索引擎提取关键字、排序

4.屏幕阅读器等识别

5.代码可读性

6.提升无障碍

如何做到语义化

1.了解每个标签和属性的含义

2.思考什么标签最适合描述这个内容

3.不是用可视化工具生成代码

自我小结

作为一个完完全全的新手小白，通过对HTML的基础初步学习了解到了前端工程师做出一个好的页面的第一步就是要学好框架，而这仅仅是其中的一小部分，还有许多零散的知识点需要我自己总结学习。这十几个小时的前端学习让我对前端设计开发有了更加浓厚的兴趣，这篇笔记的得来通过b站大学的视频讲解和MDN的文档链接学习，只是浅浅的记录了......

将就看吧，懂自懂（初次接触多多包涵）