【JavaWeb】快速入门——HTML&CSS

张春  金牌会员 | 2025-3-13 13:07:00 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 996|帖子 996|积分 2988

一、 HTML简介

1、HTML概念



  • HTML是超文本标记语言，是由一系列『标签』组成的，每个标签都有它固定的含义和确定的页面显示效果。
  • HTML文件本质上是文本文件，HTML技能则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的终极效果逾越了文本。

2、HTML文件结构


  1. <!DOCTYPE html> 声明为 HTML5 文档
  2. <html> 元素是 HTML 页面的根元素
  3. <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  4. <title> 元素描述了文档的标题
  5. <body> 元素包含了可见的页面内容
  6. <h1> 元素定义一个大标题
  7. <p> 元素定义一个段落
复制代码
显示效果：

3、可视化网页结构


  1. 只有 <body> (白色部分) 才会在浏览器中显示。
复制代码
二、 HTML标签语法

HTML语法规则：

  • 根标签有且只能有一个
  • 无论是双标签还是单标签都必须正确关闭
  • 标签可以嵌套但不能交织嵌套
  • 表明不能嵌套
  • 属性必须有值，值必须加引号，单引号或双引号均可
  • 标签名不区分巨细写但发起使用小写
标签名称功能h1~h61级标题~6级标题p段落a超链接ul/li无序列表img图片div定义一个前后有换行的块span定义一个前后无换行的块 1、标题标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h1>这是一级标题</h1>
  9.     <h2>这是二级标题</h2>
  10.     <h3>这是三级标题</h3>
  11.     <h4>这是四级标题</h4>
  12.     <h5>这是五级标题</h5>
  13.     <h6>这是六级标题</h6>
  14. </body>
  15. </html>
复制代码

   注意：标题标签前后有换行。
  2、段落标签

代码
  1. <p> view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>
复制代码
页面显示效果

   注意：段落标签前后有换行。
  3、超链接

代码
  1. <a href="page02-anchor-target.html">点我跳转到下一个页面</a>
复制代码
页面显示效果

点击后跳转到href属性指定的页面。
4、换行

代码
  1. browsing public. <br/>The only real requirement we have is that your CSS validates.
复制代码
页面显示效果

5、无序列表

代码
  1.   <ul>
  2.         <li>Apple</li>
  3.         <li>Banana</li>
  4.         <li>Grape</li>
  5.     </ul>
复制代码
页面显示效果

6、路径

绝对路径:

  • 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
  1. <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
复制代码

  • 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
  1. <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
复制代码
相对路径:
  1. ./ : 当前目录 , ./ 可以省略的
  2. ../: 上一级目录
复制代码
7、图片



  • src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
  • width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
  • height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
一般width 和 height 只会指定一个，另外一个会自动的等比例缩放。
  1. <img src="url">  //只包含属性，并且没有闭合标签
复制代码
8、块

1 盒子模型



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

2 结构标签



  • 结构标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的结构标签。
  • 特点：
    （1）div标签：

    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
    （2）span标签：
       

    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）

测试：
  1. <body>
  2.     <div>
  3.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
  4.     </div>
  5.     <div>
  6.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
  7.     </div>
  8.     <span>
  9.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
  10.     </span>
  11.     <span>
  12.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
  13.     </span>
  14. </body>
复制代码
欣赏器打开后的效果:
1). div会独占一行，默认宽度为父元素 body 的宽度

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度

3 盒子模型代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒子模型</title>
  8.     <style>
  9.         div {
  10.             width: 200px;  /* 宽度 */
  11.             height: 200px;  /* 高度 */
  12.             box-sizing: border-box; /* 指定width height为盒子的高宽 */
  13.             background-color: aquamarine; /* 背景色 */
  14.             
  15.             padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/
  16.             border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
  17.             margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.    
  23.     <div>
  24.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
  25.     </div>
  26. </body>
  27. </html>
复制代码
这个盒子的巨细, 以及盒子各个组成部门(内容、内边距、边框、外边距)：

三、 使用HTML表格展示数据

1、定义表格

页面显示效果

HTML代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>定义表格</title>
  6.     <style type="text/css">
  7.         table,th,td {
  8.             border-collapse: collapse;
  9.             border: 1px solid black;
  10.             padding: 5px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <!-- 使用table标签定义表格 -->
  16.     <table>
  17.         <!-- 使用tr标签定义表格的行 -->
  18.         <tr>
  19.             <!-- 使用th标签定义表头，表头有字体加粗效果 -->
  20.             <th>姓名</th>
  21.             <th>属性</th>
  22.             <th>级别</th>
  23.             <th>忍村</th>
  24.         </tr>
  25.         <tr>
  26.             <!-- 使用td标签定义单元格 -->
  27.             <td>漩涡鸣人</td>
  28.             <td>风</td>
  29.             <td>下忍</td>
  30.             <td>木叶</td>
  31.         </tr>
  32.         <tr>
  33.             <td>宇智波佐助</td>
  34.             <td>雷&火</td>
  35.             <td>下忍</td>
  36.             <td>木叶</td>
  37.         </tr>
  38.         <tr>
  39.             <td>我爱罗</td>
  40.             <td>沙</td>
  41.             <td>影</td>
  42.             <td>砂隐村</td>
  43.         </tr>
  44.     </table>
  45. </body>
  46. </html>
复制代码
2、合并单位格

横向合并

使用colspan属性将两个横向相邻的单位格跨列合并：
  1. <tr>
  2.     <td>宇智波佐助</td>
  3.     <td>雷&火</td>
  4.     <td colspan="2">下忍</td>
  5. </tr>
复制代码

   注意：被合并的单位格要删掉。
  纵向合并

使用rowspan属性将两个纵向相邻的单位格跨行合并：
  1. <tr>
  2.      <td>宇智波佐助</td>
  3.       <td rowspan="2">雷&火</td>
  4.       <td colspan="2">下忍</td>
  5. </tr>
  6. <tr>
  7.        <td>我爱罗</td>
  8.        <td>影</td>
  9.        <td>砂隐村</td>
  10. </tr>
复制代码

   注意：『被合并』的单位格要删掉。
  四、 使用HTML表单网络数据


1、form标签

使用form标签来定义一个表单。
  1. <form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
  2.    
  3. </form>
复制代码
①action属性
用户在表单里填写的信息必要发送到服务器端，在页面上我们就必须正确填写服务器端的能够接收表单数据的所在。
②method属性
在form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特别环境的话使用post即可。
2、name和value

服务器端就是使用Map范例来接收请求参数的。具体的是范例是：Map<String,String[ ]>。name属性就是Map的键，value属性就是Map的值。
在各个具体的表单标签中，我们通过name属性来给数据起名字，通过value属性来生存要发送给服务器的值。
3、单行文本框

代码
  1. 个性签名：<input type="text" name="signal"/><br/>
复制代码
显示效果

4、密码框

代码
  1. 密码：<input type="password" name="secret"/><br/>
复制代码
显示效果

5、单选框

代码
  1. 你最喜欢的季节是：
  2. <input type="radio" name="season" value="spring" />春天
  3. <input type="radio" name="season" value="summer" checked="checked" />夏天
  4. <input type="radio" name="season" value="autumn" />秋天
  5. <input type="radio" name="season" value="winter" />冬天
  7. <br/><br/>
  9. 你最喜欢的动物是：
  10. <input type="radio" name="animal" value="tiger" />路虎
  11. <input type="radio" name="animal" value="horse" checked="checked" />宝马
  12. <input type="radio" name="animal" value="cheetah" />捷豹
复制代码
效果

   注意：
  

  • name属性相同的radio为一组，组内互斥
  • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
  • 设置checked="checked"属性设置默认被选中的radio
  6、多选框

代码
  1. 你最喜欢的球队是：
  2. <input type="checkbox" name="team" value="Brazil"/>巴西
  3. <input type="checkbox" name="team" value="German" checked="checked"/>德国
  4. <input type="checkbox" name="team" value="France"/>法国
  5. <input type="checkbox" name="team" value="China" checked="checked"/>中国
  6. <input type="checkbox" name="team" value="Italian"/>意大利
复制代码
效果

7、下拉列表

代码
  1. 你喜欢的运动是：
  2. <select name="interesting">
  3.     <option value="swimming">游泳</option>
  4.     <option value="running">跑步</option>
  5.     <option value="shooting" selected="selected">射击</option>
  6.     <option value="skating">溜冰</option>
  7. </select>
复制代码
效果

   注意：
  

  • 下拉列表中select标签用来定义下拉列表，option标签设置列表项。
  • name属性在select标签中设置。
  • value属性在option标签中设置。
  • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
  • 通过在option标签中设置selected="selected"属性实现默认选中的效果。
  8、按钮

代码
  1. <button type="button">普通按钮</button>
  2. <button type="reset">重置按钮</button>
  3. <button type="submit">提交按钮</button>
复制代码
效果

范例功能平凡按钮点击后无效果，必要通过JavaScript绑定单击相应函数重置按钮点击后将表单内的所有表单项都恢复为默认值提交按钮点击后提交表单 9、表单隐藏域

  1. <input type="hidden" name="userId" value="2233"/>
复制代码
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些必要和表单一起提交但是不希望用户看到的数据，比方：用户id等等。
10、多行文本框

代码
  1. 自我介绍：<textarea name="desc"></textarea>
复制代码
效果

textarea没有value属性，假如要设置默认值必要写在开始和竣事标签之间。
五、 CSS的简单应用

1、设置CSS样式的三种方式

（1）在HTML标签内设置，仅对当前标签有效
  1. <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>
复制代码

（2）在head标签内设置，对当前页面有效
  1. <head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .one {            border: 1px solid black;            width: 100px;            height: 100px;            background-color: lightgreen;            margin-top: 5px;        }    </style></head><body>    <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>
  2.     <div class="one"> </div>    <div class="one"> </div>    <div class="one"> </div></body>
复制代码

（3）引入外部CSS样式文件


  • 创建CSS文件

  • 编辑CSS文件
  1. .two {
  2.     border: 1px solid black;
  3.     width: 100px;
  4.     height: 100px;
  5.     background-color: yellow;
  6.     margin-top: 5px;
  7. }
复制代码


  • 引入外部CSS文件
在必要使用这个CSS文件的HTML页面的head标签内加入：
  1. <link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />
复制代码
那么下面HTML代码的显示效果是：
  1.     <div class="two">&nbsp;</div>
  2.     <div class="two">&nbsp;</div>
  3.     <div class="two">&nbsp;</div>
复制代码

2、CSS代码语法



  • CSS样式由选择器和声明组成，而声明又由属性和值组成。
  • 属性和值之间用冒号隔开。
  • 多条声明之间用分号隔开。
  • 使用/* … */声明表明。

3、CSS选择器

（1）标签选择器
HTML代码：
  1. <p>Hello, this is a p tag.</p>
  2. <p>Hello, this is a p tag.</p>
  3. <p>Hello, this is a p tag.</p>
  4. <p>Hello, this is a p tag.</p>
  5. <p>Hello, this is a p tag.</p>
复制代码
CSS代码：
  1. p {
  2.     color: blue;
  3.     font-weight: bold;
  4. }
复制代码

（2）id选择器
HTML代码：
  1.     <p>Hello, this is a p tag.</p>
  2.     <p>Hello, this is a p tag.</p>
  3.     <p id="special">Hello, this is a p tag.</p>
  4.     <p>Hello, this is a p tag.</p>
  5.     <p>Hello, this is a p tag.</p>
复制代码
CSS代码：
#special {
font-size: 20px;
background-color: aqua;
}

（3）类选择器
HTML代码：
  1. <div class="one">&nbsp;</div>
  2. <div class="one">&nbsp;</div>
  3. <div class="one">&nbsp;</div>
复制代码
CSS代码：
  1. .one {
  2.     border: 1px solid black;
  3.     width: 100px;
  4.     height: 100px;
  5.     background-color: lightgreen;
  6.     margin-top: 5px;
  7. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张春

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表