黑马前端入门教程-笔记

来自通通笔记
（重定向自Web标准）

无奈对于前端基础太差，跑去看大佬推荐的视频教程惹。

视频链接

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

Web标准的构成

标准 说明
结构( Structure ) 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现( Presentation ) 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为( Behavior ) 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript。

Web标准提出的最佳体验方案：结构、样式、行为相分离

标签关系

双标签可以分为两类：包含关系和并列光系。

包含关系

<head>
    <title> </title>
</head>

并列关系

<head></head>
<body></body>

P12小总结

文档类型声明标签

<!DOCTYPE HTML>

声明页面语言

<html lang="zh-CN">
    
</html>

告诉浏览器或搜索引擎这是一个英文网站。

声明使用的编码格式？

<meta charset="UTF-8" />

采取UTF8来保存文字

文本格式化标签

语义 标签 说明
加粗 <strong> 或 <b> 建议使用前者，语义更强烈
倾斜 <em> 或 <i>
删除线 <del> 或 <s>
下划线 <ins> 或 <u>

盒子日常

<div><span>是没有语义的，它们就是一个盒子，用来装内容的。 div 是 division 的缩写，表示分割、分区。 span 意为跨度、跨距。

<div>

一个人占一行

<span>

一行上可以多个

图像标签

<img src="图像src">
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的时候显示。
title 文本 提示文本。鼠标放到图像上，显示的文字。
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 限速 设置图像的边框粗细
  1. 图像标签可以拥有多个属性，必须写在标签名的后面。
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  3. 属性采取键值对的格式，即 key = "value" 的格式，属性 = "属性值" 。

路径

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。

简单来说，图片相对于HTML页面的位置。

相对路径 符号 说明
同一级路径 图像文件位于HTML文件同一级 如<img src="xxx.gif" />
下一级路径 / 图像文件位于HTML文件下一级 如<img src="images/xxx.gif" />
上一级路径 ../ 图像文件位于HTML文件上一级 如<img src="../xxx.gif" />

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

<img src="C:\Users\xxx\Pictures\xxx.jpg" />

或完整的网络地址

<img src="https://xrt.wiki/xxx.jpg" />

超链接标签

<a href="挑战目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词： anchor

属性 左右
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

外部链接

<a href="https://xrt.wiki">通通日常</a>

内部链接

<a href="index.html">首页</a>

空链接

<a href="#">首页</a>

下载链接

链接是文件或者压缩包

网页元素链接

<a href="https://xrt.wiki"><img src="xxx.png"></a>

锚点链接

在链接文本的href属性中，设置属性值为 #名字 的形式，如：

<a href="#two">第二</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如：

<h3 id="two">第二</h3>

注释和特殊字符

注释

<!-- 这是注释 -->

特殊字符

HTML ISO-8859-1 参考手册 (w3school.com.cn)

空&nbsp;格
大于号&lt;
小于号&gt;

表格

<!--table标签用于定义表格-->
<table>
    <!--tr标签用于定义表格中的行，必须嵌套在table标签内使用-->
    <tr>
        <!--th标签表示HTML表格中的表头部分(table head)-->
        <th>姓名</th>
        <!--td标签用于定义表格中的单元格，必须嵌套于tr当中-->
        <td>单元格内的文字</td>
        <!--字母td指表格数据(table data)，即数据单元格的内容-->
    </tr>
</table>

MDN的例子：

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

表格属性

属性名 属性值 描述
align left center right 规定表格相对周围元素的对齐方式
border 1 或 "" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元格边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

表格结构标签

<thead>标签 表格的头部区域，内部必须拥有<tr>标签。一般是位于第一行。

<tbody>标签 表格的主体区域，主要用于放数据本体。

这样可以更好的分清表格结构

断点记录

看到了 P38

取自“https://ttonn.cn/index.php?title=黑马前端入门教程-笔记&oldid=165”