走进前端之『HTML』篇

前端认知

前后端概念

前端开发

英文： WEB Front-end Development

后端开发

英文：WEB Back-end Development

前后端区别

后端即为服务器程序的开发

  • 对数据库数据进行操作
  • 逻辑处理
  • 前端需要的接口

前端即为界面的开发包括结构样式和逻辑

  • 结构 -> 盖房子 -> 搭建结构 -> 网页结构的布局 -> HTML
  • 样式 -> 装修房子 -> 结构的布局与装修 -> CSS
  • 逻辑 -> 房子内的东西可以动起来 -> 网页动态交互 -> JavaScript

前端的HTML&CSS&JavaScript：

  • HTML负责网页结构搭建
  • CSS负责网页样式呈现
  • JavaScript负责网页动态行为交互

文件后缀：

  • .js -> JavaScript代码
  • .css -> css代码
  • .html/.htm -> html代码

VsCode编辑器快捷键

  • ctrl + s 保存文件
  • ctrl + z 撤回
  • ctrl + x 剪切
  • ctrl + c 复制
  • ctrl + v 粘贴
  • ctrl + a 全选

HTML基础

超文本标记语言(HyperText Markup Language)，不是编程语言(没有逻辑的语言)

word -> 文章 -> 文本

搜素引擎

搜素引擎认知的优先级：

title > description > keywords

网页设计概念：

  • 物理性标签
  • 语义性标签：每个标签是一个单词的缩写 (<em>即emphasize), 迎合搜素引擎爬虫程序

标签

单双标签 -> <h1></h1> & <br/>

标签属性 -> 对一个当前标签的一种设置 -> 图片地址 src=""

标题标签

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

特性：

  • 独占一行
  • 粗体
  • h1 = 2em
  • h2 = 1.5em
  • h3 = 1.17em
  • h4 = 0em
  • h5 = 0.83em
  • h6 = 0.67em

浏览器默认文字大小为16px -> 2em -> 16px * 2 = 32px

段落标签

<p></p>

特性：

  • 独占一行
  • margin = 16px

缩进2字符 style="text-indent: 2em"

语义化标签

<strong></strong>

<em></em>加强语气

<del></del>删除标签

<ins></ins>下划线

<address></address>斜体的地址

物理性标签

<b></b>

<i></i>斜体标签 开发时用于添加图标

盒子标签

<div></div>

容器标签

division标签 布局用具有宽高的块状元素标签

锚点标签

<a></a>

href="" ： hypertext reference 超文本引用

a标签的作用：

  • 超链接标签
  • 打电话
  • 发邮件
  • 锚点定位
  • 协议限定符
  1. <a href="https://www.baidu.com"></a>
  2. <a href="tel:13700000000">联系我</a>
  3. <a href="mailto:abc@abc.com">邮件我</a>
  4. <a href="javascript:alert('我是a标签')">邮件我</a>

范围标签

<span></span>

特性：

  • 低调不显摆
  • 默认没有样式

作用：

  1. 在一个文本之内区分与其他文本的样式差别，给一段文本的中间某一段文字或某一个文字或某一个区的文字加上不同的样式来区分于其他文本的区别
  2. 文本中无法单独获取的东西，利用span标签就可以获取
  1. <p>我是一个非常非常<span style="color: red;" id="niu">牛</span><span style="color: blue;">X</span>的前端工程师</p>
  1. var niu = document.getElementById('niu');
  2. console.log(niu.innerText); // 牛

显示效果：

HTML - 图1

序列标签

ol有序列表标签 or ul无需列表标签 or dl定义列表

关于有序列表 order list

  • 当字母超过26位，会aa显示，依次类推
  • 除了数字，其他不能中途开始
  • reversed="reversed"属性为倒序，如果倒序的数字小于实际数字，会以负数显示
  1. //阿拉伯数字
  2. <ol type="1">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8. </ol>
  10. //print
  11. 1.HTML
  12. 2.CSS
  13. 3.JavaScript
  14. 4.PHP
  15. 5.GO
  1. //大写字母
  2. <ol type="A">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8. </ol>
  10. //print
  11. A.HTML
  12. B.CSS
  13. C.JavaScript
  14. D.PHP
  15. E.GO
  1. //小写字母
  2. <ol type="a">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8. </ol>
  10. //print
  11. a.HTML
  12. b.CSS
  13. c.JavaScript
  14. d.PHP
  15. e.GO
  1. //罗马数字
  2. <ol type="i">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8. </ol>
  10. //print
  11. i.HTML
  12. ii.CSS
  13. iii.JavaScript
  14. iv.PHP
  15. v.GO
  1. //除了数字，其他不能中途开始
  2. <ol type="1" start="10">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8. </ol>
  10. //print
  11. 10.HTML
  12. 11.CSS
  13. 12.JavaScript
  14. 13.PHP
  15. 14.GO
  1. //如果倒序的数字小于实际数字，会以负数显示
  2. <ol type="1" start="5" reversed="reversed">
  3.   <li>HTML</li>
  4.   <li>CSS</li>
  5.   <li>JavaScript</li>
  6.   <li>PHP</li>
  7.   <li>GO</li>
  8.   <li>GO</li>
  9.   <li>GO</li>
  10.   <li>GO</li>
  11. </ol>
  13. //print
  14. 5.HTML
  15. 4.CSS
  16. 3.JavaScript
  17. 2.PHP
  18. 1.GO
  19. 0.GO
  20. -1.GO
  21. -2.GO

关于无序列表 unorder list

  • 横排或竖排排列的块级布局
  1. //disc默认为圆点 
  2. //square 为小方块
  3. //circle 为空心圆
  4. <ul type="disc">
  5.   <li>HTML</li>
  6.   <li>CSS</li>
  7.   <li>JavaScript</li>
  8.   <li>PHP</li>
  9.   <li>GO</li>
  10. </ul>

关于定义列表 definition list

  1. //dl definition list
  2. //dt definition term
  3. //definition description
  4. <dl type="disc">
  5.   <dt></dt>
  6.   <dd>我要成为WEB开发工程师</dd>
  7.   <dd>我正在学习前端开发</dd>
  8. </dl>

下拉菜单标签

适用于手机端

  1. <select name="" id="">
  2.   <option value="">111</option>
  3.   <option value="">222</option>
  4.   <option value="">333</option>
  5. </select>

表格标签

标题标签caption

作用：用来布局的

  1. <!-- 标题标签caption -->
  2. <!-- tr table row 表格行标签 包裹-->
  3. <!-- th table header cell 表头标签  -->
  4. <!-- td table deta cell 单元格标签 -->
  5. <!-- border 边距 -->
  6. <!-- cellpadding 单元格内边距 -->
  7. <!-- cellspacing 单元格间距 -->
  8. <!-- colspan 列合并 -->
  9. <!-- rowspan 行合并 向下合并 -->
  10. <!-- align="left|center|right" 居左居中居右 -->
  11. <table border="1" cellpadding="10" cellspacing="10">
  12.   <caption>VIP班级学生联络表</caption>
  13.   <!-- 页眉 -->
  14.   <tr>
  15.     <th>ID</th>
  16.     <th>姓名</th>
  17.     <th>电话</th>
  18.     <th>备注</th>
  19.   </tr>
  20.   <tr>
  21.     <td align="center">1</td>
  22.     <td align="center">东东</td>
  23.     <td align="center">13922222222</td>
  24.     <td align="center">班长</td>
  25.   </tr>
  26.   <tr>
  27.     <td>信息</td>
  28.     <td>3班</td>
  29.     <td colspan="2">13位学生</td>
  30.   </tr>
  31.   <tr>
  32.     <td>2</td>
  33.     <td>张三</td>
  34.     <td>13922222333</td>
  35.     <td rowspan="2">小队长</td>
  36.   </tr>
  37.   <tr>
  38.     <td>3</td>
  39.     <td>李四</td>
  40.     <td>13922222444</td>
  41.   </tr>
  42.   <!-- 页尾 -->
  43.   <tr>
  44.     <td colspan="4" align="right">
  45.       *学生都要成为WEB开发工程师
  46.     </td>
  47.   </tr>
  48. </table>
  1. <!-- thead tbody tfoot 必须同时出现 -->
  2. <!-- 如果存在大量数据情况，先加载页眉页尾部分，再加载主体 -->
  3. <!-- thead 表格页眉标签 -->
  4. <!-- tbody 表格主体标签 -->
  5. <!-- tfoot 表格页尾标签 -->
  6. <table border="1" cellpadding="10" cellspacing="10">
  7.   <caption>VIP班级学生联络表</caption>
  8.   <!-- 页眉 -->
  9.   <thead>
  10.     <tr>
  11.       <th>ID</th>
  12.       <th>姓名</th>
  13.       <th>电话</th>
  14.       <th>备注</th>
  15.     </tr>
  16.   </thead>
  17.   <!-- 主体 -->
  18.   <tbody>
  19.     <tr>
  20.       <td align="center">1</td>
  21.       <td align="center">东东</td>
  22.       <td align="center">13922222222</td>
  23.       <td align="center">班长</td>
  24.     </tr>
  25.     <tr>
  26.       <td>信息</td>
  27.       <td>3班</td>
  28.       <td colspan="2">13位学生</td>
  29.     </tr>
  30.     <tr>
  31.       <td>2</td>
  32.       <td>张三</td>
  33.       <td>13922222333</td>
  34.       <td rowspan="2">小队长</td>
  35.     </tr>
  36.     <tr>
  37.       <td>3</td>
  38.       <td>李四</td>
  39.       <td>13922222444</td>
  40.     </tr>
  41.   </tbody>
  42.   <!-- 页尾 -->
  43.   <tfoot>
  44.     <tr>
  45.       <td colspan="4" align="right">
  46.         *学生都要成为WEB开发工程师
  47.       </td>
  48.     </tr>
  49.   </tfoot>
  50. </table>

表格效果：

HTML - 图2

字符实体

显示结果 描述 实体名称 实体编号
`` 空格 &nbsp &#160
< 小于号 &lt &#60
> 大于号 &gt &#62
& 和号 &amp &#38

上下标标签

sup: superscripted

sub: subscripted

<sup></sup> & <sub></sub>

  1. 前端<sup><a href="#">[1]</a></sup>
  2. 10<sup>5</sup>
  3. Na<sup>+</sup>
  4. H<sub>2</sub>SO<sub>4</sub>

显示效果为：

前端[1]

10

Na

HSO

标签结构

兼容性模式：

docment.compatMode:

  • 有<!DOCTYPE html>: CSS1Compat(W3C标准模式)
  • 没有<!DOCTYPE html>: BackCompat(怪异模式)
  1. //html5声明方式 并不是标签 告诉浏览器用哪个版本编写
  2. <!DOCTYPE html>
  3. //lang language
  4. <html lang="zh-CN">
  5.   <head>
  6.     //title
  7.     //主页：网站名称 + 主要关键字/关键词的描述
  8.     //详情页：详情名称 + 网站名称 + 简介
  9.     //列表页：分类名称 + 关键字 + 网站名称
  10.     <title></title>
  11.     //meta标签设置 charset字符集编码
  12.     //关于GB2312 中国信息处理国家标准码 -> 简体中文编码
  13.     //关于GBK 汉族扩展规范 -> 扩大汉族收录，增加了繁体中文，增加了藏蒙维吾尔文字等小数名族的文字
  14.     //关于UTF-8 unicode 万国码
  15.     <meta charset="UTF-8" />
  16.     //keyword 100字符 网站名称 + 分类信息 + 网站名称
  17.     <meta name="keyword" content="" />
  18.     //description 描述信息 80-120汉字 
  19.     //综合title + keywords的简单描述
  20.     <meta name="description" content="" />
  21.   </head>
  22.   <body></body>
  23. </html>

标签属性

属性名 作用
href 跳转链接
src 图片地址
target _blank目标新开空页签

书写标准

  • 标签只能小写
  • 属性名也只能小写
  • 属性值用双引号包裹

标签嵌套

  1. <strong>
  2.   <em></em>
  3. </strong>
  1. <div>
  2.   <p></p>
  3. </div>

判断标签能否嵌套

  • 内联元素可以嵌套内联元素
  • 块级元素可以嵌套任何元素
  • p标签不可以嵌套div标签
  • a标签不可以嵌套a标签

元素

标签加上内部的内容

内联元素

行间元素 行内元素(inline element)

strong, em, del, ins, sub, sup, span

特性：

  • 不独占一行
  • 无法定义宽高

块级元素

block element

p, h1, div, address, ul, ol, li

特性：

  • 独占一行
  • 可以定义宽高

内联块级元素

inline-block element

特性：

  • 不独占一行
  • 可以定义宽高