网页设计之第一节HTML笔记

前言：本文比较冗长，适合零基础或者是刚刚开始上网页设计这门课的学生作为知识总结和归纳。全文基本上是以B站Pink老师的前端入门视频教程为主，自己的笔记为辅，配合视频使用最佳。里面少量插入了案例题目，希望大家能动手做一做，这样会更容易掌握，使之变成自己的。案例里面的素材图片等有些放在了文章里面，为了避免使笔记案例素材太多，有些则打包在文件夹里面，有需要请留言或者联系我。希望大家能够加油(•̀ᴗ•́)و ̑̑

1. 基本概念

1.1名词解释

1. Internet:因特网；
2. WWW：万维网。是Internet提供的一种服务——网页浏览服务。
3. URL：统一资源定位符。web的地址。
4. DNS:域名解析系统。将好记的域名转换成IP的过程称为域名解析。
5. HTTP：超文本传输协议。是一种详细规定浏览器和万维网服务器之间通信的规则。
6. Web：网页。
7. W3C组织：万维网联盟。发展Web规范。

1.2Web标准

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

2. 入门基础

2.1 标签关系

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

2.2 基本框架结构标签

补充细节

2.3 HTML文本控制标记

2.3.1 标题标签

2.3.2 段落标签和换行标记

区分点：段落和段落之间有较大的空隙，而换行之间则没有空隙，只是强制换行。

(2.3.2)案例：体育新闻

文字部分(全手打可能有出错的地方，还望包涵)
水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0数据统计：水花兄弟合砍61分库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。兄弟对决升级：小库里给哥哥造成压力 库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟，在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢新，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。作者：pink老师2019-8-8

个人展示

2.3.3 水平线标记

不赞成使用hr里面的属性，可以用style或者CSS设置

2.4 文本样式标记

不赞成使用font标记，可以使用CSS样式来代替其中的字体、大小、颜色。

2.5 文本格式化标记

样例

2.6 div 和 span

2.7 注释标签和特殊字符标记

2.7.1 注释

2.7.2 特使字符

记住空格和大于、小于就行，其余的需要就回头查阅。

2.8 图像标记和路径

2.8.1 图像标记

需注意：

1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 属性采取键值对的格式，即Key=”value”的格式，属性=”属性值”。

2.8.2 路径

1. 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。(不常用)
2. 相对路径
   

3. 超链接标签

3.1 链接的语法格式

两个属性的作用如下：

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

3.2 链接分类

链接伪类选择器

属性	作用
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接(鼠标按下未弹起的链接)

一点细节

4. 表格标签

4.1 表格的基本语法

4.2 表头单元格标签

4.3

(4.3)案例:小说排行榜

样例图

个人展示

4.4 表格结构标签

作用：是表格更清晰，语义更明确。

一点细节部分

4.6 合并单元格

效果图

5. 列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序、它作为布局会更加自由和方便。
列表有分三大类：无序列表、有序列表、自定义列表。

5.1 无序列表(重点)

效果：

5.2 有序列表(理解)

效果：

5.3 自定义列表(重点)

效果：

列表中的CSS样式属性

list-style-type

list-style-image

插入图片没什么好说的

list-style-position

用于控制列表项目符号的位置

属性	说明
inside	列表项目符号位于列表文本以内
outside	列表项目符号位于列表文本以外

5.4列表总结

6. 表单

6.1表单的组成

6.2 表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是用户在表单中输入或者选择的内容控件。

1. input 输入表单元素
2. select下 拉表单元素
3. textarea 文本域元素

6.2.1 input 输入表单元素

type属性值：

属性	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript 启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务区
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

除了type属性之外，input标签还有其他很多属性，其常用属性如下：

常用属性的用法：

6.2.2 label 标签

效果图：

6.2.3 select下 拉表单元素

效果图：

6.2.3 textarea 文本域元素

(表单小结案例)

效果图：
(虽然有点长哈… 但是一定要敲哦)

7. 结束语

到这里HTML就到一段落了，下一次在CSS见。
老汉挥手~