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

  • 电话：400-990-0325

购物车

自学Javaweb笔记

时间：2023-01-27 07:00:00 2p3p间距连接器

文章目录

  • 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"> <head>     <meta charset="UTF-8">     <title>CSDNtitle
        
         >
        
head>
<body>
    hello <HTML>HTML>
<button onclick="alert('你真帅')">点这里button>
body>
html>

二、基础语法

1.HTML标签：

（1）标签的注意事项

  1. 标签不能交叉嵌套 不能一个双标签包着另一个双标签的头或尾 //不过浏览器会帮你修复代码
  2. 标签必须正确的关闭和闭合 双标签必须有头有尾 单标签必须有** / ** //浏览器也会帮你修复
  3. 属性必须有值，属性值必须用加引号
  4. 注释不能嵌套
  5. 双标签：<标签>
  6. 单标签<标签/>

（2）基本标签

		
		<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/>
		
		
		<strong>i love youstrong> <br/>
		<em>i love youem> <br/>
		
		
		空格： 
		<br/>
		大于号：>
		<br/>
		小于号:<
		<br>

（3）超链接（重点）

在网页中所有点击以后可以跳转的内容都是超链接
标签为超链接
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>
③自定义列表

<hr/>
<dl>
    <dt>语言dt>

    <dd>Javadd>
    <dd>C/C++dd>
    <dd>Pythondd>
    <dd>JavaScriptdd>
dl>

（4） img标签

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

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

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

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

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

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

(5) 表格标签

①.table标签

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

②.跨行跨列标签

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

(6) iframe标签

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

(7) 表单

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



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



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


<p>密码：<input type="password" name="password">p>


<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
p>


<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>



<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">Javaoption>
        <option value="C/C++">C/C++option>
        <option value="Python">Pythonoption>
        <option value="JavaScript">JavaScriptoption>
    select>
p>


<p>
    <textarea name="" id="" cols="30" rows="10">Hello Worldtextarea>
p>



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


<p>邮箱：
    <input type="email" name="emile">
p>


<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 Worldh1>
    <h1>Hello Worldh1>

    <p>hello worldp>

2. 类选择器class

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

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

3.ID选择器

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

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

高级选择器

1.层次选择器

以下面的html代码为例

<p>p1p>
    
p>
    <p>p3p>
    <ul>
        <li>
            <p>p4p>
        li>
        <li>
            <p>p5p>
        li>
        <li>
            <p>p6p>
        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

相关文章