1.HTML基础

HTML真的是入门前端的第一个课程,说实话,这里的东西2天就能熟练的掌握,但是不要骄傲呦,因为这只是前端的1%

也是基础中的基础,也是根基,要打扎实。


🍚第一部分:HTML基本结构

1.HTML初识

  • HTML(超文本标记语言 Hyper Text Markup Language), 是一种用来描述网页的语言
  • HTML 不是编程语言,而是一种标记语言(相似的还有MD语言,JSX语言,WXML语言,等等都是一种规则而已)
  • 标记语言是一套标记标签

2.HTML骨架标签

<!-- 根标签 -->
<!doctype html>
<html>
    <!-- 文档的头部 -->
    <head>
        <!-- 文档的标题 -->
        <title></title>
    </head>
    <!-- 文档主体 -->
    <body>

    </body>
</html>

❣️ 注意: doctype html 这个是文档声明,表示这个HTML文件的内容需要按照什么标准(规则)进行解析


3.HTML标签基础

标签分类

  • 双标签:p, a, div, span...
  • 单标签:br, hr...

标签关系:可以是 嵌套关系 & 并列关系


4.DOCTYPE & lang & 字符集

DOCTYPE 是文档类型的意思,必须写到文档最前面,主要告诉浏览器使用哪种解析规范

lang 指定我们HTML的语言种类 en 表示是英语,zh-CN 表示中文,还有其他语种

utf-8 字符集(最常用),更多字符集可自行百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

🍦第二部分:HTML常用标签

1.HTML标签语义化

根据标签的语义,在合适的地方使用合适的标签,可以让结构更清晰

  • 方便代码维护和阅读
  • 同时让浏览器或网络爬虫可以很好的解析,从而更好的分析其中的内容
  • 使用语义化标签会具有更好的搜索引擎优化

2.标题标签

作为标题使用,有6个等级,重要性依次递减(块级元素)

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

3.段落标签 & 水平线标签 & 换行标签

锻炼标签 p:可以把HTML文档分割成若干段落(块级元素)

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

水平线标签 hr:一条分割线(单标签,块级元素)

<hr />

换行标签 br: 强制换行(单标签,)

床前明月光,<br />疑是地上霜。<br />举头望明月,<br />低头思故乡。

<!-- 效果:
床前明月光,
低头思故乡。
举头望明月,
低头思故乡。
-->

4.无语义化标签(div & span)

div标签:无语义标签,表示盒子,或者区域 常用于布局(div+css)(块级元素)

span标签:无语义标签,表示跨度,或者区域 (行内元素)

<div></div>
<span></span>

5.文本格式化标签

  • b & strong:文字粗体展示(XHTML推荐使用 strong)
  • i & em:文字斜体展示(XHTML推荐使用 em)
  • s & del:文字删除线展示(XHTML推荐使用 del)
  • u & ins:文字下划线展示(XHTML推荐使用 ins)
<b>粗体展示</b>
<strong>粗体展示</strong>
<i>斜体展示</i>
<em>斜体展示</em>
<s>删除线展示</s>
<del>删除线展示</del>
<u>下划线展示</u>
<ins>下划线展示</ins>

6.图像标签 & 标签属性

img标签:展示图片,需要设置路径属性 src

标签属性:<标签名 属性1=“属性值” 属性2=“属性值” ...>...

<!-- img标签可以设置很多属性 -->
<img src="图片地址" title="文字悬停时候显示的文字" alt="图像加载失败,显示的替换文字" width="宽度" height="高度" ...>

<!-- ❣️ 拓展:<img onerror="xss攻击代码"> img标签 可以发动XSS攻击 -->

7.链接标签

链接标签a:创建超链接

<a href="跳转地址" target="目标窗口弹出方式">文字或者图像</a>
<!-- target: self为默认值,blank为在新窗口打开 -->

<!-- 拓展:阻止a标签跳转 <a href="javascript:;"></a> -->

8.注释标签

注释 没啥好说的

<!-- 我用注释标签来展示一下注释 -->
<!--  -->

🍩第三部分:路径 & 锚点定位

1.路径

相对路径:相对于某个文件进行的路径导航

  • ./ 下一级目录
  • ../ 上一级目录

绝对路径:从操作系统的根目录 进行的路径导航

  • Winodw: c:\Users...
  • Mac:/Users/zhukunpeng/...

2.锚点定位

通过创建锚点链接,用户能够快速定位到目标内容

<!-- 1️⃣ 给a设置锚点 #idName -->
<a href="#test">跳转到目标锚点</a>

<!-- 2️⃣ 设置目标锚点 -->
<h3 id="test">目标锚点</h3>

3.拓展标签

base标签:设置整体网站 链接的打开状态

<head>
    <base target="_blank">
</head>

预格式化标签pre:被包裹在pre标签中的文本,通常会保留空格,换行符,文字呈等宽字体

<pre>
    床前明月光,
    疑是地上霜。
    举头望明月,
    低头思故乡。
</pre>

有一些特殊符号,在HTML中很难,或者很不方便直接使用,HTML为特殊字符 制定了对应的代替代码

HTML特殊字符编码对照表


🍪第四部分:表格 & 列表

1.表格基础

表格基础标签

<!-- 表格 -->
<table>
    <!-- tr表示一行 -->
    <tr>
        <!-- td 表示一项 -->
        <td>第一行1</td>
        <td>第一行2</td>
        <td>第一行3</td>
    </tr>
    <tr>
        <td>第二行1</td>
        <td>第二行2</td>
        <td>第二行3</td>
    </tr>
</table>

<!-- 其实上面写完,表格样式还是没有的,因为没有设置一些属性 -->

🔥表格属性

  • border:设置表格的边框(默认 border="0" 无边框),单位像素
  • cellspacing:设置单元格与单元格边框之间的空白间距,单位像素,默认2像素
  • cellpadding:设置单元格内容与单元格边框之间的空白间距,单位像素,默认1像素
  • width:设置表格的宽度,单位像素
  • height:设置表格的高度,单位像素
  • align:设置表格在网页中的水平对齐方式(left, center, right)

2.表格拓展

表头单元格:th,会让文字加粗,并居中显示

<table>
    <tr>
        <!-- th 表头:文字加粗,并居中 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>第二行1</td>
        <td>第二行2</td>
        <td>第二行3</td>
    </tr>
</table>

表格标题:caption

<table>
    <caption>我是表格标题</caption> 
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>第一行1</td>
        <td>第一行2</td>
        <td>第一行3</td>
    </tr>
</table>

🔥 合并单元格

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"
<table>
    <caption>简历</caption>
    <tr>
        <th>对比</th>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <th>个人介绍</th>
        <td colspan="2">个人介绍...</td>
    </tr>
    <tr>
        <th>个人作品</th>
        <td colspan="2">个人作品...</td>
    </tr>
</table>

对于复杂表格,可以将表格分为三个部分:表头(thead),正文(tbody),脚注(tfoot)

<table>
    <caption>我是表格标题</caption> 
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一行1</td>
            <td>第一行2</td>
            <td>第一行3</td>
        </tr>
        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
            <td>第二行3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">备注:</td>
        </tr>
    </tfoot>
</table>

3.列表

无序列表:展示效果就是 左边是 小黑点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <div>4</div>
    </li>
</ul>

有序列表:展示效果是 左边是 有序数字(或者其他有序形式)

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <div>4</div>
    </li>
</ol>

自定义列表:通常用于对术语或名词进行解释和描述的

例如网站最下面有一连串的跳转链接,大部分都是用 自定义列表来做的

<dl>
    <!-- dt是一个总的,dd是对 dt的修饰 -->
    <dt>配送方式</dt>
    <dd>上门送货</dd>
    <dd>海外配送</dd>
    <dd>自提</dd>
</dl>

🍺第五部分:表单

1.input控件

input 就是输入的意思,type属性可以设置不同的 控件类型

type属性

  • text 单行文本输入框
  • password 密码输入框
  • radio 单选框
  • checkbox 复选框
  • submit 提交按钮
  • reset 重置按钮
  • file 文件域
  • button 普通按钮
  • image 图像形式的提交按钮

value属性表示的是 值

name属性 用于区分表单,主要是发送给后台的时候,好区分

账号:<input type="text" value="请输入账号" name="username" />
密码:<input type="password" name="password" />

<!-- 通过相同 name 来实现 单选效果 -->
<!-- ❣️ 备注:checked 表示默认选中,常用于单选,多选场景 -->
性别:男 <input type="radio" name="sex" checked /> | 女 <input type="radio" name="sex" />

<!-- 多选也是通过 name 来实现 -->
爱好:🎧听歌 <input type="checkbox" name="like" /> | 🏀篮球 <input type="checkbox" name="like" /> | 🏊游泳 <input type="checkbox" name="like" />

<!-- 按钮组:提交 & 重置 都需要在表单域下才能生效,默认value值是 提交 和 重置 -->
<input type="submit" />
<input type="reset" />
<input type="button" value="一个纯的按钮" />

<!-- 其他:图片提交必须包含src属性 -->
<input type="image" src="" />
<input type="file" />

label:不属于表单的标签,但是一般会搭配input一起使用,效果是当点击 label范围的时候,光标自动对焦到input里面

<label>
    账号:<input type="text" value="请输入账号" name="username" />
</label>

<!-- 还有一种方式:通过for 和 id(如果想了解,自行谷歌) -->

2.其他表单控件

1️⃣ textarea文本域:创建多行文本输入框(应用,例如留言板,评论等等)

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

2️⃣ select下拉列表:

籍贯
<select>
    <!-- selected 表示默认选定项 -->
    <option selected>--请选择省份--</option>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>
  • ❣️ 拓展:有些网站,下拉是用 ul 来做的,因为 select 在不同浏览器下展示效果不一样,不好控制

3.表单域form

通过form表单域,可以收集表单信息,发送给服务器

<form action="提交到的url地址" method="提交方式(取值是get & post)" name="表单名称">
    <!-- ... 各种表单控件 -->
</form>

🍹第六部分:自己对HTML的一些胡思乱想

问题一:HTML产生的背景是什么?


问题二:HTML为什么会出现,以及它的发展历程


问题三:HTML到底是什么(解释给没学过HTML的人听)?


问题四:如果你是工作1年的前端那么,HTML到底是什么?

这里是我自己的回答,如果有更好的,那更好了

本质上是字符串,最终是 规则的解析,视图的展现


问题五:如果你是工作1-3年的前端那么,HTML到底是什么?

这是来自掘金 小洋粉的分享,感谢,因为感觉内容比我这个一年的理解深刻多了,所有归为了这里小洋粉掘金地址

语句,函数,对象,名称空间之间的组织关系是颗树。一颗XML树,被解析以后就是颗对象树。所有的标签语言,都是XML的子集,是树的子集。XML标签语言是最适合写UI的格式。最新的swiftUI,HTML ,XAML都是XML格式的UI语言,,

只有在树上的东西才能被查找,不在树上的东西是不存在的无法被查找。所有能被查找到的都能被修改状态。MVVM 的本质就是把XML树转化成的对象树上的属性状态和model对象的属性状态建立映射关系。改变model 对象的状态即是改变了xml属性的状态。从而达到页面状态切换的效果

HTML 是XML的儿子,而XML是树。树,是一种无处不在的存在。。家族族谱是颗树,社会组织结构是颗树,神经系统是颗树,植物结构是颗树,编程语言是颗语法树,目录结构是颗树,进程是颗树,树也是一颗树,世间万物皆可抽象为一颗树。


问题六:如果你是工作3-5年的前端那么,HTML到底是什么?


问题七:如果你是工作5年以上的前端那么,HTML到底是什么?


📚参考列表(致敬)