资讯详情

自学Javaweb笔记

文章目录

  • HTML
    • 配置idea的默认网页
    • 一、HTML的书写规范
    • 二、基本语法
      • 1.HTML标签：
        • (1)标签注意事项
        • (2)基本标签
        • （3）超链接(重点)
        • （3） 列表标签
          • ① 无序列表
          • ② 有序列表
          • ③自定义列表
        • （4） img标签
        • (5) 表格标签
          • ①.table标签
          • ②.跨行跨列标签
        • (6) iframe标签
        • (7) 表单
  • CSS
    • 1.选择器
      • 1.标签选择器
      • 2. 类选择器class
      • 3.ID选择器
    • 高级选择器
      • 1.层次选择器
        • 1.1后代选择器
        • 1.2子选择器
        • 1.三相邻兄弟选择器
        • 1.四通用兄弟选择器
      • 4.结构伪选择器
      • 5.属性选择器(常用)
    • 2.美化网页元素
      • 1.字体样式
      • 2. 文本样式
        • 1.颜色
        • 2. 文本对齐
        • 3. 首行缩进
        • 4. 行高
        • 5. 装饰
        • 6. 水平对齐文本图片
  • JavaScript
    • 1.基本语法
      • 1.变量类型
      • 2.数据类型
      • 3.字符串
      • 4.比较运算符
      • 5.数组
      • 6.对象
    • 2.内部对象
      • 1.Date
      • 2.JSON
      • 3.面向对象
        • 3.1.class关键字
      • 4.BOM对象
      • 5.操作DOM对象

HTML

配置idea的默认网页

idea如果您想更改默认浏览器，请更改默认浏览器edge默认浏览器. file - settings - Tools - Web Browsers and Preview 第一步:点击里面的一切 ‘ - ’删掉， 第二步：加一个Name为 Edge， Family 为 Internet Explorer 路径自己找 默认下载在C:\Program Files (x86)\Microsoft\Edge\Application\ 这条路下的一条exe文件 添加到Path里。 此时，如果直接保存执行HTML的话会出现Must be at least one browser per family的问题， 下面需要添加一个Chrome 路径和edge一样 在这里插入图片描述

一、HTML的书写规范

<!DOCTYPE html><!--约束 声明--> <html lang="en"><!-- html标签表示html开始 lang="zh_CN"表示中文 html标签一般分为两部分，即head和body--> <head><!-- 头部信息一般包含三部分，title标签，css样式，js代码 -->     <meta charset="UTF-8"><!-- 表示使用当前页面UTF-8字符集-->     <title>CSDN</title
        
         >
        <!-- 表示标题 -->
</head>
<body><!--是整个html页面显示的内容-->
    hello <HTML></HTML>
<button onclick="alert('你真帅')">点这里</button>
</body>
</html><!--整个html页面的结束-->

二、基础语法

1.HTML标签：

（1）标签的注意事项

  1. 标签不能交叉嵌套 不能 //不过浏览器会帮你修复代码
  2. 标签必须关闭和闭合 双标签必须 单标签必须有** / ** //浏览器也会帮你修复
  3. 属性必须有，属性值必须用加
  4. 注释不能嵌套
  5. 双标签：<标签></标签>
  6. 单标签<标签/>

（2）基本标签

		<!-- 标题只有h1 - h6 h1最大 h6最小 align="left" 左对齐（默认） align="center" 居中 align="right" 右对齐 -->
		<h1>标题1<h1>
		<h2>标题2<h2>
		<h3>标题3<h3>
		<h4>标题4<h4>
		<h5>标题5<h5>
		<h6>标题6<h6>

		<!--段落标签-->
		<p>小了白了兔      白了又了白</p>
		<p>清了蒸了红了烧了炖了起了来</p>
		<p>放了葱了姜了蒜了盖了锅了盖</p>
		<p>端了上了桌了来了真了好了吃</p>
		
		<!--水平线标签-->
		<hr/>


		<!--换行标签-->
		小了白了兔      白了又了白 <br/>
		清了蒸了红了烧了炖了起了来 <br/>
		放了葱了姜了蒜了盖了锅了盖 <br/>
		端了上了桌了来了真了好了吃 <br/>
		
		<!--样式标签-->
		<label>i love you</label> <br/>
		<em>i love you</em> <br/>
		
		<!--特殊符号-->
		空格：&nbsp;
		<br/>
		大于号：">&gt;
		<br/>
		小于号:&lt;
		<br>

（3）超链接（重点）

在网页中所有点击以后可以跳转的内容都是超链接 <a></a>标签为超链接 href属性设置连接的地址 target属性设置哪个目标进行跳转 _self 表示当前页面 （默认值） _blank 表示打开新页面进行跳转

<a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" >小绿龙</a>
    <a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" target="_self">小绿龙</a>
    <a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" target="_blank">小绿龙</a>

锚链接： 1.需要一个锚标记 2.跳转到标记#

（3） 列表标签

① 无序列表
<!--无序列表-->
 <ul type="none">
        <li >张三</li>
        <li>李四</li>
        <li>王麻子</li>
    </ul>
② 有序列表
 <!--有序列表-->
  <ol type="none">
        <li >张三</li>
        <li>李四</li>
        <li>王麻子</li>
    </ol>
③自定义列表
<!--自定义列表 dl:标签 dt:列表名称 dd:列表名称 -->
<hr/>
<dl>
    <dt>语言</dt>

    <dd>Java</dd>
    <dd>C/C++</dd>
    <dd>Python</dd>
    <dd>JavaScript</dd>
</dl>

（4） img标签

img标签是图片标签，用来显示图片 scr属性可以设置图片的路径 width属性可以修改图片的宽 height属性可以修改图片的高 alt属性可以设置如果图片找不到现实的东西

在JavaSE中路径也分为相对路径和绝对路径 相对路径：从工程名开始算

绝对路径：盘符：/目录/文件名

在web中路径分为绝对路径和相对路径两种

相对路径： . 表示当前文件所在的目录 … 表示当前文件所在的上一级的目录 文件名 表示当前文件所在的目录的文件 ，相当于./文件名./可以省略

绝对路径： 正确格式是：http://ip:port/工程名/资源路径

(5) 表格标签

①.table标签

<table>是表格标签 ① border设置表格标签 ② width 设置表格宽度 ③ height 设置表格高度 ④align设置表格相对于页面的对齐方式 ⑤cellspacing设置单元格间距 <tr> 是行比奥前 <th>是表头标签 <td>是单元格标签 ① align设置单元格文本对齐方式 <b>是加粗标签
②.跨行跨列标签

colspan 属性设置跨列 rowspan属性设置跨行

(6) iframe标签

iframe标签可以在页面上开辟一个小区域显示一个单独的页面 iframe标签和和a标签的组合使用步骤如下: ① 在iframe标签中使用name属性定义一个名称 ② 在a标签的target属性上设置iframe的name的属性值

(7) 表单

readonly 只读 disable 禁用 hidden 隐藏域 placeholder 提示默认信息 required 非空判断 pattern 正则表达式

<!--表单form action: 表单提交的位置，可以是网站，也可以是一个请求处理地址 method: post,get 提交方式 get方式提交：我们可以在url中看到我们提交的信息。不安全 但是高效 post方式提交:比较安全，传输大文件 -->

<form action="1.我的第一个网页.html"></form>

<!--文本输入框：input type="text"-->

<p>名字：<input type="text" name="username"></p>

<!--密码框：type="password"-->
<p>密码：<input type="password" name="password"></p>

<!--单选框标签 input type="radio" value: 单选框的值 name：表示组 -->
<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

<!--多选框 input type="checkbox" -->
<p>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="play" name="hobby">打游戏
    <input type="checkbox" value="chat" name="hobby">聊天
</p>


<!--按钮 input type="text" 普通按钮 input type="image" 图片按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 -->
<P>按钮
    <input type="text" name="btn1" value="点击">
    <input type="image" src="../resources/image/1.png">
</P>

<p>
    <input type="submit">
    <input type="reset" value="清空">

</p>
<!-- 下拉框 列表框 -->

<p>语言
    <select name="列表名称">
        <option value="Java">Java</option>
        <option value="C/C++">C/C++</option>
        <option value="Python">Python</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</p>

<!--文本域 cols rows -->
<p>
    <textarea name="" id="" cols="30" rows="10">Hello World</textarea>
</p>

<!--文件域 input type="file" -->

<p>
    <input type="file">
</p>

<!--邮件验证 -->
<p>邮箱：
    <input type="email" name="emile">
</p>

<!--url-->
<p>url:
    <input type="url" name="url">
</p>

<!--数字-->
<p>
    <input type="number" name="number">
</p>

<!--滑块-->
<p>音量
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

<!--搜索框-->

<p>
    <input type="search" name="search">
</p>

CSS

选择器{ 
        
	声明1;
	声明2;
	声明3;
}

优先级：就近原则，离代码越近，就按谁的来

1.选择器

1.标签选择器

选择一类标签

<style> h1{ 
           color: blueviolet; } p{ 
           color: green; } </style>
</head>
<body>

    <h1>Hello World</h1>
    <h1>Hello World</h1>

    <p>hello world</p>

2. 类选择器class

在标签中声明class元素，在css中通过.class名选择

<style> .c1{ 
           color: #ff4b80; } .c2{ 
           color: #1d2fd2; } </style>
</head>
<body>
    <h1 class="c1">标题1</h1>
    <h1 class="c2">标题2</h1>
    <h1 class="c3">标题3</h1>

3.ID选择器

在标签中声明ID元素，在CSS中通过#id名选择

<style> #i1{ 
           color: #f7899c; } #i2{ 
           color: #53d262; } #i3{ 
           color: #d21210; } #i4{ 
           color: #d28d25; } </style>
</head>
<body>
    <h1 id="i1">标题1</h1>
    <h1 id="i2">标题2</h1>
    <h1 id="i3">标题3</h1>
    <h1 id="i4">标题4</h1>
    <h1 id="i5">标题5</h1>

高级选择器

1.层次选择器

以下面的html代码为例

<p>p1</p>
    <p class="active>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>

1.1后代选择器

body + 空格 + 选择的标签

body p{ 
        
            background: #f7899c;
        }

1.2子选择器

body + > + 选择的标签

body>p{ 
        
            background: #53d262;
        }

1.3相邻兄弟选择器

当前选择元素的向下的一个兄弟元素

.active + p{ 
        
            background: #d21210;
        }

1.4通用兄弟选择器

当前选择元素的向下的所有兄弟元素

.active ~ p{ 
        
            background: aquamarine;
        }

4.结构伪类选择器

以下面的html代码为例

<h1 

        标签： 2p3p间距连接器
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台