html、css学习记录

破烂儿

已于 2023-04-08 16:33:04 修改

阅读量146

点赞数

分类专栏： javaweb 文章标签： css css3 前端 html

于 2023-01-28 15:25:21 首次发布

本文链接：https://blog.csdn.net/weixin_45864704/article/details/128778522

版权

javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.javaSE C/S Client Server

B/S Broswer Server

br 换行 hr 水平线

2.html特殊字符

3.标题标签

h1—>h6越来越小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
   
   <!-- 标题标签 -->
   <h1>标题1</h1>
   <h2>标题2</h2>
   <h3>标题3</h3>
   <h4>标题4</h4>
   <h5>标题5</h5>
   <h6>标题6</h6>

   
</body>
</html>

*4.超链接标签（重点，掌握）

5.列表标签

6.img标签

*7.table标签（重点，必须掌握）

需求 1：做一个带表头的，三行，三列的表格，并显示边框
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

<body>
<!--
需求 1： 做一个 带表头的 ， 三行， 三列的表格， 并显示边框
需求 2： 修改表格的宽度， 高度， 表格的对齐方式， 单元格间距。
      table 标签是表格标签
         border 设置表格标签
         width 设置表格宽度
         height 设置表格高度
         align 设置表格相对于页面的对齐方式
         cellspacing    设置单元格之间的空白，值为0，其实是2个像素，不是重叠，是两条线之间挨在一起

         tr 是行标签
         th 是表头标签（自动加粗，居中）
         td 是单元格标签
            align  设置单元格文本对齐方式

      b  是加粗标签
-->
<table width="300" height="300" border="1" cellspacing="0">
   <tr>
      <th>1.1</th>
      <th>1.2</th>
      <th>1.3</th>
   </tr>
   <tr>
      <td align="center">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>
</body>

*8.跨行跨列表格（重点、掌握）

<body>
<!-- 需求 1：
新建一个五行， 五列的表格，
第一行， 第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。

colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table border="1" cellspacing="0" width="500" height="500">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>

</body>

9.iframe标签

*10.表单标签（重点掌握）

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

显示结果：

11.表单格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的显示</title>
</head>
<body>
<!--需求 1:创建一个个人信息注册的表单界面。 包含用户名， 密码， 确认密码。 性别（单选） ， 兴趣爱好（多选） ， 国籍（下拉列表） 。
隐藏域， 自我评价（多行文本域） 。 重置， 提交。-->

<!--
form标签就是表单
  input type=text     是文件输入框  value是默认显示内容
  input type=password 是密码输入框  value是默认显示内容
  input type=radio    是单选框     name属性可以对其进行分组，checked="checked"表示默认选中
  input type=checkbox是复选框    checked="checked"表示默认选中
  input type=reset    是重置按钮    value属性修改按钮上的文本
  input type=button   是按钮，  value属性修改按钮上的文本
  input type=file     是文件上传域
  input type=hidden   是隐藏域     当我们要发送某些信息，而这些信息，不需要用户参加，就可以使用隐藏域（提交的时候同时发送给服务器）

  select 标签是下拉列表框
  option 标签是下拉列表框中的选项  selected=“selected”设置默认选中

  textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
    rows 属性设置可以显示几行的高度
    cols 属性设置每行显示几个字符的宽度
-->
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值" maxlength="10"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="123"/></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">Java<input type="checkbox">C++<input type="checkbox">C</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>---请选择国籍---</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="5" cols="10">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="right"><input type="submit"/></td>
        </tr>
    </table>

</form>
</body>
</html>

*12.表单提交的细节

①GET请求

http://localhost:8080/ 服务器地址

? 分隔符

action=login&sex=on 请求参数（表单的信息）

<body>
<form action="http://localhost:8080" method="get">
…………………………………………
</form>
</body>

结果：

②POST请求

<body>
<!--
    form标签是表单标签
        action属性设置提交的服务器地址
        method属性设置提交的方式GET（默认）或POST
    表单提交的时候，数据没有发送给服务器的三种情况：
        1、表单项没有name属性值
        2、单选、复选（下拉列表中的option标签）都要添加value属性，以便发送给服务器
        3、表单项不在提交的form标签中

    GET请求的特点是：
        1、浏览器地址栏中的地址是：action属性（就是提交的服务器地址）[+?+请求参数]
            请求参数的格式是：name=value&name=value
        2、不安全
        3、它有数据长度的限制，

    POST请求的特点是：
        1、浏览器地址栏中只有action属性值
        2、相对于get请求要安全
        3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login"/>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值" maxlength="10" name="username"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123" name="password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" checked="checked" name="sex" value="girl"/>女
                <input type="radio" name="sex" value="boy"/>男
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" name="hobby" value="java">Java
                <input type="checkbox" name="hobby" value="C++">C++
                <input type="checkbox" name="hobby" value="C">C</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none">---请选择国籍---</option>
                    <option selected="selected" value="cn">中国</option>
                    <option value="us">美国</option>
                    <option value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="5" cols="10" name="desc">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="right"><input type="submit"/></td>
        </tr>
    </table>

</form>
</body>

结果：

13.其他标签

14.css与html结合使用的3种方式

①第一种

②第二种

③第三种

15.标签名选择器

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

16.id选择器

id选择器的格式是：
#id属性值{
   属性:值;
}
id选择器：可以让我们通过id属性选择性的去使用这个样式。
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style>
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px dotted blue;
		}
	</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标签只能应用于一个ID选择器

17.class类型选择器

可以特指某个元素使用class，其他元素不受影响

这里div和span的class值都是class01

可以通过：

只使div标签的class01达到预期的效果

18.组合选择器

结果：

19.css常用的样式

1、字体颜色

color：red；颜色可以写颜色名如：black, blue, red, green等，颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

2、宽度

width:19px; 宽度可以写像素值：19px；也可以写百分比值：20%；

3、高度

height:20px; 高度可以写像素值：19px；也可以写百分比值：20%；

4、背景颜色

background-color:#0F2D4C

5、字体样式

color：#FF0000；字体颜色红色。font-size：20px; 字体大小

6、1像素实线边红色

border：1px solid red;

7、DIV 居中

margin-left: auto;

margin-right: auto;

8、文本居中

text-align: center;

9、超连接去下划线

text-decoration: none;

10.表格细线

table{

border: 1px solid black; /*设置边框*/

border-collapse: collapse; /*将边框合并*/

}

td,th{

border: 1px solid black; /*设置边框*/

}

11.列表去除修饰

ul{

list-style:none;

}

<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
    div{
        border: 1px blue solid;
        color: red;
        font-size: 30px;
        width: 400px;
        height: 400px;
        background-color: aqua;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    table{
        border: 1px solid green;
        border-collapse:collapse;
    }
    td{
        border: 1px solid red;
    }
    ul{
        list-style: none;
    }
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<div>我是div</div>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</table>
</body>