pink 老师是一位很有天分,非常负责任的老师,能够把困难的知识讲解的简单,把枯燥的课堂变成风骚的笑场!PInk 老师,我爱您❤!!!

新知

  1. 快速生成无意义的拉丁字母:Lorem
  2. 原来锚点链接这么简单
  3. 标签、属性、值可根据编辑器为其分配的颜色来进行区分
  4. 201224对表单还不太熟悉
  5. 布局的概念和实际操作

关于学习

  • 被动学习:听讲、阅读、听与看、示范/展示
  • 主动学习:小组讨论、实作演练、转教别人/立即应用

学习路线

  • 主要学习 PC 端网站布局,做到精通网页布局,前端人员的必备技能。
  • HTML5(20%) CSS3(50%) H5C3提高(10%) 项目-品优购电商网站页面制作(20%)

HTML简介

网页的相关概念

  • 网站是展示特定内容的网页的集合。
  • 网页是由图片、文字、链接、声音、视频等元素组成。
  • HTML 超文本标记语言(Hype Text Mark Language)。为什么叫超文本?因为图片、声音、视频都超越了单纯的文字内容,还有链接,也不是普通的文字内容。

常用浏览器及内核

浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示画面。

| 常用浏览器 | 内核 | 备注 |
| :- | - | :-: |
| firefox | Gecko | |
| ie | Trident | |
| safari | Webkit | |
| chrome/edge/opera | Blink | blink 其实是 Webkit 的分支 |

Web 标准

  • W3C(万维网联盟)是国际最著名的标准化组织。
  • 通过标准,可以让不同开发人员写出的页面标准统一。
  • Web 标准提出的最佳体验方案:结构、表现、行为相分离。

| 标准 | 说明 | |
| :- | - | :-: |
| 结构 | 用于对网页元素进行整理和分类,现阶段主要学的是 HTML | |
| 表现 | 用于设置网页元素的板式、颜色、大小等外观样式,主要指的是 CSS | |
| 行为 | 指网页模型的定义及交互的编写,现阶段主要学的是 JavaScript | |

HTML 标签

  • 绝大多数都是双标签,单便签有但是很少。
  • 标签关系可以分为包含关系和并列关系。

单标签汇总

  1. <br>
  2. <img src="图像url">

HTML 基本结构标签(骨架标签)

  • 每个网页都会有一个基本的结构标签,页面内容也是在这些基本标签上书写的。
  • HTML 页面也被称为 HTML 文档。

VSCode 使用

  1. 新建文件(Ctrl + N),保存(Ctrl + S)
  2. Ctrl + 加减号按键可以放大缩小视图
  3. 快捷生成页面骨架结构(!)
  4. 插件推荐:Chinese-simple | Open in browzer(保存后无法自动刷新) or Live server | Auto rename tags

Doctype 和 lang 以及字符集的作用

  • <!DOCTYPE html>不是 HTML 标签,而是文档类型声明标签,表示当前页面采取的是 HTML5 版本来显示网页。
  • lang 语言种类,en zh-CN fr 对你实际写什么无影响,但会触发浏览器的翻译提示。
  • charset(character Set)字符集,多个字符的集合,以便计算机能够识别和存储各种文字。通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。常用的值有:GB2312(简体)、BIG5(繁体)、GBK(国标)和 UTF-8,UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

标签语义

标签语义,标签的含义,即这个标签是用来干嘛的。比如标题标签、段落标签、换行标签等等。

标题、段落、换行标签

标题标签独占一行。

在代码页面选择空格或者换行是不行的,必须要有标签。

<h3>我是三级标题</h3>,语义:作为标题使用,并且重要性递减。

段落标签(paragraph)

换行(break)标签

体育新闻案例

见 Vscode

文本格式化标签

粗体、斜体、下划线等,突出重要性,比普通文字更重要。

粗体:<strong></strong> or <b></b>

斜体:<em></em> or <i></i>

删除线:<del></del> or <s></s>

下划线:<ins></ins> or <u></u>

div 和 span 标签

这两个标签是没有语义的,它们就是一个盒子,用来装内容的。

div 是 division 的缩写,用来布局,一个 div独占一行,这是大盒子。

span 标签也用来布局,一行上可以多个 span,这是小盒子。

图像标签

img 单标签和它的几个属性:src alt title width height (border 一般在 CSS 中设置)

属性采取键值对的格式,即 key = "value"

宽度和高度最好只修改一个,这样图片就会根据那个进行等比缩放,不至于被拉伸。

相对路径与绝对路径

相对路径是指从代码所在的这个文件出发,去找目标文件,即目标文件相对于 HTML 页面的位置。

相对路径的可移植性好,保密性好。

  1. . 当前
  2. ./ 下一级
  3. ../ 上一级

链接标签

a 链接,anchor 锚的意思。

语法:<a href="目标地址" target="目标窗口的弹出方式">文本或图像</a>

外部链接:到外面的网站。

内部链接:网站内部页面间的跳转。

下载链接:如果链接的是文件 .exe 或者 zip 压缩包,就会下载。

锚点链接:当点击链接时,可以快速定位到页面中的某个位置。

  1. 在 href 属性中,设置属性值为 #名字的形式,如 <a href="#two">第二集</a>
  2. 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字,如<h3 id="two">第二集介绍</h3>

注释标签和特殊字符

注释便签:<!--这个是注释--> 快捷键:Ctrl + /

特殊字符:比如空格、大于号、小于号、,  ,> < (Non-Breaking Space | greet than | less than)

综合案例

详见 Vscode

表格

表格一般用来展示数据。

表格标签

<table></table>

<tr></tr>   // table row     一行

<td></td>  // table data   普通单元格

<th></th>  // table head  表头单元格会加粗居中显示

表格属性:一般通过 CSS 来调整,现在只是了解。

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

表格结构标签

  • 可将表格分成表格头部和表格主体两大部分,分别为:thead tbody

合并单元格

  • 跨行合并:rowspan 最上侧单元格为目标单元格,写合并代码
  • 跨列合并:colspan 最左侧单元格为目标单元格,写合并代码
  1. 先确定是跨行还是跨列
  2. 找到目标单元格,写上合并方式=合并的单元格数量
  3. 删除多余的单元格

列表

列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

列表项:<li></li>,li 相当于一个容器,可容纳所有元素,但是列表里只放 li

  1. 无序列表(重点):<ul></ul> unordered list
  2. 有序列表:<ol></ol> ordered list
  3. 自定义列表(重点):<dl></dl> <dt></dt> <dd></dd> definition list definition term definition description

| 标签名 | 定义 | 说明 |
| - | - | - |
| ul | 无序标签 | 里面只能有 li ,没有顺序,使用较多。li 里面可以包含任何标签 |
| ol | 有序标签 | 里面只能包含 li ,有顺序,使用相对较少。li 里面可以包含任何标签 |
| dl | 自定义列表 | 里面只能包含 dt 和 dd 。dt 和 dd 里可以放任何标签 |

表单

表单可用来收集用户信息。

表单的组成:表单域、表单控件(表单元素)、提示信息。

表单域

表单域是一个包含表单元素的区域,可以把它范围内的表单元素信息提交给服务器。

<form action="url" method="提交方式" name="表单域名称">

   各种表单元素控件

</form>

表单控件(表单元素)

  1. 输入表单元素:input <input type="属性值" name="value2" value=“”>

    • 提交表单就是把value送到后端。
    • 单选框和复选框可以设置 checked 属性,当页面打开的时候就可以默认选中这个按钮。
    • input 的 type 属性值:text password radio checkbox submit reset button(搭配JavaScript来使用)file
  2. 下拉表单元素:select <select><option>选项1</option></select>
  3. 文本域表单元素:textarea 用户输入内容较多的情况下 <textarea></textarea>

label 标签

用于绑定一个表单元素,当点击 <label> 标签内的文本时,浏览器会自动将焦点(光标)转到对应的表单元素上,用来增加用户体验。

<label for = "gender">男</label>

<input type = "radio" name= "gender" id = "gender">

// label 标签的 for 属性对应的是 id 值

综合案例-注册页面

见 Vscode 。

查阅文档

  1. 搜索引擎
  2. W3C school
  3. MDN web docs
如果觉得我的文章对你有用,请随意赞赏