本文介绍了流行的客户端/服务器(C/S)和浏览器/服务器(B/S)架构模式，并详细讲解了前端核心技术HTML、CSS和JavaScript的基本概念和常用语法。此外，还涉及HTML的表单元素、框架集以及HTML5的新特性和语义化标签，如date、time、email输入类型，video和audio标签，以及header、nav等语义化元素。
目前流行的应用软件架构模式有什么？
- C/S:客户端/服务器 用户需要安装客户端
- B/S:浏览器/服务器 电脑上有浏览器即可
前端的编程语言
- HTML，超文本标语言，负责绘制网页的骨架，最新H5
- CSS，层叠样式表，负责绘制网页的样式，最新CSS3
- javaScript，JavaScript语言，负责网页的灵魂
什么是HTML
超文本标记语言
HTML语言常用的标签
- html: html网页标签
- head: 头部标签
- meta: 网页配置标签（通常用于设置编码的）
- title: 网页标题
- body: 网页主题（主要编码区）
- h1-h6: 文字的标题（从数字1-6逐渐增加，字体逐渐变小，会换行）
- p: 段落标签，会换行
- br: 换行
- hr: 水平线
- html实体符号: 通过&声明的 <:小于 >:大于  :空格
- pre:格式化标签，一般用来写代码
- i: 斜体
- b: 加粗
- sup: 上标
- sub: 下标
- del: 删除线
- center: 局中
- a: 超链接
- href属性:跳转的路径 #跳转到当前页面
- target属性:页面的打开位置
- _self:在当前页面打开
- _blank:在新页面打开
- name:锚点
- …
- img: 图片
- src:图片的路径
- width:宽度
- height:高度
- alt:图片加载失败后的提示
- title:图片标题（鼠标移动到图片上的文字）
- ul: 无序列表
- type:表示图标样式
- li: 列表项
- ol: 有序列表
- type:表示图标样式
- li: 列表项
- dl: 定义列表
- dt:总类 如游戏类
- dd:子类 如游戏类包含王者荣耀 英雄联盟
<body>
主要编码就在这，hello
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h4>六级标题</h4>
<p>1、定义一个点类Point，包含2个成员变量x、y分别表示x和y坐标，2个构造器Point()和Point(int x0,y0),以及一个movePoint（int dx,int dy）方法实现点的位置移动，创建两个Point对象p1、p2，分别调用movePoint方法后，打印p1和p2的坐标。[必做题]</p>
<p>2、定义一个矩形类Rectangle： [必做题]<br/>
2.1 定义三个方法：getArea()求面积、getPer()求周长，showAll()分别在控制台输出长、宽、面积、周长。<br/>
2.2 有2个属性：长length、宽width<br/>
2.3 通过构造方法Rectangle(int width, int length)，分别给两个属性赋值<br/>
2.4 创建一个Rectangle对象，并输出相关信</p>
<hr/>
我 ♥杨洋<br/>
今天<i>星期一</i>
明天<b>星期二</b>
明天<strong>星期二</strong><br/>
x <sup>2</sup>+y<sup>2</sup>=4<br/>
H<sub>2</sub>O <br>
<del>甲流</del>是病毒
<center>居中</center>
<!-- 超链接 a是标签名 href是属性 =后的是属性对应的值 -->
<a href="http://baidu.com">百度</a>
<a href="http://sina.com" target="_blank">新浪微博</a>
<!-- 图片 -->
<img src="img/1.jpg" width="300px" height="200px"/ alt="图片加载失败" title="鬼刀"><br/>
你喜欢的电影？
<ul type="circle">
<li>釜山行</li>
<li>你是证人</li>
<li>咒怨</li>
</ul>
你喜欢的明星？
<ol>
<li>杨洋</li>
<li>刘亦菲</li>
<li>赵露思</li>
</ol>
</body>
form表单
form:表单标签（用于提交数据和页面跳转的功能）
- action:跳转的路径
- method:提交方式，常见两个值，get,post(get和post的区别，javaweb讲)
表单标签
- input:表单控件
- type属性：标签的类型
- type="text"文本框
- type="password"密码框
- type="radio"单选按钮（为了保证单选功能，需要加name属性，且name值要相同，保证单选按钮为一组）
- type="checkbox"复选框
- type="date"日期
- type="datetime-local"日期和时间
- checked属性：选项默认被选中（通常用于单选按钮或复选框）
- value属性:标签的值（指定值，不写用户输入的就是值）
- name属性:标签的名字（用于form表单提交数据的时候定位标签）
- placeholder属性：占位符（提示要输入的内容）
- readonly属性：只读
- disable属性:禁用（使用禁用不能提交）
- type属性：标签的类型
- select:下拉菜单（下拉列表）
- option:下拉选项
- value:选项的值
- selected:绑定选项
- option:下拉选项
- textarea:文本域标签
- rows:行数
- cols:列数
表单中的按钮
- submit按钮:提交按钮，用于提交表单数据，具有页面跳转功能
- reset按钮:重置按钮，用于重置表单中数据
- button按钮:普通按钮，没啥实际功能（可以结合js或者jq做其他事情）
<body>
<form action="list.html" method="get">
文本框：<input type="text" value="abc" name="sname" placeholder="请输入..." readonly="readonly"/><br/>
密码框：<input type="password" /><br/>
单选按钮：<input type="radio" name="sex"checked="checked" />男<input type="radio" name="sex" />女<br/><!-- name一样才会具备单选功能 -->
复选框：<input type="checkbox" />听歌<input type="checkbox" />购物<input type="checkbox" />打游戏<br/>
日期：<input type="date" />
时间：<input type="datetime-local" /><br/>
下拉列表：
<select>
<option>-请选择-</option>
<option value="1">大连</option>
<option value="2" selected="selected">北京</option>
</select>
<br/>
文本域：
<textarea rows="10" cols="20"></textarea>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
</form>
</body>
table表格标签
- table:表格标签
- width:宽度
- height:高度
- border:边框
- cellspacing:列间隙
- tr:行标签
- align="center"水平居中，（CSS中line-height: 80px;/* 设置行高可以让文字垂直居中，行高值和本身的高度一直就居中了 */）
- th:表头标签，自带样式文字加粗并且居中（可以理解为特殊的列）
- td:列标签
- colspan:列合并
- rowspan:行合并
- caption:表格标题
<body>
<!-- 五行两列表格 -->
<table width="300px" height="200px" border="1" cellspacing="0">
<caption>表格</caption>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>19</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td colspan="2">李四</td>
</tr>
</table>
</body>
框架集
框架集就是若干个页面的集合，允许一个页面中最多展示多个页面的信息
框架集中的标签
- frameset标签：声明框架集（frameset 和 body 冲突 需要去掉body）【考试题】
- rows属性：按行分配框架页的内容（50%，50%：表示页面1:1按行分配，*表示剩余部分的占用）
- cols属性：按列分配框架页的内容
- frame标签：声明框架页（需要放到frameset标签中）
- src属性：引入页面的路径
- scrolling属性：是否允许框架使用滚动条
- auto：根据实际情况判断是否显示滚动条
- yes：始终显示滚动条
- no：始终不显示滚动条
- name属性：声明框架页名称
- 注意：当框架集内部需要进行页面跳转时，在超链接或者from表单中添加target属性的属性值是跳转后页面需要展示的frame的name值
H5的基本结构
《!DOCTYPE html》 标记语言文档类型声明（告诉浏览器当前使用的是html规范）
H5新增语义化标签：
- 这种语义化标签主要针对搜索引擎的。这些标签在页面中可以使用多次。
IE9中把这些元素转换为块元素
- 常见语义化标签
<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>定义文档某个区域</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
- 表单新增元素
<form action="">
邮箱：<input type="email" /><br/>
路径：<input type="url"/><br/>
日期：<input type="date" /><br/>
时间：<input type="time" /> <br/>
月份：<input type="month" /><br/>
星期：<input type="week" /><br />
数字：<input type="number"/><br />
电话：<input type="tel" /><br />
搜索框：<input type="search" /><br />
颜色：<input type="color" /><br />
<input type="submit" value="按钮"/>
</form>
- 表单新增属性
required=“required”:表示表单不能为空，必填项
- placeholder=“请输入信息…”:表单提示信息
- autofocus=“autofocus”:自动聚焦，页面加载完毕后自动聚焦该元素（鼠标输入的小光标自动聚焦）
- autocomplete=“off”:当用户开始输入时，浏览器基于之前输入过的值会有提示，这个属性默认是打开的。需要放在form表单内
同时需要加上name属性，而且要提交成功才可以使用 - multiply=“multiple”:可以多选文件提交
<body>
<form action="" method="get">
<input type="text" required="required" placeholder="请输入信息..." autofocus="autofocus" autocomplete="on" name="xm" /><br />
<input type="file" multiply="multiple"/>
<input type="submit" value="提交"/>
</form>
</body>
- 新增多媒体标签
-
视频标签video：目前支持的类型是mp4 WebM Ogg
- src=“img/pian.mp4”：视频的地址
- controls=“controls”：向用户展示播放控件
- autoplay=“autoplay”：视频就绪自动播放（有的浏览器不支持）
- muted=“muted”：静音播放（解决不支持自动播放的浏览器）
- width=“800px”：设置播放器的宽度
- height=“300px”：设置播放器的高度
- loop=“loop”：循环播放，播放完是否继续播放该视频
-
音频标签audio
- src=“img/mailang.mp3”：音频的地址
- controls=“controls”：音频就绪自动播放
- autoplay=“autoplay”：向用户显示播放控件
- loop=“loop”：循环播放，播放完是否继续播放该音频
-
<body>
<!-- 视频标签 -->
<video src="img/pian.mp4" controls="controls" autoplay="autoplay" muted="muted" width="800px" height="300px" loop="loop"></video>
<!-- 音频标签 -->
<audio src="img/mailang.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>
相对路径和绝对路径
- 绝对路径：文件在磁盘中的位置（由于不能保证服务器的指定位置有指定文件，所有通常不常用）
- 相对路径：相对当前文件，另一个文件的位置（由于相对位置不变，文件总是可以找到，开发常用）
HTML页面跳转方式
- 超链接a标签，通过href属性完成页面跳转
- form表单+submit提交按钮，通过action属性完成页面跳转
H5
H5新特性有哪些
- input标签引入了一些新特征，例如type的类型：date,time,email等
- 还有音频、视频标签
- 还有语义化标签
H5中废弃的一些标签
- 居中标签：center
- 框架集标签：frameset
H5中常见的语义化标签有哪些
- 头部标签：header
- 导航标签：nav
- 内容标签：article
- 定义文档某个区域：section
- 侧边栏标签：aside
- 尾部标签：footer
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
