标签：文件服务 图像 关键词 居中 名词解释 运行环境 访问 现在 net
1.HTML Basic
|
搭建网页结构 静态网页结构 |
2.Ajax异步数据请求
|
异步完成前后端的数据交互 |
3.项目1
|
mysql js nodejs html ajax |
4.CSS3
|
美化HTML页面 |
5.Bootstrap
|
CSS框架，响应式布局 |
6.项目2
|
使用Boot完成学子商城 |
二.web基础知识
|
HTML：泛指前端的网页技术 HTML5：html4.0的升级版本，大前端技术 |
|
HTML4.01是1999年12月发布的 <img> XHTML1.0是2000年1月份发布(语法更严谨) <img/> |
1.web与internet
|
internet:全球计算机互联网络，俗称：互联网，因特网，交换网，交际网 |
|
www:world wide web 访问网站的服务 BBS:论坛 FTP：上传下载文件服务 Email:电子邮件的服务 telnet:远程登录的服务 |
2.internet上的应用程序
|
1.C/S c：client 客户端 s：server服务器 .exe |
|
2.B/S b:browser 浏览器 s：server 各类网站 |
|
C/S和B/S 1.c/s需要升级 2.b/s不需要升级 3.我们的工作主要是b/s |
3.web运行原理
|
web:运行在Internet上的一种B/S结构的应用程序，俗称网站 Internet：为web运行提供网络环境 web的工作原理：基于浏览器和服务器以及通讯协议来实现数据的传输和展示 .html文件保存在服务器 .html文件运行在浏览器 |
|
通讯协议：规范了数据是如何打包和传输的 |
|
服务器 1.功能 存储数据 接收请求并给出响应 提供程序的运行环境 具备一定的安全功能 2.服务器产品 APACHE TOMCAT IIS 3.服务器技术 java php .net python nodejs |
|
浏览器 1.功能 代表用户发送请求 作为HTML、css、js的解析器 以图形化的解码展示给用户 2.浏览器 Chrome Firefox Oprea Safari IE--edge 3.浏览器技术 HTML5,CSS3,JS |
三.HTML快速入门
1.什么是HTML
|
HTML：HyperText Markup Language 超文本标记语言 普通文本：a 超文本：<a></a> 标记/标签/节点/元素：超文本具体组成形式，具有自己的功能 语言：都有自己的语法结构 |
2.html的特点
|
1.以.html或者.htm为后缀 2.由浏览器解析执行 3.用带有尖括号的"标记"来标识 4.在页面中可以执行js脚本 |
3.HTML基本语法
|
1.标记，又称标签，元素，节点 表示一些功能 标记在使用时，必须用<>包裹 标记分为两种 1.双标记(封闭类型) <标记></标记> 双标记必须成对出现，有开始就有结束 2.单标记(非封闭类型) <标记>或者<标记/> |
练习
|
新建一个text文件，改名为01_ex.html 在文档中按以下要求写出标记 一对html 一对head 一对body 一对title |
|
2.标签的嵌套 在一对标记中出现另一对(个)标记，形成的功能的层叠 <a href="#"> <b>新浪</b> </a> 语法： <标签1> <标签2> <标签3></标签3> </标签2> </标签1> |
练习
|
<html></html> <head></head> <title></title> <body></body> html中嵌套head标签，和body，head标签中嵌套title标签 |
3.html的属性和值
|
通过属性和值对标记进行修饰 <标记 属性="值"></标记> 属性必须声明在开始标记中 多个属性之间使用空格分隔 <标记 属性1="值1" 属性2="值2" .....></标记> 属性分类 1.标准属性(通用属性) 所有元素都支持的属性 id:定义元素在页面中的唯一标识 title:鼠标悬停在元素上提示的文本 class:css中，引用类选择器 style:css中，定义行内样式 2.专用属性，只对一些(某个)标签起作用 |
|
总计：学习html，就是学习标签的功能，属性，和他的嵌套关系 |
4.注释
|
不被浏览器解析的内容 <!--注释内容--> 1.注释不能嵌套注释 2.注释不能出现在标签中，一对<>中间 |
四.HTML的文档结构
1.HTML的文档构成
|
1.文档类型的声明 不写文档类型声明，在不同浏览器中，很容易出现问题 写了文档类型声明，在不同浏览器中，不容易出现问题 <!doctype html> 告诉浏览器当前页面使用h5版本解析 |
|
2.网页结构 <html></html> 一个页面有且只有一对html标签 作用：表示网页的开始和结束 在html标签中，有头部内容和主体内容 <html> <head></head> 网页的头部，定义全局信息 <body></body> 网页的主体，所有显示的内容 </html> |
|
3.head元素 是其他头元素的容器 <title></title>网页标题 <meta />定义全局信息，元数据信息 <meta charset="utf-8"> <meta name="description" content="描述内容"> <meta name="keywords" content="关键词内容"> <style></style> css定义网页的内部样式 <script></script>定义或者引用js文件 <link>css引用外部样式 |
|
4.body元素 定义网页的主体 网页背景颜色 bgcolor="合法的颜色值" 网页字体的颜色 text="合法的颜色值" |
五.文本标记(重点*****)
1.标题元素
|
在页面中以醒目的方式显示文本 <h1></h1> ~<h6></h6> 特点： 1.字体大小变化 2.字体加粗 3.单独成行，上下之间有垂直间距 属性：align 设置标记内容水平对齐方式 取值：left/center/right |
2.段落标记 paragraph
|
以突出的形式显示一段文本 <p></p> 特点：单独成行，文本上下有空白距离 属性：align 取值: left/center/right |
练习
|
02_ex.html模拟个人简历 |
3.换行标记
|
<br>或<br/> |
4.水平分割线
|
<hr>或者<hr/> 属性： size:水平线的尺寸，粗细。单位为px数字 width 表示水平线的宽度。单位为px的数字或者% align 水平对齐方式 left/center/right color 水平线颜色，合法的颜色值 |
5.预格式化标签
|
<pre></pre> 保留了html代码中空格和回车 |
6.特殊字符(实体)
|
空格 < < > > © © 版权 ® ® 注册商标 × 关闭的X号 ¥ ￥ |
练习
|
Copyright © 2004 - 2018 <京东JD.com> 版权所有 |
7.文本样式标签
|
<strong></strong><b></b> 字体加粗 <em></em><i></i> 斜体 <del></del><s></s> 删除线 <u></u> 下划线 <sup></sup>上标 <sub></sub>下标 |
8.分区元素
|
1.块分区 用于页面中的布局 <div></div> 特点：单独成行 |
|
2.行分区 处理同一行文本的不同样式 <span></span> 于其他的span和文字共用一行 |
9.块级元素和行内元素
|
1.块级元素 在网页中独占一行的元素，由上到下的排列 网页中常见块级元素 p div h1~h6 结构标记 |
|
2.行内元素 网页中多个行内元素可以在一行内显示，从左往右排列 网页中常见的行内元素 span em i b strong u del s sub sup a img |
|
3.行内块 表现的方式与行内元素一样，但是具备块级元素的特性 |
|
4.table 表格的宽高，默认是由内容来决定的。 内容多，就宽一些，或者高一些。 是一种特殊的表现方式 |
练习
|
优化个人简历 |
对于editplus的快捷键修改
快捷键总结
|
ctrl+v +c ctrl+s 保存 ctrl+d 删除当前行 ctrl+alt+↓ 整行复制 alt+↑/↓ 整行移动 ctrl+b 浏览器运行代码 ctrl+shift+n 新建html页面 |
一.图像和链接
1.使用
|
<img>或者<img/> 属性：src="url" 引用图片资源的路径 |
2.URL
|
名词解释：文件目录----文件夹嵌套结构 url：Uniform Resource Locator 统一资源定位符，俗称"路径" |
3.路径的表现形式
|
1.绝对路径 完整的路径 1.1使用网络资源的时候，使用绝对路径 通信协议+主机名称+文件目录结构+文件的具体名称 优点：不占用服务器本地存储空间 缺点：不稳定 1.2使用本机资源，可以使用绝对路径 <img src="d:\06.png" > 项目中绝对不可以使用 |
|
2.相对路径 使用本服务器资源的时候使用 2.1同级目录 直接引用文件名<img src="07.png"> 2.2子级目录 先进入兄弟文件夹，在引用文件名 <img src="image/08.png"> 2.3父级目录 先返回上一级目录，再引用文件名<img src="../07.png"> |
练习
|
在01_ex.html中，分别使用上述3种情况，引用图片 附加.图片10.png在01_ex.html的父级的兄弟文件夹image下 附加.图片11.png在01_ex.html的父级的父级文件夹下的image文件夹下 |
|
3.img标签的属性 src:source 源，图像资源路径 alt:资源出错的时候，提示的文本 width:宽 px为单位的数字 height:高 px为单位的数字 解决图片失真(设置的宽高比与图片默认宽高比不一致，就会失真) width/height只设置一个，让另一个自适应 |
4.链接
|
1.语法 <a href="url"></a> 属性： href:链接的路径 target:指定打开链接的方式 取值：_self 默认值，在当前的标签页打开新网页 _blank 在新的标签页中打开网页 |
|
2.a标签的其它表现形式 下载资源 <a href="00.zip">下载</a> 新建邮件 <a href="mailto:g-chengliang@tedu.cn">新建邮件</a> 执行js代码 <script> function show(){ alert("中午吃什么"); } </script> <a href="javascript:show()">执行js代码</a> 返回页面顶部 <a href="#">返回页面顶部</a> |
5.锚点
|
锚点就是页面中的一个记号，可以通过点击超链接的方式，直接回到记号处 1.使用锚点 1.1定义锚点 第一种方式 <a name="锚点名称"></a> 第二种方式 给任意的标签添加id，把id当做锚点名称使用 <any id="锚点名称"> 1.2链接到锚点 <a href="#锚点名称">链接本页锚点</a> <a href="其它的url#锚点名称">链接其它页锚点</a> 页面链接到锚点字后，地址栏会显示锚点的名称 |
练习
|
在03_ex.html中使用div定义3个锚点（红楼梦，西游记，三国演义） 使用3个a标签链接到这3个锚点 再写一个a标签，链接到03_a.html#hz这个锚点 |
二.表格
|
1.标记 <table> <tr> <td></td> </tr> </table> 表格：table 行：tr table row 列 table data |
|
2.table标签属性 border:设置表格边框 1px 1 width height 如果设置的宽高小于表格的内容，表格按内容走 如果设置的宽高大于表格的内容，表格按设置的走 align 表格水平对齐方式 left/center/right bgcolor 表格的背景颜色 合法颜色值 bordercolor 边框颜色 合法颜色值 cellpadding 设置单元格内边距(边框与内容之间的距离) cellspacing 设置单元格外边距(边框与边框之间的距离) |
练习
|
设置4*4的表格 表格尺寸是400px*400px 边框2px，边框有颜色orange,背景颜色yellow 表格靠右显示，内容为5px，外边距为10px |
|
2.tr的属性 align 设置当前行的文本水平对齐方式 left/center/right valign 设置当前行的文本垂直对齐方式 top/middle/bottom bgcolor 设置当前行的背景色(不包含边框颜色) |
|
3.td的属性 width 当前列的宽度，会影响这一列所有宽度 height 当前列的高度，会影响整个行的高度 align/valign 设置当前列内容的对齐方式 bgcolor 设置当前列的背景颜色 colspan 跨列 rowspan 跨行 |
3.不规则的表格使用
|
跨列 colspan 从指定单元格的位置开始，横向向右合并n个单元格(n包含自己本身) 被合并的单元格，要删除 跨行 从指定单元的位置开始，纵向向下合并n个单元格(n包含自己本身) 被合并的单元格要删除 |
4.可选标记
|
1.行/列的标题 <th></th>与<td></td>一样的使用方式 内容文字字体加粗，并且水平居中 2.表格标题 <caption></caption> 如果要设置表格标题，必须将<caption>放在<table>之后 |
5.表格的复杂应用
|
行分组 可以将连续的几行，划分到同一组中，进行统一的管理 1.表头行 <thead></thead> 表格开始几行放入表头 2.表主体 <tbody></tbody> 表格的中间几行放入表主体 3.表尾行 <tfoot></tfoot> 表格的最后几行放入表尾 |
|
表格嵌套 表格中所有的嵌套表格只能写在td中 |
标签：文件服务 图像 关键词 居中 名词解释 运行环境 访问 现在 net
原文地址：https://www.cnblogs.com/liuqingqing-bloom/p/12078429.html
