JavaWeb（一）HTML与CSS

最新推荐文章于 2024-08-29 10:58:37 发布

梓阡

最新推荐文章于 2024-08-29 10:58:37 发布

阅读量348

点赞数

本文链接：https://blog.youkuaiyun.com/m0_38143506/article/details/116424398

版权

java 专栏收录该内容

41 篇文章

订阅专栏

HTML和CSS

w3school在线教程：https://www.w3school.com.cn/index.html
离线文档：https://wwa.lanzous.com/iDtoUotltjc

基本概念

HTML负责页面的内容，CSS负责页面内容的布局
前端开发流程
网页的组成部分
页面由三部分内容组成：
（1）内容：页面中可以看到的数据，使用HTML技术展示
（2）表现：内容在页面上的展示形式，比如：布局、颜色、大小等。一般使用CSS技术实现
（3）行为：页面中元素与输入设备交互的相应，一般使用JavaScript技术实现

HTML

创建html页面

创建一个新Javaweb工程（IDEA）
新建一个HTML文件，命名为hello,选择HTML5

3.简单测试
（1）html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的第一个HTML页面</title>
</head>
<body>
    hello world！
</body>
</html>

（2）运行

方式一：右键-run html
方式二：右侧有浏览器选择，选择其中一个打开

html文件的书写规范

<!DOCTYPE html> <!--约束，声明-->
<html lang="zh_CH">  <!--支持语言:使用zh_CN"-->
<!--html标签一般分为两部分，分别是head和body-->
<head><!--表示头部信息，一般包含三部分：title标签、css样式、js代码-->
  <meta charset="UTF-8"><!--字符集编码-->
  <title>我的第一个HTML页面</title><!--标题-->
</head>
<body><!--body标签是整个html页面显示的主体内容-->
    hello world！
</body>
</html>

HTML标签介绍

标签拥有自己的属性
（1）基本属性：bgcolor=“red” ——可以修改简单的样式效果
（2）事件属性：οnclick=“alert(‘你好!’);” ——可以直接设置事件相应后的代码
标签格式：<标签名属性>内容</标签名>
单标签和双标签
（1）单标签：<标签名/> 例如:br表示换行，hr表示水平线
（2）双标签：<标签名>…封装的内容…</标签名>
代码测试

<!DOCTYPE html> <!--约束，声明-->
<html lang="zh_CH">  <!--支持语言:使用zh_CN"-->
<!--html标签一般分为两部分，分别是head和body-->
<head><!--表示头部信息，一般包含三部分：title标签、css样式、js代码-->
  <meta charset="UTF-8"><!--字符集编码-->
  <title>我的第一个HTML页面</title><!--标题-->
</head>
<!--body标签是整个html页面显示的主体内容-->
<!--bgcolor:背景颜色
    onclick:点击触发的事件
    alert：警告框信息
  -->
<body bgcolor="#f0f8ff" onclick="alert('警告')">
    hello world！
    <br/><!--换行-->
    <botton onclick="alert('系统被入侵')">检测</botton>
    <hr><!--水平线-->
</body>
</html

测试效果
标签语法
（1）正确闭合标签
（2）标签属性值用双引号包裹
（3）注释不能嵌套
（4）有些错误浏览器可以自动修复
常用标签介绍

font:字体标签

	<!-- 字体标签 -->
  <font color="red" face="黑体" size="7"> 字体标签 </font>

特殊字符

	<!-- 特殊字符 -->
  &lt;特殊字符&gt;
  <br/>
  我&nbsp;&nbsp;&nbsp;&nbsp;想&nbsp;&nbsp;&nbsp;&nbsp;你

标题标签
a. 标题1最大，标题6最小；
b. 常用属性：（1）对齐方式 align(left、center、right）

	<!-- 标题标签 -->
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4 align="left">标题4</h4>
  <h5 align="center">标题5</h5>
  <h6 align="right">标题6</h6>

超链接标签a

<!-- 超链接 -->
  <!--a标签是超链接标签
      href属性设置超链接地址
      target属性设置
          _self:表示当前页面打开(默认）
          _blank:表示在新页面打开链接
    -->
	<a href="https://ningqian.blog.youkuaiyun.com/">我的博客</a>
  <br>
	<a href="https://ningqian.blog.youkuaiyun.com/" target="_blank">我的博客</a>

列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.列表标签.html</title>
</head>
<body>
	<!--
	  ul:unlist 无序列表
	  li:list item 列表项
	  ol:older list 有序列表
	  -->
  <!--单独ul标签-->
<ul>春</ul>
<ul>夏</ul>
<ul>秋</ul>
<ul>冬</ul>
  <hr/>
  <!--ul标签加li属性-->
<ul>
  <li>spring</li>
  <li>summer</li>
  <li>autumn</li>
  <li>winter</li>
</ul>
<hr/>
<!--单独ol标签-->
<ol>吃饭</ol>
<ol>睡觉</ol>
<ol>打豆豆</ol>
<!--ol标签加li属性-->
<ol>
  <li>eating</li>
  <li>sleeping</li>
  <li>gaming</li>
</ol>
</body>
</html>

img标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
<!--src属性：设置图片路径
width:宽
height：高
border：边框
alt:当在指定路径没有找到图片时，用来代替显示的文本信息
-->
<img src="../imgs/4.jpg" width="200" height="250" alt="图片加载失败"/>
</body>
</html>

表格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>表格标签</title>
</head>
<body>
<!--
table：表格标签  border：表格边框，width：宽，height：高 align对齐方式，cellspacing:单元格间距：一般为0
tr:行标签
td:单元格标签 colspan:column span合并列,rowspan:合并行
th：表头标签，单元格标签+align="center"属性
-->
<table border="1" width="300" height="200" cellspacing="0" align="center">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td align="center">1001</td>
    <td align="center">小明</td>
    <td align="center">98</td>
  </tr>
  <tr>
    <td align="center">1002</td>
    <td align="center">小刘</td>
    <td align="center">100</td>
  </tr>


</table>

</body>
</html>

iframe标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
  <!--
  iframe标签可以在页面开辟一个小区域显示一个单独的页面
      src:指定显示的页面
      name:新页面的名称
  iframe标签和a标签组合使用：在a标签的target属性上设置iframe的name属性值
  -->
	<iframe width="500" height="300" name="subwindow"></iframe>
<br>
<a href="https://ningqian.blog.youkuaiyun.com/" target="subwindow">我的博客</a>
</body>
</html>

表单标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>10.表单标签.html</title>
</head>
<body>

<!-- 表单标签 -->
<!--
（1）input标签
    type=text:单行文本输入框,value设置默认值
    type=password:密码输入框，value设置默认值
    type=radio :单选框 name属性对其分组，checked=”checked“表示默认选中
    type=checkbox：复选框，checked=”checked“表示默认选中
    type=reset:重置，value设置显示的内容替换默认的”重置“
    type=submit:提交，value设置显示的内容替换默认的”提交"
    type=file:选择文件
    type=hidden 是隐藏域，这些信息不需要用户参与，但需要一同发送给服务器时使用
（2）select标签：下拉列表框
    option标签：下拉列表框中的选项
        selected=”selected“默认选中
 （3）textarea：多行文本输入框，默认值为标签中间的内容
        rows:设置显示的行数
        cols:设置显示每行可以显示几个字符宽度

  -->

<form>
  用户名称:<input type="text" value="用户名"/><br/>
  用户密码:<input type="password" value="用户密码"/><br/>
  确认密码:<input type="password" value="用户密码"/><br/>
  性别:<input type="radio" checked="checked" name="sex"/>男
  <input type="radio" name="sex"/>女<br/>
  使用语言:<input type="checkbox" checked="checked"/>C/C++
  <input type="checkbox" checked="checked"/>java
  <input type="checkbox" checked="checked"/>javascript<br/>
  国籍:<select>
  <option>---选择国籍---</option>
  <option>中国</option>
  <option>日本</option>
  <option>美国</option>
</select><br/>
  自我评价:<br/><textarea rows="10" cols="20">自我评价</textarea><br/>
  <input type="reset" value="重新填写"/>
  <input type="submit" value="完成"/><br/>
  <input type="file"/>
</form>
<hr/>
<!--一般将表单内容放到表格标签中，会显示比较整齐-->
<h1 align="center">用户注册</h1>
<table align="center">
  <tr>
    <td> 用户名称:</td>
    <td>
      <input type="text" value="用户名"/>
    </td>
  </tr>
  <tr>
    <td>用户密码:</td>
    <td>
      <input type="password" value="用户密码"/>
    </td>
  </tr>
  <tr>
    <td>确认密码:</td>
    <td>
      <input type="password" value="用户密码"/>
    </td>
  </tr>
  <tr>
    <td>性别:</td>
    <td>
      <input type="radio" checked="checked" name="sex"/>男
      <input type="radio" name="sex"/>女
    </td>
  </tr>
  <tr>
    <td>使用语言:</td>
    <td>
      <input type="checkbox" checked="checked"/>C/C++
      <input type="checkbox" checked="checked"/>java
      <input type="checkbox" checked="checked"/>javascript
    </td>
  </tr>
  <tr>
    <td>国籍:</td>
    <td>
      <select>
        <option>---选择国籍---</option>
        <option>中国</option>
        <option>日本</option>
        <option>美国</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>自我评价:</td>
    <td><textarea rows="10" cols="20">自我评价</textarea></td>
  </tr>
  <tr>
    <td><input type="reset" value="重新填写"/></td>
    <td align="center"><input type="submit" value="完成"/></td>
  </tr>
</table>
</body>
</html>

提交细节
（1）form标签下有两个属性：
action：设置提交的服务器地址
method：设置提交的GET（默认值）或POST
（2）表单提交时，数据没有发送给服务器的三种情况：
1. 表单项没有name属性值
2. 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3. 表单项不在提交的form标签中
（3）GET请求的特点：
1. 浏览器地址栏中的地址是：action属性[+?+请求参数]。请求参数的格式：name=value&name=value
2. 不安全
3. 它有数据长度的限制
（4）POST请求的特点：
1. 浏览器地址栏中只有action属性值
2. 相对于GET请求要安全
3. 理论上没有数据长度限制

其他标签
（1）div标签：默认独占一行
（2）span标签：它的长度是封装数据的长度
（3）p段落标签：默认会在段落上下方空一行

CSS技术

标签名选择器

格式：
标签名{
属性：值；
}
标签名选择器可以决定哪些标签被动的使用这个样式
示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
  <style type="text/css">
    div{
      border: yellow solid 1px;/*标签边框*/
      color: blue;/*字体颜色*/
      font-size: 30px;/*字体大小*/
    }
    span{
      border:blue 5px dashed;
      color: yellow;
      size:10px;
    }
  </style>
</head>
<body>


	<!--
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>

</body>
</html>

id选择器

格式
#id属性值{
属性：值；
}
id选择器，可以通过id属性值（不可重复）选择性的使用该样式
示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
  <style type="text/css">
    #id001 {
      color:blue;
      font-size: 30px;
      border:1px yellow solid;
    }
    #id002{
      color: red;
      font-size: 20px;
      border: 5px blue dotted;
    }
  </style>
</head>
<body>

	<!--
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。

	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->

	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>

</body>
</html>

class选择器

格式
.class属性值{
属性：值；
}
通过指定某个类名来使同类名的标签生效
示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
  <style type="text/css">
    .class01{
      color: blue;
      font-size: 30px;
      border: 1px yellow solid;
    }
    .class02{
      color: gray;
      font-size: 26px;
      border: 1px red solid;
    }
  </style>
</head>
<body>

	<!--
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

</body>
</html>

组合选择器

格式：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器可以让多个选择器共用一个代码
示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>class类型选择器</title>
  <style type="text/css">
    .class01, #id01, div, span {
      color: blue;
      font-size: 20px;
      border: 1px yellow solid;
    }
  </style>
</head>
<body>

<!--
需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
 -->

<div class="class01">div标签class01</div>
<br/>
<span id="id01">span 标签</span> <br/>
<div>div标签</div>
<br/>
<div>div标签id01</div>
<br/>

</body>
</html>

常用样式

color：标签内字体颜色
border：标签的边框样式（颜色、线型、线像素）
width：标签的宽度
height：标签的高度
background-color：标签的背景色
font-size:标签内字体大小
margin-left:标签据父容器左边框的长度
margin-right：标签据父容器右边框的长度
text-align：标签内文本的位置
10.text-decoration: none 超链接去下划线
border-collapse: collapse 表格细线
list-style: none 去除列表样式
代码演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
  <style type="text/css">
    div{
      border: pink 3px solid;
      width: 300px;
      height: 300px;
      background-color: #b3d4fc;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    a{
      text-decoration: none;
    }
    table{
      border: 1px black solid;
      border-collapse: collapse;
    }
    tr,td{
      border: 1px black solid;
    }
    ul{
      list-style: none;
    }
  </style>
</head>

<body>
<div>常用样式</div>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
  </tr>
</table>
<ul>
  <li>春</li>
  <li>夏</li>
  <li>秋</li>
  <li>冬</li>
</ul>
</body>
</html>