Java Web——第一天（Web开发）-CSDN博客

本文链接：https://blog.csdn.net/weixin_53891720/article/details/140672770

Web开发课程安排

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C( World Wide Web Consortium，万维网联盟)负责制定

三个组成部分:

HTML:负责网页的结构 (页面素和内容)

CSS:负责网页的表现 (页面元素的外观、位置等页面样式，如:颜色、大小等)

JavaScript:负责网页的行为(交互效果)

<span>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

CSS选择器

元素选择器:标签名 {...]

id选择器: #id属性值 [ ... }

类选择器: .class属性值 { ... }

优先级: id选择器 >类选择器 >元素选择器

超链接

标签:<a>

属性:

href: 指定资源访问的url

target: 指定在何处打开资源链接

_self: 默认值，在当前页面打开

_blank: 在空白页面打开

CSS属性

text-decoration: 规定添加到文本的修饰，none表示定义标准的文本（去除下划线）

音频、视频标签

<audio> <video> 播放控件

换行、段落标签

换行: <br>

段落: <p>

文本加粗标签

<b> <strong>

CSS样式

line-height: 设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符:  

页面布局

盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成: 内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域 (margin)

布局标签:实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

标签:<div> <span>

特点:

div标签:

一行只显示一个 (独占一行)

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高 (width、height)

span标签:

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高 (width、height)

CSS盒子模型

组成: 内容 (content) 、内边距 (padding) 、边框 (border) 、外边距(margin)

CSS属性

width: 设置宽度

height: 设置高度

border: 设置边框的属性，如: 1px solid #000;

padding:内边距

margin: 外边距

注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如: padding-top、padding-left、padding-right ...

表格标签
场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表。
标签:

表格标签

<table>:定义表格

<tr>: 定义表格中的行，一个 <tr> 表示一行

<th>:表示表头单元格，具有加粗居中效果

<td>:表示普通单元格

表单标签

场景:在网页中主要负责数据采集功能，如注册、登录等数据采集

标签:<form>

表单项:不同类型的input 元素、下拉列表、文本域等

<input>:定义表单项，通过type属性控制输入形式

<select>:定义下拉列表

<textarea>:定义文本域

属性:

action:规定当提交表单时向何处发送表单数据，URL

method: 规定用于发送表单数据的方式。GET、POST（默认为GET）

表单的提交方式

<body>
    <!-- form表单属性:
    action:表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面-->
    <form action="" method="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" name="提交">
    </form>
</body>

get: 在url后面拼接表单数据，url长度有限制

post:在消息体(请求体)中传递的参数大小是无限制的

小结

表单标签

表单标签: <form>

表单属性:

action: 表单数据提交的url地址

method: 表单提交方式

get: 表单数据拼接在url后面，?username=java ,大小有限制

post:表单数据在请求体中携带，大小没有限制

注意: 表单项必须有name属性才可以提交

表单标签-表单项

表单项

<input>:表单项，通过type属性控制输入形式

<select>:定义下拉列表，<option> 定义列表项

<textarea>: 文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        用户：<input type="text" name = "name"> <br><br>
        密码：<input type="password" name = "password"> <br><br>

        <!-- value表示提交到后台的值为1或2 并且只能选择其中一个 -->
        性别：<label><input type="radio" name="gender" value="1">男</label>
            <label><input type="radio" name="gender" value="2">女</label><br><br>

            <!-- 类型为checkbox复选框，可以重复选 -->
        爱好：<label><input type="checkbox" name="hobby" value="java"> java </label> 
        <label><input type="checkbox" name="hobby" value="C++"> C++ </label>
        <label><input type="checkbox" name="hobby" value="Python"> Python </label><br><br>

        <!-- file为文件 -->
        照片：<input type="file" name="image"><br><br>
        <!-- 可选择年月日 -->
        生日：<input type="date" name="birthday"><br><br>    
        <!-- 可选择时间 -->
        时间：<input type="time" name="time"> <br><br> 
        <!-- 可选择日期+时间 -->
        日期时间：<input type="datetime-local" name="datetime"> <br><br> 
        <!-- 需输入一个邮箱 -->
        邮箱：<input type="email" name="email"> <br><br> 
        <!-- 只能输入数字 -->
        年龄：<input type="number" name="age"> <br><br> 
        <!-- select表示下拉列表 value属性表示提交的值 比如选中本科提交的值为2 -->
        学历: <select name="degree">
            <option value="">---------- 请选择 ----------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select><br><br>
        <!-- description表示文本域，cols表示一行可输入30字，rows表示最多可输入10行 -->
        简介：<textarea name="description" cols="30" rows="10" ></textarea><br><br>
        <!-- 隐藏域 提交时会将id以及1提交至服务端  -->
        <input type="hidden" name="id" value="1">

        <!-- 表单常见按钮 -->
        <input type="button" value="按钮">
        <input type="reset"  value="重置">
        <input type="submit" value="提交">
        <br>
    </form>

</body>
</html>

点击提交显示