day01

一.网页三剑客（css,html,javascript）

概述

html:主要应用网页的内容和结构，网页的东西都是有html完成的。
css:修饰html，使页面展示不同的效果，主要定义网页的外观样式。
javascript:使页面能够动起来，实现与用户交互的功能。主要定义网页的行为和动作。

框架结构
主要有两种结构：
1.c/s结构：即客户端服务器结构，常见应用，王者荣耀，qq。
2.b/s结构：即浏览器服务器模式，常见应用，贪狼玩月。

资源分类：静态资源和动态资源

静态资源：服务器不更新。
动态资源：服务器更新。

1 学习html

什么是html

html是一种超文本标记语言，是一种标识性的语言，它使网上的各种资源形成一个整体，将不同位置的资源随机的连接起来，构成一个逻辑链，让人们查找更加的方便。
HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称。

html的语法

文件的后缀是html或者htm.
标签不区分大小写.
标签分为键值对和无键值对.

html的标签

文本标签

标题标签
标题标签是放在body里面的，基本我们就是用到h1到h6.
键值对形式 <h1>标签</h2>
段落标签
键值对形式 <p>我是段落标签</p>
有属性名 align 默认靠左 center right left
换行标签<br/>
分割线标签<hr/>
加粗标签<b><b/> 和<strong></strong>
斜体标签 <em></em> <i><i/>
上标标签下标标签<sub></sub> <sup></sup>
字体格式化标签 <font></fomt>
居中标签 <center></center>

多媒体标签

图片标签 <img src=”” width=”” height=”” alt=”” title=”” />
音频标签

 <audio controls loop muted autoplay><source src="./vedio/德玛西亚.mp3"></audio>

controls ：控制面板 loop：播放循环 muted ：静音播放

视频标签

 <body><!-- 视频标签 --><video autoplay controls loop muted height="300px" width="530px"><source src="./vedio/燕子.mp4"></video>
</body>

controls ：控制面板 loop：播放循环 muted ：静音播放 height:高度
width：宽度
注：不管高度宽度如何调，播放时候视频的比例是不变的。

列表标签

无序标签 <ul> </ul>有types属性 disc 实心圆、square 方块、circle 空心圆三种(默认type=“disc”)
有序标签 <ol></ol> 有type属性 A、a 、I 、i 、1 五种（默认type=“1”)
列表项 <li></li> 是ul和ol的子标签

<body><!-- 无序列表 --><ul type="circle"><li>苍老师</li><li>波波老师</li><li>小泽老师</li></ul><!-- 有序列表 --><ol type="A"><li>苍老师</li><li>波波老师</li><li>小泽老师</li></ol>
</body>

超链接标签

<a   href="目标地址"      target="_blank"> </a>

href:跳转目标的地址。
target:打开方式
1._blank重新打开一个页面。
2._self 在本页面打开（默认）

表格标签

标签名
table 父标签相当于表格的容器
tr 子标签定义行写在table里面
td 子标签定义列写在 tr里面
th 子标签表格的列标题：加粗，居中，写在tr里面
caption 写在table里面和tr同级
属性名
border 表格变宽的宽度，粗细
width 表格的宽度可以给table th td 不能给tr设置
height 表格的高度可以给 table th td tr 设置
align 可以给table td tr 设置他们的对齐方式 center left right
bgcolor 背景颜色，可以设置给table、tr、th、td bordercolor，可以改变表格边框及单元格分割线的颜色
rowspan 合并行 rowspan=“2” 然后去掉下一行
colspan 合并列 colspan=“5” 然后去掉下一列
cellspancing 单元格之间的空白
cellpadding 字体与边框之间的空白
thead 标签定义表格的表头
tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容
tfoot 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

 <body><table border="1px" width="500px" height="200px" cellspacing="0px" cellpadding="0px" align="center"><caption><h2>学生信息表</h2></caption><tr><th>学号</th><th>姓名</th><th>性别</th><th>个人简介</th></tr><tr align="center"><td>1001</td><td>柳岩</td><td>女</td><td>我大, 我骄傲</td></tr><tr align="center"><td>1002</td><td>刘涛</td><td>女</td><td rowspan="2">我是一名演员</td></tr><tr align="center"><td>1003</td><td>宝强</td><td>男</td></tr><tr align="center"><td>1004</td><td colspan="2">张艺兴</td><td>小绵羊</td></tr></table>
</body>

表单标签

表单主要的作用是接受用户输入的信息，当用户输入信息时，浏览器将用户输入的信息打包发给服务器，从而实现与web浏览器的交互。
表单是控件的容器，一个表单由from，表单控件和表单按钮组成。

表示创建出一个表单，表单标签在html中是没有页面显示的，能展示效果的只有表单中的各种标签。 form的属性名

action 指向数据提交的路径，提交的服务器地址
method 数据提交的方式，常用值 get post
enctype 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式。1.
application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2.
multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3.
text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。

输入域标签

input属性

属性名	属性说明
id	为当前组件提供一个唯一的标识
type	定义表单输入项input的组件类型详见下一个表格type属性值说明
name	为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据，只要这个数据要进行提交，name属性必须设置！
value	为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
checked	设置单选框/复选框的默认选中状态（全选、反选）
readonly	设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交
disabled	设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交
size	组件的长度
maxlength	设置允许输入的最大的长度
placeholder	输入框的提示信息，占位符，用于提示用户输入的规则、规范

input-type属性值说明

属性值	说明
text	文本框(默认)，单行的输入字段，用户可在其中输入纯文本。
password	密码框。内容为非明文
radio	单选框。必须将其设置为同一组(name的名字必须相同)
checkbox	复选框。必须将其设置为同一组(name的名字必须相同)
file	附件框、文件选取。用于文件上传。
hidden	隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。
submit	提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性将按钮起一个名字
reset	重置按钮。用于将所有的表单输入项恢复到默认状态
image	图形提交按钮
button	普通按钮。需要和JavaScript事件一起用

<body><!--输入域标签--><form action="index.html" method="get"><p>用户名:<input type="text" id="username" name="username" placeholder="请输入用户名" value="liuyan" size="20" disabled="disabled"></p><p>密码:<input type="password" name="password" maxlength="8" placeholder="请输入密码"></p><p>性别:<!--性别:要求性别是互斥的效果  必须是同一组--><input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女</p><p>爱好:<input type="checkbox" name="hobby" value="cy" checked="checked" /> 抽烟<input type="checkbox" name="hobby" value="hj" checked="checked" /> 喝酒<input type="checkbox" name="hobby" value="tt" /> 烫头<input type="checkbox" name="hobby" value="bd" /> 蹦迪</p><p>上传头像:<input type="file" name="picture"></p><input type="hidden" name="method" value="findStudentBySid" /><p>邮箱:<input type="email" name="email" /></p><p>出生日期:<input type="date" name="birthday" /></p><p><input type="submit" value="注册" /><input type="reset" value="重置按钮" /><input type="button" value="普通按钮" /></p><p><input type="image" src="./img/liuyan.jpg" width="200px" height="120px" /></p></form>
</body>

下拉标签

提供一个下拉列表框，让用户进行选择。 <select>

属性值	说明
name	下拉列表框的名字，数据提交的关键字，设置给select标签
value	下拉选择框选中的值，设置给option标签，如果想让某一个option默认选中，使用selected属性！
multiple	multiple 属性规定输入字段可选择多个值，设置给select标签

 <body><form action="#" method="get"><!--下拉框--><select name="city" multiple="multiple"><option value="bj">北京</option><option value="sh" selected="selected">上海</option><option value="gz" selected="selected">广州</option></select><p><input type="submit" value="提交" /></p></form>
</body>

文本域标签

HTML提供了多行输入的文本控件：<textarea>

属性值	说明
cols	设置文本域的列数，横向空间不够，自动换行
rows	设置文本域的行数，纵向空间不够，出现纵向滚动条

<body><form action="#" method="get"><!--多行文本域--><textarea name="xs" rows="10" cols="60">优就业是中公教育IT培训平台APP。优就业业务类型主要包括面授培训、网络远程教学培训、网络直播课程培训、IT类图书出版等。</textarea><p><input type="submit" value="提交" /></p></form>
</body>

按钮标签

<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
- <button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。

 - <button> 与 </button>

标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

<body><!-- button按钮 --><button>按钮</button>
</body>

html框架标签

写法格式:

<frameset></frameset>

框架标签标签是在本页面内用多窗口将多个页面整合在一起的一个框架集。每一个页面都是独立的，需要用子标签来确定页面的位置。<frameset>通过行和列控制整体布局，用cols确定列数，用rows确定行数。
特别注意事项: <frameset>标签与<body>标签不能同时共存框架子标签<frame>

<frame>标签是<frameset>标签的子标签, 用于页面引入.

属性名	属性说明
src	指定页面的路径
noresize	框架分割后禁止调整
name	该框架的名称用于和a标签target连用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<frameset rows="15%, *"><frame src="top.html" noresize="noresize" /><frameset cols="15%, *"><frame src="left.html" noresize="noresize" /><frame src="right.html" name="abc"></frameset>
</frameset>
</html>

实体字符

有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。

DIV和span标签

DIV是一个块级元素, 默认没有任何样式, 需要配合CSS一起使用才能发挥作用,用div+css可以制作出精美的网页;
扩展: 介绍一个行内标签: span
DIV是一个块级元素, 它包含的元素会自动换行, 单独占一行;
Span是一个行内元素, 它包含的元素不会自动换行, 有多少内容就占多少空间;

HTML5新特性

什么是 HTML5？

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等

前端开发（html）相关推荐

day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签: ...
关于前端开发的相关资料及例子
1:前端HTML-CSS规范(http://www.cnblogs.com/whitewolf/p/4491707.html): 2:HTML实例(http://www.w3school.com.cn ...
gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:"grun ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
《初级前端开发人员经常容易忽视几个细节问题汇总》
<初级前端开发人员经常容易忽视几个细节问题汇总> 1.使用变量.toString()的时候记得对变量进行判空 2.使用字符串.indexOf()的时候记得对字符串变量进行判断是否为nu ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发学习常用网站网址及介绍（都是免费的）
在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!! 扫码加博主微信 1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转 2.百度翻译,不懂的单词, ...
前端开发神器之ngrok
ngrok能做什么,为什么是前端开发神器? 内网穿透,映射本地开发环境到公网,模拟多终端线上环境. 结合一个很简单的PWA demo,举个简单的例子 1.克隆demo到本地 git clone htt ...
移动端开发者眼中的前端开发流程变迁与前后端分离
写在最开始这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈,从而对前端开发的相关概念形成初步的认识. 本文会提供一 ...
前端和后端开发人员比例_前端开发人员vs后端开发人员–实践中的定义和含义
前端和后端开发人员比例 Websites and applications are complex! Buttons and images are just the tip of the iceber ...

前端开发（html）