A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 森111 中级黑马   /  2018-12-17 16:00  /  875 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一、Web概念概述
1.JavaWeb
    使用Java语言开发基于互联网的项目
2.软件架构
   -C/S:Client/Server
     *在用户本地有一个客户端程序,在远程有一个服务器端程序
  *优点: 用户体验好
  *缺点: 开发、安装、部署、维护麻烦
   -B/S:Browser/Server
     *只需要一个浏览器,用户通过不同的网址(URL),客户访问不同服务器端程序
     *优点: 开发、安装、部署、维护麻烦
  *缺点: 如果应用国发,用户的体验可能会受到影响;硬件要求过高
3.资源分类(B/S架构)
   -静态资源
     *使用静态网页开发技术发布的资源
  *特点:
     **所有用户访问,得到的结果是一样的
  **如:文本,图片,音频,视频,[HTML,CSS,JavaScript] []中三个称为静态网络开发技术
  **如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,
    浏览器中内置了静态资源的解析引擎,可以来展示这些静态资源
   -动态资源(涉及到数据的交互)
     *使用动态网页及时发布的资源
  *特点:
     **不同用户访问,得到的结果可能不一样,如:登陆的欢迎页面,欢迎用户名会根据用户改变
  **如:jsp/servlet,php,asp...
  **如果用户请求的是动态资源,那么服务器执行动态资源并转换为静态资源,再发送给浏览器
4.静态网络开发技术
1)HTML:用于搭建基础网页,展示页面内容
2)CSS:用于美化和布局页面
3)JavaScript:控制页面的元素,添加动态效果
5.服务器/独立IP  或者可以使用阿里云(成本低)
  CPU(稳定),主板,硬盘(读写),内存(大),操作系统
二、HTML
1.概念
Hyper Text Markup Language:超文本标记语言******必须记住
HTML是最基本的文本标记语言
  *超文本:
    超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
  *标记语言:
    由标签构成的语言,<标签名称> 如:html,xml
注意:标记语言不是编程语言,没有逻辑性,只要写入就会解析!!!

2.HTML快速入门:
!!!浏览器按F12可以看到HTML源码
1)语法:
   -HTML的后缀名为.html或.htm(一般不用)
   -标签:
     *单边标签和双边标签
        **双边标签:有开始标签和结束标签,如:<html>.....</html>
     **单边标签:开始标签和结束标签在一起,如:<br/>,<hr/>
       注:单边标签的/可以被省略
  *行内标签和块级标签:
     **行内标签: 只占内容的大小
  **块级标签: 一个标签里的内容单独占一块,如:<p></p>
   -标签可以嵌套:
     双边标签必须完全包含嵌套的标签,不能你中有我我中有你
   -在开始标签中可以定义属性
     属性是由键值对构成,值需要用引号(单双都可)引起来
   -HTML标签不区分大小写,建议使用小写
2)基本结构******
  <!DOCTYPE html>
    <html>
   <head>
      <title> 标题 </title>
   </head>
   <body>
      <font colr = 'red'> 内容 </font> <br/>
   <meta charset = 'utf-8'></meta>
   </body>
</html>
3)标签:
  -文件标签
   构成html最基本的标签
    *html:html文档的根标签
*head:头标签,用于指定html文档的属性,引入外部资源
*title:标题标签
*body:体标签
*<!DOCTPYE html>:htm5中定义的声明标签,在<html>之前
  -文本标签******
    和文本有关的标签
!!!!特殊字符:
     : 空格
   <:    小于号
   >:    大于号   
*注释:<!-- 注释 -->
<br/>:换行标签,自闭和标签
<hr/>:水平线标签
<h1> to <h6>:标题标签,自带换行效果 随着h1到h6字体会逐渐减小
<p>:段落标签
<b>:字体加粗
<i>:字体斜体
<u>:字体下划线
<font>:字体标签
   *属性:
     color = '颜色'
  size = '大小' 范围是1-7
  face = '字体'
    注:属性的定义
   *color
     -英文单词: red,green,blue
  -rgb(值1,值2,值3):值的范围0~255 很多浏览器不支持
  -#值1,值2,值3: 值的范围00~FF之间 (推荐使用)4
   *width
     -数值:width = '20',数值的单位,默认是px(像素)
  -数值%:width = '50%',占比相对于父元素的宽度

  -图片标签*
    <img>: <img src='' width= '' height='' alt = ''>
    *src:指定图片的位置
      **位置书写的规范
     -一般写相对路径:
       ./:代表当前目录 ./可以省略
    ../:代表上一级目录
   
    *width:宽度
    *height:高度
       高度和宽度只能出现一个,否则会引起图片变形
    *alt:找不到图片时候显示的信息
  -列表标签**
     <ol/ul>
   *有序列表 ol orderedlist
   *无序列表 ul unorderedlist
   *格式<ol或ul>
          <li>内容</li>
          <li>内容</li>
          <li>内容</li>
     </ol或/ul>
  -超连接标签*****
     <a>: <a href = "要跳转的页面连接地址 target= "值"> 内容 </a>
    *例子:<a href = "https://www.baidu.com" target="_blank"> 点我 </a>
    *href: 指定访问资源的URL(统一资源定位符)
           支持互联网路径,也支持本地路径
    *target: 指定打开资源的方式
             "_self"默认本页面打开  不设置target默认为"_self"
             "_blank"在一个空白页面打开
    注意:href不仅可以访问网站,还可以用来发邮件 <a href = "mailto:tianhaolin1991@126.com" 了解
  -div/span 后期和css结合使用,单独对内容没有什么操作
       div:文本信息在一块中展示,是块级标签
    span:文本信息在一行中展示,是行内标签
  -表格标签*****(对页面进行布局!!!!)
   !注意:HTML中表格只有行的概念,每行需要定义单元格个数
   *表格基础
<table>:定义表
    *width 宽度
    *height 高度
    *border 边框
    *bgcolor:背景色
    *align:对其方式
<tr>:定义行
<td>:定义单元格
    *conspan:合并列
    *rowspan:合并行
<th>:定义表头单元格  - 加粗/并且居中
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
  
   *表格的嵌套
     在进行网页布局时,最外层使用TABLE来布局
     如果一行只有一个单元格,则使用<tr><td></td></tr>来完成
  如果一行有多个单元格,则使用 <tr><td><table></table></td></tr>来嵌套完成
     !!!!一定要写注释!!!!!!!!!
  



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马