JavaWeb（一）HTML与CSS

最新推荐文章于 2022-07-28 17:43:19 发布

梓阡

最新推荐文章于 2022-07-28 17:43:19 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/m0_38143506/article/details/116424398

版权

java 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

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.csdn.net/">我的博客</a>
  <br>
	<a href="https://ningqian.blog.csdn.net/" 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.csdn.net/" 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>

梓阡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb（一）HTML与CSS

HTML和CSSw3school在线教程：https://www.w3school.com.cn/index.html离线文档：https://wwa.lanzous.com/iDtoUotltjc基本概念HTML负责页面的内容，CSS负责页面内容的布局前端开发流程网页的组成部分页面由三部分内容组成：（1）内容：页面中可以看到的数据，使用HTML技术展示（2）表现：内容在页面上的展示形式，比如：布局、颜色、大小等。一般使用CSS技术实现（3）行为：页面中元素与输入设备交互的相应，一般
复制链接

扫一扫

专栏目录