网页设计与制作教程

2024-12-13 09:16:08   4  举报





AI智能生成

本教程将详细介绍如何设计和制作高质量的网页。从基础知识开始，如HTML、CSS和JavaScript等核心语言，到高级技巧，如响应式设计、用户体验和搜索引擎优化等，都将一一涵盖。通过学习这个教程，你将能够独立设计和制作出既美观又实用的网页。无论你是初学者还是有一定基础的开发者，都可以从这个教程中获益。让我们开始这段网页设计与制作的旅程吧！

HTML

作者其他创作

大纲/内容

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

font-family（字体族）该属性用于设置文本的字体族，可以使用多个字体名称进行设置

6.1.2.字体大小

font-size（字体大小）该属性用于设置文本的字体大小，可以使用绝对单位（如px、pt）或相对单位（如em、rem）进行设置。

6.1.3.字体粗细

font-weight（字体粗细）该属性用于设置文本的字体粗细，可以使用关键字（如normal、bold）或数值（如500、700）进行设置。

6.1.4.字体倾斜

font-style（字体样式）该属性用于设置文本的字体样式，可以使用关键字（如italic、normal）进行设置。

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

左对齐（left）：使用 text-align: left; 将文本左对齐。
右对齐（right）：使用 text-align: right; 将文本右对齐。
居中对齐（center）：使用 text-align: center; 将文本居中对齐。
两端对齐（justify）：使用 text-align: justify; 将文本两端对齐，即将文本均匀分布在行内。
默认对齐方式（inherit）：使用 text-align: inherit; 继承父元素的对齐方式。

6.2.2.行高

使用像素值（px）：例如，line-height:20px;这将设置行高为20像素。
使用相对值（em或rem）：例如 line-height:1.5em;，这将设置行高为当前字体大小的1.5倍。
使用百分比（%）：例如 line-height:150%;，这将设置行高为父元素字体大小的150%。
使用无单位值：例如 line-height:1.5;，这将设置行高为当前字体大小的1.5倍，与em值相同。

6.2.3.文本的修饰.

text-decoration：设置文本的装饰效果。常用值有none（无装饰）、underline（下划线）、overline(上划线)、line-through（删除线）。
text-align：设置文本的对齐方式。常用值有left（左对齐）、center（居中对齐）、right（右对齐）。
text-transform：设置文本的大小写转换。常用值有uppercase（大写）、lowercase（小写）、capitalize（每个单词的首字母大写）。

6.2.4.段落首行缩进

使用text-indent属性。text-indent属性用于指定文本块的第一行相对于其容器块的起始位置的缩进量。

6.2.5.首字下沉

使用CSS的伪元素::first-letter来选择第一个字母，然后利用属性设置使其下沉。

6.2.6.字符间距

使用letter-spacing属性来设置字符间距
normal：默认值，表示正常字符间距。
<length>：使用像素、英寸、毫米等单位来设置具体的字符间距。
<percentage>：以相对于当前字体尺寸的百分比来设置字符间距。

6.2.7.文本的截断

使用text-overflow属性来控制文本的截断方式
clip：默认值，表示文本超出容器时会被裁剪，不显示省略号。
ellipsis：显示省略号(...)来表示被截断的文本。
fade：将被截断的文本逐渐变为透明，直到完全消失。

6.2.8.文本的颜色

使用color属性来设置文本的颜色。

6.2.9.文本的背景颜色

使用background-color属性来设置文本的背景颜色。

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

border-width：指定边框的宽度，可以是具体的像素值（如2px）或相对值（如1em）。
border-style：指定边框的样式，常用的样式有：solid（实线），dashed（虚线），dotted（点线）等。
border-color：指定边框的颜色，和设置文本颜色一样，可以使用颜色关键字、十六进制颜色值、RGB值或HSL值。

6.3.2.图像缩放

6.3.3.设置背景图像

使用background-image属性来设置元素的背景图像。

url('image.png')：表示图像的路径。可以是相对路径或绝对路径。

6.3.4设置背景重复

使用background-repeat属性来设置背景图像的重复方式

6.3.5.背景图像定位

6.3.5.1.使用关键字进行背景定位

/* 6.3.5.1.使用关键字进行背景定位 */
background-position: center bottom;

6.3.5.2.使用长度进行背景定位

/* 6.3.5.2.使用长度进行背景定位 */
background-position: 100px 50px;

6.3.5.3.使用百分比进行背景定位

/* 6.3.5.3.使用百分比进行背景定位 */
background-position:30% 50%;

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

6.4.1.2.修饰按钮

6.4.1.3.制作登录表单

第七章利用CSS和多媒体美化页面

7.1 CSS链接的美化

7.1.1.文字链接的美化

7.1.2.按钮链接的美化

7.1.3背景链接的美化

7.2 CSS列表的美化

7.2.1.列表项类型（list-style-type）

list-style-type 是一个 CSS 属性，用于指定列表项的标记类型。它可以使用不同的值来改变列表项的标记样式。

7.2.2.列表项图像（list-style-image）

列表项图像（list-style-image）是一种CSS属性，它允许您为无序列表（ul）或有序列表（ol）的列表项添加自定义图像作为项目标志。使用list-style-image属性，您可以将某个图像应用于每个列表项的前面，以取代默认的标记（例如圆点或数字）

7.2.3.列表项位置（list-style-position）

list-style-position 属性用于指定列表项标记的位置。它有两个可能的值：
inside：列表项标记位于列表项内容的内部。
outside：列表项标记位于列表项内容的外部。

7.2.4.复合列表样式（list-style）

list-style-type：用于指定列表项的标记类型，比如实心圆（disc）、空心圆（circle）、实心方块（square）、小写字母（lower-alpha）、大写字母（upper-alpha）等等。
list-style-position：用于指定列表项的标记位置，可以是内部（inside）或者外部（outside）。
list-style-image：用于指定列表项的自定义标记图像，可以使用图像的 URL。

7.2.5.利用背景图像实现列表项标记

可以使用CSS的list-style-image属性来使用背景图像作为列表项的标记。

7.3 CSS表格的美化

7.3.1.border-collapse

border-collapse属性用于定义表格的边框合并方式。它有两个可能的值：
collapse：相邻单元格的边框会合并为一个单一边框。
separate：相邻单元格的边框会保持独立。

7.3.2..border-spacing

border-spacing属性用于定义表格中单元格之间的间距。它可以为表格添加一些空隙，从而使表格看起来更美观。

border-spacing属性有两个值，分别表示水平和垂直间距，它们之间由一个斜杠分隔。

7.3.3.caption-side

使用caption-side属性来调整表格标题（caption）的位置。caption-side属性有以下几个属性值：
top：默认值，表格标题位于表格顶部。
bottom：表格标题位于表格底部。
initial：使用浏览器默认的表格标题位置。
inherit：继承父元素的表格标题位置。

7.3.4.empty-cells

使用empty-cells属性来美化表格中的空单元格。empty-cells属性有以下两个属性值：
show：默认值，表示显示空单元格。这意味着即使一个单元格没有内容，也会显示出来。
hide：表示隐藏空单元格。这意味着如果一个单元格没有内容，它将不会显示出来。

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

7.4.2.<bgsound>标签的使用

自HTML5发布以来，<bgsound>标签已经被废弃，不再被HTML规范所支持。相反，现在推荐使用<audio>标签来嵌入音频文件

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签

<audio>标签是HTML5中新增的一个多媒体标签，用于在Web页面中嵌入音频内容

7.4.3.2.<video>标签

<video>标签的src属性指定了视频文件的URL。其中，controls属性用于显示视频播放器的控制按钮，如播放/暂停、快进/快退、音量控制等。在<video>和</video>之间的文本内容是在不支持<video>标签的浏览器中显示的备用文本

第8章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

8.1.1.2 列表样式的设计

8.1.1.3 超链接样式的设计

8.1.1.4 鼠标事件

要实现导航栏中的鼠标事件，可以使用JavaScript来为超链接元素添加事件监听器

8.1.2 下拉子菜单导航栏的设计与实现

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

/* 8.1.2.2 列表样式的设计 */
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
}
ul li ol li{
float:none
}

8.1.2.3 二级菜单的隐藏和显示设计

/* 8.1.2.3 二级菜单的隐藏和显示设计 */
ul li ol{
display: none;
}
ul li:hover ol{
display: block;
}

8.1.2.4 DIV样式的设计

/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
a{
text-decoration: none;
display: block;
width: 100px;
text-align: center;
padding: 10px;
}

8.1.2.5 超链接样式的设计

利用CSS 为列表超链接重新设置样式，例如，对超链接的a:link 和a:visited进行设
置，表示超链接未被访问和已访问状态

8.1.2.6 鼠标事件

利用CSS为无序列表选项l:hover 和有序列表的a:hover进行样式设置，表示鼠标悬停状态时的样式变化。

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

8.2.1.2 DIV样式的设计

8.2.1.3 列表样式的设计

8.2.1.4 超链接样式的设计

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

8.2.2.2 DIV样式的设计

8.2.2.3 二级菜单的隐藏和显示设计

8.2.2.4 列表样式的设计

8.2.2.5 超链接样式的设计

8.3 底部固定导航栏

8.3.1 导航栏的创建

8.3.2 列表样式的设计

/* 8.3.2 列表样式的设计 */
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float: left;
}

8.3.3 菜单固定底部的设计

使用CSS的`position: fixed;`属性来固定导航栏在页面底部。

8.3.4 超链接样式的设计

/* 8.3.4 超链接样式的设计 */
a{
display: block;
width: 80px;
padding: 10px;
text-align: center;
text-decoration: none;
}

8.3.5 鼠标事件

/* 8.3.5 鼠标事件 */
a:link,a:visited{
background-color: #0000ff;
color: #ffff00;
}
a:hover,a:active{
background-color: #ffff00;
color: #0000ff;
}

第九章DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV

DIV+CSS是一种常用的网页布局技术，其中DIV（块级元素）用于创建网页的结构，而CSS（层叠样式表）用于控制网页的样式和布局。DIV元素是HTML中的容器元素，可以用来划分网页的不同区域，例如头部、导航栏、内容区域、侧边栏和底部等。

CSS则用于设置DIV元素的样式，包括背景颜色、边框样式、字体、大小、间距和位置等。通过CSS的选择器和属性，可以对网页的各个元素进行精确的样式控制，实现丰富多样的布局效果。

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

width 和 height
width：设置元素的宽度。
height：设置元素的高度

9.1.2.2 div标签内直接设置宽高

在 HTML 中，可以直接在 <div> 标签内使用内联样式来设置宽度和高度。内联样式通过 style 属性来应用，这种方式适合快速设置单个元素的样式

9.1.2.3 div使用选择器设置宽高

在 CSS 中，使用选择器来设置 <div> 元素的宽度和高度是一种常见且推荐的做法。这样可以使你的样式更加模块化和易于维护

9.1.2.4 div高度的百分比设置问题

如果div的宽度设置了百分比，则相对其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

使用float属性来实现元素的浮动布局。可以使用float: left或float: right将元素浮动到左侧或右侧。

使用position属性来控制元素的定位。可以使用position: relative或position: absolute将元素相对于其父元素或文档进行定位。

使用flexbox布局来实现灵活的布局。通过设置display: flex和相关的flex属性，可以轻松创建水平或垂直的弹性布局。

9.2.2 DIV元素的宽度自适应

宽度自适应是指两个并排的div，其中左边的div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

9.2.3 DIV内容的居中

平时说的 div内容居中，只是保持 div内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高(line-height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

9.2.4 DIV元素的嵌套

DIV元素可以嵌套在其他DIV元素中，用于创建复杂的布局结构和组织内容。通过嵌套DIV元素，可以实现更灵活的布局和样式控制

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

左中右布局在网页设计时最为常用，即div-left是导航菜单，div-main是视觉集中点，放置主要内容，div-right是表单或链接等。而左中右三个区域一并被包含在一个大的 div-all 中

9.3.2 上中下布局

上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告，div-main 是视觉集中点，放置主要内容，div-footer是版权信息等。而上中下三个区域一并被包含在一个大的 div-all 中。

9.3.3 混合布局

混合布局也可以叫综合型布局。混合布局可以在一列或一行布局的基础之上，分为多列或多行布局。网页布局的结构普遍都是三列布局，或者可以根据实际需求，对网页再进行划分。

第十章JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

10.1.1.1 简单性

10.1.1.2 动态性

10.1.1.3 跨平台性

10.1.1.4 安全性

10.1.1.5 基于对象的语言

10.1.2 JavaScript入门案例

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

语法:
function functionname(参数1,参数2,.…,参数n){
函数体语句;
}

10.1.3.2 body标记中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JavaScript脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo=document.getElementById("clk");
demo.onclick=msg;

function msg(){
alert("我是body中的JavaScript脚本")
}
</script>
</body>
</html>

body标记中的脚本

10.1.3.3 外部js文件中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的Javascript函数</title>
<script type="text/javascript" src="js/Demo.js">
document.write("这条语句没有执行，被忽略掉了！");
</script>
</head>
<body>
<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
</body>
</html>

外部js文件中的脚本

JavaScript代码

function message(){ alert("调用外部js文件的JavaScript函数") }

10.1.3.4 事件处理代码中的脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理代码中加入JavaScript代码</title>
</head>
<body>
<form>
<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接在事件处理代码中加入JavaScript代码">
</form>
</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

10.2.1.2 变量不区分类型

10.2.1.3 每行代码结尾可以省略分号

10.2.1.4 注释与C、C++、Java等语言相同

10.2.2 标识符和常用变量

10.2.2.1 标识符

(1)必须使用英文字母或者下划线开头。
组成部分。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。(3)不能使用JavaScript关键字与JavaScript保留字。
10.2
(4)不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
JavaSc
(5)大小写敏感,如name和Name是不同的两个标识符。
运算符、逗
合法的标识符:Hello、_12th、sum、Dog23等。

不合法的标识符:if、3com、case、switch等。

10.2.2.2 变量声明

JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任在JavaScript语言环境中，变量是用于存储信息的容器，关键字var可应用于JavaScript中任何类型的变量声明。

10.2.2.3 变量类型

数值型(Number)：用于存储数字，可以是整数或小数，例如：var age = 25;、var price = 9.99;

字符串(String)：用于存储文本，由引号（单引号或双引号）包围，例如：var name = "John";、var message = 'Hello world';

布尔值(Boolean)：表示真或假，只有两个值：true或false，例如：var isTrue = true;、var isFalse = false;

对象(Object)：用于存储键值对的集合，每个键都是一个字符串，每个值可以是任意类型，例如：var person = {name: 'John', age: 25};

空值(Null)：表示变量没有值，例如：var x = null;

未定义(Undefined)：表示变量声明但未初始化，例如：var y;

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

10.2.3.2 关系运算符和表达式

10.2.3.3 逻辑运算符和表达式

子主题

10.2.3.4 赋值运算符和表达式

子主题

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。语法:
变量=表达式1?表达式2:表达式3说明:
该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量，否则将表达式3的值赋给变量。例如，变量number 1、number2比较大小，将较大的数赋值给变量 max，代码如下:
var max =( numberl>number2)?numberl:number2;

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值
var rs=(3+5,10 *6);/*先计算第一个表达式3+5的值为8,再计算第二个表达式10*6的值为6例如:
最后将第二个表达式的值60赋给变量rs*/

10.2.4 程序设计

10.2.4.1 条件分支语句

条件分支语句如if、else if、else，用于根据不同的条件执行不同的代码块。

10.2.4.2 循环语句

循环语句如for、while、do...while，用于重复执行一段代码。

10.2.5 函数

10.2.5.1 定义函数

function 函数名(varl，var2,var3)
/*函数代码*/
varl、var2、var3等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return语句。例如: function sum( a,b)
x=a+b; return x;

10.2.5.3 函数调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>

函数调用

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

本地对象列表

10.3.1.2 属性

10.3.1.3 方法

10.3.2 常用对象

10.3.2.1 window对象

window.location：返回当前窗口中加载的文档的URL。
window.history：允许访问浏览器的历史记录。
window.document：返回当前文档。
window.screen：包含有关屏幕的尺寸和设置的信息。

10.3.2.2 document对象

document.URL：返回当前文档的URL。
document.domain：设置或返回当前文档的域。
document.title：设置或返回当前文档的标题。
document.body：返回文档的<body>元素。
document.head：返回文档的<head>元素。

10.3.2.3 location对象

location.href：设置或返回当前页面的URL。
location.search：返回URL中的查询字符串（问号?之后的部分）。
location.hash：设置或返回URL中的锚点（#之后的部分）。
location.host：返回URL中的域名和端口号（如果有）。
location.hostname：返回URL中的域名。
location.port：返回URL中的端口号。
location.pathname：返回URL中的路径。
location.protocol：返回URL中的协议。

10.3.2.4 navigator对象

navigator对象属性。navigator中最重要的是userAgent属性，它用来返回包含浏览器版本等信息的字符串;其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie

10.3.2.5 screen对象

10.4 JavaScript事件

10.4.1 事件及事件处理

直接在HTML标记中指定。这种方法用得最多。一般形式:
<标记…事件="事件处理程序”[事件="事件处理程序".]>

10.4.2 常用事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad</title>
</head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true)
alert("已启用Cookie")
else
alert("未启用Cookie")
}
</script>
<p>提示框会告诉你，浏览器是否已启用Cookie</p>
</body>
</html>

onLoad事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchage事件</title>
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数</p>
</body>
</html>

onchage事件

第一章网页基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.1.1.1 网页

网页是构成网站的基本单位，是由HTML、CSS和JavaScript等技术创建的文档。它可以包含文本、图像、链接、表格和其他多媒体元素，用于向用户展示信息和提供交互功能。

1.1.1.2 网站

网站是由多个网页组成的集合，它们共同形成了一个完整的网络实体。网站旨在向用户提供特定的内容、服务或功能，并通过网页之间的导航和链接进行组织和展示。

1.1.1.3 常用术语

Intertent:由各种不同类型的计算机网络连接起来的全球性网络

URL（统一资源定位符）：用于标识网页或网站的地址，用户通过URL访问特定的网页或网站。

超链接（Hyperlink）：用于将一张网页与另一张网页或其他资源进行关联。通过点击超链接，用户可以快速跳转到目标页面。

浏览器是用来检索、展示以及传递Web信息资源的应用程序。

IP：用于标识网络设备的唯一数字标识符。

HTTP（Hypertext Transfer Protocol）：用于在Web浏览器和服务器之间传输超文本的协议。

FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方

WWW是“World Wide Web”的缩写，中文称为“万维网”。它是一个通过互联网访问的、由许多互相链接的文档和资源组成的系统。
域名（Domain Name）是互联网上用于识别和定位网站的名称。

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

静态网页：HTML/CSS

1.1.2.2 动态网页

动态网页：JavaScript

1.2 网页的基本构成元素

1.2.1 文本

文本体积小，网络传输数据快，是网页最主要的基本元素

1.2.2 图片和动画

通过<img>标签来引入和显示包括GIF、JPEG（最广泛）和PNG等

1.2.3 超链接

通过<a>标签可以创建超链接，让用户点击后跳转到其他页面或位置。

1.2.4 音频视频

可使网页效果多样化用的音频格式有mid 和mp3

1.2.5 交互表单

1.2.6 其他常见元素

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

合适的色彩搭配可以提升网页的视觉吸引力和用户体验

1.4 Web前端技术简介

1.4.1 初识Web前端

HTML
CSS
JavaScript
响应式设计
前端开发工具

1.4.2 Web前端开发的三大核心技术

1.4.2.1 HTML

HTML:网页制作的标准语言，控制页面结构

1.4.2.2 CSS语言

CSS：可静态的修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

1.4.2.3 JavaScript语言

JavaScript：是一种属于网络的脚本语言常用来为网页添加各式各样的动态功能

1.4.3 前端开发工具

1.4.3.1 浏览器

1.4.3.2 网页编辑器

1.4.3.3 切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本

1.5.1.3 标记

标记用<>括起来，通常由一个开始标记和一个结束标记组成，中间包含元素的内容。即：<xxx> 内容</xxx>

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

<html>处于文档的最前面，表示HTML文档的开始

1.5.2.2 HTML文档头标签<head>...</head>

文档头部内容在开始标签<html>和结束标签</html>

1.5.2.3 文档编码

文档编码格式如下:<meta charset=" utf-8"/>

1.5.2.4 HTML文档主体标签<body>...</body>

它定义网页上显示的主要内容与显示格式，是整个网页的核心

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标题标签位于<head>与</head>中

1.7.2 <meta>标签

1.7.2.1 keywords

keyworlds用于提供关于页面的简短描述，设置关键字

1.7.2.2 description

description 设置描述信息，设置字符集

1.7.3 <link>标签

rel：引入的资源类型（例如icon、stylesheet）
type：指定MIME类型（如text/css）
href：指定外部的URL

1.7.4 <script>标签

作用：内联、外置或动态引入js脚步文件。

格式：<scripttype="text/css" src="脚本文件名 n.js"></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

注释：

快捷键位ctrl+/

1.8.2 特殊符号

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

常见的段落标签是<p>标签

2.1.2 标题标签

HTML提供了六个级别的标题标签，从<h1>到<h6><h1>

2.1.3 换行标签

换行标签用于在文本中创建一个新的行<br/>。

2.1.4 水平线标签

水平线标签用于创建一条水平线<hr/>

2.1.5 预格式化标签

用于在HTML中展示保持原始格式的文本内容，用<pre>标签来定义。

2.1.6 缩排标签

用于调整文本或元素的显示格式，使其更易于阅读和理解。

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.1.1.1 超链接的定义

在网页中用于链接到其他网页、文件或位置的元素

2.1.1.2 超链接的分类

超链接可分为页面超链接、锚点超链接和电子邮件超链接等

2.1.1.3 路径

URL（Uniform Resource Locator，统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。
URL由三部分组成：协议、服务器、文件路径。

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

是HTML中的 <a> 标签，用于创建超链接和内部链接中的目标位置。

通过在目标位置的标签上设置一个唯一的 id 属性，然后在超链接中使用 href 属性指向这个id，就可以创建一个锚点。

2.2.2.2 指向其他页面的超链接

1.链接到同一目录：<a href="目标文件名.html">热点文本</a>

2.链接到下一级目录：<a href="子目录名/目标文件名.html">热点文本</a>

3.链接到上一级目录：<a href="../目标文件名.html">热点文本</a>

4.链接到同级目录：<a href="../子目录名/目标文件名.html">热点文本</a>

2.2.2.3 指向书签的超链接

设置标签p : <a name="p"></a> 

指向超链接 :<a href="#p">段落</a>

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

GIF
JPEG
PNG

2.3.1.2 使用网页图像的要点

图像优化：确保图像文件大小尽可能小，以减少网页加载时间。可以通过压缩图像、选择合适的图像格式等方式进行优化。

图像尺寸：将图像调整为适合在网页上显示的尺寸。避免在网页上拉伸或缩小图像，以避免图像失真或模糊。

图像响应式设计：为了适应不同设备和屏幕尺寸，使用响应式设计技术为不同的设备提供适当的图像大小

网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

2.3.2.2 设置图像大小

2.3.2.3 图像的边框

2.3.3 图像超链接

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.1.1 在<ul>后指定符号的样式

2.4.1.2 在<li>后指定符号的样式

2.4.2 有序列表

2.4.3 定义列表

<dl>院校名称：</dl>
<dd>江西应用工程职业学院</dd>
<dl>办学宗旨：</dl>
<dd>以人为本培养高素质高技能人才</dd>
<dl>校训：</dl>
<dd>爱国明志敢为人先</dd>
<dl>校园精神：</dl>
<dd>诚朴坚卓达谦智勇</dd>

2.4.4 嵌套列表

通过在父级列表项目中包含子级列表来创建嵌套列表

第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

<table>标签：用于定义整个表格，是表格的根元素。在<table>标签中，可以包含多个<tr>标签和<caption>标签。

<tr>标签：用于定义表格中的行。在<table>标签内部，通过使用多个<tr>标签创建多行。每个<tr>标签中可以包含多个<td>或<th>标签。

<td>标签：用于定义表格中的普通单元格。每个<td>标签表示一个单元格，可以放置文本、图像和其他HTML元素。

<th>标签：用于定义表格中的表头单元格。<th>标签的内容通常用于标识列的名称或描述，具有粗体和居中对齐的默认样式。

<caption>标签：可选的标签，用于在表格上方或下方添加标题。每个表格只能有一个<caption>标签。

表格的边框：可以使用CSS样式来设置表格的边框属性，包括边框宽度、边框颜色、边框样式等。

3.1.2 表格的基本语法

3.2 表格属性的设置

3.2.1 表格边框属性

border：设置表格边框样式和宽度

bordercolor：设置表格边框的颜色

bordercolorlight:设置表格亮边框颜色

bordercolordark:设置表格暗边框颜色

3.2.2 表格的宽度和高度属性

3.2.3 表格背景颜色与表格图像属性

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性

设置单元格间距： <table cellspacing="10px" border="2px">

设置单元格边距：<table cellpadding="10px" border="2px">

3.2.6 表格水平对齐属性

3.2.7 设置表格的（tr）标记行的属性

居左：<tr align="left">

居右：<tr align="right">

居中：<tr align="center">

3.2.8 设置单元格的属性

行背景颜色属性（bgcolor）：设置行的背景颜色。

行高度属性（height）：设置行的高度

行垂直对齐属性（valign）：设置行中内容的垂直对齐方式

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

<td rowspan="2">跨行单元格</td>

3.2.9.2 单元格跨列

<td colspan="3">跨列单元格</td>

3.3 表格嵌套

3.4 表单

3.4.1 表单标记

表单标记、取值及说明

3.4.2 定义域和域标题

在HTML中，可以使用<fieldset>标记来定义一个字段集，用于将一组相关的表单元素分组在一起。

<fieldset>标记包裹了一组表单元素以及一个可选的<legend>标记，用作字段集的标题。

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

type的属性值为text,在表单中插入一个单行文本输入框

3.4.3.2 密码输入框

type属性为password,用于接收用户输入的密码，并以星号或圆点等方式将输入内容隐藏起来。

3.4.3.3 复选框

type属性为checkbox,向表单插入一个复选框，value属性用于设置复选框的值，用户利用复选框在网页上设置多项选择，复选框有一个checked属性，可以用来设置复选框的初始选中状态。

3.4.3.4 单选按钮

type属性值为radio,用户可以通过单击单选按钮来选择其中一个选项。只有一个单选按钮可以被选中

3.4.3.5 图像按钮

type属性值为image，可以向表单插入一个图像按钮

3.4.3.6 提交按钮

type属性值为submit,可以插入一个提交按钮，value设置按钮名称

3.4.3.7 重置按钮

type属性值为reset,插入一个重置按钮，将表单输入内容清空

3.4.3.8 普通按钮

type属性值为button,与提交按钮不同，普通按钮通常用于执行一些前端操作，例如展示隐藏内容、弹出对话框、发送AJAX请求等。可以通过JavaScript来为普通按钮添加事件监听器，以便在用户点击按钮时执行特定的操作。

3.4.3.9 文件选择框

type属性值为file,可以向表单中插入一个文件选择框

3.4.3.10 隐藏框

type属性为hidden,可实现向表单中插入一个隐藏框

3.4.4 多行文本输入框

可以用于用户输入大段文字或多行文本的情况。可以使用<textarea>标签创建多行文本输入框。

<textarea>标签可以设置rows和cols属性，分别表示可见的行数和列数。可以根据实际需求调整这些属性的值。

3.4.5 下拉列表框

是一种用于提供选项选择的表单元素。它允许用户从预定义的选项中选择一个或多个值，可以使用<select>标签创建下拉列表框，内部使用<option>标签定义每个选项。

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

4.1.2传统HTML的缺点

4.1.2.1.维护困难

4.1.2.2.标记不足

4.1.2.3.网页过“胖”

4.1.2.4.定位困难

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

CSS将样式和HTML文档分离，使得样式可以独立修改，

4.1.3.2.增强了网页的表现力

CSS 样式属性提供了比HTML更多的格式设计功能

4.1.3.3.使整个网站显示风格趋于统一

使用CSS可以为整个网站或整个文档定义一套样式，使得网站或文档的风格和外观保持统一和一致性。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放CSS样式文件的目录一般命名为style或者css

4.1.4.2.样式文件的命名规则

一般命名为style.css 或css.css

4.1.4.3.选择器的命名规则

由小写英文字母或下划线组成，必须以字母开头，不能为纯数字

4.1.4.4.CSS代码注释

单行注释：使用双斜线（//）来表示单行注释

4.1.4.5.CSS代码缩进

按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号

4.2 CSS语法基础

4.2.1CSS基本语法

4.2.1.1.基本语法

selector{ propertyl :valuel ; property2:value2 ; property3:value3;…}
选择器|属性1:属性值1;属性2:属性值2;属性3:属性值3;.}

4.2.1.2.语法说明

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器是一种用于在HTML文档中选择特定元素或元素组合的方法。它们以一种简洁的方式来定位或选择特定的HTML元素

4.2.2.2.class选择器

使用class选择器可以为某个元素定义样式，并使多个元素共享相同的样式。

要创建一个class选择器，需要在选择器名称前加上一个句点（.），然后跟上class属性的值。

4.2.2.3.ID选择器

ID选择器只能在HTML页面中使用次，针对性更强。定义ID选择器时，需要在id名称前加一个“#”

4.2.2.4.伪类选择器

伪类选择器（Pseudo-class selector）是CSS中一种用于选择特定状态或特定位置的元素的选择器。它们通过在选择器名称后面使用冒号（:）和关键字来指定，以匹配特殊的状态或条件。

4.2.3.CSS选择器申明

4.2.3.1.集体申明

.class,a{
font-family: fangsong;
}

4.2.3.2.全局申明

*{
font-family: 'Courier New', Courier, monospace;
}

4.2.3.3派生选择器（上下文选择器）

派生选择器（也称为上下文选择器）是一种CSS选择器，它根据元素在其他元素内或相对于其他元素的位置来选择元素。派生选择器使用空格分隔元素，表示它们之间的关系。

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）

4.3.1.1.基本语法

<标记 style"属性1：属性1；属性2：属性2；">修饰的内容</标记>

4.3.1.2.语法说明

标记是指HTML标记，如 p，hl 和 body等标记;
标记的 style定义的声明只对自身起作用;
style属性的值可以包含多个声明，每一声明之间用“;”分隔;
标记自身定义的style样式优先于其他所有样式定义。

4.3.2.内部样式表

4.3.2.1.基本语法

内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用<style ></ style>标记对来放置CSS 规则。

4.3.2.2.语法说明

4.3.3.外部样式表

4.3.3.1.链接外部样式表

4.3.3.2.导入外部样式表

4.4 CSS的属性单位

4.4.1.长度、百分比单位

常用长度单位

4.4.2.色彩单位

4.4.2.1.用十六进制数方式表示色彩值

取值范围是0到F（即0到15），0表示最小值，F表示最大值。

4.4.2.2.用色彩名称方式表示色彩值

4.4.2.3.使用RGB（x,y,z）函数表示

rgb(255, 0, 0)表示红色，rgb(0, 255, 0)表示绿色，rgb(0, 0, 255)表示蓝色。

4.5.CSS继承与层叠

4.6 元素类型

4.6.1.块级元素

display属性设置为block将显示块级元素，块级元素的宽度为100%

4.6.2.行级元素

行级元素也称内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围(span)、表单元素等都是行级元素。

4.6.3.列表项元素

list-item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

4.6.4.隐藏元素

通过把display设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间

第五章CSS盒模型

5.1盒模型的定义

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

div{ width: 60px;}

5.1.2 盒模型的高度

div{ height: 40px; }

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.5 外边距

使用margin属性来设置元素的外边距，margin属性可以分为四个方向的值，分别是上、右、下和左边距。也可以使用简写形式来设置所有四个方向的边距。

5.3.2 外边距的合并

5.3.2.1 行级元素外边距合并

当相邻的两个行级元素（inline-level elements）具有上下外边距时，它们的外边距会合并（margin collapsing）。外边距合并是指两个外边距重叠在一起，形成一个较大的外边距。

5.3.2.2 块级元素外边距合并

当相邻的上下外边距都为正值时，它们会合并成一个外边距，大小取两个外边距中的较大值。
当相邻的上下外边距都为负值时，它们会合并成一个外边距，大小取两个外边距绝对值中的较大值的负值。
当相邻的上下外边距中的一个为正值，另一个为负值时，它们不会合并，而是将正值外边距和负值外边距相加，得到一个新的外边距。
当相邻的上下外边距中的一个为0时，它们不会合并，而是保持各自的值。

5.3.3 内边距设置

用padding属性表示，属性接受 length 值或 percent值，区别于外边距，内边距不可以使用负值。

5.3.4 边框设置

5.3.4.1上边框

border-top:border-style | border-width | border-color

5.3.4.2右边框

5.3.4.3下边框

5.3.4.4 左边框

5.3.4.5 边框样式

子主题

5.3.4.6 边框宽度

子主题