JavaWeb 学习笔记 day01 前端三剑客 HTML CSS JavaScript

最新推荐文章于 2024-09-07 07:17:47 发布

Ghost1590

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量213

点赞数

分类专栏： web 文章标签： html web java css html5

本文链接：https://blog.csdn.net/yu1590/article/details/119655322

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaWeb 学习笔记 day01

HTML
CSS
- CSS 与 HTML 结合的方式
- CSS 选择器
JavaScript
- JavaScript 和 html 代码的结合方式
- 语法细节

HTML

HTML的组成

约束声明
HTML 标签表示 HTML 的开始，HTML 标签一般分为两部分：head 和 body
head 标签内表示头部信息，一般包含三部分 title，css，js
body 是整个 HTML 页面显示的主体内容

<html> <!--表示整个页面的开始 -->
	<head>
	<meta charset="UTF-8">
	<title>标题</title>
	</head>
	
	<body>
	</body>
</html>

HTML中的特殊字符

空格：&nbsp；
< ：&lt；
>：&gt；

HTML中的常用标签

标题标签

格式：< h1 > ~ < h6 >，大小递减。
属性：① align：对齐属性，left 左对齐，center 居中，right 右对齐

超链接标签

格式：< a > … < /a >
属性：① href：设置连接地址
② target：设置要让哪个目标进行跳转

列表标签

无序列表标签格式：< ul >< /ul >(unordered list)
有序列表标签格式：< ol >< /ol >(ordered list)
表项的格式：< li >< /li >

img标签，用来显示图片

格式：< img />
属性：① src：为图片所在的路径，可以是绝对路径（http://ip:port/工程名/资源路径），也可以是相对路径（. 是当前路径，两个点是当前路径的上一级路径）
   ② width：设置图片宽度
   ③ heigh：设置图片高度
   ④ board：设置图片边框
   ⑤ alt：当找不到图片时替代的显示内容

表格标签

格式：

<table>
			<tr>
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
		</table>

table 属性：① cellspacing：设置单元格间距
② board：设置图片边框
③ align：对齐属性
tr 属性：① colspan：跨列属性
② rowspan：跨行属性

iframe标签：在一个 HTML 页面上显示另外一个 HTML 页面

格式：< iframe >< /iframe >
属性：① src：想要显示的 HTML 文件或网址
与 < a > 的组合使用：① 给 iframe 添加一个 name 属性
② 将 < a > 的 target 属性设置为 name

表单标签

格式：< form >< /form>，以一个注册页面举例，与 table 组合使用使界面更整齐。

<form action="http://localhost:8080" method="get">
        <table align="center" cellspacing="10">
            <tr>
                <td>账号：</td>
                <!--文本输入框 可以用 value 属性设置默认值 -->
                <td><input type="text" name="user"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <!--密码输入框 -->
                <td><input type="password" name="passwd"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <!--单选框，多个单选框需要用 name 属性分组，checked = “checked” 表示默认选中  -->
                <td><input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="women"/>女</td>
            </tr>
            <tr>
                <td>爱好：</td>
                <!--复选框，checked = “checked” 表示默认选中  -->
                <td><input type="checkbox" name="hobbit" value="java"/>Java <input type="checkbox" name="hobbit" value="c++"/>C++ <input type="checkbox" name="hobbit" value="c#"/>C#</td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                	<!--下拉列表框，option为其中的选项，selected = “selected”表示默认选中 -->
                    <select name="nation">
                        <option>中国</option>
                        <option>美国</option>
                        <option>日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人简介：</td>
                <!--多行文本输入框，rows属性可设置显示几行，cols可设置每行显示几个字符 -->
                <td><textarea rows="5" cols="30" name="self">hello</textarea></td>
            </tr>
            <tr>
                <td>上传照片：</td>
                <!--文件上传域 -->
                <td><input type="file" name="pic"/></td>
            </tr>
            <tr>
            	<!--重制按钮 -->
                <td><input type="reset"/></td>
                <!--提交按钮 -->
                <td><input type="submit"/></td>
            </tr>
            <!--隐藏域，用于要发送某些信息，而这些信息无需用户参与 -->
            <input type="hidden" name="hid"/>
        </table>
    </form>

属性：① action：设置要提交的服务器地址
② method：设置提交的方式 GET（默认）或 POST
GET 请求：
① 地址：action + ？ + 请求参数（参数格式：name=value&name=value&name=value）
② 地址中含有传输信息，不安全
③ 有数据长度的限制
POST 请求
① 地址：action
② 相较于 GET 更安全
③ 理论上无长度限制

div span p

div：默认独占一行
span：长度就是数据的长度
p：段落标签，默认在上下各空一行（如已有空行则不添加）

CSS

简介：CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS 与 HTML 结合的方式

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

CSS 选择器

标签名选择器的格式是：标签名{ 属性：值; }
id 选择器的格式是： #id 属性值{ 属性：值; }
class 类型选择器的格式是： .class 属性值{ 属性：值; }
组合选择器的格式是：选择器 1，选择器 2 … 选择器 n{ 属性：值; }

JavaScript

简介：弱类型语言

JavaScript 和 html 代码的结合方式

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码
使用 script 标签引入单独的 JavaScript 代码文件

注意：一个 script 标签只能实现上述两种功能之一。

语法细节

关系（比较）运算：== 等于，表示判断值是否相同； ===全等于，既判断数值，也判断类型是否相同。
数组定义方式：①var 数组名 = []; // 空数组
② var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
函数的二种定义方式：① function 函数名(形参列表){ 函数体 }
② var 函数名 = function(形参列表) { 函数体 }
注意：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
函数的 arguments 隐形参数： 就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像 java 基础的可变长参数一样。 public void fun( Object … args ); 可变长参数其他是一个数组。
JS 中的自定义对象：
对象的定义方式一： var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：变量名.属性 / 函数名();
对象的定义方式二： var 变量名 = {
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};

Ghost1590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb 学习笔记 day01 前端三剑客 HTML CSS JavaScript

JavaWeb 学习笔记 day01HTMLHTML的组成HTML中的特殊字符HTML中的常用标签标题标签超链接标签列表标签img标签，用来显示图片表格标签iframe标签：在一个 HTML 页面上显示另外一个 HTML 页面表单标签div span pCSSCSS 与 HTML 结合的方式CSS 选择器JavaScriptJavaScript 和 html 代码的结合方式HTMLHTML的组成约束声明HTML 标签表示 HTML 的开始，HTML 标签一般分为两部分：head 和 bodyhe
复制链接

扫一扫

专栏目录