网页设计教程下载

一、Html概述

Html是超文本标记语言的缩写，意思是超文本标记语言。超文本指的是超链接，标签指的是标签。它是一种用来制作网页的语言。这种语言由标签组成，用这种语言制作的文件保存一个文本文件。文件扩展名是html或htm，html文件是网页。当一个html文件被编辑器打开时，它显示文本，而文本可以被编辑。如果用浏览器打开，浏览器会根据标签描述将内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页链接。二、Html标签语法Html标签分为:成对标签和自结束标签[空标签]

1、成对标签

成对出现。开始标记必须有结束标记。内容包装在两个标签中，开始标签的名称与结束标签的名称相同，结束标签必须以斜杠/开头

语法:

& ltfont & gt内容

语法:

& ltbr/>；注意事项:

成对标签中，结束标签必须以斜杠开头成对标签与成对标签可以嵌套不能交叉标签名不区分大小写，但是我们都必须小写三、Html基本架构

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& lttitle & gt& lt/title & gt；& lt/head & gt；& ltbody & gt& lt/body & gt；& lt/html & gt；1、!DOCTYPE！DOCTYPE html是一个文档语句，它将文档类型定义为html，并告诉不同的浏览器以标准的方式解析html语言。如果不写，就会出现怪异模式。所谓怪异模式，就是浏览器会用自己的方式解析，不同的浏览器有自己的解析方式，会导致无效、不兼容等问题。

注意html有两种类型的声明，一种叫xhtml，也就是html，另一种叫html5，是xhtml的升级版，所以我们建议使用html5的声明方法。

Xhtml声明方法:

& lthtmlxmlns = & # 34http://www.w3.org/1999/xhtml" & gt；

Html5声明方法:

& lt！DOCTYPE html & gt

2、html

Html是html文档的全部，也就是说，它代表一个网页。

Lang = & # 34在html中；恩& # 34；是的，文档语言被定义为英语。

3、head

Head是html的第一个子元素【子标签】，负责设置网页，定义标题。这些设置包括定义网页、css样式文件和JaScript文件的编码格式。设置的内容不会显示在网页上，但是标题的内容会显示在标题栏中。标题标签。

4、meta

Meta是html语言head标签中的辅助标签。标签不包含任何内容，但是标签的属性定义了与文档相关联的名称，例如编码。

& ltmeta charset = & # 34utf-8 & # 34；& gt& lt/meta & gt；5.bodybody也是html的第一个子元素，我们页面显示的所有内容都是用这个标签体写的。

四、Html文档规范

Html建立了写文档的标准，必须遵守。

所有标签必须小写。

所有属性都必须用双引号括起来。

五、Html注释

可以在html文档的代码中插入注释。注释是对代码的描述和解释，注释的内容不会显示在页面上。

注释的语法:

& lt！-纸条的内容-& gt；

六、html基本属性

注意:属性是标签的辅助功能。

属性描述bgcolor设置网页的背景颜色背景设置网页的背景图片。

1.bgcolor

设定网页的背景颜色。

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& lttitle & gthtml的属性

该路径分为:

相对路径 指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ： 可以理解为目标文件的绝对路径】绝对路径 指目标文件的完整路径，从盘符开始。3.background

设置网页的背景图片。

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& lttitle & gthtml的属性

Bgcolor和background不能同时使用。

背景无法指定绝对路径。

七、Html标签1.网页的组成

网页的构成:文字、图片、视频、超链接、列表、表格、表单等。

2、文本段落标签

标签描述hn设置文本标题[n:取值范围1 ~ 6]居中对齐hr水平线属性(宽度:宽度颜色:颜色大小:粗细)br换行符p段落

3、文本控制标签

标签描述字体设置字体，需要借助属性来设置。

属性描述颜色设置字体颜色大小设置字体大小，无单位，取值范围为1到7[浏览器默认:3] face设置字体样式。

& lt字体大小= & # 34；2"color = & # 34红色& # 34；face = & # 34Bold & # 34& gt& lt/font & gt；4.文本格式标签说明B定义粗体文本em定义强调文本I定义斜体文本小号定义小号印刷字体小号定义强调子定义下标sup定义上标ins定义插入字del定义删除字。

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gtHtml文本格式标签

标签定义。

是空标记，这意味着它只包含属性。

要在页面上显示图像，需要使用source属性(src)。Src指& # 34；来源& # 34；。source属性的值是图像的URL地址。

标签 描述 img 图片标签标签描述img图片标签

属性描述src指定图片的地址宽度，设置图片的宽度高度，设置图片的高度alt，设置图片的预备文本。

注意:不建议设置图片大小，这样容易失真。

6、audio

在Html中，声音是由标签定义的。

标签描述音频声音标签

属性描述src指定声音地址。

& lt音频src = & # 34nice.mp3 & # 34& gt抱歉，您的浏览器不支持

标签描述视频视频标签

属性描述src指定视频地址。

& lt视频src = & # 34美女。mp4 & # 34& gt抱歉，您的浏览器不支持

标签最重要的属性是href，它指定了链接的目标。

在所有浏览器中，链接的默认外观如下:

未访问的链接用下划线和蓝色标出。

访问过的链接用下划线和紫色标出。

活动链接带有红色下划线。

语法:

& lta href = & # 34链接目标& # 34；& gt点击内容

超链接分类:

内部链接 链接目标：本地页面 <a href="demo.html">点击内容</a>外部链接 链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>多媒体链接 链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>电子邮件链接 链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>锚链接 链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>9、列表

list的使用类似于word等软件中list的概念，只是用在网页展示中。

1.有序列表

有序列表是指用数字或字母表示的列表项。使用css可以定义更多的样式。

<!– 有序列表 –> <ol type="a"> <li>新闻一</li> <li>新闻二</li> <li>新闻三</li> </ol>

& lt！-有序列表-& gt；& ltol type = & # 34一& # 34；& gt& lt李& gt新闻一台

属性描述类型设置符号类型值:1aaaii默认数字start start从什么数字开始[用于ol标签]值从什么数字开始[用于li标签]。

<!– 有序列表 –> <ol type="a" start="4"> <li>新闻一</li> <li type="1" value="1">新闻二</li> <li>新闻三</li> </ol>11.4.3 其他类型

通过设置表单的类型字段，可以指定不同的输入内容。

类型描述电子邮件输入内容是电子邮件url输入内容是URL地址密码输入内容是密码电话号码，移动终端将调出数字键盘搜索搜索框隐藏表单提交表单重置重置表单按钮自定义按钮。

11.4.4 HIDDEN

隐藏表单是用来提交后台数据的，但是前台的内容是不显示的，所以对它们使用样式定义是没有意义的。

& lt输入类型= & # 34；隐藏& # 34；name = & # 34id & # 34value = & # 341"& gt11.4.5提交创建一个提交按钮，将表单数据提交到后台。有许多方法可以提交数据，比如AJAX或Html表单按钮。

A.使用input构建提交按钮。如果设置了name值，按钮数据也会提交到后台。如果有多个表单项，可以通过这些来判断是哪个表单提交的。

& lt输入类型= & # 34；提交& # 34；name = & # 34提交& # 34；value = & # 34提交表格& # 34；& gtb .也可以使用button提交，可以通过设置type属性提交或不提交来提交表单。

& lt按钮类型= & # 34；提交& # 34；& gt提交表单

& lt输入类型= & # 34；正文& # 34；value = & # 34数据& # 34；只读& gt11.4.7模式表单可以通过设置模式属性来指定常规验证。

属性描述当不正确地输入模式正则表达式验证规则oninvalid时触发的事件。

& lt表单操作= & # 34；"& gt& lt= & # 34；的标签；用户名& # 34；& gt用户名

属性指示列中的字符数(css控件通常更好)和行数(css控件通常更好)。

& lttextarea cols = & # 3430"rows = & # 343"& gt请踩我…</textarea & gt；11.4.9选择下拉列表项可用于从多个值中进行选择。

属性描述multiple支持大小列表框高度optgroup选项组选中选中状态选项选项值多选。

<form action=""> <select multiple size="10"> <option value="">选择课程</option> <optgroup label="后端"> <option value="">JA</option> <option value="">PHP</option> <option value="">LINUX</option> </optgroup> <optgroup label="前端"> <option value="">HTML</option> <option value="">CSS</option> <option value="">JASCRIPT</option> </optgroup> </select> </form>

& lt表单操作= & # 34；"& gt& lt选择多个size = & # 3410"& gt& lt选项值= & # 34；"& gt选择课程

11.4.10 RADIO

单选框是指只能选择一个选项的表格，比如性别选择:男或女，为了保密只能选择一个选项。

属性描述选中的选定状态。

<form action=""> <input type="radio" name="" id="boy" checked> <label for="boy">男</label> <input type="radio" name="" id="girl"> <label for="girl">女</label> </form>

& lt表单操作= & # 34；"& gt& lt输入类型= & # 34；收音机& # 34；name = & # 34"id = & # 34男孩& # 34；选中& gt& lt= & # 34；的标签；男孩& # 34；& gt男性& lt输入类型= & # 34；收音机& # 34；name = & # 34"id = & # 34女孩& # 34；& gt& lt= & # 34；的标签；女孩& # 34；& gt女性& lt/form & gt；

11.4.11 CHECKBOX

复选框是指允许选择多个值的表单。

属性描述选中的选定状态。

<form action=""> <input type="checkbox" name="JA" id="ja"> <label for="ja">JA</label> <input type="checkbox" name="WEB" id="web"> <label for="web">WEB</label> </form>

& lt表单操作= & # 34；"& gt& lt输入类型= & # 34；复选框& # 34；name = & # 34JA & # 34id = & # 34ja & # 34& gt& lt= & # 34；的标签；ja & # 34& gtJA & lt/label & gt；& lt输入类型= & # 34；复选框& # 34；name = & # 34WEB & # 34id = & # 34web & # 34& gt& lt= & # 34；的标签；web & # 34& gtWEB & lt/label & gt；& lt/form & gt；

11.4.12 FILE

上传文件有很多种方式。可以用插件或者JS来拖拽。Html本身也提供了默认的上传功能，但是上传效果不是很美观。

属性描述多支持多选。接受允许上传类型。png，。psd或image/png，image/gif。

<form action="" enctype="multipart/form-data"> <input type="file"> <input type="submit" value="上传"> </form>

& lt表单操作= & # 34；"enctype = & # 34多部分/格式数据& # 34；& gt& lt输入类型= & # 34；文件& # 34；& gt& lt输入类型= & # 34；提交& # 34；value = & # 34上传& # 34；& gt& lt/form & gt；

11.4.13 日期时间

属性描述最小最小时间最大最大时间步长间隔:日期默认为1天，周默认为1周，月默认为1月。

A.日期选择

<h1>日期选择</h1> <form action=""> <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime"> </form>

& lth1 & gt日期选择

B.周选择

<h1>周选择</h1> <input type="week" name="" id="">

& lth1 & gt周选择

C.月份选择

<h1>月选择</h1> <input type="month" name="" id="">

& lth1 & gt月份选择

D.日期和时间

<h1>日期与时间</h1> <input type="datetime-local" name="" id="">

& lth1 & gt日期和时间

11.4.14 DATALIST

输入表单的输入值选项列表

<form action=""> <label for="username">用户名</label> <input type="text" name="" id="usernmae" list="less"> <datalist id="less"> <option value="JA">后台管理语言</option> <option value="CSS">美化网站页面</option> <option value="MYSQL">掌握数据库使用</option> </datalist> </form>

& lt表单操作= & # 34；"& gt& lt= & # 34；的标签；用户名& # 34；& gt用户名

12、框架集

frameset元素可以定义一个框架集。它用于组织多个窗口(框架)，每个框架都有一个独立的文档。在其最简单的应用中，frameset元素仅指定框架集中存在多少列或行，并且您必须使用cols或rows属性。

注:因为我们把原网页拆分了，所以不能写在正文里，拆分在头里。

标签描述框架集框架框架

属性描述列定义了框架集中列的数量和大小。rows定义框架集中的行数和大小。框架边框移除框架边框滚动移除滚动条。

12.1 垂直框架

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html垂直框架</title> <frameset cols="50%,*" > <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame> <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame> </frameset></head><body> </body></html>

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gtHtml垂直框架

12.2水平框架

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Html水平框架</title><frameset rows="50%,*" ><frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame> <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame></frameset></head><body></body></html>

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gtHtml水平框架

12.3 混合框架

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html混合框架</title> <frameset rows="20%,*" > <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame> <frameset cols="20%,*"> <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame> <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame> </frameset> </frameset></head><body> </body></html>12.4 导航框架

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html美女</title></head><body> <img src="../images/10.jpg" alt=""></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html野兽</title></head><body> <img src="../images/timg.gif" alt=""></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html动物</title></head><body> <img src="../images/4.jpg" alt=""></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html链接</title></head><body> <a href="Html美女.html" target="view">美女图片</a> <a href="Html野兽.html" target="view">野兽图片</a> <a href="Html动物.html" target="view">动物图片</a> </body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html垂直框架</title> <frameset rows="20%,*" > <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame> <frameset cols="20%,*"> <frame src="Html链接.html" frameborder="0" scrolling="no"></frame> <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame> </frameset> </frameset></head><body> </body></html>13、内联框架

iframe元素会创建包含另外一个文档的内联框架。& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gtHtml混合框架

属性描述了align的对齐方式，后来由css设置。设置宽度，设置宽度高度，设置高度，设置src，滚动iframe中显示的文档的URL名称，设置是否显示滚动条frameborder，设置iframe的边框。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Html内联框架</title></head><body> <iframe src="http://www.huya.com" frameborder="0" width="100%" height="500px"></iframe> <iframe src="http://www.taobao.com" frameborder="0" width="100%" height="400px"></iframe> </body></html>