黑马程序员技术交流社区

标题: 关于HTML的学习笔记 [打印本页]

作者: 以德芙人 时间: 2018-11-8 16:30
标题: 关于HTML的学习笔记
C/S架构
在用户本地有一个客户端程序，远程有一个服务器端程序
优点：用户体验好
缺点：
      安装，部署麻烦

B/S架构Browser/Server浏览器服务器端
只需要一个浏览器，用户可以通过不停的网址，客户访问不同的服务器端chengxu
优点：开发安装部署简单
缺点：如果应用过大，用户的体验可能受到影响，对硬件要求过高
架构详解：
资源分类：
      静态资源：
         使用静态网页开发技术发布的资源
      特点：
         所有用户访问，得到的一样的结果
         如“文本，图片，音频，视频HTML，CSS，JS
         如果用户请求的是静态资源，那么服务器会将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源
      动态资源：
         使用动态网页开发技术发布的资源
         特点：
            所用用户访问，得到的结果可能不一样
            如：jsp/servlet,php,asp...
            如果用户请求的是动态资源，服务器或执行动态资源，转换为静态资源，再发送给浏览器


      举例：买车，可以吧车当做静态资源，如果无人购车超市，直接买车走人，
         动态资源是：相当于买车的销售，会根据不同的用户推荐不同的车
要学习动态资源，必须先学习静态资源
静态资源：
      HTML:用于搭建基础网页，展示页面的内容
      CSS:用于美化页面，布局页面
      JavaScript:控制页面的元素，让页面有一些动态的效果

      Html可以看做车架底盘
      CSS可以看做车漆等装饰
      JS可以看做是发动机变速箱，控制汽车的一些组件

HTML
概念：：最基础的网页开发语言
      超文本标记语言
         超文本：超文本是用个超链接的方法，将各种不同空间的文字信息祖师在一起的网状文本
         标记语言：
            有标签构成的语言
            标记语言不是编程语言
语法：
      1.html文档的后缀名.html
         HTML编写的内容可以被浏览器解析
      2.标签分类：
         围堵标签：又开始开始和结束标签
         自闭和标签：开始标签和结束标签在一起<br/>
      3.标签可以嵌套:
         需要正确嵌套，不能你中有我，我中有你
         错误：
      4.在开始标签中可以定义属性，属性是由键值对构成，值需用引号引起来
      5.html不区分大小写，建议小写
<html>
<head>
      <title>
         title
      </title>
</head>
<body>
      <font color='red'>Hello world</font><br/>
      <font color='green'>Hello world</font>
</body>

</html>
      标签的学习：
         文件标签：构成html最基本的标签
            html: 文档的跟标签
            head:头标签，用于指定HTML文档的属性，引入外部的资源
            title：定义标题标签
            body：体标签
            <!DOCTYPE>？定义文档类型
            <meta charser="utf-8">
         文本标签：和文本有关的标签
            注释：
            <h1>to<h6>：标题标签，大小逐渐变小
            <p>：段落标签
            <br>：换行标签
            <hr>：显示一条水平线
                  属性：color：颜色
                     width: 宽度
                     size 高度
                     align:对齐方式
                        left:左对齐
            <b>:字体加粗
            <i>：字体斜体
            <font>：字体标签

            * face字体，color，size大小
            * 属性的定义：
                     color：
                        1.英文单词：red，green，blue
                        2.rgb（值1，值2，值3）：范围0-255
                        3.#值1值2值3：值得范围00~FF之间
                     width：宽度
                        1.数值：width='20'数值的单位，默认是px（像素）
                        2.数值%：占比相当于父元素的比例
            <center>居中
         图片标签：
            img：宽度:width  高度:height
                  ./代表当前目录
                  ../代表上一级目录
         列表标签:
            有序列表
            <ol type="A"></ol>
                  <li>内容</li>
            无序列表
            <ul></ul>
         链接标签：
            把一段文字或者图片包裹起来，然后点击文字图片后实现跳转
            属性：
         *  href：指定访问资源的
            <a href="超链接地址">点</a>
         * target：指定的打开资源的方式
         <a href="超链接地址" target="_blank">点</a>在空白页面打开
            _self当前页面打开
            <a href="mailto:邮件地址">联系我们
            <a href="">
         语义化标签：html5中为了提高程序的可读性
         * table：定义表格
            width:宽度
            * border:边框
            * cellpadding：定义内容和单元格之间的距离
            * cellspacing：定义单元格之间的距离，如果指定为0，那么就是合为一条
            * bjcolor：背景颜色
            * align：对齐方式
         * tr：定义行
         * td：定义单元格
            * colspan合并列
            * rowspan合并行
         * th：定义表头单元格
         * <caption>表格标题
         * <thead>表示表格的头部分
         * <tbody>体部分
         * <tfoot>脚部分

###Html标签：表单标签
* 表单
      *概念：用于采集用户输入的数据，用于和服务器进行交互
form：用于定义表单，可以定义一个范围，方位代表用户的数据范围
* 属性：
      * action：用于提交数据的url
      * method：指定提交方式
            分类：
                  一共7中，两种常用
                  get：
                     1.请求的参数会在地址栏中显示
                     2.请求擦书大小是有限制的，不安全
                  post：
                     1.请求的参数大小没限制，较为安全
                     2.不会在地址栏中显示，会封装在请求体重
* 表单项中的数据要被提交，必须制定其name属性

* 表单项标签：
      *input：可以通过type属性改变元素展示的形式
         placeholder：指定输入狂的提示信息，当输入框信息改变，会覆盖这个提示信息
         type属性
         * text:文本输入框
         * password：密码输入框
         * radio：单选框
               要想让多个单选框实现单选，多个name属性必须一致
            value要指定好
         * chexkbox复选框
         *       checked默认选中
         * label：指定输入项的文字描述信息：
         * file 文件<input type="file" name="file">
         * 隐藏域：hidden用于提交一些信息
         * 按钮：
               * submit:用于提交
               * button一个按钮
               * <input type="image" src="" >图片提交按钮，可以用src指定图片的属性
               * 取色器<input type="color" name=color>
   <label for="u">姓名：</label><input name="username" placeholder="请输入用户名" id="u"><br>

      *select：下拉列表
         option指定列表项
            province 省份
      *textarea：文本域
         <textarea cols="20" rows="5" name="des">
         cols指定列数，
         rows指定行数

## CSS页面美化和布局控制
1. 概念：Cascading Style Sheets 层叠样式表

3. css的使用：css与html结合
      1.内连样式
      2.内部样式
      * 在head标签内，定义style标签
      *       <style>
      *          div{
      *                color:blue
      *          }
      *       </style>
      3.外部样式
         * 定义css资源文件
         * 在head标签内，定义link标签
         ** 如：
            <link rel="stylesheet" href="路径">
            <div>hello css
>123中方式，作用范围越来越大

4.css语法
* 格式：
*    选择器{
*    属性名1，属性值1；
*    。。。
*    }
*    选择器：筛选具有相似特征的元素
*    注意每一对属性需要用分号隔开
5.css选择器
* 分类
      1.基础选择器  id选择器》类选择器》元素选择器
         * id选择器：选择具体id属性值的元素：建议在一个html页面中id值唯一
               语法：#id属性值{}
         * 元素选择器：选择具有相同标签名称的元素
            语法：标签名称
                  注意：id选择器的优先级要高于元素选择器
         * 类选择器：选择具有相同的class属性值的元素
            语法：.class属性值{}
                  类选择器优先级高于元素选择器

         <style>
                  p{
                     color:orange;
                  }
                  #p1{
                     color:red;
                  }
                  .cls1{
                     color:blue;
                  }

            </style>
      2.扩展选择器
         * 选择所有元素
            语法  *{}
         * 并集选择器：
               语法：选择器1，选择器2{}
         * 后代选择器：筛选选择器1下面的所有的选择器2元素
               语法：选择器1 选择器2{}
         * 子选择器：筛选选择器1的下一级选择器2：只筛选子选择器，
               语法：选择器1》选择器2{}
         * 属性选择器：选择元素名称，属性名=属性值得元素
         *    语法：元素名称[属性名称=“属性值”]{}
         * 伪类选择器：选择一些元素具有的状态
         *    语法：元素：状态{}

6.属性
1.字体、文本
      * font-size:字体大小
      * color
      * text-aligh:对齐方式
      * line-height行高
2.背景
3.边框
      * border:设置边框，复合属性
4.尺寸
      * width宽度
      * height高度
5.盒子模型
      * margin外边距
      * padding内边距
         注意：默认情况下内边距会影响盒子的大小
         box-sizing:border-box设置盒子属性不动
      * float：浮动
         left
         right

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2