网页设计基础知识汇总

网页主体练习

<html>
<!-- 1.head文档头的作用：用于描述网页的基本信息，主要被浏览器使用，存放网页搜索的关键词 --><head><!-- 2.title 网页左上角名字 标题，且只能有一个 --><title>网页主体练习</title> <!-- 3.link 链接文件标记 --><link href="存放需要加载的资源的地址" media="媒体类型" rel="链接类型" type="内容的类型"> 常用来设置对CSS外部样式表的链接  ps:  <link rel="stylesheet(样式表)" href="mainstyles.css" type="text/css"> <!-- 4.style 用于设值网页的内部样式表 --><style> body { background-color:white; }h1 {font-size: 18pt;}</style><!-- 5.meta 元数据标记 -->  ？？？？<meta /> 这个"/"是否需要加，什么时候需要什么时候不需要？？？<meta name="参数值" content="参数值">        (用于描述网页，便于搜索引擎查分类)<meta name="keywords" content="网页设计教程">  (说明网页关键词和作者)<meta name="author" content="杨大哥"><meta http-equiv="参数值" content="参数值">  (提供给浏览器使用的控制信息，浏览器有的不支持)<meta http-equiv="refresh" content=" 5; url=home.html" >  (可以实现自动跳转功能，5秒后自动跳转home.html页面)<meta http-equiv="Content-Type" content="text/html"; charset=gb2312 >   (设置网页的内容类型和编码字符集，防止网页解析时出现乱码） (或者再另存为网页文件时，使用解码 Unicode模式 )</head><body><h1 align="" style="color:#000">我是一级目录</h1></body>
</html>

文本类标记

<!-- 1.标题字标签 --><h1> ~ <h6> ( 1~6 级标题 字体从大到小，双标记标签  )<!-- 2.普通文字 -->网页默认字体大小为标题h4的大小，但不加粗，在body中必须写在标记内，不能单独写在body中<!-- 3.修饰文字标签 --><i>斜体</i><b>粗体</b><u>下划线</u><strong>强调加粗</strong><big>字体大一号</big><small>字体小一号</small><sup>上标标签</sup><sub>下标标签</sub><></><!-- 4.修饰字体标签 用来控制字体、字号、颜色等属性 -->   ！！！！！！！！！！！！
*** <font face="设置不同字体,word中可以设置的字体DW中都可以设置" size="设置字号,有+-的相对于3号字体放大或缩小" ="" =""></font>
ps: <p> <font face="宋体" size="7" >有缘千里来相会</font> </p><!-- 5.特殊符号 -->< > & .... 需要用特殊符号来表示，在网上查，或者直接在DW中插入特殊字符<!-- 6.段落标记 --><p style="text-indent:2em;"> (首行缩进两字符) 这是一个段落标记，段落与段落之间会有一定间距 </p><!-- 7.其他类标记 -->

双标记 <h1></h1>
单标记 <hr>      分割线     常用属性    align：位置；  size 尺寸； width 长度  color 颜色   注释  <!-- 注释内容，只有自己能看见 -->
强制换行标记  <br/>

网页中的图像及其应用

<!-- 1.图像标记 -->  常用图像格式：GIF PNG JPG<img src="用于存放指定图像文件的路径和文件名，是img标记的必要属性"> 也可以在右上角选择插入图片直接插入<img />属性集    （像素：px）属性      属性值 src       URL    图像路径和文件名alt       文本    图像不能显示时的替换文本title      文本   鼠标悬停时显示的内容width      像素     设置图像宽度  （最好等比例调节）height     像素    设置图像高度  （最好等比例调节）border     数字    设置图像边框的宽度        ！！！！！！（边框的颜色可以改变么？默认为黑色。怎么改变？）vspace      像素     设置图像顶部和底部的空白（垂直边距）hspace       像素     设置图像左侧和右侧的空白（水平边距）align ( left：将图片左对齐； right：将图片右对齐；top：将图像顶端和文本第一行文字对齐，其他文字居图像下方middle：将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方bottom：将图像底部和文本的第一行文字对齐，其他文字居图像下方 )<!-- 2.相对路径，绝对路径 （src=""）-->*相对路径：指的是当前网页目录下图片的位置绝对路径：从根目录开始查找<!-- 3.背景图像，图像属性 -->在DW中点 文件--页面设置--外观--设置背景图片点 设计--双击图片--出现图片属性
<!-- 4.鼠标经过图像 -->点击 插入--HTML--鼠标经过图像--选择两张相同大小的图像自己敲代码（很长，不建议萌新使用。。大佬可以使用，感兴趣的也可以自行研究）

网页中的超链接及应用

<!-- 1. 超链接标签 -->   **（url 表示网上唯一地址，该地址叫url）**<a href="用于指定连接目标的url网络地址,或者相对路径下的html文件" target="用于指定链接页面的打开方式" title="指向链接显示的文字">超链接名称</a>**href**: 只要有<a></a>出现的一定要有href，否则不是一个完整的超链接，href可以链接网络上的任何地址target="" {*    _self:     默认，在同样的框架中打开被链接的文档*    _blank:    在新窗口打开链接文档_parent:   在父框架打开被链接文档_top:      在整个窗口中打开链接文档}<!-- 2. 图片超链接 --><a href="www.anyu.edu.com" target="_blank" > <img src="img/baidu.png"> </a>**<!-- 3. 热点图像 -->**首先插入一个图片 <img src="" alt="" width="" height="">点击DW中间上方的 拆分 ，点击出现的你插入的图片，会出现关于这个图片的属性在图片属性中，左下角有几个箭头图标选项，即为热点图像区域划分笔（你可以这样理解，方形、圆形、不规则形三种选项） ，点击你选择的划分笔，在图像上画出你要选择的区域，随后属性内容会发生变化，填入你的热点图像点击后进入的网址，打开方式，提示信息等。保存再打开，热点图像制作完成。ps：制作中国地图每个省的疫情分布信息图（在菜鸟教程中 有关于超链接的详细讲解 https://www.runoob.com/html/html-links.html ） **????? 如何实现超链接自定义颜色 ????? 超链接再点击后颜色为什么会变化？？？**

网页中的音频

<!-- 1. 音频格式 -->常用音频格式: Vorbis（类似于ACC的免费开源的音频编码，是替代MP3的下一代音频格式）、 MP3（音频压缩技术，文件小）、 Wav（windows录音标准格式，无损音乐格式的一种，文件很大）<!-- 2. 插入音乐 -->  浏览器不同，也会影响音乐的自动播放，或者播放是否成功<audio src="音乐地址" controls="controls" >可以插入提示性文本</audio>controls="controls": 为音频提供播放插件autoplay="autoplay": 当页面加载完后自动播放音频loop="loop"        : 音频结束后重新播放，或重复几次preload="preload"  : 如果有该属性，则音频在页面加载时进行加载并预备播放，**如果有autoplay属性则忽略本属性****！！！！ 浏览器不同会影响音频播放  怎么解决？？？？**答 :  **同时提供多种音频格式**<audio controls="controls"><source src="生日快乐.mp3" type="mp3"><source src="生日快乐.wav" type="wav">...       </audio>   （网页解析本段代码时，会先看第一个音频是否能播放，如果能则结束，如果不能测试下一种格式，知道成功或结束)  （**type: 文件扩展名，格式名**）  mp3最常用，基本上都能使用<!-- 3. embed嵌入标记 --><embed> 标签将多媒体文件插入，可以播放音频也可以 播放 **视频** ！！！<embed src="生日快乐.mp3" />
<!-- . -->

网页中的视频

<!-- 1. 视频格式 -->常用视频格式: Ogg 、MPEG 4 、WebM<!-- 2. 插入多媒体动画（1） -->  （360极速模式无法播放，需要把视频格式转化一下， mp4格式可以）<video src="视频文件路径" controls="controls" ></video> (必须是常用视频格式)controls="controls": 为视频提供播放插件autoplay="autoplay": 当页面加载完后自动播放视频 （最好不要自动播放）loop="loop"        : 视频结束后重新播放，或重复几次preload="preload"  : 如果有该属性，则视频在页面加载时进行加载并预备播放，**如果有autoplay属性则忽略本属性**poster="url"   :当视频缓冲不足时，该属性会链接一个图像，并将该图像按一定比例显示出来width: 改变宽  height: 改变高<!-- 2. 插入多媒体动画（2） --><embed></embed>  (格式与video一样，效果有些许差别，请自己尝试)<!-- 2. 插入多媒体动画（3） -->点击 插入--媒体--flv--添加动画--确定<!-- 2. 插入多媒体动画（4） -->swf 插入--swf--确定<!-- 3. 视频编码 -->可以用格式工厂转换格式，转换时最好转换成 H.264编码格式，否则（使用默认）在跨浏览器播放时可能会出问题

网页中的列表

<!-- 1.列表介绍 -->无序列表 : <ul></ul>  最常用有序列表 : <ol></ol>定义列表 : <dl></dl>HTML标签简写及全称大全 : https://blog.csdn.net/wuling129/article/details/104584102
<!-- 2.无序列表 --><ul type="disc"> (type="disc"  默认li内容前面有个小黑点 "·")<li>列表项1</li><li>列表项2</li>...</ul>ps: 京东网站  右键网页--查看元素--就能看到<!-- 3.有序列表 --> ps:排行榜<0l type="disc"> (type="disc"  默认li内容前面有个顺序数字123，如果type="A"则按照abc顺序排序 ，罗马数字也可以 )<li>列表项1</li><li>列表项2</li>...</0l>
<!-- 4.列表嵌套 --> （有序和无序列表相互嵌套）一般最多三层<ul type="disc"><li>列表项1</li><li>列表项2</li><0l type="disc"><li>列表项1</li><li>列表项2</li><ul type="disc"><li>列表项1</li><li>列表项2</li></ul></0l></ul><!-- 5.定义列表 -->**定义列表**常用于对**术语**或**名词**进行解释和描述，与有序无序列表不同，定义列表的列表项前**没有任何项目符号**   (常用来描述和解释某些专业名词)用于展示批量信息，京东里面也用到了<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl><!-- . -->
<!-- . -->

网页中的表格

<!-- 1. 表格的基本格式 --><table/>    定义表格 <caption/>  标题<th/>       定义表头（表格第一行 居中 加粗）<tr/>      定义行（设置在表格里）<td/>        定义表格单元（设置在行里）*(td 和 th 结构一样，th只是进行了相关修饰)*td 的大小也可以单独调*td 中可以嵌套新的表格<table><tr><td>内容</td><td>内容</td><td>**<table>  (表格的嵌套)<tr><td></td></tr></table>**</td></tr><tr><td>内容</td><td>内容</td><td>内容</td></tr></table><!-- 2. <table>下的常用属性 -->1.表格的宽度和高度width="px"           表格宽度height="px"           表格高度cellspacing="0px" 单元格间距（单元格与单元格之间的间距）（**如果设置了宽高，则该属性无效，rules也会影响**）cellpadding="0px"  单元格边距（单元格与单元格中的内容之间的边距）2.边框设置 ：在 <table ()> 小括号处添加设置border="1px"           增加边框  px表示像素bordercolor=""        边框颜色bordercolordark=""        右下边框高亮（**需要调节浏览器**）bordercolorlight=""      左上边框高亮（需要调节浏览器）frame=""             控制边框是否显现（一般不用）rules="all"           内边框设置（一般填all）3.背景设置：在 <table ()> 小括号处添加设置bgcolor=" "      设置表格背景颜色background=" "   设置表格背景图片**(图片大小和表格大小要匹配，等比例缩放，调节边框大小)**4.表格内文字格式设置：align=" "    水平对齐(左，中，右)valign=" "   垂直对齐(上，中，下)<!-- 3.  表格的嵌套 -->表格的合并设置：在 <td ()> 小括号处添加设置<td rowspan=" "> </td>     跨行合并（也称纵向合并）<td rcolspan=" "> </td>    跨列合并（也称横向合并）<td txet-align="对左 居中 对右" >单元格内容</td><!-- 4. 表格对网页进行布局 -->可以使用DW中的模板直接设置，也可以使用表格的嵌套自行设置
ps: 经典的网页排版布局：兰花网
<!-- . -->

网页中的表单

<!-- 1. 表单概念 -->常用来收集信息，主要由两部分组成（描述表单的HTML代码 和 服务器应用程序脚本）<!-- 2. 表单的属性设置 -->**<!-- 1.<from> 标记存放地址 -->**<from action="表单提交存储的地址(可以是本地也可以是网页地址)(谁来处理信息)" method="提交方式" ></from>method="" {get : 默认，小文件用getpost: 大文件用post，post 安全性更好，不容易被拦截}  （更详细的看下面的地址内容）***GET 和 POST 的区别**: https://www.w3school.com.cn/tags/att_form_method.asphttps://blog.csdn.net/fuyuehua22/article/details/38705935<!-- 2.<**input**>单标记(单行文本框) --><td><input type="" name="唯一标识" size="" value="" maxlength="" placeholder="用户提示信息"></td>*type=" " : {text     : 定义单行文本输入框password : 定义密码输入框radio    : 定义单选文本框checkbox : 定义多选文本框file     : 定义上传文件 from表单需要加上属性enctype="multipart/form-data"submit   : 定义提交按钮reset    : 定义重置按钮button   : 定义一个普通按钮}???? value=""  : 定义表单元素的值，此值是数据提交时键的值（例如按钮上的字，这只提交和重置时必须要有 value ）check=""  : radio 和 checkbox 默认被选中readonly  ： 只读 .next 和 password**<!-- 3. 单选文本框 -->**   <td><label><input type="radio" name="sex" value="1">男</label><label><input type="radio" name="sex" value="2">女</label></td>**<!-- 4. 多选文本框 -->** (可以添加多个)<td> <input type="checkbox"/> 抽烟 <input type="checkbox"/> 喝酒 <input type="checkbox"/> 烫头 </td><!-- 5. 下拉菜单元素 --> （value 功能与name类似 ）<td><select name="city" multiple="multiple"><option value="gz">广州</option><option value="sz">深圳</option><option value="zh" selected="selected" >中山</option>  (属性为设置默认选项)...</select></td><!-- 6. 多行文本框 -->（自我介绍一类，不止一行，可以调节大小）<td><textarea name="text" cols="默认多少列" rows="默认多少行"></textarea></td><!-- 7. 长传图片 --><td><input type="file" name="pic" ></td><!-- 8. 提交，重置按钮 --> （采用嵌套表格会使表格更美观，不使用也没关系）<tr><td colspan="2"><table width="100%"><tr align="center"><td><input type="submit" value="提交"></td><td><input type="reset" value="重置"></td></tr></table></td></tr><!-- 3. 表单对象属性的设置 --><!-- . -->
<!-- . -->
<!-- . -->

表单内容的扩展： https://www.runoob.com/html/html-forms.html

CSS（美颜，化妆术，美容师）

1、创建css

格式 ：  (选择器区分大小写) css中的空格不被解析
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

2、引入css样式表

行内式：
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>
style是标记的属性内嵌式：
<head>
<style type="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>

盒子模型

1、

标记意为区域，分割,经常和css一起使用

1、边框设置： border边框样式  border-style; 上边[右 下 左] 常用值: none 无，默认、solid 单实线、dashed 虚线、dotted 点线、double 双实线；边框宽度  border-width; 上边[右 下 左] 常用值:像素值 （所有的边框，每个边框都可以分开调，用空格分开即可）边框颜色  border-color; 上边[右 下 左] 常用值:颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)（所有的边框，每个边框都可以分开调，用空格分开即可）综合设置边框  border;       四边宽度，样式，颜色圆角边框  border-radius; 水平半径参数/垂直半径参数 常用值:像素值或百分比图片边框  border-images; 图片路径 裁切方式/边框宽度/边框扩展距离 重复方式

网页设计基础知识汇总相关推荐

计算机公共基础知识论文,计算机等级考试二级公共基础知识汇总.doc
计算机等级考试二级公共基础知识汇总.doc 计算机等级考试二级公共基础知识第1章数据结构与算法 1.1 算法 1.1.1 算法的基本概念算法是指对解题方案的准确而完整的描述.简单地说,就是解决问 ...
Serdes基础知识汇总
Serdes基础知识汇总从知乎https://zhuanlan.zhihu.com/p/423321485转载在开始了解高速接口的时候,必然会涉及到SerDes.serdes的知识点实际上非常多, ...
4.电子计算机的分类,公基计算机基础知识汇总40
公基计算机基础知识汇总40 (3页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 3. 运算精度高电子计算机具有以往计算机无法比拟的计算精度, ...
高二上计算机知识点,高二会考计算机基础知识汇总.doc
高二会考计算机基础知识汇总.doc 计算机应用基础试卷结构与题型试题分为知识题和操作题两大类,其中知识题约占40,操作题约占60.试卷内容比例为计算机基础知识和操作系统及其应用约占30.文字编辑.电子 ...
制作一个html文件效果如下图,网页制作基础知识-习题课件.ppt
网页制作基础知识-习题课件第一章网页制作基础知识;1.1 案例网页制作学习园地网页;1.1案例:网页制作学习园地网页; 1.1.1 功能要求1．整个网站主要以HTML代码编写的方式完成.页面风格 ...
视口锁定解锁lisp_CAD基础知识汇总第十四期：如何创建异形视口和解除视口锁定？...
视口的问题在CAD设计中也是一个常常困扰设计师的一个问题,今天的CAD基础知识汇总就教大家如何创建异形视口和解除视口锁定. 一.如何创建异形视口,创建非矩形视口解决方法一在命令行输入[MVIEW] ...
“元宇宙”基础知识汇总
元宇宙即将到来,无论您是否准备好. 随着技术迅猛发展,我们很容易迷失方向--或者被抛在后面,但没有必要恐慌.本文为大家准备了元宇宙基础知识汇总,由元创元宇宙研究院融合了目前网络对元宇宙的描述和分析的多 ...
脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达脑科学与脑电基础知识汇总该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
python基础知识资料-Python基础知识汇总
原标题:Python基础知识汇总 1.Anaconda的安装百度Anaconda的官网,下载左边的Python3.X版本然后是设置路径,最后给出Jupyter notebook.具体参考: 猴子: ...
python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...

网页设计基础知识汇总

网页主体练习

文本类标记

网页中的图像及其应用

网页中的超链接及应用

网页中的音频

网页中的视频

网页中的列表

网页中的表格

网页中的表单

CSS（美颜，化妆术，美容师）

盒子模型

网页设计基础知识汇总相关推荐

最新文章

热门文章

网页设计 基础知识汇总

网页主体练习

文本类标记

网页中的图像及其应用

网页中的超链接及应用

网页中的音频

网页中的视频

网页中的列表

网页中的表格

网页中的表单

CSS（美颜，化妆术，美容师）

盒子模型

网页设计 基础知识汇总相关推荐

最新文章

热门文章

网页设计基础知识汇总

网页设计基础知识汇总相关推荐