JavaWeb：HTML与CSS

最新推荐文章于 2024-09-17 10:09:23 发布

JVAV高级程序员

最新推荐文章于 2024-09-17 10:09:23 发布

阅读量87

点赞数

分类专栏： JavaWeb学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_44919936/article/details/115595456

版权

JavaWeb学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

HTML头部
常用的标签
CSS

HTML头部

<!DOCTYPE html> <!--声明-->
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">  <!--表示中文-->
<head>  <!--头部标签 三部分内容：title css js代码-->
    <meta charset="UTF-8">  <!--字符编码集-->
    <title>HTML学习一</title>
</head>

常用的标签

font字体标签

<!--1.font标签测试
    size:1--7
    可以修改文本字体，颜色，大小
    -->
    <font color="red" face="宋体" size="10"  onclick="alert('圆圆')">我是字体标签</font>

常用的特殊字符

<!--
2.常用的特殊字符
< &lt;
> &gt;
空格 &nbsp;
-->
我是&lt;br&gt;标签<br/>

圆 &nbsp; &nbsp;&nbsp;  &nbsp; &nbsp;&nbsp;  圆   圈圈圆     圆  
<!--只要是连续的，默认只有一个,加空格的转义字符才能空很远-->

h1标题标签

<hr/> <!--水平线-->
    <!--3.标题标签  只有1-6
    align 对齐属性 left center right
    -->
    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
<hr/> <!--水平线-->

a超链接标签

    <!--4.超链接
    href 设置连接的地址
    target 设置哪个目标进行跳转
       -self 当前页面
       -blank 打开新页面来跳转
    -->
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com" target="_self">百度</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>
<hr/> <!--水平线-->

ol列表标签

    <!--5.列表标签
    无序列表  ul type="none"
    有序列表  ol 比无序列表多了前面的序号
    -->
    <!--需求：使用无序列表 把东北，赵四，小沈阳，宋小宝展示出来-->
    <ol type="1">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ol>
<hr/> <!--水平线-->

img图片标签

  <!--6.img标签测试
  图片标签，src显示图片路径
   border 边框像素 一般是1
   width height 长宽
   alt 找不到图片输出的文字


  路径分为相对路径，绝对路径

  相对路径：
    . 表示当前文件所在的目录
    .. 表示当前文件所在的上一级目录
    文件名 表示当前文件所在目录的文件，相当于 ./文件名 可以省略

  绝对路径：
    正确格式： http://ip:port/工程名/资源路径
    错误格式： 盘符：/目录

  -->
  <!--需求：使用img标签显示一张美女的照片，修改宽高，边框属性-->
  <img src="../../imgs/cloud.JPG" width="200" height="100" border="20"/>
  <img src="./imgs/1.JPG" width="200" height="100" border="20" alt="找不到图片"/>

table表格标签

 <!--
  7.表格标签
  table   内的align是设置表格的位置
  tr 行标签      行
  th 是表头标签
  td 是单元格标签 列  有alient属性
  b  是加粗标签
  cellspacing 变大格子之间的间距
  -->

  <!--需求1：做一个带表头的，三行三列的表格，并显示边框-->
  <table border="1" width="300" height="300">
    <tr>
      <td align="center"><b>1.1</b></td>
      <th>1.2</th>
      <th>1.3</th>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>



  <!--需求2：表格对齐方式  cellspacing 变大格子之间的间距  colspan 属性设置跨列变成2-->
  <table align="center" border="1" width="300" height="300" cellspacing="10">
    <tr>
      <td align="center" colspan="2"><b>1.1</b></td>  <!--跨列的属性-->

      <th>1.3</th>
    </tr>
    <tr>
      <td rowspan="2">2.1</td>  <!--跨行的设置-->
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>

      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>

iframe标签

 <!--8.iframe标签
  可以在页面上开辟一个小区域，显示一个单独页面
      iframe和a标签组合使用的步骤：
        1.在iframe标签中使用name属性定义一个名称
        2.在a标签的target属性上设置iframe的name属性值
  -->
  我是一个单独的区域<br/><br/>
  <iframe src="Hello2.html" name="abc" width="50" height="50"></iframe>
  <br/>
  <br/>
  <ul>
    <li><a href="Hello.html" target="abc">标签语法.html</a></li>
    <li><a href="Hello2.html" target="abc">标签语法2.html</a></li>
  </ul>

*form表单标签

什么是表单：html页面中用来手机用户信息的所有元素集合，然后把这些信息发送给服务器。
type:
text 是文本输入框 values 设置默认显示内容
password 是密码框
radio 是单选框 name属性可以进行分组实现单选按钮 checked表默认选中
checkbox 是复选框 checked可以默认选中
reset 是重置按钮
sumbit 是提交按钮
file 是上传文件
hidden 是隐藏域当我们要发送某些信息，不需要用户参与，可以使用隐藏域（提交的时候同时发给服务器）给程序用的。
select 是下拉列表框
textarea 是多行输入框，rows显示几行的高度 cols是每行的显示字符宽度

提交：
action 属性设置提交的服务器地址
method 属性设置提交的方式是get或post

表单提交的时候，数据没有发送给服务器的三种情况
    1.表单项没有name属性值
    2.单选，复选都需要添加values属性，不然只有on，无法识别
    3.表单项不在提交的form标签中


提交的方式两种：GET POST
GET:
  1.浏览器地址栏的地址是：action属性+？+请求参数（name+values)
  2.不安全，密码一清二楚
  3.有数据长度的限制，超过100个字符，必须用post

 POST：
  1.浏览器地址栏的地址只有action属性值
  2.相对安全，属性值看不到
  3.理论上长度无限制

 
  <form action="http://www.baidu.com" method="post">
    <input type="hidden" name="action" value="login">
    <h1 align="center">用户注册</h1>
    <table align="center">
      <tr>
        <td> 用户名称：</td>
        <td><input type="text" name="username" value="请输入用户名"/> </td>
      </tr>
      <tr>
        <td> 用户密码：</td>
        <td><input type="password" name="password" value="abc" /> </td>
      </tr>
      <tr>
        <td> 确认密码：</td>
        <td><input type="password"  value="abc"/> </td>
      </tr>
      <tr>
        <td> 性别：</td>
        <td><input type="radio"  name="sex" checked="checked" value="boy"/>男
            <input type="radio" name="sex" value="girl"/> 女</td>
      </tr>
      <tr>
        <td> 兴趣爱好：</td>
        <td><input type="checkbox" name="hobby"/> Java <input type="checkbox" /> C++</td>
      </tr>
      <tr>
        <td> 国籍：</td>
        <td><select name="country">
          <option value="none">--请选择国籍--</option>
          <option value="cn" selected="selected">--中国--</option>
          <option value="usa">--美国--</option>
          <option value="jp">--日本--</option>
        </select></td>
      </tr>
      <tr>
        <td> 自我评价：</td>
        <td><textarea rows="10"  name="desc" cols="20" ></textarea>
      </tr>
      <td align="right">
          <input type="reset"   />
      </td>
      <td align="right">
        <input type="submit"  />
      </td>

    </table>

  </form>

其他标签

  <!--需求1：div,span,p标签的演示
      div标签 默认独占一行
      span标签 长度是数据的长度
      p标签 段落标签，默认在段落的上方或下方各空出一行
      -->
        <div>div标签</div>
    <div>div标签</div>
    <span>span标签1</span>
    <p>段落标签</p>

CSS

css结合html方法

    1.style="border...."   复杂，可读性差，没有复用性

<div style="color: blue">div标签</div>

2.在head中加入 xxx{
Key:value value;
} 只能在一个页面中复用，维护性差

 <!--style标签专门写css代码-->
    <style type="text/css">
        div {               /*所有div标签都可以*/
          border: 1px solid red;  /*边框 实线*/
          color: blue;   /*字体颜色*/
          font-size: 30px;   /*字体大小*/
        }
        span {              /*所有span标签都可以*/
          border: 5px dashed blue;  /*虚线*/
          color: yellow;   /*字体颜色*/
          font-size: 30px;   /*字体大小*/
        }
    </style>

3.把css样式写成一个单独的css文件。通过link标签引入即可

 <!--专门用来引入css代码文件-->
    <link rel="stylesheet" type="text/css" href="../CSS/1.css">

id选择器

 <style type="text/css">

        #id001{
            color: burlywood;
            font-size: 30px;
            border: 1px solid yellow;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }

 <!--id选择器：
       看到是#打头的，就在标签内加入id的样式，然后对应样式的选择器名即可使用对应的属性
    -->
    <div id="id001">div标签</div>
    <div id="id002">div标签</div>

class选择器

.class01{
            color: burlywood;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }

 <!--class类型选择器:
       .class是选择器名，在标签中加入class样式，对应选择器的名字即可使用对应的属性
        -->
    <span class="class01">span标签1</span>
    <p class="class02">段落标签</p>