就业班第一天的内容:html
个人感觉东西蛮多的,,要记下来的内容也蛮多的,总结的内容大概如下:HTML
1、html的简介
    (1)什么是html?HyperText Mark-up Language ,超文本标记型语言,是网页的语言。
    * 超文本:超出文本的范畴
    * 标记:理解为标签,html中所有的操作都是通过标签来实现的
    * html是做网页。

* 第一个html程序
    = 代码 <font color="red" size="5">这是我的第一个html程序</font>

(2)html程序遵循一定的规范
    第一个:html程序以<html>开始,同时</html>结束
        * 比如创建java里面方法,public void add() { 方法体 }
    第二个:html程序包含两部分内容:head和body
        * <html>
            <head>设置页面信息</head>
            <body>显示到页面上的内容</body>
         </html>
    第三个:html的标签有开始标签,同时也要结束标签
    第四个:html的代码不区分大小写的
    第五个:有些标签没有结束标签,需要在标签内结束 <br/>
        * 实现换行的操作,使用标签实现的<br>, 没有</br>
    
    (3)html的操作思想
    * 在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来
    (封装),通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器,通过修改容器的属性值,
    实现容器内数据样式的变化。

2、字体标签
    (1)文字标签 <font>
    * <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
    ** 常用两个属性
    *** color:设置文字的颜色
        **** 有三种表示方式
        第一种:直接使用英文单词进行表示 red  green  yellow......
        第二种:使用十六进制数字进行表示 #ffffff,
            ** 通过RGB
        第三种:使用RGB颜色值配置 rgb(255,0,0)

*** size:设置文字的大小
        **** 文字大小值范围:1-7,如果值超过了7,使用还是7的效果

(2)标题标签
    * <h1></h1> <h2></h2>.......<h6></h6>
    ** 标题标签可以自动换行,从h1到h6字体的大小依次变小的

(3)水平线标签
    *  <hr/>
    * 属性
    ** color:表示设置水平线颜色
    ** size:设置水平线的粗细,范围1-7

(4)注释标签
    * 在java里面有几类注释?三类注释
    ** 单行注释,多行注释,文档注释

* 在html中注释 <!-- 注释的内容  -->
    ** 使内容不在html页面中进行显示

(5)特殊字符 &nbsp;
    * 实现空格的操作

3、列表标签
    (1)想要实现:
    传智播客
         java学院
         人事部
         学工部
    * 首先需要使用      <dl></dl>: 定义列表的范围
    * 之后在dl标签里面,<dt></dt>: 定义上层内容
    * 在dl标签里面,    <dd></dd>: 定义下层内容
    ** 代码
    <dl>
     <dt>传智播客</dt>
     <dd>java学院</dd>
     <dd>人事部</dd>
     <dd>学工部</dd>
    </dl>

(2)有序列表标签
         1.java学院
         2.人事部
         3.学工部

a.java学院
         b.人事部
         c.学工部

i.java学院
          ii.人事部
         iii.学工部
    * 使用 <ol></ol>: 定义有序列表的范围
        ** ol标签上面有属性 type:排序的方式
        ** type属性里面的值 1   a   i
    * 之后在ol标签里面:<li></li>: 封装具体的内容
    ** 代码
    <ol>
     <li>java学院</li>
     <li>人事部</li>
     <li>学工部</li>
    </ol>

(3)无序列表标签
          (特殊符号)java学院
          (特殊符号)人事部
          (特殊符号)学工部
    * 首先使用标签 <ul></ul>: 定义无序列表的范围
        ** ul标签上面有属性 type:设置特殊符号
        ** type属性里面的值 disc   circle   square
    * 之后在ul标签里面: <li></li>: 封装具体的内容
    ** 代码
    <ul>
     <li>java学院</li>
     <li>人事部</li>
     <li>学工部</li>        
    </ul>

4、图形标签
    (1)在html中显示图片
    (2)标签:<img src="图片的路径名称"/>
    (3)属性:
    * src:图片的路径名称
    * width:图片宽度
    * height:图片的高度
    * border:图片的边框的粗细
    * alt: 显示在图片上面的内容
        ** 鼠标移动到图片上面,稍等片刻出现文字
        ** 如果图片找不到,显示alt的内容
        *** 这个属性在某些浏览器不能显示的

5、超链接标签
    (1)什么是超链接:点击打开新的内容
    (2)标签:<a href="链接到的地址">显示在页面上的内容</a>
    * 代码 <a href="hello.html">显示在页面上的内容</a>
    (3)属性
    * href:链接到地址
    * target:超链接的打开方式
    ** 在默认的情况下,打开方式在当前的页面打开
    ** target里面的值:_self,当前页面打开;   _blank,在新标签页打开

6、表格标签
    操作技巧:
    首先数表格里面有多少行,数每行里面有多少个单元格
    (1)什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明
    (2)标签
    * 首先定义表格的范围:<table></table>
        ** 属性
        *** border:设置表格线
        *** bordercolor:设置表格线的颜色
        *** cellspacing: 设置单元格之间的距离
        *** cellpadding: 设置文字和单元格之间的距离
        *** width: 设置表格的宽度
        *** height:设置表格的高度

* 在table标签里面表示行: <tr></tr>
        ** 属性
        *** align:设置对齐方式,值 left   center   right

* 在tr标签里面表示列: <td></td>
        ** 属性
        *** align:设置某个单元格对齐方式
    
    * 在tr标签里面也可以表示单元格:<th></th>
        ** 实现居中和加粗的效果
    
    (3)合并单元格
    * 是在td标签上面进行的操作,使用两个属性
    ** rowspan:跨行
    *** 代码 <th rowspan="4">人员信息3人</th>
    ** colspan:跨列
    *** 代码 <td colspan="3">统计信息3人</td>

(4)标题标签:<caption>标题内容</caption>

7、表单标签
    (1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单
    (2)使用表单标签实现数据提交到服务器上这个过程

(3)form 标签:如果写表单,首先定义表单的范围
    * 属性
    ** action:提交的服务器的地址
    ** method:表单的提交方式(有很多种,常见的有两种 get和post)
    *** 代码
    <form action="hello.html" method="get"></form>
    ** get和post提交,在默认情况下,提交方式是get提交
    *** get提交方式会在地址栏携带数据,安全性很差
    *** post提交方式地址栏不会携带数据,安全性比较高,数据在请求体里面(讲到http协议时候详细说)

(4)输入项:可以输入内容或者选择内容的地方
    ** 要求1:输入项里面必须要有name属性
    ** 要求2:在单选输入项和复选输入项以及下拉选择输入项里面
    都需要有属性value,设置的值

* 输入项需要写到form标签里面
    * 大部分输入项是通过标签input进行封装操作的
    ** <input type="输入项的类型"/>
    第一个:普通输入项 <input type="text"/>
    第二个:密码输入项 <input type="password"/>
    第三个:单选输入项 <input type="radio"/>
        ** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
        ** 设置默认选中,使用属性 checked="checked"
    第四个:复选输入项 <input type="checkbox"/>
        ** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
        ** 设置默认选中,使用属性 checked="checked"
    第五个:文件输入项,上传文件的。<input type="file"/>
    第六个:隐藏项,这个值不会显示在页面上,但是提交表单也可以提交到服务器上
        <input type="hidden"/>
    第七个:普通按钮 <input type="button"/>

*** 可以写value属性,设置输入项的默认值

(5)下面的两个输入项不是使用input标签进行封装的
    第八个:下拉选择输入项
    * <select>
        <option>AAAA</option>
        <option>BBBB</option>
        <option>CCCC</option>
    </select>
    * 使用属性 selected="selected" 默认选中

第九个:文本域
    * <textarea cols="10" rows="5"></textarea>

(6)提交按钮和其他的按钮
    * 提交按钮: <input type="submit"/>
        ** 属性 value:设置提交按钮显示的内容

** 点击提交按钮:地址发生了变化
        file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on

** 在输入项上面写name属性之后,提交表单
        file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
        ?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test

** 在单选框、复选框和下拉选择框里面设置了value之后,提交表单
        file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
        ?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test

* 重置按钮:<input type="reset"/>
        ** 属性 value:设置重置按钮显示的内容
        ** 不是做清空表单输入项的操作,使表单输入项回到初始状态
    
    * 使用图片进行提交:<input type="image" src="图片路径"/>

8、其他的标签的使用
    (1)pre:原样输出
         p:段落标签
         s:删除线
         u: 下划线
         b:加粗
         i:斜体

(2)div : 自动换行
         span:在一行进行显示

9、案例:注册页面
    (1)如果单元格里面没有内容,使用占位符替代(使用空格&nbsp;)
    (2)想要一个超链接没有效果,在href属性值写成#

上面是html的内容,下面就是css的内容;

CSS
1、css的简介
    (1)什么是css?层叠样式表
    * 样式表:有很多的属性和属性值,来设置内容样式
    * 层叠:一层一层的,样式的优先级。
    ** 优先级: 最终以谁的样式为准

* 使用css目的是:把网页的内容和样式进行分离,利用代码的维护。

* 想要使用css,不能单独使用,要和html结合使用
    * css和html的如何结合使用。

2、css和html的结合方式
    (1)css和html有四种结合方式
    第一种:使用html标签里面的属性 style="css的代码"
    * 代码 <div style="background-color:red;color:blue;">

第二种:使用html的标签
    * <style type="text/css">
        css的代码;
    </style>
    * 代码
      <style type="text/css">
        div {
            background-color:red;
            color:black;
        }
      </style>
    
    第三种:使用html标签实现  link,写在head里面
        * 首先创建css文件,在css文件里面写css代码
        * 在html中使用link标签引入css文件
        * 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
    
    第四种:使用html的style标签,在标签里面使用语句样式操作
        * 首先创建css文件,在css文件里面写css代码
        * 写style标签,在标签里面 @import url(css路径);

3、css的选择器
    (1)css优先级
    * 在一般情况下,优先级是后加载的优先级高
    (2)格式规范:  属性名称1:属性值1;属性名称2:属性值2;
    (3)选择器:作用在哪个标签上(要对哪个标签里面的内容进行操作)
    * css有三个基本选择
    第一个:标签选择器
        ** 使用标签名称作为选择器
        div {
            background-color: red;
        }

第二个:class选择器
        ** 每个html标签上面都有一个属性class,通过设置class属性的值
        ** 代码
        .haha {
            background-color:red;
        }

第三个:id选择器
        ** 每个html标签都有一个属性id,通过设置id的属性值
        ** 代码
        #hehe {
            background-color:green;
        }

(4)选择器的优先级
    * style > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器
    (1)关联选择器
    * 设置嵌套标签的样式
    ** 代码
    div p {
        background-color:red;
    }

(2)组合选择器
    * 设置不同的标签具有相同的样式
    * 代码
    div,p {
        background-color:green;
    }

(3)伪元素选择器
    * 比如超链接为例,
    * 状态:原始状态、鼠标放上去的状态、点击状态、点击之后的状态
        :link       :hover          :active      :visited

第一天的内容都能听懂,但是自己没有做笔记,有些后悔,所以第二天会自己写总结

黑马程序员就业班第一天的总结以及自己的看法相关推荐

  1. 黑马程序员就业班第二天的总结以及自己的看法

    今天自己学习第二天的内容,因为第一天没有自己作总结,所以,从今天开始自己做总结了 以下是自己写的今天讲课的自己总结: js: ********三个部分组成: 1.ECMAScript语句语法 2.BO ...

  2. 2022黑马程序员-前端学习第一阶段(Day01-HTML的认知)

    HTML的认知-Day01 学习笔记打卡 HTML认知 基础概念铺垫(了解) 认识网页 五大浏览器和渲染引擎 Web标准(了解) HTML初体验 HTML的感知 HTML骨架结构 开发工具的使用 语法 ...

  3. 黑马程序员——java基础第一课

    --- android培训.java培训.期待与您交流! ---- 01_计算机基础知识(计算机概述) A:什么是计算机?计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行, ...

  4. 黑马程序员JAVA基础-第一个程序

    ------- android培训.java培训.期待与您交流! ---------- 环境变量搭建好后就可以开始第一个程序的编写了,在此之前必须了解java中的一些基本规则 关键字  (1)被Jav ...

  5. 黑马程序员—[.Net就业薪资] 黑马.Net 12期毕业33个工作日,就业率达98%,平均薪水:6972元

    文章来源:黑马程序员,黑马论坛 黑马.Net 12期毕业33个工作日,就业率达98%,平均薪水:6972元 班级名称:黑马.Net 12期      毕业时间:2014年6月17日      总人数: ...

  6. 黑马程序员—[JavaEE就业薪资] JavaEE+云计算7期,就业率97%,平均工资7610元!

    文章来源:黑马程序员,黑马论坛 JavaEE+云计算7期,毕业70天,就业率97%,平均工资7610元! "JavaEE+物联云",作为黑马一个不断成长中的学科,正在朝着更高的态势 ...

  7. 黑马程序员—[Android就业薪资] Android31期,毕业18个工作日,就业率71.95%,薪资9946元

    文章来源:黑马程序员,黑马论坛. Android31期,毕业18个工作日,就业59人,平均薪资9946元 毕业班级:黑马程序员Android31期 毕业时间:7月22日 总人数:82人 班       ...

  8. 黑马程序员—[Android就业薪资] Android28期,毕业60天,就业率96.15%,平均薪水9378元!

    文章来源:黑马程序员,黑马论坛 Android28期,毕业60天,就业率96.15%,平均薪水9378元! 班级名称:黑马Android28期   毕业时间:2014年5月22日      总人数:7 ...

  9. 黑马程序员—[Android就业薪资] Android30期,毕业37工作日,就业率93%,平均薪水10315元!

    文章来源:黑马程序员,黑马论坛 Android30期,毕业37工作日,就业率93%,平均薪水10315 元! 毕业班级:黑马程序员Android30期 毕业时间:7月2日 总人数:72人 班     ...

最新文章

  1. U盘重装MacOS-Sierra系统
  2. php图片写入带问号_php实现图片上传时添加文字和图片水印技巧
  3. Unity使用 16bit 压缩 Texture 颜色能均匀过渡
  4. J2EE第五课Servlet随课笔记
  5. 新加用户被保护的解决办法
  6. linux的forx函数-进程控制
  7. 基于华为产品的高校云数据中心建设规划设计方案
  8. Android 第三方登录之支付宝登录
  9. 电商 购物车-订单-支付流程
  10. 解决mysql报错ERROR 2002 (HY000)
  11. python驱动级模拟按键 检测_py库: pyautogui (自动测试模块,模拟鼠标、键盘动作)...
  12. 推特狗狗档案数据集清洗分析及可视化
  13. win10 关闭自动维护计划任务
  14. uni-app动态切换样式
  15. Android刘海屏、水滴屏全面屏适配详解,997页字节跳动Android面试真题解析火爆全网
  16. IOS Swift语言开发 tableView的重用以及自cell的自适应高度
  17. 家·谱——人脸识别家谱系统
  18. 网站访问量统计实现.
  19. npm使用过程中的一些错误解决办法及npm常用命令
  20. 解决微信返回码为40113,错误信息errmsg:unsupported file type

热门文章

  1. 手机点餐系统概述_廖师兄 微信点餐系统 springcloud学习笔记
  2. 分布式锁的一些细节问题,值得收藏
  3. Android侧滑返回分析和实现(不高仿微信),flutter项目实战
  4. SpringBoot启动报错:Parameter 0 of method hmset in com.qcby.rbac.util.RedisUtils required a bean of type
  5. 创新创业名词解释_大学生创新创业指导_知到网课答案
  6. rpx怎么算出来的?
  7. 面试经典算法-上楼梯问题
  8. 商业智能BI与业务管理决策思维之二:业务结构分析
  9. 手把手系列之三十二——手把手教你做香果魔芋
  10. Vue框架+Axios框架