java入门(HTML,CSS,JavaScript入门)

Java与前端开发入门 Java和前端开发是两个不同的领域,但在开发Web应用程序和服务时,两者经常结合在一起。本文介绍了Java和前端开发的一些基础知识,包括Java的安装、编写Java程序和Java基础,以及HTML、CSS和JavaScript的基础知识。Java是一种高级编程语言,用于构建后端Web应用程序和服务,而前端开发则涉及构建用户界面,处理用户事件和交互等方面。JSP是Java服务器页面的缩写,它允许Java程序员将Java代码和HTML模板结合在一起,用于动态生成Web页面。前端开发涉及创建Web页面。 阅读详情
  • HTML:
    • HTML是网页的内容的载体,内容就是网页作者放在页面上想要让用户流浪的信息,可以包含文字、图片、视频等。
  • CSS:
    • CSS样式是表现,就像网页的外衣,比如,标题字体,颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  • JavaScript
    • JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点希望(新闻图片)的轮换。可以这么理解,有动画,有交互的一般都是JavaScript来实现的。
  • HTML:<h1></h1>这是标题标签标签,<p></p>这是段落标签,<img src="xxxx.jpg">这个个图片
    • html文件的基本结构:
      • <html></html>称为根标签,所有的网页标签都在<html></html>中
      • <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。
      • <body></body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<imp>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
    • <head></head>标签认识
      • 文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
      • 以下标签可以用在<head></head>部分:
        <head>
            <title>...</title>
            <meta>
            <link>
            <style>...</style>
            <script>...</script>
        </head>
      • <title></title>:这是标题,主要用于告诉用户这个网页做啥的,搜索引擎可以通过网页标题,迅速的判断出网页的主题。因为每个的网页内容不同,所有标题也就应该不同
      • <style></style>:可以设置一些标签的风格
    • <body></body>标签,网页上的显示内容放在这里
      • <p></p>段落标签,顾名思义,把文字显示称为段落的样式,一个标签内,只能放一段文字。
      • <hx></hx>可以用于文章的标题:总共可以有六级分别为1~6。如:<h1>一级标签<h1>
      • <strong></strong>、<em><em>:这两个标签都是可以表达强调的作用,strong比em更加强调。strong是粗体,em是斜体
      • <span></span>这个标签没啥语义,它的作用就是为了设置单独的样式。文本放入标签之间,然后需要在头文件中<style>标签下,设置具体的样式eg:<style>span{具体样式,如颜色等}</style>
      • <q></q>短文本引用标签(用于引用别人的话)。这里不要加双引号,浏览器会对q标签自动添加双引号
      • <blockquote></blockquote>长文本引用标签,他会缩进。
      • <br>标签:换行,使用,类似于/n直接放置于需换行的字符串的末尾即可.xhtml用<br />
      • &nbsp:空格,每个空格后面需要跟分号
      • <hr >水平横线:同<br>使用方法类似
      • <address></address>为网页加入地址信息;
      • <code></code>添加代码标签
      • <pre></pre>添加大段代码标签
      • ul-li标签:信息列表标签:如新闻列表,图片列表。使用方法:
        <ul>
          <li> 信息</li>
          <li> 信息</li>
           ......
        </ul>
      • ol-li标签:有序信息列表标签:使用将会排序。方法和ul-li类似
      • <div></div>标签:在网页的制作过程中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
        • 独立逻辑部分:他是页面上相互关联的一组元素。如网页中的独立的栏目板块,就是一个典型的逻辑部分。
        • 我们可以通过ID这个属性,给div命名 ,使他逻辑更好id是放在<div id="">
      • <table></table>标签:里面有四个元素分别是:table、tbody、tr、th、td
        • <table></table>整个表格以<table>标记开始,</table>标记结束
        • <tbody></tbody>:当表格内容非常多的时,表格会加载一点显示一点,但是如果加上<tbody>标签后,这个表格就要等到表格内容全部下载完才会显示。
        • <tr></tr>:表格的一行,所以有几对tr表格就有几行。
        • <td></td>:表格的一个单元格,一行中包含几对td就说明一行中有几列。
        • <th></th>:表格的头部的一个单元格,表格表头。默认粗体且居中显示
        • table表格在没有添加css样式之前,在浏览器中显示是没有表格线的。
        • 使用css为表格添加表格线:
          <style type="text/css">
          table tr td,th{border:1px solid #000;}
          </style>
        • <caption></caption>标签:给表格添加标题文本
        • <table summary=""><table>,中summary就是摘要,添加代码可读性(语义化),但是在浏览器中不显示出来,可以使得搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容
      • <a>标签,链接到另一个页面实现超链接的功能。语法使用如下:
        <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
        • 在新建浏览器窗口中打开链接:<a href="目标网址" target="_blank">click here!</a>
        • target的其他属性:
          • _blank -- 在新窗口中打开链接 
            _parent -- 在父窗体中打开链接
            _self -- 在当前窗体打开链接,此为默认值
            _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)

            一个对应的框架页的名称 -- 在对应框架页中打开
        • 添加邮箱:
          • Mailto后为收件人地址,cc后为抄送地址,bcc后为密件抄送地址,subject后为邮件的主题,body后为邮件的内容,如果Mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的每一个都以“&”开头。下面是一个完整的实例:Mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容
      • <img>标签,为网页插入图片。使用方法:<img src="图片地址" alt=“下载失败的替换文本” title="提示文本">
      • <form></form>表单标签,用于用户交互。用法:<form method="传送方式" action="服务器文件">
        • 以<form>开始,</form>结束
        • method:get/post
        • action:浏览者输入的数据被传送到的地方,比如一个php页面。
        • 所有的表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签里面,否则提交不到服务器上面
      • 文本输入框标签:
        <form>
           <input type="text/password" name="名称" value="文本" />
        </form>
        • type:text是文本输入框,password是密码输入框
        • name:为这个文本框命名,以备后台程序ASP,PHP使用
        • value:为文本框设置默认值(主要用于提示)
      • 文本域,支持多文本输入<textarea rows="行数" cols="列数">文本</textarea>,可用css中width代替cols,height代替rows
      • 单选框,和复选框让用户选择:
        <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
        • type:redio时时单选框,checkbook时是复选框
        • value:提交数据到服务器的值
        • name:为控件命名
        • checked:当设置checked=“checked”时,该选项被默认选中
        • 如果是单选,则必须把那么设为一致。
      • 提交按钮:将数据提交到服务器:
        <input    type="submit"   value="提交">
        • type:只有为sunbmit的时候才具有提交的功能
        • value:按钮上显示的文字
      • 重置按钮:具有重置的功能:<input type="reset" value="重置">
        • type:只有为reset的时候,才具有重置的功能
        • value:按钮上显示的文字
      • <select></select>下拉选择框,如果再<select>标签中设置multiple="multiple"属性,就可以实现多选功能.
        • 语法:
          • <select multiple="multiple">
          •   <option value="看书">看书</option>
          •   <option value="旅游">旅游</option>
          •   <option value="运动">运动</option>
          •   <option value="购物">购物</option>
          •   </select>
      • form表单中的label标签,它不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本,就会触发此控件,就是说,当用户单击选中改label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和改label标签相关连的表单控件),标签中for属性中的值应该与相关控件的id属性值一定要相同:
        <label for="控件id名称">
        • 例子:
          <form>
            <label  for="male">男</label>
            <input type="radio" name="gender"  id="male" />
            <br />
            <label  for="female">女</label>
            <input type="radio" name="gender"  id="female" />
            <label  for="email">输入你的邮箱地址</label>
            <input type="email"  id="email" placeholder="Enter email">
          </form>
  • CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要用于定义HTML内容在浏览器内的显示样式,如文字的大小,颜色,字体加粗等。eg:
    p{//p是段落
       font-size:12px;//字体大小
       color:red;//字体颜色
       font-weight:bold;//字体加粗
    }
    • css样式由选择符和声明组成,而声明又由属性和值组成,如上面的例子,p是选择符,font-size这些是属性,冒号后面的是值 ,而属性和值就组成了声明。
      • 选择符:又称选择器,指明网页中要应用样式规则的元素(在{}之前的部分),如上例中是网页中所有的段落
      • 声明:在英文大括号内的就是声明,声明用分号区分
    • css注释代码/css代码*/(html是用<!--注释语句-->)
    • css样式可以写在什么地方呢,从CSS样式代码插入的形式来看,基本可以分为以下三种:内联式,嵌入式和外部式。
      • 内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中:
        <p style="color:red">这里文字是红色。</p>
      • 嵌入式,写在当前文件中:在<head>标签中有<style>标签,在这里写CSS样式:
        <style type="text/css">
        span{
        color:red;
        }
        </style>
      • 外部式(外联式)CSS样式,写在单独的一个文件中,就是把CSS代码写一个单独的外部文件中,以.CSS为拓展名,在<head>(但是不在<staty>)内使用<link>标签将CSS样式链接到HTML文件内:<link href="base.css" rel="stylesheet" type="text/css" />。
        • 注意点:
          • CSS样式文件名称以有意义的英文字母命名,如main.css。
          • rel="stylesheet" type="text/css"是固定写法不可修改
          • <link>标签位置一般写在<head>标签之内。
      • 内联式,嵌入式,外部式三种设置CSS方法的优先级:内联式>嵌入式>外部式。
        • 需要注意的是嵌入式>外部式有一个前提:嵌入式CSS样式的位置一定在外部式的后面。如果外部式CSS样式的位置在嵌入式的后面,则外部式的优先级就高于嵌入式,也就是,就近原则(在代码中的位子,距离元素的远近。)
    • 选择器,结合之前所说的,选择器就是在{}之前的部分,且指明应用样式对象的元素,选择器分为标签选择器,类选择器
      • 标签选择器:即{}前是标签eg如上列子:spam{color:red;}
      • 类选择器:这是css样式编码中最常用到的语法:
        .类选器名称{css样式代码;}
        • 使用第一步:给合适的标签用class=""起一个类名 
        • 第二步:使用以上语法设置样式,注意,前面是有英文.的
      • ID选择器:使用方法和类选择器类似,但是有所不同:
        • 第一:为标签设置ID=""而不是class=""
        • 第二:设置样式的时候,前面不再是英文的.(小圆点)。而是#
        • eg:
#tj{
color: red;
}
      • 类和ID选择器的区别:
        • ID选择器只能在文档中使用一次:
          • <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="" ="stress">勇气</span>来回答老师提出的问题。</p>这样写,第二个样式失效,但是不在一个标签内则可以
        • 可以使用类选择器为一个元素同时设置多个样式:
          .stress{
              color:red;
          }
          .bigsize{
              font-size:25px;
          }
          <p>到了<span  class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
      • 子选择器:用>表示,用于选择指定标签元素的第一代子元素eg:
        .food >li{border:1px solid red;}/*表明样式作用于.food类名下的第一代子元素(第一层也可以这么理解)*/
      • 包含(后代)选择器:用空格代替子选择器中的>即可:
        .first  span{color:red;}/*这个样式是作用在类名为first下的所有后代元素,不单单是第一代元素了*/
      • 通用选择器:他使用*来指定,它的作用是匹配xml中所有表现元素。
      • 伪类选择器:它允许个html不存在的标签(标签的某种状态)设置样式eg:
        a:hover{color:red;}/*鼠标滑过设置字体颜色*/
      • 分组选择符:如果想给多个标签元素设置同一个样式的时候,可以用分组选择符(也就是分号区分),。不单单只是同一个标签eg:
        .first,#second span{color:green;}
    • 继承性:CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定的html标签元素,而且应用于后代。比如之前子选择器,用color:red属性的时候,就具有继承性,虽然子选择器是针对第一个代元素的,但实际效果却是全部的字变成了红色。但是,borde:1px solid red则不具有继承属性,所以,子选择器那,只有第一代元素有框,而非全部后代都有。
    • 特殊性:当我们为同一个元素设置不同的CSS样式的代码的时候,会根据权值的大小选择选择效果,标签 1,类选择器 10 ,ID选择器最高为100 ,前面说到的继承也有权值但是是最小的,只有0.1eg:
      p{color:red;}  /*权值为1*/
      p span{color:green;}  /*权值为1+1=2*/
      .warning{color:white;}  /*权值为10*/
      p span.warning{color:purple;}  /*权值为1+1+10=12*/
      #footer .note p{color:yellow;}  /*权值为100+10+1=111*/
      • 注意点,第一继承的权值为0.1最小,然后就是,内联式CSS样式表的比ID的权值要高。
    • 层叠性:在html中对于同一个元素有多个具有相同权重值的CSS样表,这个时候就是之前有说到过的就近原则了。
    • 重要性:把某些样式的权值设置为最高值,用!important来实现
    • 文字排版--字体:
      body{font-family:"宋体";}
    • 文字排版--斜体:
      p a{font-style:italic;}
    • 文字排版--下划线:
      p a{text-decoration:underline;}
    • 文字排版--删除线:
       .oldPrice{text-decoration:line-through;}
    • 段落排版--缩进:
      p{text-indent:2em;}/*缩进两个文字, 2em的意思就是文字的2倍大小 */
    • 段落排版--行间距:
      p{line-height:1.5em;}
    • 段落排版--中文字间距、字母间距:
      h1{
          letter-spacing:50px;sss
      }/*中文间距*/
      h1{
          word-spacing:50px;
      }/*字母间距*/
    • 段落排版--对齐(可以为块状元素中的文本,图片设置居中等样式):
      h1{
          text-align:center;/*center是居中,left是居左,right是居右*/
      }
    • 元素分类:
      • 块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>  
      • 内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
      • 内联块状元素:<img>、<input>
    • 块状元素:常用的块级元素就如上面所写,或者使用以下代码将内联元素a转换为块级元素,从而使a元素具有块级元素特点:
      a{display:block;}
      • 特点:
        • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
        • 元素的高度,宽度,行高以及顶和底边距都可以设置。
        • 元素宽度在不设置的情况下,和父元素的宽度一致,除非设定一个宽度。
    • 内联元素:也称为行内元素块级元素可以通过以下代码设置为内联元素,从而具有内联元素的特点:
       div{
            display:inline;
       }
      • 特点:
        • 和其他元素都在一行上(块级元素是一个元素独占一行)
        • 元素的高度,宽度以及顶部和底部边距不可设置(块级元素是可以的设置这些的)
        • 元素的宽度就是他包含文字或图片的宽度,不可以改变
    • 内联块状元素:就是同时具备内联元素,块级元素的特点,可以通过以下代码设置为内联块状元素:display:inline-block
    • 盒子模型:规定了元素框处理元素内容,内边距,边框和外边距
      • 内边距,边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值。
      • 盒子模型可以理解为Android里面xml的控件。
      • 边框:
        • border-style(边框样式):dashed(虚线),dotted(点线),solid(实线)
        • border-color(边框颜色):可以用#xxx(16进制颜色代码,或者red这样的英文也可以)
        • border-width(边框宽度):一般是用像素,当然也可以用thin|medium|thick
        • 用border-top:1px solid red这样的方式单独设置上边框(border :1px solid red 一期设置)
      • 宽度和高度
        • 宽度=边界+边框+填充+内容
        • div{
              width:200px;/ 这里的宽度是内容的宽度/
              padding:20px;
              border:1px solid red;/边框线/
             margin:10px;   
          }/所以宽度为(10+1+20)
          *2+200=260*/
        • 填充:padding,用法和之前类似,但是他是有顺序的,上,右,下,左(顺时针的顺序)。eg:如果上下填充一样都是10px,左右填充一样都是20px那么可以写成
          div{padding:10px 20px;}
        • 边界(外边距):用法和padding类似
    • CSS布局模型
      • 流动模型
        • 流动模型(Flow)是默认网页布局模式,也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。特征如下:
          • 块级元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,在默认状态下,块级元素的宽度都为100%.实际上,块级元素都会以行的形式占据位置。
          • 在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(不像块级元素那样独占一行)
      • 浮动模型
        • 块级元素默认独占一行,如有需求就是一行两个块级元素的话,那么我们就可以使用浮动模型
          • 左对齐
            div{
                width:200px;
                height:200px;
                border:2px red solid;
                float:left;
            }
            <div id="div1"></div>
            <div id="div2"></div>
          • 右对齐就是把left换成right
          • 一左一右:
            div{
                width:200px;
                height:200px;
                border:2px red solid;
            }
            #div1{ float:left;}
            #div2{ float:right;}
      • 层模型
        • 层布局模型就像图像软件Photoshop中的图层边际功能一样三种形式如下:
          • 绝对定位(position:absolute)
            • 绝对定位就是将元素从文档流中拖出来,先设置position:absolute然后使用left,right,top,botton属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在包含块,则相对于body也就是我们的浏览器窗口。一下显示了一个向右移动100px,向下移动50px:
              div{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:absolute;
                  left:100px;/*相对于左边100px,可以理解为距离左边100px,下同*/
                  top:50px;

              }
              <div id="div1"></div>
          •  相对定位(position:relative)
            • 需要设置position:relative,然后通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移前的位置保留不动。相对于以前位置向下移动了50px,向右移动100pxeg
              #div1{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:relative;
                  left:100px;
                  top:50px;
              }

              <div id="div1"></div>/*是相对之前的位置,但是如果,块级元素里面是含有内联元素的时候,块级元素会移动,但是内联元素不会移动,因为 偏移前的位置是保留不动的*/
          • 固定定位(position:fixed)
            • 与absolute(绝对定位)定位雷士,但是它的相对移动坐标是视图(屏幕内的网页窗口)固定定位的元素会始终位于浏览器窗口内视图的某个位置。不会受到文档流的影响。
              #div1{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:fixed;
                  left:100px;
                  top:50px;
              }/*上下滚动也无法覆盖,类似小广告()*/
        • 组合使用
          • Relative与Absolute组合使用
            • 参照定位的元素必须是相对定位元素的前辈元素:
              <div id="box1"><!--参照定位的元素-->
                  <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
              </div>/*box1是参照定位元素*/
            • 参照定位元素必须加入relative
              #box1{
                  width:200px;
                  height:200px;
                   position:relative;        
              }
            • 定位元素加入absolute就可以使用top这些来进行偏移定位了。
    • 缩写
      • 盒模型的缩写:
        • 填充:padding,用法和之前类似,但是他是有顺序的,上,右,下,左(顺时针的顺序)。eg:如果上下填充一样都是10px,左右填充一样都是20px那么可以写成
          div{padding:10px 20px;}
      • 颜色的缩写
        • 当设置的颜色是16进制的色彩值时如果每两位的值相同,可以缩写一半。eg:
          • p{color:#000000}=p{color:#000}
          • p{color:#112233}=p{color:123}
      • 字体的缩写
        • body{
              font-style:italic;
              font-variant:small-caps; 
              font-weight:bold; 
              font-size:12px; 
              line-height:1.5em; 
              font-family:"宋体",sans-serif;
          }
        • 可以缩写为
          body{
              font:italic  small-caps  bold  12px/1.5em/*size和height中间要加入/*/  "宋体",sans-serif;
          }
        • 使用简写,至少需要指定font-size和font-family,其余属性,未指定,那么就将自动使用默认值
    • 颜色值
      • 英文命令颜色
        • p{color:red;}
      • RGB颜色
        • p{color:rgb(133,45,200)}
        • p{color:rgb(20%,33%,25%)}
      • 十六进制颜色
        • p{color:#00ffff}
    • 长度值
      • 像素
        • CSS规范中假设90px=1英寸但是,实际上,浏览器会使用显示器的时间像素
      • em
        • 就是font-size值,如果,font-size为14px,那么1em=14px。而如果font-size为12px,那么1em=12px。
        • 特例 size的单位为em的时候:
          • HTML
            <p>以这个<span>例子</span>为例。</p>
          • CSS
            p{font-size:14px}
            span{font-size:0.8em;}
          • 那么span中字体的大小就为11.2(12*0.8=11.2)
      • 百分比
        p{font-size:12px;line-height:130%}/* 12px*1.3=16.6px*/
  • CSS样式设置小技巧
    • 水平居中设置-行内元素:我们可以通过text-align:center来实现
      • html
        <body>
          <div class="txtCenter">我想要在父容器中水平居中显示。</div>
        </body>
      • CSS
        <style>
          .txtCenter{
            text-align:center;
          }
        </style>
    • 水平居中设置-定宽块级元素(块级元素的宽度width为固定值):我们就可以通过设置margin-left:20px auto;来实现eg:
      • html
        <body>
          <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
        </body>
      • CSS
        <style>
        div{
            border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
           
            width:200px; /*定宽*/
            margin:20px auto; /* margin-left 与 margin-right 设置为 auto,这是缩写 */
        }
    • 水平居中-不定宽块级元素方法
      • 不定宽度的块级元素有三种方法居中
        • 加入table标签
          • table标签可以长度自适应,也就是说,table的长度就是根据,其内文本长度决定,因此加入table之后,这元素就可是看做是一个定宽的块级元素了然后和之前的定宽跨级元素设置居中的方法一样。eg
            • html
              <div>
               <table>
                <tbody>
                  <tr><td>
                  <ul>
                      <li>我是第一行文本</li>
                      <li>我是第二行文本</li>
                      <li>我是第三行文本</li>
                  </ul>
                  </td></tr>
                </tbody>
               </table>
              </div>
            • CSS
              <style>
              table{
                   border:1px solid;
                  margin:0 auto;
              }

              </style>
        • 设置display:inline方法:显示类型设为行内元素,进行不定宽元素的属性设置
          • 设置display:inline(设置为行内元素),然后用text-align:center来实现居中效果
            • html
              <body>
              <div class="container">
                  <ul>
                      <li><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                  </ul>
              </div>
              </body>
            • CSS
              <style>
              .container{
                  text-align:center;
              }
              /*  m argin:0;padding:0 (消除文本与 div 边框之间的间隙)*/
              .container ul{
                  list-style:none;
                  margin:0;
                  padding:0;
                  display:inline;
              }
              /*  m argin-right:8px (设置 li 文本之间的间隔)*/
              .container li{
                  margin-right:8px;
                  display:inline;
              }
              </style>
        • 设置position:relativa,left:50%:利用相对定位,接着使元素,左移50%,完成居中
          • 通过给父元素设置float,然后给父元素设置position:relative和left:50%
            • html
              <body>
              <div class="container">
                  <ul>
                      <li><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                  </ul>
              </div>
              </body>
            • CSS
              <style>
              .container{
                   float:left;
                  position:relative;
                  left:50%

              }

              .container ul{
                  list-style:none;
                  margin:0;
                  padding:0;
                 
                   position:relative;
                  left:-50%;

              }
              .container li{float:left;display:inline;margin-right:8px;}
              </style>  
    • 垂直居中-父元素高度确定的单行文本
      • 通过设置父元素的height和line-height高度一致来实现的。(height:改元素的高度,line-height:行高)。eg:
        • html
          <div class="container">
              hi,java!
          </div>
        • CSS
          <style>
          .container{
              height:100px;
              line-height:100px;

              background:#999;
          }
          </style>
    • 垂直居中-父元素高度确定的多行文本
      • 父元素高度确定的多行文本,图片等的竖直居中有两种方法:
        • 方法一:使用table(包括tbody,tr,rd)标签,同时设置vertical-align:middle,在父元素设置该样式的时候,会对inline-block类型的子元素都有用。eg
          • html
            <body>
            <table><tbody><tr><td class="wrap">
            <div>
                <p>看我是否可以居中。</p>
            </div>
            </td></tr></tbody></table>
            </body>
          • CSS
            table td{height:500px;background:#ccc}/*td标签默认情况下设置了 vertical-align:middle */
        • 方法二:改方法兼容性比较差,不推荐使用。在chrome、firefox以及IE8以上的浏览器下可以设置块级元素的display为table-cell(设置为表单单元显示),激活vertical-align属性,但是IE6,IE7不支持这个方法
          • html
            <div class="container">
                <div>
                    <p>看我是否可以居中。</p>
                    <p>看我是否可以居中。</p>
                    <p>看我是否可以居中。</p>
                </div>
            </div>
          • CSS
            <style>
            .container{
                height:300px;
                background:#ccc;
                display:table-cell;/*IE8以上及Chrome、Firefox*/
                vertical-align:middle;/*IE8以上及Chrome、Firefox*/
            }
            </style>
          • 优点是不用添加多余的无意义的标签,缺点就是兼容性太差,而且,display的block变成了table-cell,破坏了原有的块级元素的性质。
    • 隐性改变display类型
      • 当元素(不管之前是什么类型的元素,display:none除外)设置以下2个句子之一:
        • position:absolute
        • float:left(right)
        • 只要html中出现以上两个句子之一的时候,元素的display显示类型就会自动变成display:inline-block(块级元素)的方式显示,当然就可以设置元素的width和height了,且默认宽度不占满父元素。eg:
          • html
            <div class="container">
                <a href="#" title="">a标签时行内元素不能设置宽度,但是在CSS中设置absolute之后就可以设置宽度了</a>
            </div>
          • CSS
            <style>
            .container a{
                position:absolute;
                width:200px;
                background:#ccc;
            }
            </style>
  • JavaScript:所有主流浏览器都支持JavaScript,全世界大部分网页都使用JavaScript,他可以让网页呈现各种动态效果。
    • 入门篇
      • 如何插入JS:我们使用<script></script>JavaScript代码放在标签之间。eg:
        • <script type="text/javascript">/* type="text/javascript 表示<scipt>之间的是文本类型,然后用使用的JavaScript语言*/
      • 引用JS外部文件
        • 我们可以通过<script>标签在html中写JavaScript代码,但是我们也可以像CSS中外部式一样,单独新建一个JavaScript文件,其后缀通常为.js。我们在js文件中不需要写<script>标签,直接编写JavaScript代码就可以了,然后使用<script src="script.js"></script>嵌入到HTML中即可。eg:
          • js
            • document.write("引用JS文件!"); 
          • html
            • <script src="script.js"></script>
      • JS在页面中的位置
        • 我们可以将JavaScript代码放在HTML中的任何一个位置,但是我们一般放在网页的head和body部分。
          • 放在<head>部分
            • 最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分
          • 放在<body>部分
            • JavaScript代码在网页中读取到该语句的时候,就会执行
          • 注意:JavaScript作为一种脚本语言,可以放在HTML中的任何位置,但是浏览器在解释HTMl是按先后顺序的,所以在前面的Script就会被先执行。比如页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置CSS等);而如果是通过事件调用执行的function那么对位置没什么要求
      • JS的代码格式:js语句;eg:
        • <script type="text/javascript">
             alert("hello!");/*alert("hello")是一个js语句,而分号用作与表示语句的结束。代码都应该在应为状态下*/
          </script>
      • JS的注释:前面说到HTML的时候,说他们的注释是/**/,在JavaScript中,有两种注释
        • //单行注释
        • /**/多行注释
      • 变量:变量就是用于存储某种数值的存储器,
        • 定义变量
          • var 变量名
        • 按理说,变量名是可以取任意的,但是为了代码的可阅读性,应该遵循以下规则
          • 变量必须使用字母、下划线_或者是美元符号$开始
          • 然后可以使用任意多个英文字母,数字,下划线,或者美元符号
          • 不能使用JavaScript关键字与保留字
        • 变量需要先声明 ,再使用,虽然在JavaScript中可以先使用再声明,但是,这样做不规范
      • 判断语句if…else
        • 同java一样
      • 函数:可以理解为java中的方法。语法如下:
        function 函数名()
        {
             函数代码;
        }
        • function是定义函数的关键字
        • 函数名是为这个函数取的名字
        • 函数代码就是实现的逻辑代码
        • 函数的调用如下: <input type="button" value="点击我" onclick=" dy " />(在head中有名为dy的js函数)。
      • 输出内容:document.write()
        • 我们可以通过上面的代码实现输出内容,这个输出,和java中的print用法类似,但是,但是write可以输出html的标签,docunment.weite("hello"+"<br>")/*输出hello后,输出一个换行符*/
        • 输出空格:html标签&nbsp实现。eg:document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
        • 使用CSS样式输出空格eg: document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
      • 警告:在访网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击确定就无法对网页做任何操作,这个小窗口就是使用alert是实现的,也就是警告。eg:
        alert(字符串或变量);
      • 对话框,confirm(包含一个确定,和一个取消按钮)eg:
        confirm(str);//str:在消息框中要显示的文本,返回值是布尔类型的。
        • 在使用上和警告有所区别,eg
          • <script type="text/javascript">
          •   function rec(){
          •   var mymessage=confirm ("你是妹子吗?") ;
          •   if(mymessage==true)
          •   {
          •   document.write("你是女士!");
          •   }
          •   else
          •   {
          •   document.write("你是男士!");
          •   }
          •   }
          •   </script>
      • 提问(prompt):弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮,取消按钮与一个文本输入框):
        prompt(str1, str2);
        • str1:要显示在消息对话框中的文本,不可修改
        • str2:文本框中的内容,可以修改(用户输入的内容)
        • 返回值:点击确定按钮,文本框中的内容将作为函数返回值,点击取消按钮,将会返回null
      • 打开新窗口(window.open)open()方法可以查找一个已经存在或者新建的浏览器窗口。
        window.open([URL], [窗口名称], [参数字符串])
        • URL:可选择参数,在窗口中要显示的网址或路径,如果省略这个参数,或者设置它的值是空字符串,那么窗口就不显示任何文档。
        • 窗口名称:可选参数,被打开窗口的名称。该名称由字母,数字和下划线组成,"_top","_blank","_self"具有特殊意义的名称,_top:框架网页中在上部窗口中显示目标网页,_self:在当前窗口中显示目标网页,_blakk:在新窗口显示目标网页。相同name的窗口只能创建一个,要创建多个窗口,则name不能相同。
        • 参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。


      • 关闭窗口,window.close();或者是<窗口对象>.close();(窗口对象;var mywin=window.open()).
      • DOM: 文档对象模型定义 访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素,属性和文本的树结构。
        • 通过ID获取元素:document.getElementById(“id”)
        • innerHTML属性:用于获取或替换HTML元素的内容:Object.innerHTML(Object是获取或替换HTML元素的内容)。eg.:
          • <script type="text/javascript">
          •   var mychar= document.getElementById("con") ;
          •   document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
          •   mychar.innerHTML="Hello world";
          •   document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
          • </script>
        • 改变HTML样式
          Object.style.property=new style;

          • <p id="pcon">Hello World!</p>
            <script>
               var mychar =  document.getElementById("pcon");
               mychar. style.color="red";
               mychar. style.fontSize="20";
               mychar. style.backgroundColor ="blue";
            </script>
        • 显示和隐藏(display)
          Object.style. display = value//value=none 此元素不会被显示(隐藏) value=block 显示
          •   <script type="text/javascript">
          •   function hidetext()
          • {
          • var mychar = document.getElementById("con");
          •   mychar.style.display="none";
          • }
          • function showtext()
          • {
          • var mychar = document.getElementById("con");
          •   mychar.style.display="block";
          • }
          •   </script>
        • 控制类名: 
          object.className = classname//获取元素的calss属性,为网页内的某个元素指定一个css样式来更改该元素的外观
          • <script type="text/javascript">
          • function add(){
          • var p1 = document.getElementById("p1");
          • p1.className = "one";
          • }
          • function modify(){
          • var p2 = document.getElementById("p2");
          • p2.className = "two";
          • }
          • </script>
w3cschool编程入门教程合集(涵盖HTML、CSS、JavaScript、Python、Java、C#等主流语言) JavaScript 使用原型链实现继承机制。开发者可以通过构造函数和原型链创建自定义对象。// 构造函数定义对象// 在原型上添加方法console.log(`你好,我叫${this.name},今年${this.age}岁。`);// 创建实例const person1 = new Person("张三", 25);// 输出:你好,我叫张三,今年25岁。逻辑分析Person是构造函数,new创建实例。prototype是原型对象,用于共享方法。 阅读详情

相关推荐

Java技术实现的个人博客系统完整项目与课程

本文还有配套的精品资源,点击获取 简介:本项目是一个基于Java技术的个人博客系统,它包含了完整的源代码和详细的课程指导。通过学习这个项目,可以深入理解Java Web开发的各个方面,如后端开发、前端展示和数据库管理。项目中整合了Spring、Spring MVC和MyBatis三个主要的技术框架,以及使用MySQL数据库管理系统。前端部分可能涉及HTML、CSS和Java...

weixin_42600407的博客 757

JavaWeb笔记整理——HTML、CSS、JavaScript

Java程序员必备前端技术栈——Html、css、JavaScript以及应用笔记详细整理

i_Water_boy的博客 1513

华为鸿蒙系统也能用!5分钟搞定谷歌三件套安装(附最新APK下载链接)

本文为华为鸿蒙系统用户提供了一份详尽的谷歌三件套(Google Play服务、商店及框架)手动安装指南。文章核心在于无需Root,通过ADB命令获取设备信息,并从可靠来源下载匹配版本的APK,按照正确顺序安装,从而解决海外应用依赖问题,实现5分钟快速部署。

c7d8e9的博客 6448

Javaweb之HTML,CSS的详细解析

<head></head><body></body>

qq_69748833的博客 982

SPI扩展CAN方案:从寄存器配置到多路通信实战

本文详细介绍了SPI扩展CAN方案的实现方法,从寄存器配置到多路通信实战。通过使用MCP2517FD芯片和SPI接口,可低成本扩展多路CAN通道,适用于工业控制领域。文章涵盖硬件设计、寄存器配置、中断优化及性能调优等核心内容,帮助开发者高效解决设备节点过多的问题。

weixin_42657024的博客 362

深入理解命名实体识别(NER)

命名实体识别(NER,Named Entity Recognition)是自然语言处理(NLP)中的一项重要技术,用于从文本中识别出特定类型的实体,并将这些实体分类到预定义的类别中。实体通常包括人名、地名、组织名、日期、时间、数量、货币等。例如,在句子“Barack Obama was born in Hawaii in 1961”中,NER任务的目标是识别“Barack Obama”作为人名,“Hawaii”作为地名,以及“1961”作为日期。

AngelCryToo的专栏 4638

JavaWeb:HTML&CSS

HTML是Hyper Text Markup Language的缩写,意思是超文本(最终效果超越文本)标记语言。它的作用是搭建网页结构,在网上展示内容HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式HTML不是像Java这样的编程语言,它是由一系列的标签组成的,没有常量、变量、流程控制、异常处理、IO等等这些功能。

weixin_74019079的博客 963

今天出一个candence 17.4 allego的安装教程

7、安装完成,接下来进行补丁更新,找到Hotfix_SPB17.40.035_wint.iso软件 ,右击鼠标选择装载。6、因为之前选择的定制安装,这一步不知道具体要安装啥,因此都勾选,点击NECK,接下来等待安装完成。后面经过仔细对比,发现是前面更新补丁时选择了F盘,F盘是candence安装包,不是补丁。8、在破戒大师里选择安装更新补丁,并找到刚才装载的安装包里的程序,点击下一步。3、打开破戒大师,找到安装candence进行如下图选择,点击下一步。有耐心的人可以重新卸了再装一边,我就不卸了,直接装。

hcvinh的博客 2725

Javaweb开发了解前端知识一、html&&css

01-html和CSS1、html2、CSS1、B/S 软件的结构 2、前端的开发流程 3、网页的组成部分页面由三部分内容组成!分别是内容(结构)、表现、行为。内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html技术来展示。表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用CSS技术实现行为,指的是页面中元素与输入设备交互的响应。一般使...

mxcsdn的博客 1万+

从硬件拆解到图像生成:一次搞懂MRI设备(主磁体、梯度线圈、射频系统)是如何协同工作的

本文深入解析MRI设备的三大核心系统——主磁体、梯度线圈和射频系统如何协同工作,实现从量子现象到诊断图像的转化。通过详细的技术参数和临床案例,揭示磁共振成像(MRI)在医疗图像处理中的精密工程原理和最新技术突破,帮助读者全面理解这一现代医学影像技术的运作机制。

weixin_33734785的博客 545

SE模块理解+SE-Resnet模块pytorch实现

文章目录SE模块理解SE实现注意力机制原因SE-resnet网络pytorch实现定义residual定义SE模块 SE模块理解 SENet是Squeeze-and-Excitation Networks的简称,拿到了ImageNet2017分类比赛冠军,其效果得到了认可,其提出的SE模块思想简单,易于实现,并且很容易可以加载到现有的网络模型框架中。SENet主要是学习了channel之间的相关性,筛选出了针对通道的注意力,稍微增加了一点计算量,但是效果比较好。 SE模块广泛应用于去噪,去雨方向,利用SE模

qq_42754919的博客 2万+

java学习:html和css总结

##html和css知识点总结 本小节以HTML的结构为框架,进行知识点的总结,参考如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;网页的标题&lt;/title&gt; &lt;meta charset="编码方式"&gt; &lt;style&gt; .类名称 {要定义的样式}

qq_41421480的博客 345

【软考】数据库系统工程师备考指南(一)

目录一、数据库系统工程师简介二、考试要求三、考试目标四、考试范围(一)信息系统知识(二)数据库系统设计与管理 一、数据库系统工程师简介 数据库系统工程师考试属于全国计算机技术与软件专业技术资格(水平)考试(简称计算机软件水平资格考试)中的一个中级考试。考试不设学历与资历条件,也不论年龄和专业,考生可根据自己的技术水平选择合适的级别合适的资格,但一次考试只能报考一种资格。考试采用笔试形式,考试实行全国统一大纲、统一试题、统一时间、统一标准、统一证书的考试办法。笔试安排在一天之内。 2022 年数据库系统工程

邓邓子的博客 3859

html css js需要一起学吗,web前端入门:css+html5+javascript同时学可以吗?

原标题:web前端入门:css+html5+javascript同时学可以吗?HTML+CSS+JS是前端基础核心知识,肯定是都要学的。在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可。说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂。 虽说三者的重要性很难分出高下,但在不同的领域里三者有不同的侧重,比如侧重结构布局时,HTML独占优势,侧重样式表现时C...

weixin_39997089的博客 368

【GameFramework框架内置模块】15、场景(Scene)

场景(Scene)模块,提供场景管理的功能,负责场景的加载、卸载、切换和管理。可以方便地管理不同场景之间的切换以及不同场景之间的信息传递。

优快云博客专家,Unity3D高级软件工程师,《Unity 3D从入门到实战》作者。 1882

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

java前端基础--HTML&CSS、JavaScript、Vue、Ajax

java前端基础--HTML&CSS、JavaScript、Vue、Ajax

PluMage11的博客 1994

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

Java入门级小案例:网页版简易计算器

用HTML、CSS、JS进行书写一个具备一定功能的简易计算器。 效果显示 若喜欢,请一键三连!

2302_79622705的博客 1099

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

新手福音:借tiobe8kino话题,用快马一键生成多语言入门代码实例

此外,旁边还得有一个“沙盒”区域,让用户能安全地修改代码里的某些参数(比如数字、字符串),然后点击运行,立刻看到修改后的结果变化。具体来说,当用户修改了参数并点击“运行”,JavaScript会捕捉这个修改,然后根据当前选中的语言,用预设的逻辑计算出“如果这段代码真的执行了,结果应该是什么”,并将这个模拟结果显示出来。同时,右栏的参数编辑区也会预置一个与该示例相关的可修改变量(如Python列表中的某个值、JavaScript要更新的文本、Java对象的属性值),并更新运行按钮对应的处理函数。

EmeraldEagle36的博客 882

【前端】5. JavaScript(基础语法)

对JavaScript的基础语法的学习,包括发展历史,js/css/html三者的关系,组成,书写形式,注释,输入,输出,变量,运算符,条件,循环,数组,函数,对象等内容。快来看看吧!

哈茶的博客 1058

今天给大家谈谈一个做了11年Java开发,转型做老师,沙雕一个。

第一回,大家好,今天给大家谈谈一个做了11年Java开发转型做老师的过程。 加微信互撩:

cyhlili100的博客 6302

js学习总结

前端三剑客,html管布局,css管样式,js管交互js网页文本语言 也是面向对象完整的javascript由语言基础(),BOM,DOM组成。

m0_62472302的博客 206

Java-Spring入门指南(二十四)SSM整合HTML:解决CSS/JS静态资源被过滤问题

本文介绍了在SSM框架整合HTML时,解决CSS/JS静态资源被过滤问题的两种方案。当SpringMVC拦截所有请求时,静态资源(如CSS/JS)会返回404错误。方法一通过<mvc:default-servlet-handler>委托Tomcat默认Servlet处理静态请求,适合简单项目;方法二使用<mvc:resources>精准映射资源URL与实际目录,适合资源路径复杂的项目。文章详细说明了两种方案的配置步骤、原理及适用场景,并强调了与<mvc:annotation-d

2402_83322742的博客 3100

java和python都要掌握_如果两者都决定要学的话,先学Java还是Python?

先后顺序不关键,要推荐的话推荐先Python。如果说学过Java学Python会容易一点,那么反过来也一样。不是说会难一点的语言再学简单一点的语言就简单一点,而是会编程的话学简单一点的语言会比学复杂一点的语言更简单。但是你想,如果不会编程,大概也是学简单的语言要比学复杂的语言轻松。所以,先学了Java再来学Python会更简单一点是伪命题,容易是Python容易,和Java没关系。简单来说,你会J...

weixin_39922868的博客 745

可以先学python再学java吗,先学python再学java可以吗

但是JS是不那么适合做入门语言的,因为它的应用面不够宽(新手没有HTML的知识情况下能做的事情不多),它的表达能力不像个高级语言(你不可能要求一个没入门的人先掌握Babel或者TS),它的基于原型的设计和残缺的构造能力可能会让新手对面向对象有一些误解。你说专门学这个,我也不知道该怎么学。所以我的建议是,先专心学好Python或者Java之一,再学Python或Java里面剩下那个,这时候开始同时按照HTML-CSS-JS的顺序学习web相关的内容,找个自己感兴趣的点,写个实际项目,边写边学,掌握会更快。

2301_81895257的博客 903

Java全套课程修炼之Java小白入门篇

您是否还在学习Java的路上徘徊不前?是否还在为怎么学好Java而感到迷茫?又或者不知道应该按照什么样的学习路线去学习Java?如果您存在以前状态,那么可以看一下这篇文章。

程序羊的博客 6972

暑假学习进度记录墙

7.16-7.20基本Java语法 CSS HTML JS Python 入门 7.21: Django入门, 转载于:https://www.cnblogs.com/yfr2zaz/p/11220975.html

weixin_30443747的博客 153
上一篇: RecyclerView的使用
下一篇: MVP初解
guideit
博客等级 码龄12年 1粉丝 23原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值