写点什么

熟练 HTML5+CSS3,每天复习一遍

用户头像
魔王哪吒
关注
发布于: 2021 年 02 月 20 日
熟练HTML5+CSS3,每天复习一遍

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。



每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论



不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。

前言


学习网页的概念和分类,了解静态网页和动态网页的不同;了解网页浏览器的工作原理。了解 HTML,XHTML,HTML5 的概念,制作简单的 HTML 页面的开发。


什么是网页


可以在 internet 上通过网页浏览信息,如新闻,图片等,还可发布信息,如招聘信息等,网页是在某个地方某一台计算机上的一个文件。


网页主要由 3 部分组成:结构,表现,行为。


静态网页的特点是不论在何时何地浏览这个网页,看到的形式和内容都相同,且只能浏览,用户无法与网站进行互动。静态页面由 HTML 编写,扩展名一般为.htm, .html, .shtml, .xml等。与动态页面相比,动态网页是以.asp, .jsp, .php, .perl, .cgi等形式为后缀。


动态网页指网页的内容可以根据某种条件而自动改变。


网页浏览器的工作原理


采用 B/S 结构,即浏览器/服务器结构,用户工作界面是通过 www 浏览器来实现的:


  1. 事务逻辑主要在服务器端实现,极少部分的事务逻辑在前端实现。

  2. 大大简化了客户端的计算机载荷。

  3. 减轻了系统维护与升级的成本和工作量。

  4. 降低了用户的总体成本。


浏览器的工作原理:


  1. 浏览器通过 HTML 表单或超链接请求指向一个应用程序的 URL。

  2. 服务器收到用户的请求。

  3. 服务器执行已接收创建的指定应用程序。

  4. 应用程序通常基于用户输入的内容,执行所需要的操作。

  5. 应用程序把结果格式化为网络服务器和浏览器能够理解的文档,即通常所说的 HTML 网页。

  6. 网络服务器最后将结果返回到浏览器中。


www 的基础是 HTTP 协议,web 浏览器就是用于通过 url 来获取并显示 web 网页的一种软件工具,url 用于指定要取得的 Internet 上资源的位置与方式。


HTML 和 HTML5


HTML 是一种用来制作超文本文档的简单标记语言,用其编写的超文本文档称为 HTML 文档,它能独立于各种操作系统平台。


可扩展超文本标记语言 XHTML:


XHTML 是不需要编译,可以直接由浏览器执行,是一种增强了的 HTML。它的可扩展性和灵活性将适应未来网络应用的更多需求,是基于 XML 的应用。开发者在 HTML4.0 的基础上,用 XML 的规则对其进行一些扩展,由此得到了 XHTML,所以,建立 XHTML 的目的是为了实现 HTML 向 xml 的过渡。


HTML5 简化了:<!DOCTYPE html>,简化了 DOCTYPE,简化了字符集声明,以浏览器的原生能力替代脚本代码的实现,简单而强大的 HTML5API。


HTML 网页的结构


文件扩展名是操作系统用来标志文件格式的一种机制。扩展名如同文件的身份说明,区别了文件的类别和作用。


HTML 网页的文件后缀名是.html或者.htm.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""xxx">声明的作用,告诉浏览器所书写的HTML代码的版本。
复制代码


<meta>标签,是 HTML 文档<head>标签内的一个辅助性标签,meta标签分为 2 个重要的属性:namehttp-equiv,通常用于能够优化页面被搜索的可能性。


meta标签下name属性的使用:

<head> <meta name="keywords" content="nine, twenty-three"> <meta name="description" content="..."> <meta name="generator" content="Dreamweaver"> <meta name="author" content="depp"> <meta name="robots" content="all"></head>
复制代码


  1. keywords向搜索引擎说明页面的关键字,在 content 后输入供搜索的具体关键字。

  2. description向搜索引擎描述页面的主要内容。

  3. generator向页面描述生成的软件名,在 content 后面输入具体的软件名称。

  4. author网页的设计者,在 content 后面输入设计者的具体姓名。

  5. robots限制搜索的方式,在 content 后面通常可输入all,one,index,noindex,follow,nofollow其中之一,不同的属性分别有不同的作用,限制页面被搜索的方式。


meta标签下的另一个属性http-equiv,其作用是反馈给浏览器一些明确的信息,帮助浏览器更精确地展示页面。


<head> <meta http-equiv="content-type"  content="text/html; charset=gb2312"/></head>
复制代码


  1. refresh 对属性的具体描述,说明是令页面自动跳转的效果。

  2. content 后跟等待的时间,url 后跟跳转的页面链接地址。


link标签,定义了一个外部文件的链接,经常被用于链接外部 css 样式。


base标签为整个页面定义了所有链接的基础定位,其主要的作用是确保文档中所有的相对 url 都可以被分解成确定的文档地址。


style标签用于定义 css 的样式。表明了在页面中引入一个.style的样式表。


script标签用于定义页面内的脚本。


titl标题标签,body体标签.


一个好的 HTML 文档应具备以下 3 个方面:


  1. 代码使用标准规范,不应该有错误的拼写

  2. 代码结构清晰,使人一目了然

  3. 没有错误或者多余不必要的代码出现


文本设计


<br>..</br><p>...</p>
复制代码


<p align=left>...</p><p align=center>...</p><p align=right>...</p>
复制代码


给文本加标注:<acronym title="">...</acronym>注释的内容放在 title 属性后的引号中,被注释的内容放在标签内。


无序列表:ul,li,有序列表:ol li


定义列表:

<dl> <dt>...</dt> <dd>...</dd> <dt>...</dt> <dd>...</dd></dl>
复制代码


网页中的图像设计


  1. jepg格式的图像,该文件是常见的图像格式,.jpg后缀名,jpeg文件是经过压缩的一种图像。压缩的图像可以保持为 8 位,24 位,32 位深度的图像,压缩比率可以高达 100:1.jpeg可以很好地处理大面积色调的图像。


  1. png格式的图像,后缀名.png,这是一种能存储 32 位信息的位图图像,采用的是一种无损压缩的方式。支持透明信息,指图像以浮现在其他页面文件或页面图像之上。


  1. gif格式的图像,是一种图像交互格式,后缀名.gif,只支持 256 色以内的图像,gif文件的图像效果是很差的。


所以总的来说:jepg可以压缩图像的容量,png的质量较好,gif可以做动画。


矢量图


说说矢量图和位图最大的区别:


无论是否对图像进行缩放,都不会影响矢量图的效果,但会影响图的质量。


设计者一般只愿意将 logo,ui 图标,标识符号等简单图像存为矢量图。


图像的分辨率


分辨率的单位是dpi即每英寸显示的线数。通常所指的分辨率有两种,屏幕分辨率和图片分辨率,屏幕分辨率即计算机显示器默认的分辨率。


一般目前大部分显示器的分辨率是 1024px x 768px,图片分辨率定义是用于量度位图图像内数据量多少的一个参数。


分辨率越高的图像,包含的数据越多,图像的容量就越大,会消耗更多的计算机资源,需要更大的存储空间。


分辨率指的是每英寸的像素值,通过像素和分辨率的换算可以测算图片的长度。


页面中的图像


<img src=... alt=.../>
复制代码


  1. 使图像的顶部和同一行的文本对齐


<img style="vertial-align:text-top"/>
复制代码


  1. 使图像的中部和同一行的文本对齐


<img style="vertical-align:middle"/>
复制代码


  1. 使图像的底部和同一行的文本对齐


<img style="vertical-align:text-bottom"/>
复制代码


  1. 使图像的底部和文本的基线对齐


<img style="vertical-alignbaseline"/>
复制代码


hspace=30px 表示图像左,右两边与页面其他内容隔 30px 的距离。vspace=30px 表示图像上,下两边与页面的其他内容的间隔距离是 30px。


<img src="" widht="" height="">
<img src="..." border=>
<hr align=".." width="..." size="...">
<a href="链接对象的路径">链接锚点对象</a>
复制代码

把邮箱留给需要联系你的人


<a href="mailto:邮箱地址">链接锚点对象</a>
复制代码


  1. 链接还未被访问:a:link{...}

  2. 链接被选中:a:active{...}

  3. 光标滑过链接:a:hover{...}

  4. 链接被访问后:a:visited{...}


dashed 虚线
double 双线
groove 槽线
inset 内陷
outset 外陷
复制代码


热点图像区域的链接


map标签:


<map id=...> <area shape="..." coords="..." href="..."></map>
复制代码


shape属性,用于确定选区的形状,rect矩形,circle圆形,poly多边形。href属性,就是超链接。coords属性,用于控制形状的位置,通过坐标来找到这个位置。


网页中的表单


计算矩形的面积

<html><head><title>计算矩形的面积</title><style type="text/css"> .result {font-weight:bold;}</style><script language="JavaScript">function calculate() { var length = document.data.length.value; var width = document.data.width.value; var height = document.data.height.value; var area = document.getElementById('area'); area.innerHTML = length*widht; volume.innerHTML = length*widht*height; }</script>
复制代码


创建表单


  1. action属性,通过form标签定义的表单里必须有action属性才能将表单中的数据提交出去:


<form action="my.php"></form>
复制代码


它表明了这是一个表单,其作用是提交 my.php 页面中的数据。


  1. method属性告诉浏览器数据是以何种方式提交出去的。method属性下可以有 2 个选择:post或者get


  1. name属性,为了令递交出去的表单数据能够被处理这些数据的程序识别。


<form name="data">
复制代码


  1. 编码方式,enctype代表 HTML 表单数据的编码方式。


表单的工作原理


原理:在客户端接收用户的信息,然后将数据递交给后台的程序来操控这些数据。


<script language="JavaScript">
复制代码


如果通过引用外部 javascript 程序,就像链接外联样式:


<script type="text/javascript" src="dada.js"></script>
复制代码


创建表单


  1. action 属性,有 action 属性才能将表单中的数据提交出去:


<form action="da.php"></form>
复制代码


  1. method 属性,作用是告诉浏览器数据是以何种方式提交出去的。在 method 属性下可以有 2 个选择,post 或 get。


提交方式用 get,表单域中输入的内容会添加在 action 指定的 url 中,当表单提交之后,用户会获取一个明确的 url。get在安全性上较差,所有表单域的值直接呈现。post除了有可见的处理脚本程序,别的东西都可以隐藏。


  1. name 属性,添加 name 属性是为了令递交出去的表单数据能够被处理这些数据的程序识别。


<form name="dada">
复制代码


  1. 编码方式:enctype代表 HTML 表单数据的编码方式,application/x-www-form-urlencoded, multipart/form-data, text/plain三种方式。


  • application/x-www-form-urlencoded是标准的编码方式,提交的数据被编码为名称/值对。

  • multipart/form-data属性表示数据编码为一条消息,为表单定义mime编码方式,创建了一个与传统不同的post缓冲区,,页面上每个控件对应消息中的一个部分。

  • text/plain表示数据以纯文本的形式进行编码,这样在信息中将不包含控件或者格式字符。

  • multipart/form-data方式上传文件时,不能使用post属性。


  1. 目标显示方式,表示在何处打开目标url,可以设置 4 种方式。


  • _blank表示在新的页面中打开链接

  • _self表示在相同的窗口中打开页面

  • _parent表示在父级窗口中打开页面

  • _top表示将页面载入到包含该链接的窗口,取代任何当前在窗口中的页面。


<form action="mailto:da@qq.com" method="post" name="dada"enctype="text/plain" target="_blank"></form>
复制代码


表单域


是指用户输入数据的地方,表单域可分为 3 个对象,input, textarea, select。


input 对象下的多种表单的表现形式。


<input name="" type="" value="" size="" maxlength="">
复制代码


  • type表示所定义的是哪种类型的表单形式

  • size表示文本框字段的长度

  • maxlength表示可输入的最长的字符数量

  • value表示预先设置好的信息


  1. text单行的文本框

  2. password将文本替换*的文本框

  3. checkbox只能做二选一的是或否选择

  4. radio从多个选项中确定的一个文本框

  5. submit确定命令文本框

  6. hidden设定不可浏览用户修改的数据

  7. image用图片表示的确定符号

  8. file设置文件上传

  9. button用来配合客户端脚本


<form action="" method="post"><input name="name" type="text" size="20" maxlength="12"></form><input name="secret" type="password" size="20" maxlength="20">
<input name="one" type="radio" value="one" checked="checked"><input name="one" type="radio" value="two">
<input type="submit" value="确定"><input type="reset" value="恢复">
复制代码


创建 submit 按钮或 reset 按钮时,name 属性不是必需的。


hidden 隐藏域的样式表单


使用 hidden 来记录页面的数据并将它隐藏起来,用户对这些数据通常并不关心,但是必须提交数据。


<form action=da.asp><input type=hidden name=somehidden value=dada><input type=submit value=下一页></form>
复制代码


image 样式的表单


<input type="image" src="图片/小图标.jpg" alt="确定">
复制代码


  • src 属性指定这张图像的路径

  • alt 属性添加文本注释


file 上传文件的样式表单


file 样式表单允许用户上传自己的文件


<html><head><title>file样式的表单</title><style type="text/css">body {font:120% 微软雅黑;}input {font:100% 微软雅黑;}</style></head>上传我的文件:<form action="..." method="post" enctype="multipart/form-data"><input type="file" name="uploadfile" id="uploadfile"/></form></body></html>
复制代码


textarea 对象的表单


textarea 对象的表单


<html><head><title>file样式的表单</title><style type="text/css">body{font:120% 微软雅黑;}textarea{font:80% 微软雅黑;color:navy;}</style></head><body>留言板<form action="..." method="post" enctype="multipart/form-data"><textarea name="dada" rows="10" cols="50" value="dada">请说:</textarea></form></body></html>
复制代码


select 对象的表单


select 对象的表单


<form action=""> 地址: <select name="da1">  <option>1</option> </select></form>
复制代码


使用optgroup标签配合label属性来给选项分类:


<select name="上海"><optgroup label="da1"><option>1</option></optgroup><optgroup label="da2"><option>2</option></optgroup></select>
复制代码


select标签中加入size属性即可,如size=6表示是一个能容纳 6 行文字的文本框,超出设置的行数时,将出现滚动条。


<select name="上海" size="6">
复制代码


表单域集合:表单域的代码由fieldset标签和legend标签组合而成。


<form action="..." method="post"><fieldset><legend>注册信息:</legend>输入用户名:<input name="name" type="text" size="20" maxlength="12"></fieldset></form>
复制代码


表单输入类型


  • url 类型的 input 元素是专门为输入 url 地址定义的文本框。


<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
复制代码


  • email 类型的 input 元素是专门为输入 email 地址定义的文本框。


<input type="email" name="dada" id="dada" value="23@qq.com"/>
复制代码


  • range 类型的 input 元素用于把输入框显示为滑动条,可以作为某一特定范围内的数值选择器。


<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
复制代码


  • number 类型的 Input 元素是专门为输入特定的数字而定义的文本框。


<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
复制代码


  • tel 类型的 input 元素是专门为输入电话号码而定义的文本框,没有特殊的验证规则。


  • search 类型的 input 元素是专门为输入搜索引擎关键词定义的文本框,没有特殊的验证规则。


  • color 类型的 input 元素默认会提供一个颜色选择器。


  • date 类型的 Input 元素是专门用于输入日期的文本框,默认为带日期选择器的输入框。


  • month 提供一个月的选择器,week 提供一个周选择器,time 会提供时间选择器,datetime 会提供完整的日期和时间选择器,datetime-local 会提供完整的日期和时间选择器。


增加表单的特性以及元素


  1. form 特性:


<input name="name" type="text" form="form1" required/><form id="form1"><input type="submit" value="提交"/></form>
复制代码


  1. formaction 特性,将表单提交至不同的页面。


<form id="form1" method="post"><input name="name" type="text" form="form1"/><input type="submit" value="提交到page1" formaction="?page=1”/><input type="submit" value="提交到page2" formaction="?page=2"/><input type="submit" value="提交"/></form>
复制代码


  • formmethod 特性可覆盖表单的 method 特性

  • formenctype 特性可覆盖表单的 enctype 特性

  • formnovalidate 特性可覆盖表单的 novalidate 特性

  • formtarget 特性可覆盖表单的 target 特性


placeholder 特性


<input name="name" type="text" placeholder="请输入关键词"/>
复制代码


autofocus 特性:用于当页面加载完成时,可自动获取焦点,每个页面只允许出现一个有 autofocus 特性的 input 元素。


<input name="key" type="text" autofocus/>
复制代码


autocomplete 特性用于 form 元素和输入型的 Input 元素,用于表单的自动完成。


input name="key" type="text" autocommplete="on"/>
复制代码


autocomplete 特性有三个值,可以指定"on","off"和""不指定,不指定就将使用浏览器的默认设置。


<input name="email" type="email" list="emaillist"/><datalist id="emaillist"><option value="23#qq.com">xxxx</option></datalist>
复制代码


keygen 元素提供一个安全的方式来验证用户。


<form action=""><input type="text" name="name"/><br><keygen name="security"/><br><input type="submit"/></form>
复制代码


  1. keygen 元素有密钥生成的功能,在提交表单时,会分别生成一个私人密钥和一个公共密钥。

  2. 私人密钥保存在客户端,公共密钥则通过网络传输至服务器。


output 元素


  1. output元素用于不同类型的输出,比如计算结果或脚本的输出等。

  2. output元素必须从属于某个表单,即写在表单的内部。


<form oninput="x.value=dada.value"><input type="range" name="volume" value="50"/><output name="x"></output></form>
复制代码


required


为某个表单内部的元素设置了 required 特性,那么这项的值不能为空,否则无法提交表单。


<input name="name" type="text" placeholder="dada" required/>
复制代码


pattern


  1. pattern 用于为 Input 元素定义一个验证模式。

  2. 该特性值是一个正则表达式,提交时会检查输入的内容是否符合给定的格式,如果不符合则不能提交。


<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
复制代码


min,max,step


  1. min 表示允许范围内的最小值

  2. max 表示允许范围内的最大值

  3. step 表示合法数据的间隔步长


<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
复制代码


novalidate


  1. 用于指定表单或表单内在提交时不验证

  2. 如果在 form 元素应用 novalidate 特性,则表单中的所有元素在提交时都不需要再验证


<form action="dada.asp" novalidate="novalidate"><input type="email" name="user_email"/><input type="submit"/></form>
复制代码


validity


  1. 获取表单元素的 ValidityState 对象,该对象包含 8 个方面的验证结果

  2. ValidityState 对象会持续存在,每次获取 validity 属性时,返回的是同一个 ValidityState 对象


var validityState=document.getElementById("username").validity;
复制代码


willValidate 属性


  1. 用于获取一个布尔值,表示表单元素是否需要验证

  2. 如表单元素设置了 required 特性或 pattern 特性,则 willValidate 属性的值为 true,即表单的验证将执行


var willValidate = document.getElementById("username").willValidate;
复制代码


validationMessage


  1. 获取当前表单元素的错误提示信息。


var validationMessage=document.getElementById("username").validationMessage;
复制代码


❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章



点赞、收藏和评论



我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

我们下期见!



文章持续更新,可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录



github收录,欢迎Starhttps://github.com/webVueBlog/WebFamily


发布于: 2021 年 02 月 20 日阅读数: 129
用户头像

魔王哪吒

关注

微信搜:程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。 博客首发:http://www.dadaqianduan.cn/#/

评论

发布
暂无评论
熟练HTML5+CSS3,每天复习一遍